/* ============================================================================
   Argos — Design System "console operativa"
   Punto UNICO di verità per token e componenti. Tutte le pagine pescano da qui.
   Caricato dopo app.css: durante la migrazione convive con gli stili legacy;
   a fine migrazione le regole legacy di app.css verranno rimosse.
   ============================================================================ */

/* ============================================================================
   TEMI: 4 accent (indigo/slate/forest/sunset) × 2 modalità (dark/light).
   Il <body> riceve due classi: theme-{nome} + mode-{dark|light}.
   - Token indipendenti dal tema (raggi, font, semantici) → :root
   - Neutri (bg/panel/border/text) → per MODALITÀ (.mode-dark/.mode-light)
   - Accent (accent/hover/muted) → per TEMA×MODALITÀ (.theme-x.mode-y)
   Doppio set di nomi mantenuto per retrocompatibilità:
     --bg-base/--bg, --panel/--panel-2, --border(+subtle/input),
     --text(+primary/body/muted/faint), --muted, --accent(+hover/muted-bg/
     muted-text, alias --accent-bg/--accent-text).
   ============================================================================ */
:root {
  /* Raggi */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius: 8px;

  /* Tipografia — in rem (= px a 100%): la "Dimensione testo" scala il font-size
     di <html>, così cresce il testo SENZA rompere i layout in vh. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.6875rem; --fs-sm: 0.75rem; --fs-base: 0.8125rem; --fs-lg: 0.9375rem; --fs-xl: 1.125rem;

  /* Colori semantici — STABILI su ogni tema/modalità (significato costante) */
  --danger: #EF4444; --ok: #22C55E; --warn: #F59E0B; --info: #3B82F6;

  /* Default = theme-indigo + mode-dark: garantisce un fallback completo per
     pagine senza classi sul <body> e per il primo paint. */
  --bg-base: #0E0F11; --bg: #0E0F11; --bg-surface: #0B0C0E; --bg-input: #1A1B1F;
  --panel: #15171B; --panel-2: #1E2127;
  --border: #2A2D33; --border-subtle: #232529; --border-input: #2D2F36;
  --text: #E4E4E7; --text-primary: #FAFAFA; --text-body: #E4E4E7;
  --text-muted: #A1A1AA; --muted: #A1A1AA; --text-faint: #71717A;
  --accent: #7F77DD; --accent-hover: #6F66D0;
  --accent-muted-bg: #26215C; --accent-muted-text: #CECBF6;
  --accent-bg: #26215C; --accent-text: #CECBF6;
  /* Pillole semantiche (default dark) */
  --pill-neutral-bg:#202227; --pill-neutral-text:#A1A1AA;
  --pill-info-bg:#16263D;    --pill-info-text:#7DB3F5;
  --pill-warning-bg:#2A2410; --pill-warning-text:#E0B341;
  --pill-danger-bg:#2E1416;  --pill-danger-text:#F08C8C;
  --pill-success-bg:#11291C; --pill-success-text:#6FD08C;
  --pill-violet-bg:#1E1A33;  --pill-violet-text:#A78BFA;
  --mine-bg:#3A2A16; --mine-line:#8A5A22;
}

/* ---- Neutri per MODALITÀ (comuni a tutti i temi accent) ---- */
.mode-dark {
  --bg-base: #0E0F11; --bg: #0E0F11; --bg-surface: #0B0C0E; --bg-input: #1A1B1F;
  --panel: #15171B; --panel-2: #1E2127;
  --border: #2A2D33; --border-subtle: #232529; --border-input: #2D2F36;
  --text: #E4E4E7; --text-primary: #FAFAFA; --text-body: #E4E4E7;
  --text-muted: #A1A1AA; --muted: #A1A1AA; --text-faint: #71717A;
  --pill-neutral-bg:#202227; --pill-neutral-text:#A1A1AA;
  --pill-info-bg:#16263D;    --pill-info-text:#7DB3F5;
  --pill-warning-bg:#2A2410; --pill-warning-text:#E0B341;
  --pill-danger-bg:#2E1416;  --pill-danger-text:#F08C8C;
  --pill-success-bg:#11291C; --pill-success-text:#6FD08C;
  --pill-violet-bg:#1E1A33;  --pill-violet-text:#A78BFA;
  --mine-bg:#3A2A16; --mine-line:#8A5A22;
  color-scheme: dark;
}
.mode-light {
  --bg-base: #F6F7F9; --bg: #F6F7F9; --bg-surface: #FFFFFF; --bg-input: #FFFFFF;
  --panel: #FFFFFF; --panel-2: #F1F3F5;
  --border: #E3E6EB; --border-subtle: #ECEEF2; --border-input: #D4D9E0;
  --text: #1A1D21; --text-primary: #0B0C0E; --text-body: #1A1D21;
  --text-muted: #5B616B; --muted: #5B616B; --text-faint: #8A909A;
  --pill-neutral-bg:#EDEFF2; --pill-neutral-text:#5B616B;
  --pill-info-bg:#E3F0FB;    --pill-info-text:#1D6FB8;
  --pill-warning-bg:#FBF0D5; --pill-warning-text:#946608;
  --pill-danger-bg:#FBE3E3;  --pill-danger-text:#C23B3B;
  --pill-success-bg:#DCF3E4; --pill-success-text:#1E8A4E;
  --pill-violet-bg:#ECE7FB;  --pill-violet-text:#6D4BD0;
  --mine-bg:#FFF2E4; --mine-line:#F7BD8A;
  color-scheme: light;
}

/* ---- Accent per TEMA × MODALITÀ ---- */
/* Indigo (predefinito) */
.theme-indigo.mode-dark  { --accent:#7F77DD; --accent-hover:#6F66D0; --accent-muted-bg:#26215C; --accent-muted-text:#CECBF6; --accent-bg:#26215C; --accent-text:#CECBF6; }
.theme-indigo.mode-light { --accent:#7F77DD; --accent-hover:#6F66D0; --accent-muted-bg:#E7E5FA; --accent-muted-text:#3A348A; --accent-bg:#E7E5FA; --accent-text:#3A348A; }
/* Slate (blu acciaio) */
.theme-slate.mode-dark   { --accent:#378ADD; --accent-hover:#2D78C8; --accent-muted-bg:#0C447C; --accent-muted-text:#BBD7F5; --accent-bg:#0C447C; --accent-text:#BBD7F5; }
.theme-slate.mode-light  { --accent:#378ADD; --accent-hover:#2D78C8; --accent-muted-bg:#DCEAFB; --accent-muted-text:#0C447C; --accent-bg:#DCEAFB; --accent-text:#0C447C; }
/* Forest (verde discreto) */
.theme-forest.mode-dark  { --accent:#1D9E75; --accent-hover:#178A65; --accent-muted-bg:#085041; --accent-muted-text:#A7E8D0; --accent-bg:#085041; --accent-text:#A7E8D0; }
.theme-forest.mode-light { --accent:#1D9E75; --accent-hover:#178A65; --accent-muted-bg:#D6F2E7; --accent-muted-text:#085041; --accent-bg:#D6F2E7; --accent-text:#085041; }
/* Sunset (ambra caldo — brand Codiva) */
.theme-sunset.mode-dark  { --accent:#FF6600; --accent-hover:#E65C00; --accent-muted-bg:#5C2400; --accent-muted-text:#FFD4B8; --accent-bg:#5C2400; --accent-text:#FFD4B8; }
.theme-sunset.mode-light { --accent:#FF6600; --accent-hover:#E65C00; --accent-muted-bg:#FFE5D1; --accent-muted-text:#5C2400; --accent-bg:#FFE5D1; --accent-text:#5C2400; }

/* ---- Selettore tema (pagina design) ---- */
.theme-switcher { margin-bottom: 18px; }
.theme-cards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.theme-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--panel); cursor: pointer; min-width: 96px;
}
.theme-card:hover { border-color: var(--accent); }
.theme-swatches { display: flex; gap: 3px; }
.theme-swatches .sw { width: 18px; height: 18px; border-radius: 4px; }
.theme-swatches .sw-bg { background: var(--bg-base); border: 1px solid var(--border); }
.theme-card-name { font-size: var(--fs-sm); color: var(--text-body); }
.mode-toggle { display: inline-flex; gap: 6px; }

/* ---- Pillole (stato / priorità / tag): sfondo scuro saturo + testo chiaro ---- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 500; line-height: 1; white-space: nowrap;
}
.pill--neutral { background: var(--pill-neutral-bg); color: var(--pill-neutral-text); }
.pill--info    { background: var(--pill-info-bg);    color: var(--pill-info-text); }
.pill--warning { background: var(--pill-warning-bg); color: var(--pill-warning-text); }
.pill--danger  { background: var(--pill-danger-bg);  color: var(--pill-danger-text); }
.pill--success { background: var(--pill-success-bg); color: var(--pill-success-text); }
.pill--violet  { background: var(--pill-violet-bg);  color: var(--pill-violet-text); }

/* ---- Header pagina compatto ---- */
.page-header { margin-bottom: 18px; }
.page-header-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; min-height: 20px;
}
.breadcrumb { font-size: var(--fs-xs); color: var(--text-faint); display: flex; gap: 6px; align-items: center; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-body); text-decoration: none; }
.breadcrumb .sep { color: var(--border-input); }
.page-header-actions { display: flex; gap: 8px; align-items: center; }
.page-title {
  font-size: var(--fs-xl); font-weight: 500; color: var(--text-primary);
  margin: 8px 0 0; line-height: 1.3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.metabar {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px;
  font-size: var(--fs-base); color: var(--text-muted);
}
.metabar .meta { display: inline-flex; align-items: center; gap: 5px; }
.metabar .meta svg { width: 13px; height: 13px; opacity: 0.7; flex-shrink: 0; }
.metabar .meta strong { color: var(--text-body); font-weight: 500; }

/* ---- Etichetta di sezione minuscola uppercase ---- */
.section-label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-faint); margin: 20px 0 10px;
}

/* ---- Layout a due colonne (dettaglio entità) ---- */
.detail-layout { display: grid; grid-template-columns: 1fr 240px; gap: 0; }
.detail-main { padding-right: 24px; min-width: 0; }
.detail-aside { padding-left: 20px; border-left: 0.5px solid var(--border-subtle); }
.detail-prose { font-size: var(--fs-base); color: var(--text-body); line-height: 1.6; }
@media (max-width: 860px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-main { padding-right: 0; }
  .detail-aside {
    border-left: none; padding-left: 0; margin-top: 18px; padding-top: 16px;
    border-top: 0.5px solid var(--border-subtle);
  }
}

/* ---- Pannello laterale (sidebar metadati/azioni) ---- */
.side-section { margin-bottom: 16px; }
.side-label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-faint); margin-bottom: 6px;
}
.side-section .side-value { font-size: var(--fs-base); color: var(--text-body); }
.side-section select, .side-section input { width: 100%; }
.side-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

/* ---- Tabella compatta ---- */
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.dtable thead th {
  text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-faint); font-weight: 500; padding: 6px 10px;
  border-bottom: 0.5px solid var(--border-subtle);
}
.dtable tbody td {
  padding: 0 10px; height: 38px; border-bottom: 0.5px solid var(--border-subtle);
  color: var(--text-body); vertical-align: middle;
}
.dtable tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.dtable tbody tr:last-child td { border-bottom: none; }
.dtable a { color: var(--text-body); }
.dtable a:hover { color: var(--text-primary); }
.dtable .col-actions { text-align: right; }
.dtable .muted { color: var(--text-muted); }

/* ---- Timeline conversazionale ---- */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 10px; padding: 9px 0; }
.tl-avatar {
  width: 24px; height: 24px; border-radius: 999px; background: var(--bg-input);
  color: var(--text-muted); display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 500; flex-shrink: 0;
}
.tl-icon {
  width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; color: var(--text-faint); flex-shrink: 0;
}
.tl-icon svg { width: 13px; height: 13px; }
.tl-body { flex: 1; min-width: 0; }
.tl-head { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); }
.tl-head .who { color: var(--text-body); font-weight: 500; }
.tl-head .when { color: var(--text-faint); }
.tl-note { font-size: var(--fs-base); color: var(--text-body); line-height: 1.6; margin-top: 2px; }
.tl-note.internal { border-left: 2px solid #E0B341; padding-left: 8px; }
.tl-event { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.5; padding-top: 3px; }

/* Input "aggiungi nota" inline in fondo allo stream */
.tl-compose { display: flex; gap: 10px; padding-top: 12px; margin-top: 4px; border-top: 0.5px solid var(--border-subtle); }
.tl-compose-body { flex: 1; }
.tl-compose textarea {
  width: 100%; background: var(--bg-input); border: 0.5px solid var(--border-input);
  border-radius: var(--radius-sm); color: var(--text-body); font-size: var(--fs-base);
  padding: 8px 10px; min-height: 64px; resize: vertical; font-family: inherit;
}
.tl-compose textarea:focus { outline: none; border-color: var(--accent); }
.tl-compose-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.tl-compose-controls label { color: var(--text-muted); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 5px; }

/* ---- Pannello generico (superficie) ---- */
.panel { background: var(--bg-surface); border: 0.5px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; }

/* ---- Metriche compatte (dashboard) ---- */
.metrics-row { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 20px; }
.metric-c .label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.metric-c .value { font-size: 22px; font-weight: 500; color: var(--text-primary); line-height: 1.25; }

/* ---- Bottoni outline / block (azioni sidebar) ---- */
/* Il .btn legacy (app.css) è a 0.95rem: accanto a un .btn-outline a fs-base
   stona ovunque — stesse metriche per entrambi, cambia solo il riempimento. */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 6px 13px; border: 0.5px solid transparent;
  border-radius: var(--radius-sm); font-size: var(--fs-base); line-height: 1.3;
}
.btn-outline {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 6px 11px; background: transparent; border: 0.5px solid var(--border-input);
  color: var(--text-body); border-radius: var(--radius-sm); font-size: var(--fs-base);
  cursor: pointer; line-height: 1.3;
}
.btn-outline:hover { background: var(--bg-input); color: var(--text-primary); text-decoration: none; }
.btn-outline svg { width: 13px; height: 13px; }
.btn-outline.danger:hover { border-color: #5a3333; color: #F08C8C; }
.btn-block { width: 100%; }

/* ---- Allineamento modale al design system (niente shadow, bordo 0.5px) ---- */
.modal-dialog { background: var(--bg-surface); border: 0.5px solid var(--border-subtle); box-shadow: none; }
.modal-head { border-bottom: 0.5px solid var(--border-subtle); }
.modal-head h2 { font-size: var(--fs-lg); font-weight: 500; }

/* ---- Tabella con barra integrata: ricerca + filtri nella STESSA barra ----
   Un solo bordo attorno a (barra strumenti + tabella): leggono come un'unità. */
.table-frame { border: 0.5px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.table-tools {
  display: flex; align-items: stretch; height: 42px;
  border-bottom: 0.5px solid var(--border-subtle); background: var(--bg-surface);
}
.tt-search { display: flex; align-items: center; gap: 7px; flex: 1; padding: 0 12px; color: var(--text-faint); }
.tt-search svg { width: 14px; height: 14px; flex-shrink: 0; }
.tt-search input {
  flex: 1; background: transparent; border: none; color: var(--text-body);
  font-size: var(--fs-base); padding: 0; height: 100%;
}
.tt-search input:focus { outline: none; }
.tt-search input::placeholder { color: var(--text-faint); }
.tt-filters { display: flex; align-items: stretch; }
.tt-filters select {
  background: transparent; border: none; border-left: 0.5px solid var(--border-subtle);
  color: var(--text-muted); font-size: var(--fs-sm); padding: 0 30px 0 12px; cursor: pointer;
}
.tt-filters select:hover { color: var(--text-body); }
.tt-filters select:focus { outline: none; color: var(--text-body); }

/* Select standalone in stile console */
.ds-select {
  background: var(--bg-input); border: 0.5px solid var(--border-input); border-radius: var(--radius-sm);
  color: var(--text-body); font-size: var(--fs-sm); padding: 5px 10px;
}
.ds-select:focus { outline: none; border-color: var(--accent); }

/* Tabella dentro la frame: niente bordo proprio, intestazione a filo della barra */
.table-frame .dtable { border-collapse: collapse; }
.table-frame .dtable thead th:first-child,
.table-frame .dtable tbody td:first-child { padding-left: 12px; }
.table-frame .dtable thead th:last-child,
.table-frame .dtable tbody td:last-child { padding-right: 12px; }

/* Bottone "dettagli" a fine riga task */
.row-detail { color: var(--text-faint); display: inline-flex; padding: 6px; }
.row-detail:hover { color: var(--text-body); text-decoration: none; }

/* ---- Mobile: lista task semplificata (solo titolo + dettagli) ---- */
@media (max-width: 720px) {
  .col-hide-mobile { display: none; }
}

/* ---- PWA: modalità installata (focus task a tutto schermo) ---- */
@media all and (display-mode: standalone) {
  /* App focalizzata: niente barra menu, niente sidebar. */
  .mobile-topbar { display: none; }
  .sidebar { display: none; }
  /* Il blocco dello scorrimento vale solo per la pagina dei task: una pagina
     aperta da un link (un progetto, una nota) scorre come sempre. */
  html:has(#tasks-board), body:has(#tasks-board) { height: 100%; overflow: hidden; }
  .layout { display: block; }
  /* In colonna: la barra in alto, quando c'è, prende il suo spazio e la pagina
     il resto. Con un'altezza fissa al 100% la pagina sforava sotto lo schermo di
     quanto è alta la barra, e l'ultimo task restava tagliato. */
  body:has(#tasks-board) { display: flex; flex-direction: column; }
  .layout:has(#tasks-board) { flex: 1 1 0; min-height: 0; }
  .col-hide-mobile { display: none; }
  .page-header { margin-bottom: 10px; }
  .page-header .breadcrumb { display: none; }

  /* La pagina riempie lo schermo; scrolla SOLO la lista dei task. */
  .content {
    max-width: none;
    padding: calc(env(safe-area-inset-top, 0) + 12px) 12px calc(env(safe-area-inset-bottom, 0) + 16px);
  }
  .content:has(#tasks-board) {
    height: 100%; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0;
  }
  #tasks-board { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  /* Vista semplice: la testata resta ferma, scorre la lista. */
  .tsk-simple { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .tasks-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
  }
  /* Nascondi filtri e sezione ticket. */
  .tasks-filters, .tasks-tickets { display: none; }
  .dtable tbody td { height: 46px; }

  /* "Aggiungi" e "Dettagli": solo icona (nascondi la label, dimensione invariata). */
  .task-quickadd { padding: 8px 10px; margin-bottom: 10px; }
  .task-quickadd .btn-label { display: none; }
  .task-quickadd .btn, .task-quickadd .btn-outline { padding: 9px 12px; }
  /* Placeholder del campo nuovo task: sparisce appena selezionato. */
  .task-quickadd input:focus::placeholder { color: transparent; }

  /* "Risolti oggi": sul mobile è un menu a compressione. */
  .resolved-desktop { display: none; }
  .resolved-mobile { display: block; }
}

/* Menu a compressione "Risolti oggi" (visibile solo in modalità app). */
.resolved-mobile { display: none; }
.resolved-summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-faint); margin: 14px 0 0; padding: 4px 0;
}
.resolved-summary::-webkit-details-marker { display: none; }
.resolved-mobile[open] .resolved-summary { color: var(--text-muted); }

/* ============================================================
   Impersonation ("vedi come" — solo global_admin)
   ============================================================ */

/* Barra globale di avviso quando l'impersonation è attiva. */
.impersonation-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  background: linear-gradient(90deg, #7c3aed, #9333ea);
  color: #fff; padding: 7px 16px; font-size: var(--fs-sm, 0.85rem);
}
.impersonation-bar strong { font-weight: 700; }
.impersonation-bar button {
  background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px; padding: 4px 12px; font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.impersonation-bar button:hover { background: rgba(255, 255, 255, 0.3); }

/* Blocco utente in fondo alla sidebar: cliccabile per admin/impersonation. */
.sidebar-user.user-switch { position: relative; }
.user-trigger {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31);
  border-radius: 8px; padding: 0.55rem 0.7rem; color: inherit; margin-bottom: 0.6rem;
}
.user-trigger:hover { border-color: var(--accent, #3b82f6); }
.user-trigger .email { color: var(--text, #e8eaed); word-break: break-all; font-size: 0.85rem; }
.user-trigger .role {
  display: inline-block; margin-top: 0.3rem; padding: 0.1rem 0.5rem;
  background: var(--panel, #131517); border-radius: 999px; font-size: 0.72rem; color: var(--muted, #9aa0a6);
}
.user-trigger .switch-hint {
  display: block; margin-top: 0.4rem; font-size: 0.72rem; color: var(--accent, #3b82f6);
}

/* Stato "sto impersonando" nella sidebar. */
.sidebar-user.impersonating .user-trigger { border-color: #9333ea; }
.imp-flag {
  display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #c084fc; margin-bottom: 0.2rem;
}
.imp-back { display: block; margin-top: 0.45rem; font-size: 0.76rem; color: #c084fc; font-weight: 600; }

/* Tendina di scelta utente (si apre verso l'alto, sopra il trigger). */
.imp-panel { display: none; }
.user-switch.open .imp-panel {
  display: block; position: absolute; bottom: 100%; left: 0; right: 0; z-index: 50;
  margin-bottom: 6px;
  background: var(--panel, #131517); border: 1px solid var(--border, #2a2d31);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.imp-head { padding: 0.6rem; border-bottom: 1px solid var(--border, #2a2d31); }
.imp-title {
  display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted, #9aa0a6); margin-bottom: 0.4rem;
}
.imp-head input {
  width: 100%; box-sizing: border-box; padding: 0.4rem 0.55rem;
  background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31);
  border-radius: 6px; color: var(--text, #e8eaed); font-size: 0.85rem;
}
.imp-list { list-style: none; margin: 0; padding: 0.3rem; max-height: 320px; overflow-y: auto; }
.imp-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 6px; padding: 0.45rem 0.5rem; color: inherit;
}
.imp-item:hover { background: var(--panel-2, #1a1c1f); }
.imp-item-text { display: flex; flex-direction: column; min-width: 0; }
.imp-item-name { color: var(--text, #e8eaed); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-item-email { color: var(--muted, #9aa0a6); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-item-role {
  flex-shrink: 0; font-size: 0.66rem; padding: 0.1rem 0.45rem; border-radius: 999px;
  background: var(--panel-2, #1a1c1f); color: var(--muted, #9aa0a6); text-transform: capitalize;
}
.imp-item-role.role-global_admin { background: rgba(147, 51, 234, 0.18); color: #c084fc; }
.imp-item-role.role-support_agent { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
.imp-item-role.role-client_user { background: rgba(34, 197, 94, 0.16); color: #86efac; }
.imp-empty { padding: 0.7rem; color: var(--muted, #9aa0a6); font-size: 0.82rem; text-align: center; }

/* ============================================================
   Notifiche (badge in sidebar + centro notifiche)
   ============================================================ */
.nav-notif { display: flex; align-items: center; justify-content: space-between; }
.nav-badge {
  display: inline-block; min-width: 18px; padding: 0 6px; height: 18px; line-height: 18px;
  text-align: center; font-size: 0.7rem; font-weight: 700; border-radius: 999px;
  background: #ef4444; color: #fff;
}

.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border, #2a2d31); border-radius: 10px;
  background: var(--panel, #131517); color: inherit; text-decoration: none;
}
.notif-item:hover { border-color: var(--accent, #3b82f6); text-decoration: none; }
.notif-item.unread { background: var(--panel-2, #1a1c1f); border-color: rgba(59, 130, 246, 0.4); }
.notif-dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 6px; flex-shrink: 0; background: transparent; }
.notif-item.unread .notif-dot { background: var(--accent, #3b82f6); }
.notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.notif-subject { color: var(--text, #e8eaed); font-weight: 600; font-size: 0.9rem; }
.notif-body { color: var(--muted, #9aa0a6); font-size: 0.82rem; }
.notif-when { color: var(--text-faint, #6b7178); font-size: 0.72rem; white-space: nowrap; flex-shrink: 0; }
.notif-empty { padding: 2rem; text-align: center; color: var(--muted, #9aa0a6); }

/* ============================================================
   Configurazione (form integrazioni) + flash
   ============================================================ */
.flash { padding: 10px 14px; border-radius: 8px; margin: 0 0 14px; font-size: 0.88rem; }
.flash--ok { background: rgba(34, 197, 94, 0.14); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.35); }
.flash--err { background: rgba(239, 68, 68, 0.14); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.35); }

.config-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin-top: 1rem; }
.config-form > label { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: var(--text-muted, #c4c8cd); }
.config-form input[type="text"], .config-form input[type="password"] {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31);
  border-radius: 7px; color: var(--text, #e8eaed); font-size: 0.9rem;
}
.config-form input:focus { outline: none; border-color: var(--accent, #3b82f6); }
.config-form .config-check { flex-direction: row; align-items: center; gap: 8px; }
.config-form .config-check input { width: auto; }
.config-actions { margin-top: 4px; }

/* ============================================================
   Treenotes — due pannelli a tutto schermo + albero ridimensionabile
   ============================================================ */
.content--full { max-width: none; padding: 0; height: 100vh; overflow: hidden; }
.tn-app { display: flex; height: 100%; min-height: 0; background: var(--bg-base, #0E0F11); }

/* Pannello sinistro (albero) */
.tn-side {
  width: 300px; min-width: 180px; max-width: 640px; flex-shrink: 0;
  display: flex; flex-direction: column; min-height: 0; background: var(--panel, #131517);
}
.tn-side-head {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 10px; border-bottom: 1px solid var(--border, #2a2d31);
}
.tn-side-title { font-weight: 700; font-size: .95rem; color: var(--text, #e8eaed); }
.tn-add > summary.tn-add-btn {
  list-style: none; cursor: pointer; width: 28px; height: 28px; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--border, #2a2d31);
  border-radius: 6px; color: var(--text-muted, #c4c8cd);
}
.tn-add > summary.tn-add-btn::-webkit-details-marker { display: none; }
.tn-add > summary.tn-add-btn:hover { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); }
.tn-add-form {
  position: absolute; top: calc(100% - 2px); right: 8px; z-index: 30; width: 250px;
  background: var(--panel, #131517); border: 1px solid var(--border, #2a2d31);
  border-radius: 10px; padding: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.tn-add-form label { display: block; font-size: .72rem; color: var(--muted, #9aa0a6); margin-bottom: 4px; }
.tn-add-form select, .tn-add-form input {
  width: 100%; box-sizing: border-box; padding: 7px 9px; margin-bottom: 8px;
  background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31);
  border-radius: 6px; color: var(--text, #e8eaed); font-size: .85rem;
}
.tn-add-actions { display: flex; gap: 6px; }

.tn-tree-scroll { flex: 1; overflow-y: auto; padding: 8px 6px 24px; min-height: 0; }
.tn-tree { list-style: none; margin: 0; padding-left: 0; }
.tn-tree .tn-tree { padding-left: 14px; }
.tn-tree li { margin: 1px 0; }

.tn-row {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px;
  cursor: pointer; color: var(--text-muted, #c4c8cd); font-size: .88rem; user-select: none;
}
.tn-row:hover { background: var(--panel-2, #1a1c1f); }
summary.tn-row { list-style: none; }
summary.tn-row::-webkit-details-marker { display: none; }
.tn-link { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.tn-link:hover { text-decoration: none; }
.tn-caret { display: inline-flex; flex-shrink: 0; color: var(--text-faint, #6b7178); transition: transform .12s ease; }
.tn-folder[open] > summary .tn-caret { transform: rotate(90deg); }
.tn-caret--leaf { width: 13px; }
.tn-ico { display: inline-flex; flex-shrink: 0; color: var(--text-faint, #6b7178); }
.tn-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tn-note.sel { background: var(--accent, #3b82f6); }
.tn-note.sel .tn-link, .tn-note.sel .tn-ico, .tn-note.sel .tn-caret { color: #fff; }

.tn-del { display: inline-flex; margin-left: auto; }
.tn-del button {
  background: none; border: none; cursor: pointer; padding: 2px; border-radius: 4px;
  color: var(--text-faint, #6b7178); opacity: 0; display: inline-flex;
}
.tn-row:hover .tn-del button { opacity: .7; }
.tn-del button:hover { opacity: 1; color: #fca5a5; }

/* Maniglia di ridimensionamento */
.tn-resizer { width: 6px; flex-shrink: 0; cursor: col-resize; }
.tn-resizer::before {
  content: ""; display: block; width: 1px; height: 100%; margin: 0 auto;
  background: var(--border, #2a2d31); transition: background .12s, width .12s;
}
.tn-resizer:hover::before { width: 3px; background: var(--accent, #3b82f6); }

/* Pannello destro (editor): a tutto schermo, sfondo di sistema (scuro) */
.tn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.tn-doc { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 22px 30px 0; }
.tn-title {
  width: 100%; border: none; background: transparent; color: var(--text, #e8eaed);
  font-size: 1.9rem; font-weight: 700; padding: 2px 0; outline: none;
}
.tn-title::placeholder { color: var(--text-faint, #6b7178); }
.tn-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  color: var(--text-faint, #6b7178); font-size: .8rem; margin: 8px 0 14px;
}
.tn-save { margin-left: auto; }

/* Editor Quill riempie l'altezza e usa il fondo scuro dell'app */
#editor.tn-editor {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  border-radius: 0 0 8px 8px;
}
#editor .ql-editor { flex: 1; min-height: 0; overflow-y: auto; color: var(--text, #e8eaed); }
.ql-editor.ql-blank::before { color: var(--text-faint, #6b7178); font-style: normal; }
/* Barra comandi CHIARA (stacca sul fondo nero); icone scure, selezione in accento */
.ql-toolbar.ql-snow {
  background: #eef0f3; border-color: var(--border, #2a2d31);
  border-radius: 8px 8px 0 0;
}
.ql-container.ql-snow { border-color: var(--border, #2a2d31); background: var(--bg-base, #0E0F11); }
.ql-snow.ql-toolbar .ql-stroke { stroke: #41464d; }
.ql-snow.ql-toolbar .ql-fill, .ql-snow.ql-toolbar .ql-stroke.ql-fill { fill: #41464d; }
.ql-snow.ql-toolbar .ql-picker { color: #41464d; }
.ql-snow .ql-picker-options { background: #fff; border-color: #d1d5db; color: #41464d; }
/* Hover + attivo/selezionato → colore accento */
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-picker-item:hover .ql-stroke { stroke: var(--accent, #3b82f6); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill { fill: var(--accent, #3b82f6); }
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-picker-label:hover, .ql-snow .ql-picker-label.ql-active,
.ql-snow .ql-picker-item:hover, .ql-snow .ql-picker-item.ql-selected { color: var(--accent, #3b82f6); }
.ql-snow a { color: var(--accent, #3b82f6); }
.ql-editor blockquote { border-left-color: var(--border, #2a2d31); color: var(--text-muted, #c4c8cd); }
.ql-editor pre.ql-syntax { background: #0a0b0d; color: #e8eaed; border: 1px solid var(--border, #2a2d31); }
/* Bottoni custom: tabella (▦) e cattura schermo (📷) */
.ql-snow.ql-toolbar button.ql-table::after { content: "\25A6"; font-size: 15px; line-height: 1; color: #41464d; }
.ql-snow.ql-toolbar button.ql-table:hover::after { color: var(--accent, #3b82f6); }
.ql-snow.ql-toolbar button.ql-screenshot::after { content: "\1F4F7"; font-size: 14px; line-height: 1; }
.ql-snow.ql-toolbar button.ql-screenshot:hover { filter: brightness(1.15); }

/* Overlay di selezione area per la cattura schermo */
.tn-cap-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.85); display: flex; flex-direction: column; }
.tn-cap-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--panel, #131517); border-bottom: 1px solid var(--border, #2a2d31);
  color: var(--text-muted, #c4c8cd); font-size: .85rem;
}
.tn-cap-bar span { margin-right: auto; }
.tn-cap-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 16px; }
.tn-cap-imgwrap { position: relative; display: inline-block; line-height: 0; cursor: crosshair; }
.tn-cap-img { max-width: 95vw; max-height: 80vh; display: block; user-select: none; -webkit-user-drag: none; }
.tn-cap-sel { position: absolute; border: 2px dashed var(--accent, #3b82f6); background: rgba(59, 130, 246, 0.18); pointer-events: none; }

/* ============================================================
   Treenotes v2 — albero (proprietà, condivisione, drag & drop)
   ============================================================ */
.tn-add-btn {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #2a2d31); border-radius: 6px; background: none; cursor: pointer;
  color: var(--text-muted, #c4c8cd);
}
.tn-add-btn:hover { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); }

.tn-search { position: relative; padding: 8px 10px; border-bottom: 1px solid var(--border, #2a2d31); }
.tn-search-ico { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); color: var(--text-faint, #6b7178); display: inline-flex; }
.tn-search input {
  width: 100%; box-sizing: border-box; padding: 7px 9px 7px 30px; background: var(--panel-2, #1a1c1f);
  border: 1px solid var(--border, #2a2d31); border-radius: 7px; color: var(--text, #e8eaed); font-size: .85rem;
}
.tn-search input:focus { border-color: var(--accent, #3b82f6); outline: none; }

.tn-children { list-style: none; margin: 0; padding-left: 14px; }
.tn-item.tn-collapsed > .tn-children { display: none; }
.tn-item[data-kind="folder"]:not(.tn-collapsed) > .tn-row .tn-caret { transform: rotate(90deg); }
.tn-row .tn-caret { cursor: pointer; }
.tn-ico--shared { color: var(--accent, #3b82f6); }

.tn-acts { display: inline-flex; gap: 2px; margin-left: auto; }
.tn-act {
  background: none; border: none; cursor: pointer; padding: 2px; border-radius: 4px;
  color: var(--text-faint, #6b7178); opacity: 0; display: inline-flex;
}
.tn-row:hover .tn-act { opacity: .7; }
.tn-act:hover { opacity: 1; color: var(--text, #e8eaed); background: var(--panel-2, #1a1c1f); }
.tn-act--del:hover { color: #fca5a5; }

.tn-rename {
  flex: 1; min-width: 0; background: var(--panel-2, #1a1c1f); border: 1px solid var(--accent, #3b82f6);
  border-radius: 5px; color: var(--text, #e8eaed); font: inherit; font-size: .88rem; padding: 2px 6px; outline: none;
}
.tn-empty-msg { color: var(--text-faint, #6b7178); font-size: .84rem; padding: 12px; }

/* Drag & drop: separatori virtuali */
.tn-item.tn-dragging > .tn-row { opacity: .45; }
.tn-item.tn-dl-before > .tn-row { box-shadow: inset 0 2px 0 0 var(--accent, #3b82f6); }
.tn-item.tn-dl-after > .tn-row { box-shadow: inset 0 -2px 0 0 var(--accent, #3b82f6); }
.tn-item.tn-dl-into > .tn-row {
  outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: 6px;
  background: rgba(59, 130, 246, 0.12);
}

/* Menù contestuale "+" */
.tn-menu {
  position: fixed; z-index: 1200; min-width: 160px; background: var(--panel, #131517);
  border: 1px solid var(--border, #2a2d31); border-radius: 8px; padding: 5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.tn-menu-item {
  display: flex; gap: 8px; align-items: center; width: 100%; background: none; border: none;
  color: var(--text-muted, #c4c8cd); padding: 7px 10px; border-radius: 6px; font: inherit;
  font-size: .85rem; cursor: pointer; text-align: left;
}
.tn-menu-item:hover { background: var(--panel-2, #1a1c1f); color: var(--text, #e8eaed); }

/* Modale condivisione */
.tn-share-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; margin-bottom: 8px; }
.tn-share-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; }
.tn-share-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tn-share-ava {
  width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2, #1a1c1f);
  border: 1px solid var(--border, #2a2d31); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: var(--text-muted, #c4c8cd); flex-shrink: 0;
}
.tn-share-name { color: var(--text, #e8eaed); font-size: .86rem; }
.tn-share-role { font-size: .72rem; }

/* ---- Editor: barra ridisegnata (font, paragrafo, data, incolla) ---- */
/* Font di default dell'editor = font dell'app (sovrascrive il default di Quill) */
.ql-editor, .tn-title { font-family: var(--font); }
.ql-editor .ql-font-sans { font-family: var(--font); }
.ql-editor .ql-font-serif { font-family: Georgia, "Times New Roman", serif; }
.ql-editor .ql-font-mono { font-family: "Courier New", monospace; }
.ql-editor .ql-font-arial { font-family: Arial, Helvetica, sans-serif; }
.ql-editor .ql-font-georgia { font-family: Georgia, serif; }
.ql-editor .ql-font-times { font-family: "Times New Roman", Times, serif; }
.ql-snow .ql-picker.ql-font { width: 92px; }
.ql-snow .ql-picker.ql-font .ql-picker-label::before { content: "Carattere"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans"]::before { content: "Sans"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { content: "Serif"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="mono"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="mono"]::before { content: "Mono"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before { content: "Arial"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before { content: "Georgia"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times"]::before { content: "Times"; }

/* dimensione, interlinea, spaziatura: etichetta = valore (data-value) */
.ql-snow .ql-picker.ql-size { width: 64px; }
.ql-snow .ql-picker.ql-size .ql-picker-label::before { content: "Dim."; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before { content: attr(data-value); }
.ql-snow .ql-picker.ql-lineheight, .ql-snow .ql-picker.ql-spacebefore, .ql-snow .ql-picker.ql-spaceafter { width: 84px; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before { content: "Interlinea"; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value]::before { content: "↕ " attr(data-value); }
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value]::before { content: attr(data-value); }
.ql-snow .ql-picker.ql-spacebefore .ql-picker-label::before { content: "Sp. sopra"; }
.ql-snow .ql-picker.ql-spacebefore .ql-picker-label[data-value]::before { content: "⤒ " attr(data-value); }
.ql-snow .ql-picker.ql-spacebefore .ql-picker-item[data-value]::before { content: attr(data-value); }
.ql-snow .ql-picker.ql-spaceafter .ql-picker-label::before { content: "Sp. sotto"; }
.ql-snow .ql-picker.ql-spaceafter .ql-picker-label[data-value]::before { content: "⤓ " attr(data-value); }
.ql-snow .ql-picker.ql-spaceafter .ql-picker-item[data-value]::before { content: attr(data-value); }

.ql-snow.ql-toolbar button.ql-insertdate::after { content: "\1F4C5"; font-size: 14px; line-height: 1; }
.ql-snow.ql-toolbar button.ql-pasteformatted::after { content: "\1F4CB"; font-size: 14px; line-height: 1; }
.ql-snow.ql-toolbar button.ql-insertdate:hover, .ql-snow.ql-toolbar button.ql-pasteformatted:hover { filter: brightness(1.15); }

.tn-paste-hint {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--accent, #3b82f6); color: #fff; padding: 8px 14px; border-radius: 8px;
  font-size: .82rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 3000;
}
.tn-paste-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Campanella + centro notifiche
   ============================================================ */
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 1.3rem; }
.sidebar-top .brand { margin-bottom: 0; }
.bell { position: relative; }
.bell-btn {
  position: relative; background: none; border: none; cursor: pointer;
  color: var(--text-muted, #c4c8cd); padding: 5px; border-radius: 7px; display: inline-flex;
}
.bell-btn:hover { color: var(--text, #e8eaed); background: var(--panel-2, #1a1c1f); }
.bell-badge { position: absolute; top: -3px; right: -3px; }
.bell-badge .nav-badge { font-size: .62rem; min-width: 15px; height: 15px; line-height: 15px; padding: 0 4px; }
.bell-panel { display: none; }
.bell.open .bell-panel {
  display: block; position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 300px;
  background: var(--panel, #131517); border: 1px solid var(--border, #2a2d31);
  border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.bell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border, #2a2d31);
  font-weight: 700; font-size: .85rem; color: var(--text, #e8eaed);
}
.bell-readall { background: none; border: none; color: var(--accent, #3b82f6); font-size: .74rem; cursor: pointer; }
.bell-list { max-height: 360px; overflow-y: auto; }
.bell-item {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 12px;
  border-bottom: 1px solid var(--border, #2a2d31); color: inherit; text-decoration: none;
}
.bell-item:hover { background: var(--panel-2, #1a1c1f); text-decoration: none; }
.bell-item.unread { background: rgba(59, 130, 246, 0.09); }
.bell-subject { color: var(--text, #e8eaed); font-weight: 600; font-size: .82rem; }
.bell-body { color: var(--muted, #9aa0a6); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bell-when { color: var(--text-faint, #6b7178); font-size: .68rem; }
.bell-empty { padding: 18px; text-align: center; color: var(--muted, #9aa0a6); font-size: .82rem; }
.bell-all { display: block; text-align: center; padding: 9px; font-size: .8rem; color: var(--accent, #3b82f6); text-decoration: none; }
.bell-all:hover { background: var(--panel-2, #1a1c1f); text-decoration: none; }

/* Profilo + risposte predefinite (form) */
.profile-form, .canned-form { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.profile-form label, .canned-form label { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; color: var(--text-muted, #c4c8cd); }
.profile-form textarea, .canned-form textarea, .canned-form input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 9px 11px; background: var(--panel-2, #1a1c1f);
  border: 1px solid var(--border, #2a2d31); border-radius: 7px; color: var(--text, #e8eaed); font: inherit;
}
.tg-status { padding: 8px 12px; border-radius: 8px; font-size: .85rem; display: inline-block; }
.tg-status.ok { background: rgba(34, 197, 94, 0.14); color: #86efac; }
.tg-status.ko { background: var(--panel-2, #1a1c1f); color: var(--muted, #9aa0a6); }
.canned-pick {
  margin-bottom: 6px; max-width: 340px; padding: 6px 9px;
  background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31);
  border-radius: 6px; color: var(--text-muted, #c4c8cd); font-size: .82rem;
}

/* Numero ticket + allegati */
.ticket-num { color: var(--text-faint, #6b7178); font-weight: 700; }
.att-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: .84rem; }
.att-row a { display: inline-flex; align-items: center; gap: 5px; word-break: break-all; }
.att-del { background: none; border: none; color: var(--text-faint, #6b7178); cursor: pointer; padding: 2px; display: inline-flex; }
.att-del:hover { color: #fca5a5; }
.att-upload { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.att-upload input[type="file"], .note-files { font-size: .78rem; color: var(--text-muted, #c4c8cd); }
.note-files { display: block; margin-top: 6px; }
.link-add { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.link-add select, .link-add input { width: 100%; box-sizing: border-box; }

/* Etichette (tag) */
.tag-list { margin-bottom: 8px; }
.tag-pill {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 4px 4px 0;
  padding: 2px 9px; border-radius: 999px; font-size: .76rem;
  background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); color: var(--text-muted, #c4c8cd);
}
.tag-pill form, .tag-pill button { display: inline; }
.tag-pill button { background: none; border: none; color: var(--text-faint, #6b7178); cursor: pointer; font-size: .95rem; line-height: 1; padding: 0; }
.tag-pill button:hover { color: #fca5a5; }
.tag-pill-sm {
  display: inline-block; margin: 0 3px 2px 0; padding: 1px 7px; border-radius: 999px; font-size: .7rem;
  background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); color: var(--text-muted, #c4c8cd);
}

/* Barra azioni massive */
.bulk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--border, #2a2d31); background: var(--panel-2, #1a1c1f);
}
.bulk-count { font-size: .78rem; color: var(--text-faint, #6b7178); margin-right: auto; }
.bulk-bar select, .bulk-bar input {
  padding: 5px 8px; background: var(--panel, #131517); border: 1px solid var(--border, #2a2d31);
  border-radius: 6px; color: var(--text, #e8eaed); font-size: .82rem;
}

/* Campi personalizzati (form nel dettaglio) */
.cf-form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; margin-bottom: 18px; }
.cf-row { display: flex; flex-direction: column; gap: 3px; }
.cf-label { font-size: .8rem; color: var(--text-muted, #c4c8cd); }
.cf-form input[type="text"], .cf-form input[type="number"], .cf-form input[type="date"],
.cf-form select, .cf-form textarea {
  padding: 6px 9px; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31);
  border-radius: 6px; color: var(--text, #e8eaed); font: inherit; max-width: 360px;
}
/* Tabelle nel contenuto su tema scuro */
.ql-editor table { border-collapse: collapse; }
.ql-editor td, .ql-editor th { border: 1px solid var(--border, #2a2d31); padding: 5px 9px; min-width: 44px; }

.tn-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
.tn-empty svg { width: 30px; height: 30px; opacity: .35; margin-bottom: 8px; }

/* ============================================================================
   NAVIGAZIONE v2 — sidebar 3 sezioni, compressa/espansa, flyout, identità+popover
   ============================================================================ */
.layout { display: flex; min-height: 100vh; background: var(--bg-base); }
.sidebar {
  width: 240px; flex-shrink: 0; box-sizing: border-box;
  background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  padding: 0; transition: width .14s ease;
}
body.sidebar-collapsed .sidebar { width: 60px; }

.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 14px 12px 10px; }
.sb-brand { font-weight: 700; font-size: 1.25rem; color: var(--text); white-space: nowrap; text-decoration: none; }
.sb-brand span { color: var(--accent); }
.sb-head-actions { display: flex; align-items: center; gap: 4px; }
.sb-collapse, .bell-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 5px; border-radius: 7px; display: inline-flex; }
.sb-collapse:hover, .bell-btn:hover { color: var(--text); background: var(--panel-2); }
body.sidebar-collapsed .sb-brand span { display: none; }
body.sidebar-collapsed .sb-collapse { display: none; }
body.sidebar-collapsed .sb-head { justify-content: center; padding: 14px 0 10px; }
body.sidebar-collapsed .sb-head-actions { flex-direction: column; }

.sb-nav { flex: 1; overflow-y: auto; padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.sb-section { display: flex; flex-direction: column; }
.sb-section + .sb-section { margin-top: 6px; padding-top: 6px; }
.sb-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding: 6px 10px 4px; font-weight: 600; }
.sb-microtitle { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 8px 10px 2px; opacity: .8; }

.sb-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: var(--text-muted); font-size: var(--fs-base); text-decoration: none; position: relative; white-space: nowrap; }
.sb-item:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.sb-item.is-active { background: var(--accent-muted-bg); color: var(--accent-muted-text); }
.sb-item.is-active .sb-ic { color: var(--accent); }
.sb-ic { display: inline-flex; flex-shrink: 0; color: var(--text-faint); }
.sb-item:hover .sb-ic { color: currentColor; }
.sb-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.sb-section-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer; padding: 6px 10px 4px; color: var(--text-faint); }
.sb-section-toggle:hover { color: var(--text-muted); }
.sb-section-toggle .sb-section-label { padding: 0; flex: 1; text-align: left; }
.sb-group-ic { display: none; flex-shrink: 0; }
.sb-chevron { display: inline-flex; transition: transform .12s; }
.sb-collapsible.is-closed:not(.force-open) .sb-chevron { transform: rotate(-90deg); }
.sb-collapsible.is-closed:not(.force-open) .sb-section-items { display: none; }
.sb-section-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--accent); }

.sb-badge-slot { margin-left: auto; }
.nav-badge { display: inline-block; min-width: 18px; padding: 0 6px; height: 18px; line-height: 18px; text-align: center; font-size: 10px; font-weight: 700; border-radius: 999px; background: var(--pill-neutral-bg); color: var(--pill-neutral-text); }
.nav-badge.is-urgent { background: var(--danger); color: #fff; }

body.sidebar-collapsed .sb-section-label,
body.sidebar-collapsed .sb-microtitle,
body.sidebar-collapsed .sb-lbl,
body.sidebar-collapsed .sb-chevron,
body.sidebar-collapsed .sb-section-items,
body.sidebar-collapsed .sb-user-meta,
body.sidebar-collapsed .sb-user-chevron { display: none; }
body.sidebar-collapsed .sb-item { justify-content: center; padding: 8px; }
body.sidebar-collapsed .sb-badge-slot { position: absolute; top: 3px; right: 7px; margin: 0; }
body.sidebar-collapsed .sb-badge-slot .nav-badge { width: 7px; height: 7px; min-width: 0; padding: 0; font-size: 0; color: transparent; }
body.sidebar-collapsed .sb-section + .sb-section { border-top: 1px solid var(--border); }
body.sidebar-collapsed .sb-section-toggle { justify-content: center; padding: 8px; }
body.sidebar-collapsed .sb-group-ic { display: inline-flex; color: var(--text-faint); }
body.sidebar-collapsed .sb-section-toggle .sb-section-label { display: none; }
body.sidebar-collapsed .sb-section-dot { position: absolute; top: 4px; right: 12px; }

.sb-flyout { display: none; }
body.sidebar-collapsed .sb-collapsible { position: relative; }
body.sidebar-collapsed .sb-collapsible.flyout-open .sb-flyout { display: flex; flex-direction: column; gap: 2px; position: absolute; left: 100%; top: 0; z-index: 80; min-width: 210px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.4); padding: 8px; margin-left: 4px; }
.sb-flyout .sb-item { color: var(--text-muted); }
.sb-flyout-title { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 4px 8px 2px; }

.sb-user { position: relative; border-top: 1px solid var(--border); padding: 8px; }
.sb-user-btn { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 9px; color: inherit; text-align: left; }
.sb-user-btn:hover { background: var(--panel-2); }
.sb-avatar { width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-muted-bg); color: var(--accent-muted-text); font-size: 12px; font-weight: 600; }
.sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sb-avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.sb-user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-user-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-chevron { color: var(--text-faint); flex-shrink: 0; }
body.sidebar-collapsed .sb-user-btn { justify-content: center; padding: 6px; }

.sb-intro-dot { display: none; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 999px; background: var(--accent); animation: sb-pulse 1.6s infinite; }
.sb-user.has-intro .sb-intro-dot { display: block; }
@keyframes sb-pulse { 0% { box-shadow: 0 0 0 0 rgba(127,119,221,.5); } 70% { box-shadow: 0 0 0 8px rgba(127,119,221,0); } 100% { box-shadow: 0 0 0 0 rgba(127,119,221,0); } }

.sb-popover { position: absolute; bottom: calc(100% + 6px); left: 8px; right: 8px; z-index: 90; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45); padding: 8px; min-width: 240px; }
body.sidebar-collapsed .sb-popover { left: 8px; right: auto; width: 250px; }
.sb-pop-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.sb-pop-name { font-size: 13px; font-weight: 600; color: var(--text); }
.sb-pop-email { font-size: 11px; color: var(--text-muted); }
.sb-pop-item { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer; padding: 8px; border-radius: 7px; color: var(--text-body); font-size: 13px; text-decoration: none; text-align: left; }
.sb-pop-item:hover { background: var(--panel-2); text-decoration: none; }
.sb-pop-item.danger { color: #fca5a5; }
.sb-pop-item.highlight { color: var(--accent-muted-text); background: var(--accent-muted-bg); }
.sb-pop-sep { height: 1px; background: var(--border); margin: 6px 0; }
.sb-pop-theme { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; }
.sb-pop-swatches { display: flex; gap: 6px; }
.sb-pop-sw { width: 20px; height: 20px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.sb-pop-sw.is-active { border-color: var(--text); }
.sb-pop-sw.sw-indigo { background: #7F77DD; } .sb-pop-sw.sw-slate { background: #378ADD; }
.sb-pop-sw.sw-forest { background: #1D9E75; } .sb-pop-sw.sw-sunset { background: #FF6600; }
.sb-pop-modetoggle { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px; color: var(--text-muted); font-size: 11px; cursor: pointer; }
.sb-imp-panel:not(:empty) { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; max-height: 280px; overflow-y: auto; }

.mobile-topbar { display: none; }
.sb-backdrop { display: none; }
@media (max-width: 1023px) {
  .mobile-topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 70; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--border); }
  .mobile-topbar .brand { font-weight: 700; font-size: 1.1rem; color: var(--text); flex: 1; text-decoration: none; }
  .mobile-topbar .brand span { color: var(--accent); }
  .mt-menu, .mt-bell { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; display: inline-flex; position: relative; }
  .layout { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; height: 100vh; z-index: 95; width: 260px; transform: translateX(-100%); transition: transform .18s ease; }
  body.sidebar-collapsed .sidebar { width: 260px; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90; }
  body.sidebar-collapsed .sb-lbl, body.sidebar-collapsed .sb-section-label,
  body.sidebar-collapsed .sb-section-items, body.sidebar-collapsed .sb-user-meta,
  body.sidebar-collapsed .sb-user-chevron, body.sidebar-collapsed .sb-chevron { display: revert; }
  body.sidebar-collapsed .sb-item { justify-content: flex-start; padding: 7px 10px; }
  .content { padding: 1.25rem 1rem; }
}

.density-compatta .content { padding: 1.4rem 1.6rem; }
.density-compatta .sb-item { padding: 5px 10px; }
.density-compatta .dtable tbody td { height: 38px; }
.density-compatta .page-header { margin-bottom: 12px; }

/* ---- Pagina profilo ---- */
.prof-layout { display: flex; gap: 24px; align-items: flex-start; }
.prof-nav { width: 190px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 1rem; }
.prof-nav-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 8px 10px; border-radius: 7px; color: var(--text-muted); font-size: var(--fs-base); }
.prof-nav-item:hover { background: var(--panel-2); color: var(--text); }
.prof-nav-item.is-active { background: var(--accent-muted-bg); color: var(--accent-muted-text); }
.prof-nav-item.danger { color: var(--text-faint); }
.prof-content { flex: 1; min-width: 0; max-width: 640px; }
.prof-content h2 { font-size: 1rem; margin: 1.4rem 0 .6rem; }
.prof-content h2:first-child { margin-top: 0; }
.prof-avatar-row { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.prof-avatar-lg { width: 96px; height: 96px; font-size: 30px; }
.prof-avatar-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.prof-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: .82rem; padding: 0; }
.prof-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prof-toggle { flex-direction: row !important; align-items: center; gap: 8px; }
.prof-toggle input { width: auto; }
.prof-info-box { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-muted); font-size: .85rem; }
.prof-segment { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.prof-segment button { background: var(--panel); border: none; padding: 7px 16px; cursor: pointer; color: var(--text-muted); font-size: .85rem; border-right: 1px solid var(--border); }
.prof-segment button:last-child { border-right: none; }
.prof-segment button.is-active { background: var(--accent); color: #fff; }
.prof-theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 460px; }
.prof-theme-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: var(--panel); border: 2px solid var(--border); border-radius: 10px; cursor: pointer; font-size: .8rem; color: var(--text-muted); }
.prof-theme-card.is-active { border-color: var(--accent); color: var(--text); }
.prof-danger-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
@media (max-width: 720px) { .prof-layout { flex-direction: column; } .prof-nav { width: 100%; flex-direction: row; overflow-x: auto; position: static; } .prof-grid2 { grid-template-columns: 1fr; } }

/* ===== Progetti & board kanban ===== */
.proj-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.proj-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.proj-actions { display: flex; gap: 10px; align-items: center; }
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-toggle a { padding: 5px 12px; font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; }
.view-toggle a.active { background: var(--accent-muted-bg); color: var(--accent-muted-text); }
.board-layout { display: flex; gap: 16px; align-items: flex-start; }
.board-main { flex: 1; min-width: 0; }
.kanban { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.kb-col { flex: 1 0 280px; max-width: 360px; background: var(--panel-2, var(--panel)); border: 1px solid var(--border); border-radius: 12px; padding: 8px; }
.kb-col-head { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); padding: 4px 6px 8px; display: flex; gap: 6px; align-items: center; }
.kb-count { background: var(--border); color: var(--text-muted); border-radius: 10px; padding: 0 7px; font-size: .72rem; }
.kb-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 24px; }
.kb-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; cursor: grab; }
.kb-card:active { cursor: grabbing; }
.kb-ghost { opacity: .4; }
.kb-card-title, .kb-card a.kb-card-title { display: block; font-weight: 600; color: var(--text); text-decoration: none; margin-bottom: 6px; }
.kb-meta { font-size: var(--fs-sm); color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.kb-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-sm); }
.macro-card.is-done { opacity: .6; }
/* La spunta sta nel titolo della card: stesso gesto dei sotto-task, perche' e'
   lo stesso oggetto. Il trascinamento resta, ma non e' piu' l'unica strada. */
.kb-card .kb-card-title { display: flex; align-items: flex-start; gap: 7px; }
/* `input` globale e' largo 100% con padding: su una casella di spunta diventa un
   blocco che spinge il titolo fuori dalla card. Va riportata alla sua misura,
   come gia' si fa nella checklist. */
.kb-card-check {
  flex: none; width: auto; min-width: 0; padding: 0; margin: 3px 0 0;
  cursor: pointer; accent-color: var(--accent);
}
.kb-card-title > .kb-card-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kb-card-del { flex: none; margin-left: auto; }
.kb-card-del button { color: var(--text-faint); padding: 0 2px; line-height: 1; }
.kb-card-del button:hover { color: var(--danger, #e5484d); }
.kb-card-del svg { width: 13px; height: 13px; }
.macro-card.is-done .kb-card-text { text-decoration: line-through; }
.macro-card.is-done .kb-card-title { color: var(--text-muted); }
.done-check { color: var(--ok, #1d9e75); margin-right: 4px; }
.progress-bar { height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; margin: 4px 0; }
.progress-bar.mini { display: inline-block; width: 80px; vertical-align: middle; margin: 0 6px 0 0; }
.progress-bar > span { display: block; height: 100%; background: var(--accent); }
.checklist { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.checklist li, .checklist-more > div { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.checklist li.is-done > span:not(.cl-del), .checklist-more > div.is-done > span:not(.cl-del) { text-decoration: line-through; color: var(--text-faint); }
.checklist input[type=checkbox] { width: auto; }
/* La riga della checklist ha la sua × in fondo: compare avvicinandosi, cosi' e'
   presente quando serve e silenziosa mentre si legge. Il titolo prende lo spazio,
   la × no — altrimenti si spartiscono la riga a meta'. */
.checklist li > span:not(.cl-del), .checklist-more > div > span:not(.cl-del) { flex: 1; min-width: 0; }
.cl-del { flex: none; display: flex; }
.cl-del button { color: var(--text-faint); padding: 0; line-height: 1; opacity: 0; }
.checklist li:hover .cl-del button, .checklist-more > div:hover .cl-del button,
.cl-del button:focus { opacity: 1; }
.cl-del button:hover { color: var(--danger, #e5484d); }
.cl-del svg { width: 12px; height: 12px; }
.checklist-add input, .kb-add-macro input { width: 100%; margin-top: 6px; font-size: var(--fs-sm); padding: 5px 8px; }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: var(--fs-sm); padding: 0; }
.proj-tag { font-size: .7rem; color: var(--accent); text-decoration: none; margin-left: 6px; white-space: nowrap; }
.assignees { display: inline-flex; gap: 2px; }
.mini-avatar { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-muted-bg); color: var(--accent-muted-text); font-size: .62rem; font-weight: 600; }
@media (max-width: 900px) { .board-layout { flex-direction: column; } .board-layout .detail-aside { width: 100%; } }

/* Board a tutta larghezza: 3 colonne 1fr, niente scroll orizzontale a desktop */
.kanban.kanban--board { display: grid; grid-template-columns: repeat(3, 1fr); overflow-x: visible; align-items: start; }
.kanban.kanban--board .kb-col { flex: initial; max-width: none; }
@media (max-width: 760px) { .kanban.kanban--board { grid-template-columns: 1fr; } }

/* Informazioni vitali (riquadri di sola lettura sotto l'header del cliente) */
.vital-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.vital-c { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.vital-c .vital-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.vital-c .vital-value { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-top: 2px; }
.vital-c a { color: inherit; text-decoration: none; }
.vital-c .vital-sub { font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 760px) { .vital-row { grid-template-columns: 1fr; } }

/* Avatar membri sovrapposti nell'header */
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .mini-avatar { margin-left: -6px; border: 2px solid var(--panel); }
.avatar-stack .mini-avatar:first-child { margin-left: 0; }

/* ===== Drawer metadati (componente condiviso) ===== */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 90; opacity: 0; transition: opacity .2s ease; }
.drawer-overlay.is-open { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 384px; max-width: 92vw; background: var(--panel); border-left: 1px solid var(--border); z-index: 91; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; box-shadow: -10px 0 28px rgba(0,0,0,.22); }
.drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.drawer-title { font-size: 1rem; font-weight: 600; margin: 0; }
.drawer-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; }
.drawer-close:hover { background: var(--accent-muted-bg); color: var(--text); }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; }
.drawer-body .field { margin-bottom: 12px; }
.drawer-group { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.drawer-group > .drawer-group-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; }
.drawer-foot { margin-top: 14px; }
.drawer-danger { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 14px 16px; }
.drawer-danger .drawer-danger-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 6px; }
body.drawer-lock { overflow: hidden; }
@media (max-width: 640px) { .drawer { width: 100vw; max-width: 100vw; } }

/* ============================================================
   Comunicazioni — drawer lettura + risposta
   ============================================================ */
#comm-drawer { width: 680px; }
.comm-row:hover td { background: var(--panel-2, #1a1c1f); }
.comm-subject { font-size: 1.15rem; font-weight: 700; color: var(--text, #e8eaed); line-height: 1.3; }
.comm-imgbar {
  display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted, #c4c8cd);
  background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); border-radius: 7px;
  padding: 7px 10px; margin-bottom: 10px;
}
.comm-mail-frame {
  width: 100%; height: 58vh; min-height: 360px; border: 1px solid var(--border, #2a2d31);
  border-radius: 8px; background: #fff;
}
.comm-gen-msg { color: #fca5a5; font-size: var(--fs-sm); margin-top: 8px; }
.comm-reply { margin-top: 16px; border-top: 1px solid var(--border, #2a2d31); padding-top: 14px; }
.comm-reply-head { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted, #c4c8cd); margin-bottom: 10px; }
.comm-gen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }
.comm-reply-body {
  width: 100%; box-sizing: border-box; background: var(--panel-2, #1a1c1f);
  border: 1px solid var(--border, #2a2d31); border-radius: 7px; color: var(--text, #e8eaed);
  font: inherit; font-size: .9rem; padding: 10px 11px; resize: vertical;
}
.comm-reply-body:focus { border-color: var(--accent, #3b82f6); outline: none; }
.comm-reply-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.comm-sent { padding: 4px 0; }

/* Maniglia di ridimensionamento del drawer Comunicazioni (bordo sinistro) */
.comm-drawer-resize { position: absolute; left: 0; top: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 3; }
.comm-drawer-resize::before {
  content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: transparent; transition: background .12s;
}
.comm-drawer-resize:hover::before { background: var(--accent, #3b82f6); }

/* Profilo: controllo dimensione testo */
.prof-fs { display: flex; align-items: center; gap: 12px; max-width: 380px; margin-top: 4px; }
.prof-fs input[type="range"] { flex: 1; }
.prof-fs #pref-fs-val { min-width: 46px; color: var(--text-muted, #c4c8cd); font-size: var(--fs-sm); }

/* Profilo: configurazione barra laterale (riordino + visibilità) */
.prof-navcfg { list-style: none; margin: 4px 0 0; padding: 0; max-width: 380px; display: flex; flex-direction: column; gap: 4px; }
.prof-navcfg-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel-2, #1a1c1f);
  border: 1px solid var(--border, #2a2d31); border-radius: 8px; cursor: grab;
}
.prof-navcfg-row.dragging { opacity: .5; }
.prof-navcfg-grip, .prof-navcfg-ic { color: var(--text-faint, #6b7178); display: inline-flex; }
.prof-navcfg-lbl { flex: 1; color: var(--text, #e8eaed); font-size: var(--fs-sm); }
.prof-navcfg-vis { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted, #c4c8cd); font-size: var(--fs-xs); }
.prof-navcfg-vis input { width: auto; }

/* ============================================================
   Comunicazioni v2 — tab di sezione, tabella fluida, azioni riga
   ============================================================ */
.comm-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border, #2a2d31); }
.comm-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; font-size: var(--fs-base);
  color: var(--text-faint, #6b7178); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.comm-tab.is-active { color: var(--text, #e8eaed); border-bottom-color: var(--accent, #3b82f6); font-weight: 600; }
.comm-tab.is-disabled { cursor: default; }
.comm-tab:not(.is-disabled):not(.is-active):hover { color: var(--text-muted, #c4c8cd); }

.comm-table { table-layout: fixed; width: 100%; }
.comm-table th, .comm-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.comm-table col.cc-data { width: 96px; }
.comm-table col.cc-dir { width: 54px; }
.comm-table col.cc-casella { width: 150px; }
.comm-table col.cc-esito { width: 112px; }
.comm-do { min-width: 0; }
.comm-from, .comm-subj { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-from { color: var(--text, #e8eaed); }
.comm-subj { color: var(--text-muted, #c4c8cd); font-size: var(--fs-sm); margin-top: 1px; }

.comm-row { position: relative; cursor: pointer; }
.comm-table td.comm-esito { overflow: visible; }
.comm-actions {
  display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  gap: 3px; align-items: center; padding: 4px; border: 1px solid var(--border, #2a2d31);
  border-radius: 9px; background: var(--panel, #131517);
}
.comm-row:hover .comm-actions { display: flex; }
.comm-row:hover .comm-esito-badge { visibility: hidden; }
.comm-act {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 7px; cursor: pointer; color: var(--text-muted, #c4c8cd); padding: 0;
}
.comm-act svg { width: 21px; height: 21px; }
.comm-act:hover { background: var(--panel-2, #1a1c1f); }
.comm-act:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent, #3b82f6); }
.comm-act.act-del { color: var(--danger, #ef4444); }
.comm-act.act-task { color: var(--ok, #22c55e); }
.comm-act.act-ticket { color: var(--info, #3b82f6); }

.comm-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--panel, #131517); color: var(--text, #e8eaed); border: 1px solid var(--border, #2a2d31);
  border-radius: 8px; padding: 9px 14px; font-size: var(--fs-sm); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 3000;
}
.comm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------- Minuta (Assistente Meeting) ---------------- */
.minuta-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.minuta-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 900px) { .minuta-layout { grid-template-columns: 1fr; } }

.minuta-form { display: flex; flex-direction: column; gap: 12px; }
.minuta-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.minuta-field--grow { flex: 1; min-width: 0; }
.minuta-form-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.minuta-hint { font-size: var(--fs-xs); color: var(--text-faint); margin: 2px 0 0; }
.minuta-spin { color: var(--accent); font-size: var(--fs-sm); }

.minuta-prompt summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-body); display: flex; align-items: center; gap: 8px; }
.minuta-prompt summary svg { width: 14px; height: 14px; }
.minuta-prompt-text { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); line-height: 1.5; }
.minuta-prompt-saved { color: var(--ok); font-size: var(--fs-sm); }

.minuta-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs);
  background: var(--bg-input); color: var(--text-muted); border: 0.5px solid var(--border-subtle); }

.minuta-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.minuta-card-title { margin: 0; font-size: var(--fs-lg); color: var(--text-primary); }
.minuta-summary { margin: 0 0 12px; }
.minuta-summary h2, .minuta-summary h3 { font-size: var(--fs-base); color: var(--text-primary); margin: 14px 0 6px; }
.minuta-actions-title { display: flex; align-items: center; gap: 6px; font-size: var(--fs-base);
  color: var(--text-primary); margin: 14px 0 6px; }
.minuta-actions-title svg { width: 14px; height: 14px; color: var(--ok); }
.minuta-actions { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px;
  font-size: var(--fs-sm); color: var(--text-body); }
.minuta-card-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding-top: 14px; border-top: 0.5px solid var(--border-subtle); }
.minuta-saved { color: var(--ok); font-size: var(--fs-sm); }

.minuta-error { display: flex; align-items: center; gap: 8px; color: var(--danger); font-size: var(--fs-sm); }
.minuta-error svg { width: 16px; height: 16px; flex-shrink: 0; }

.minuta-side-title { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; }
.minuta-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.minuta-recent-item { display: flex; flex-direction: column; gap: 2px; }
.minuta-recent-title { font-size: var(--fs-sm); color: var(--text-body); }
.minuta-recent-meta { font-size: var(--fs-xs); color: var(--text-faint); }

/* ---------------- MFA (verifica in due passaggi) ---------------- */
.mfa-wrap { max-width: 420px; }
.mfa-title { font-size: var(--fs-lg); color: var(--text-primary); margin: 14px 0 6px; }
.mfa-lead { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 16px; line-height: 1.55; }
.mfa-hint { font-size: var(--fs-xs); color: var(--text-faint); margin: 10px 0 0; }
.mfa-form { margin-top: 14px; }
.mfa-form input#code { letter-spacing: 0.35em; font-size: var(--fs-lg); text-align: center; }
.mfa-key-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-input); border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0; }
.mfa-key-label { width: 100%; font-size: var(--fs-xs); color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .04em; }
.mfa-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-base);
  color: var(--text-primary); letter-spacing: 0.08em; flex: 1; min-width: 0; word-break: break-all; }
.mfa-copy { background: transparent; border: 0.5px solid var(--border-subtle); color: var(--text-muted);
  border-radius: var(--radius-sm); padding: 4px 10px; font-size: var(--fs-xs); cursor: pointer; }
.mfa-copy:hover { color: var(--text-primary); border-color: var(--accent); }

.user-danger { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------------- MFA: QR enrollment + codici di backup ---------------- */
.mfa-qr { display: flex; justify-content: center; margin: 4px 0 14px; }
.mfa-qr-svg { width: 210px; height: 210px; background: #fff; padding: 10px; border-radius: var(--radius-sm); }
.mfa-manual { margin: 0 0 6px; }
.mfa-manual summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 10px; }
.mfa-codes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 14px 0; }
.mfa-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-base);
  color: var(--text-primary); letter-spacing: 0.06em; background: var(--bg-input);
  border: 0.5px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; text-align: center; }
.mfa-codes-warn { background: var(--bg-input); border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--fs-sm); color: var(--text-body); margin: 4px 0 14px; }

.minuta-save { align-items: flex-end; flex-wrap: wrap; }
.minuta-save .minuta-field { margin: 0; }

/* ---------------- Minuta v2 (due documenti, prompt popover, archivio) ---------------- */
.minuta-introbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0 14px; }
.minuta-form-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.minuta-field-label { font-size:var(--fs-base); font-weight:500; color:var(--text-primary); }

.minuta-prompts { position:relative; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.minuta-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; font-size:var(--fs-sm);
  background:transparent; border:0.5px solid var(--border-subtle); border-radius:var(--radius-sm); color:var(--text-muted); cursor:pointer; }
.minuta-chip:hover { color:var(--text-primary); border-color:var(--accent); }
.minuta-chip svg { width:14px; height:14px; }
.minuta-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; }
.minuta-pop { position:absolute; right:0; top:calc(100% + 6px); width:400px; max-width:88vw; z-index:60;
  background:var(--panel); border:0.5px solid var(--border); border-radius:var(--radius-md); padding:12px; box-shadow:0 8px 28px rgba(0,0,0,.35); }
.minuta-pop-title { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--text-primary); }
.minuta-pop-x { margin-left:auto; background:transparent; border:none; color:var(--text-faint); cursor:pointer; padding:0; }
.minuta-pop-x svg { width:14px; height:14px; }

.minuta-meta-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:10px;
  padding-bottom:14px; border-bottom:0.5px solid var(--border-subtle); margin-bottom:14px; }
@media (max-width:760px){ .minuta-meta-grid { grid-template-columns:1fr; } }
.minuta-weekday { color:var(--text-faint); font-weight:400; }

.minuta-result-tasks { padding:0 16px; }
.minuta-tasks { margin:0 0 14px; padding:12px 14px; border:0.5px solid var(--border-subtle);
  border-left:3px solid var(--accent); border-radius:var(--radius-md); background:var(--bg-input); }
.minuta-tasks.is-loaded { border-left-color:var(--ok); }
.minuta-tasks-head { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); margin-bottom:8px; }
.minuta-tasks-head svg { width:15px; height:15px; color:var(--accent); }
.minuta-tasks.is-loaded .minuta-tasks-head svg { color:var(--ok); }
.minuta-tasks-list { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sm); color:var(--text-body); }
.minuta-tasks-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.minuta-tasks-foot .minuta-doc-sub { flex:1; min-width:160px; }
.minuta-tasks-err { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:var(--fs-sm); color:var(--danger); }
.minuta-tasks-err svg { width:14px; height:14px; }
.minuta-link { color:var(--accent); display:inline-flex; align-items:center; gap:5px; }
.minuta-link svg { width:14px; height:14px; }
.minuta-doc { border:0.5px solid var(--border-subtle); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:12px; }
.minuta-doc-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.minuta-doc-title { display:flex; align-items:center; gap:6px; font-size:var(--fs-base); font-weight:500; color:var(--text-primary); }
.minuta-doc-title svg { width:15px; height:15px; }
.minuta-doc-sub { font-size:var(--fs-xs); color:var(--text-faint); font-weight:400; }
.minuta-doc-body { margin:0; }
.minuta-doc-body h1, .minuta-doc-body h2, .minuta-doc-body h3 { font-size:var(--fs-base); color:var(--text-primary); margin:12px 0 6px; }
.minuta-copy { font-size:var(--fs-xs); padding:4px 10px; flex-shrink:0; }

.minuta-filters { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.minuta-table td, .minuta-table th { vertical-align:top; }
.minuta-row { cursor:pointer; }
.minuta-row:hover { background:var(--bg-input); }
.minuta-row-title { color:var(--text-body); }
.minuta-row-snippet { font-size:var(--fs-xs); color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:380px; }
.minuta-cell-date, .minuta-cell-client { color:var(--text-muted); font-size:var(--fs-sm); white-space:nowrap; }
.minuta-empty { text-align:center; color:var(--text-faint); padding:18px; }

.minuta-detail-meta { display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:var(--fs-sm); color:var(--text-muted); }
.minuta-detail-meta svg { width:14px; height:14px; vertical-align:-2px; }

/* ---------------- Minuta: editor dettaglio ---------------- */
.minuta-edit-text { width:100%; font-size:var(--fs-sm); line-height:1.55; }
.minuta-mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--fs-xs); }
.minuta-transcript { margin:0 0 12px; }
.minuta-transcript summary { cursor:pointer; font-size:var(--fs-sm); color:var(--text-muted); display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.minuta-transcript summary svg { width:14px; height:14px; }
.minuta-transcript[open] summary { color:var(--text-primary); }
.minuta-save-foot { margin-top:8px; text-align:right; font-size:var(--fs-sm); }

/* ---------------- Minuta: risultato layout A (salva in alto, box fissi) ---------------- */
.minuta-result-bar { padding:12px 14px; border-bottom:0.5px solid var(--border-subtle);
  position:sticky; top:0; z-index:5; background:var(--panel); border-radius:var(--radius-md) var(--radius-md) 0 0; }
.minuta-result-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.minuta-result-actions .minuta-field { margin:0; }
.minuta-result-body { padding:12px 14px; }
.minuta-doc-scroll { max-height:240px; overflow-y:auto; }
.minuta-deduced { font-size:var(--fs-xs); color:var(--accent); font-weight:400; display:inline-flex; align-items:center; gap:3px; }
.minuta-deduced svg { width:11px; height:11px; }
.minuta-save-status { font-size:var(--fs-sm); }
.minuta-save-status .minuta-saved { color:var(--ok); }

/* ---------------- Minuta: stato elaborazione (audio) ---------------- */
.minuta-status { font-size:var(--fs-xs); padding:1px 7px; border-radius:999px; vertical-align:middle; border:0.5px solid var(--border-subtle); background:var(--bg-input); }
.minuta-status--proc { color:var(--info); }
.minuta-status--fail { color:var(--danger); }
.minuta-status--task { color:var(--accent); }
.minuta-status--task-done { color:var(--ok); }
.minuta-notice { display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:var(--fs-sm); margin-bottom:12px; }
.minuta-notice svg { width:16px; height:16px; flex-shrink:0; color:var(--info); }

/* ---------------- Minuta: elimina riga archivio ---------------- */
.minuta-row-actions a { color:var(--text-muted); margin-right:8px; }
.minuta-row-actions a:hover { color:var(--accent); }
.minuta-del { background:transparent; border:none; cursor:pointer; padding:2px; color:var(--text-faint); }
.minuta-del:hover { color:var(--danger); }
.minuta-del svg, .minuta-row-actions a svg { width:15px; height:15px; vertical-align:middle; }

/* ---------------- Calendario (vista settimanale) ---------------- */
.cal-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:12px 0 14px; }
.cal-nav { display:flex; gap:6px; }
.cal-nav .btn-outline { padding:6px 10px; }
.cal-week { font-size:var(--fs-lg); color:var(--text-primary); font-weight:500; }
.cal-legend { display:flex; gap:14px; font-size:var(--fs-xs); color:var(--text-muted); }
.cal-legend span { display:inline-flex; align-items:center; gap:5px; }
.cal-dot { width:10px; height:10px; border-radius:2px; display:inline-block; }
.cal-dot.cal-accepted { background:var(--ok); }
.cal-dot.cal-pending { background:var(--warn); }
.cal-dot.cal-declined { background:var(--danger); }

.cal-scroll { overflow-x:auto; border:0.5px solid var(--border-subtle); border-radius:var(--radius-md); }
.cal-grid { display:flex; min-width:840px; }
.cal-gutter { width:54px; flex-shrink:0; border-right:0.5px solid var(--border-subtle); }
.cal-corner { height:46px; border-bottom:0.5px solid var(--border-subtle); }
.cal-hours { position:relative; }
.cal-hour { position:relative; box-sizing:border-box; }
.cal-hour span { position:absolute; top:-1px; right:7px; transform:translateY(-50%); font-size:var(--fs-xs); color:var(--text-faint); background:var(--bg-surface); padding:0 2px; }
.cal-days { flex:1; display:grid; grid-template-columns:repeat(7, 1fr); }
.cal-day { border-right:0.5px solid var(--border-subtle); min-width:0; }
.cal-day:last-child { border-right:none; }
.cal-day-head { height:46px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-bottom:0.5px solid var(--border-subtle); gap:1px; }
.cal-day-head.is-today { background:var(--bg-input); }
.cal-day-name { font-size:var(--fs-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.cal-day-num { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.cal-day-head.is-today .cal-day-num { color:var(--accent); }
.cal-col { position:relative; }
.cal-line { position:absolute; left:0; right:0; border-top:0.5px solid var(--border-subtle); pointer-events:none; }
.cal-event { position:absolute; box-sizing:border-box; overflow:hidden; padding:2px 5px; border-radius:var(--radius-sm);
  background:var(--panel); border:0.5px solid var(--border-subtle); border-left:3px solid var(--accent); cursor:default; }
.cal-event.cal-accepted { border-left-color:var(--ok); }
.cal-event.cal-pending { border-left-color:var(--warn); }
.cal-event.cal-declined { border-left-color:var(--danger); opacity:.72; }
.cal-ev-time { font-size:10px; color:var(--text-faint); line-height:1.2; }
.cal-ev-title { font-size:var(--fs-xs); color:var(--text-body); line-height:1.25; overflow:hidden; text-overflow:ellipsis; }
.cal-ev-loc { font-size:10px; color:var(--text-faint); line-height:1.2; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cal-ev-loc svg { width:9px; height:9px; vertical-align:-1px; }

/* ---------------- Calendario multi-sorgente + slot + dettaglio ---------------- */
.cal-toolbar .cal-nav { align-items:center; }
.flash svg { width:15px; height:15px; vertical-align:-3px; margin-right:4px; }
.cal-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cal-cal { display:flex; align-items:center; gap:8px; color:var(--text-body); cursor:pointer; padding:3px 0; font-size:var(--fs-sm); }
.cal-cal input { width:auto; }
.cal-swatch { width:12px; height:12px; border-radius:3px; display:inline-block; flex-shrink:0; }
/* Popover "Calendari" */
.cal-pop-wrap { position:relative; }
.cal-pop { position:absolute; top:calc(100% + 6px); right:0; z-index:20; min-width:210px;
  background:var(--panel); border:0.5px solid var(--border-subtle); border-radius:var(--radius-md);
  box-shadow:0 12px 30px rgba(0,0,0,.35); padding:12px 14px; display:flex; flex-direction:column; gap:2px; }
.cal-pop[hidden] { display:none; }
.cal-pop-title { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.03em; color:var(--text-faint); margin-bottom:6px; }
.cal-pop-note { font-size:var(--fs-xs); color:var(--text-faint); margin-top:8px; padding-top:8px; border-top:0.5px solid var(--border-subtle); }
/* Drawer: incolla CSV */
.cal-csv-form { display:flex; flex-direction:column; gap:12px; }
.cal-csv-ta { width:100%; box-sizing:border-box; font-family:var(--font-mono, monospace); font-size:var(--fs-sm);
  resize:vertical; min-height:220px; }
.cal-csv-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cal-csv-hint { font-size:var(--fs-xs); }
.cal-event { cursor:pointer; }
.cal-event:hover { box-shadow:0 0 0 1px var(--accent); z-index:3; }
.cal-event.cal-csv { border-top-style:dashed; border-right-style:dashed; border-bottom-style:dashed; }
.cal-event.cal-st-declined { opacity:.58; }
.cal-event.cal-st-declined .cal-ev-title { text-decoration:line-through; }
.cal-slots-box { background:var(--panel); border:0.5px solid var(--border-subtle); border-radius:var(--radius-md); padding:12px 14px; margin:0 0 12px; }
.cal-slots-head { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); display:flex; align-items:center; gap:6px; }
.cal-slots-head svg { width:14px; height:14px; }
.cal-slots-sub { font-weight:400; color:var(--text-faint); font-size:var(--fs-xs); }
.cal-slots-list { margin:8px 0 10px; padding-left:20px; display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sm); color:var(--text-body); }
.cal-detail { padding:4px 2px; }
.cal-detail-title { font-size:var(--fs-lg); color:var(--text-primary); margin:0 0 12px; }
.cal-detail-meta { display:flex; flex-direction:column; gap:6px; font-size:var(--fs-sm); color:var(--text-muted); }
.cal-detail-meta svg { width:14px; height:14px; vertical-align:-2px; margin-right:4px; }
.cal-detail-row { border-top:0.5px solid var(--border-subtle); padding-top:10px; margin-top:12px; font-size:var(--fs-sm); color:var(--text-body); }
.cal-detail-lbl { display:block; font-size:var(--fs-xs); color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em; margin-bottom:5px; }
.cal-detail-att { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:3px; }
.cal-att-st { color:var(--text-faint); }

/* ---------------- Calendario: viste multiple, mese, slot evidenziati ---------------- */
/* Vista 10 giorni: usa tutta la larghezza disponibile. */
.content.content--calendar { max-width:none; }
.cal-views { display:inline-flex; flex-wrap:wrap; border:0.5px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; }
@media (max-width:560px) { .cal-view-btn { padding:6px 9px; font-size:var(--fs-xs); } }
.cal-view-btn { padding:6px 12px; font-size:var(--fs-sm); color:var(--text-muted); border-right:0.5px solid var(--border-subtle); }
.cal-view-btn:last-child { border-right:none; }
.cal-view-btn:hover { color:var(--text-primary); text-decoration:none; }
.cal-view-btn.is-active { background:var(--bg-input); color:var(--accent); }
.cal-date-jump { width:auto; height:30px; font-size:var(--fs-xs); }
.cal-slot-hi { position:absolute; left:2px; right:2px; z-index:1; box-sizing:border-box;
  border:2px dashed var(--accent); border-radius:var(--radius-sm); background:var(--bg-input);
  display:flex; align-items:center; justify-content:center; }
.cal-slot-hi span { font-size:10px; color:var(--accent); font-weight:500; text-transform:uppercase; letter-spacing:.04em; }

.cal-month { border:0.5px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; }
.cal-month-head { display:grid; grid-template-columns:repeat(7,1fr); background:var(--bg-surface); border-bottom:0.5px solid var(--border-subtle); }
.cal-month-head div { padding:6px; text-align:center; font-size:var(--fs-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.cal-month-row { display:grid; grid-template-columns:repeat(7,1fr); border-bottom:0.5px solid var(--border-subtle); }
.cal-month-row:last-child { border-bottom:none; }
.cal-month-cell { min-height:98px; border-right:0.5px solid var(--border-subtle); padding:4px 4px 6px; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.cal-month-cell:last-child { border-right:none; }
.cal-month-cell.is-out { opacity:.5; }
.cal-month-day { font-size:var(--fs-xs); color:var(--text-muted); align-self:flex-start; padding:0 6px; border-radius:999px; }
.cal-month-cell.is-today .cal-month-day { background:var(--accent); color:#fff; }
.cal-chip { font-size:10px; line-height:1.3; padding:1px 5px; border-radius:3px; background:var(--panel);
  border-left:3px solid var(--accent); color:var(--text-body); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-chip:hover { box-shadow:0 0 0 1px var(--accent); }
.cal-chip.cal-st-declined { opacity:.55; text-decoration:line-through; }
.cal-chip-t { color:var(--text-faint); }
.cal-chip-more { font-size:10px; color:var(--text-muted); }

/* Pallini: i calendari in cui un appuntamento compare. */
.cal-dots { display:inline-flex; gap:3px; align-items:center; vertical-align:middle; }
.cal-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
.cal-ev-time .cal-dots { margin-left:4px; }
.cal-ev-time .cal-dot { width:6px; height:6px; }
.cal-detail-cals { display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; }
.cal-detail-cal { display:inline-flex; align-items:center; gap:5px; }

/* Minuta: com'è messo il riepilogo al cliente. */
.minuta-riep { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
               padding:10px 12px; margin-bottom:12px; font-size:var(--fs-sm);
               color:var(--text-muted); }
.minuta-riep svg { width:15px; height:15px; flex:none; color:var(--text-faint); }
.minuta-riep > .btn-outline, .minuta-riep form { margin-left:auto; }

/* Vista Giorno: togliere un'attività dall'elenco, e annullare il gesto.
   Un tondo che sta in disparte finché non serve: il bordo compare col passaggio
   del mouse sulla riga, e il rosso solo quando il dito è sul bottone — così non
   sembra un allarme in mezzo all'elenco. */
.td-x { flex:none; display:inline-grid; place-items:center; width:30px; height:30px;
        padding:0; margin-left:2px; border-radius:999px; cursor:pointer;
        background:transparent; border:1px solid transparent; color:var(--text-faint);
        transition:color .12s ease, border-color .12s ease, background .12s ease; }
.td-x svg { width:15px; height:15px; }
.td-row:hover .td-x, .td-row:focus-within .td-x { border-color:var(--border-subtle); }
.td-x:hover, .td-x:focus-visible {
  color:var(--danger, #e5484d); border-color:var(--danger, #e5484d);
  background:rgba(229, 72, 77, .12); outline:none;
}
.td-x:active { transform:scale(.94); }
/* Da telefono non esiste il passaggio del mouse: il bordo c'è sempre, e il
   bersaglio sta sotto un pollice. */
@media (max-width:720px) {
  .td-x { width:38px; height:38px; border-color:var(--border-subtle); }
}
@media (prefers-reduced-motion: reduce) { .td-x { transition:none; } .td-x:active { transform:none; } }
.td-undo { background:none; border:0; cursor:pointer; color:inherit; font:inherit;
           text-decoration:underline; padding:0 0 0 8px; }

/* Impegni: sette giorni, tutti i calendari uno sopra l'altro. */
.cal-grid--imp .cal-day-head, .cal-grid--imp .cal-corner { height:62px; }
.cal-day-busy { font-size:10px; color:var(--text-faint); line-height:1.3; }
.cal-day-busy b { color:var(--warn, #d97706); font-weight:600; }
.cal-imp-allday { height:26px; box-sizing:border-box; display:flex; align-items:center; gap:4px;
                  padding:0 3px; overflow:hidden; border-bottom:1px solid var(--border-subtle); }
.cal-imp-allday .cal-chip { max-width:100%; }
.cal-day.is-weekend .cal-col { background:rgba(127, 140, 160, .05); }
/* Impegni sovrapposti: il riquadro sopra getta ombra su quello sotto, e chi si
   accavalla con un altro ha un puntino in alto a destra. */
.cal-grid--imp .cal-event { box-shadow:-3px 0 7px rgba(0, 0, 0, .4); }
.cal-grid--imp .cal-event.is-conflict::after {
  content:""; position:absolute; top:3px; right:4px; width:5px; height:5px;
  border-radius:50%; background:var(--warn, #d97706);
}

/* Agenda: i prossimi giorni in elenco, un appuntamento per riga. */
.cal-ag-legend { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:0 0 10px; max-width:860px;
                 font-size:var(--fs-xs); color:var(--text-muted); }
.cal-ag-leg { display:inline-flex; align-items:center; gap:6px; }
.cal-ag-note { margin-left:auto; color:var(--text-faint); }
.cal-agenda { max-width:860px; display:flex; flex-direction:column; gap:18px; }
.cal-ag-head { margin:0 0 6px; font-size:var(--fs-sm); font-weight:600; color:var(--text-muted);
               display:flex; align-items:center; gap:6px; }
.cal-ag-head strong { color:var(--text); }
.cal-ag-day.is-today .cal-ag-head strong { color:var(--accent); }
.cal-ag-open { margin-left:auto; color:var(--text-faint); display:inline-flex; padding:4px; }
.cal-ag-open:hover { color:var(--text); text-decoration:none; }
.cal-ag-row { display:flex; align-items:flex-start; gap:12px; padding:9px 12px; cursor:pointer;
              background:var(--panel); border:1px solid var(--border-subtle);
              border-left:3px solid var(--border); border-radius:var(--radius-md); }
.cal-ag-row + .cal-ag-row { margin-top:6px; }
.cal-ag-row:hover, .cal-ag-row:focus-visible { box-shadow:0 0 0 1px var(--accent); outline:none; }
.cal-ag-time { flex:none; width:64px; display:flex; flex-direction:column; line-height:1.3;
               font-variant-numeric:tabular-nums; color:var(--text); font-size:var(--fs-sm); font-weight:600; }
.cal-ag-time small { font-weight:400; font-size:var(--fs-xs); color:var(--text-faint); }
.cal-ag-body { flex:1; min-width:0; }
.cal-ag-title { color:var(--text); font-size:var(--fs-base); line-height:1.35; overflow-wrap:anywhere; }
.cal-ag-meta { margin-top:2px; font-size:var(--fs-xs); color:var(--text-faint);
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ag-side { flex:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
               justify-content:flex-end; max-width:45%; padding-top:2px; }
.cal-ag-tag { font-size:10px; text-transform:uppercase; letter-spacing:.04em; padding:1px 6px;
              border-radius:999px; border:1px solid var(--border); color:var(--text-muted); white-space:nowrap; }
.cal-ag-tag--warn { border-color:var(--warn, #d97706); color:var(--warn, #d97706); }
.cal-ag-row.cal-st-declined { opacity:.55; }
.cal-ag-row.cal-st-declined .cal-ag-title { text-decoration:line-through; }
@media (max-width:560px) {
  .cal-ag-row { gap:10px; padding:9px 10px; }
  .cal-ag-time { width:48px; }
  .cal-ag-side { flex-direction:column; align-items:flex-end; gap:4px; max-width:34%; }
}

/* ---------------- Incontro: registrazione meeting ---------------- */
.rec-wrap { max-width:720px; }
.rec-card { padding:20px 22px; }
.rec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.rec-title { font-size:var(--fs-lg); color:var(--text-primary); font-weight:500; display:flex; align-items:center; gap:8px; }
.rec-title svg { width:18px; height:18px; }
.rec-status { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  padding:3px 10px; border:0.5px solid var(--border-subtle); border-radius:999px; }
.rec-status.is-rec { color:#fff; background:var(--danger); border-color:var(--danger); animation:rec-pulse 1.3s ease-in-out infinite; }
@keyframes rec-pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.rec-consent { display:flex; align-items:flex-start; gap:7px; margin:2px 0 16px; }
.rec-consent svg { width:15px; height:15px; flex-shrink:0; color:var(--warn); }
.rec-opts { display:flex; flex-wrap:wrap; gap:18px; margin-bottom:16px; font-size:var(--fs-sm); color:var(--text-body); }
.rec-opt { display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.rec-opt input { width:auto; }
.rec-opt svg { width:14px; height:14px; color:var(--text-muted); }
.rec-opt-sub { color:var(--text-faint); font-size:var(--fs-xs); }
.rec-opts.is-locked { opacity:.55; }
.rec-timer { font-family:var(--font-mono, ui-monospace, monospace); font-size:2.4rem; font-weight:600;
  color:var(--text-primary); text-align:center; letter-spacing:.04em; margin:4px 0 18px; }
.rec-controls { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.rec-controls svg { width:15px; height:15px; }
.rec-uploading { margin-top:16px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--text-muted); font-size:var(--fs-sm); }
.rec-uploading svg { width:15px; height:15px; }
.rec-msg { margin-top:16px; padding:10px 12px; border-radius:var(--radius-md); font-size:var(--fs-sm);
  background:var(--bg-input); color:var(--text-body); border:0.5px solid var(--border-subtle); }
.rec-msg-err { background:rgba(239,68,68,0.14); border-color:rgba(239,68,68,0.35); color:#fca5a5; }
.rec-foot { margin:16px 0 0; text-align:center; }
.rec-result { margin-top:16px; }

/* Registrazione: modalità, prova del microfono, recupero */
.rec-opts { flex-direction:column; align-items:stretch; gap:14px; }
.rec-estratto { margin-top:14px; padding:11px 13px; border:1px solid var(--border-subtle);
                border-radius:var(--radius-md); background:var(--panel-2); }
.rec-estratto-h { display:flex; align-items:center; gap:7px; font-size:var(--fs-sm);
                  color:var(--text-primary); margin-bottom:8px; }
.rec-estratto-h svg { width:14px; height:14px; color:var(--ok); }
.rec-estratto audio { width:100%; height:34px; }
.rec-estratto .rec-hint { margin-top:7px; }
.rec-hint { flex-basis:100%; margin:2px 0 0; font-size:var(--fs-xs); color:var(--text-faint);
            line-height:1.5; }
.rec-presets { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rec-presets-l { font-size:var(--fs-xs); color:var(--text-faint); }
.rec-presets svg { width:13px; height:13px; }
.rec-sources { display:flex; gap:18px; flex-wrap:wrap; font-size:var(--fs-sm);
               color:var(--text-body); }
.rec-field { display:flex; flex-direction:column; gap:4px; max-width:360px; }
.rec-field label { font-size:var(--fs-xs); color:var(--text-faint); }
.rec-meter-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* La barra è l'unica prova che il microfono sente la stanza: deve saltare all'occhio. */
.rec-meter { flex:1; min-width:140px; height:8px; border-radius:999px;
             background:var(--border-subtle); overflow:hidden; }
.rec-meter-bar { height:100%; width:0; border-radius:999px; background:var(--accent);
                 transition:width .06s linear; }
.rec-size { text-align:center; font-size:var(--fs-xs); color:var(--text-faint); margin:-8px 0 12px; }
.rec-msg-warn { background:rgba(234,179,8,0.14); border-color:rgba(234,179,8,0.35); color:#fde68a; }
.rec-recover { padding:16px 18px; margin-bottom:14px; border-color:var(--warn); }
.rec-recover .rec-controls { justify-content:flex-start; margin-top:10px; }

/* ---------------- Cockpit di progetto ---------------- */
.pc-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 4px; }
.pc-spacer { flex:1; }
.pc-phase { display:inline-flex; border:0.5px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; }
.pc-phase-btn { background:transparent; border:none; border-right:0.5px solid var(--border-subtle); padding:6px 13px; font-size:var(--fs-sm); color:var(--text-muted); cursor:pointer; }
.pc-phase-btn:last-child { border-right:none; }
.pc-phase-btn.is-active { background:var(--accent-bg); color:var(--accent-text); font-weight:600; }
.pc-add-wrap { position:relative; }
.pc-add-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:246px;
  background:var(--panel); border:0.5px solid var(--border); border-radius:var(--radius-md);
  box-shadow:0 12px 34px rgba(0,0,0,.28); padding:6px; display:flex; flex-direction:column; }
.pc-add-menu[hidden] { display:none; }
.pc-add-item { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--radius-sm);
  font-size:var(--fs-base); color:var(--text-body); text-decoration:none; }
.pc-add-item:hover { background:var(--panel-2); text-decoration:none; }
.pc-add-item .sp { color:var(--accent); width:14px; text-align:center; }
.pc-add-item .pl { color:var(--text-faint); width:14px; text-align:center; }
.pc-add-note { font-size:var(--fs-xs); color:var(--text-faint); padding:7px 10px 5px; border-top:0.5px solid var(--border-subtle); margin-top:4px; }

.pc-tabs { display:flex; gap:2px; margin-top:14px; border-bottom:1px solid var(--border-subtle); overflow-x:auto; }
.pc-tab { border-bottom:2px solid transparent; padding:8px 13px; font-size:var(--fs-base); color:var(--text-muted); white-space:nowrap; text-decoration:none; }
.pc-tab:hover { color:var(--text-primary); text-decoration:none; }
.pc-tab.is-active { color:var(--text-primary); font-weight:600; border-bottom-color:var(--accent); }
.pc-tab-n { color:var(--text-faint); font-size:var(--fs-xs); margin-left:3px; font-variant-numeric:tabular-nums; }

.pc-pane { padding-top:22px; }
.pc-where { font-size:var(--fs-lg); line-height:1.55; max-width:64ch; margin:0; color:var(--text-body); }
.pc-where-src { display:block; margin-top:5px; font-size:var(--fs-xs); color:var(--text-faint); }
.pc-path { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:16px; font-size:var(--fs-sm); color:var(--text-faint); }
.pc-step { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.pc-dot { width:8px; height:8px; border-radius:50%; border:2px solid var(--border); box-sizing:border-box; flex-shrink:0; }
.pc-step.is-completata .pc-dot { background:var(--accent); border-color:var(--accent); }
.pc-step.is-completata { color:var(--text-muted); }
.pc-step.is-in_corso .pc-dot { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.pc-step.is-in_corso { color:var(--text-primary); font-weight:600; }
.pc-sep { color:var(--border); }
.pc-sec-label { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); font-weight:600; margin:26px 0 10px; }

.pc-rows { display:flex; flex-direction:column; }
.pc-row { display:flex; gap:12px; align-items:baseline; padding:11px 2px; border-top:1px solid var(--border-subtle); text-decoration:none; color:inherit; }
.pc-row:first-child { border-top:none; }
a.pc-row:hover .pc-t { color:var(--accent); }
.pc-when { font-size:var(--fs-xs); color:var(--text-faint); min-width:46px; font-variant-numeric:tabular-nums; flex-shrink:0; }
.pc-when svg { width:13px; height:13px; }
.pc-b { min-width:0; flex:1; }
.pc-t { font-size:var(--fs-base); font-weight:550; color:var(--text-primary); }
.pc-s { display:block; font-size:var(--fs-xs); color:var(--text-faint); margin-top:1px; }
.pc-tags { display:flex; gap:5px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.pc-mask { font-family:ui-monospace, monospace; color:var(--text-faint); letter-spacing:.08em; font-size:var(--fs-sm); }
.pc-note { font-size:var(--fs-sm); color:var(--text-faint); margin:0 0 16px; max-width:64ch; }
.pc-empty { font-size:var(--fs-sm); color:var(--text-faint); font-style:italic; padding:8px 0; }
.pc-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }

/* Intestazione del fascicolo su una riga sola: breadcrumb + link a SharePoint. */
.fasc-head { display:flex; align-items:center; gap:8px; margin:0 0 8px; padding:0 6px; }
.fasc-up { text-decoration:none; color:var(--text-faint); font-size:var(--fs-base);
           padding:0 4px; border-radius:4px; }
.fasc-up:hover { color:var(--accent); background:var(--panel); }
.fasc-crumb { font-size:var(--fs-sm); color:var(--text-primary); white-space:nowrap;
              overflow:hidden; text-overflow:ellipsis; min-width:0; }
.fasc-head-sp { margin-left:auto; font-size:var(--fs-xs); flex-shrink:0; }
.fasc-head-sp a { color:var(--text-faint); text-decoration:none; }
.fasc-head-sp a:hover { color:var(--accent); }

/* Fascicolo SharePoint: lista densa: molti file, una riga ciascuno. Rispetto a
   .pc-row il metadato sta in linea invece che sotto, dimezzando l'altezza. */
.fasc-list { display:flex; flex-direction:column; margin:2px 0 14px; }
.fasc-row { display:flex; gap:9px; align-items:center; padding:3px 6px; border-radius:5px;
            line-height:1.35; min-width:0; }
.fasc-row:hover { background:var(--panel-hover, rgba(127,127,127,.09)); }
.fasc-ico { font-size:var(--fs-sm); flex-shrink:0; opacity:.75; width:16px; text-align:center; }
.fasc-name { font-size:var(--fs-sm); color:var(--text-primary); text-decoration:none;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.fasc-name:hover { color:var(--accent); text-decoration:underline; }
.fasc-meta { font-size:var(--fs-xs); color:var(--text-faint); flex-shrink:0;
             font-variant-numeric:tabular-nums; }
/* Le azioni compaiono all'hover: in stato di riposo la lista resta pulita, ma
   restano raggiungibili da tastiera (:focus-within). */
.fasc-acts { display:flex; gap:2px; flex-shrink:0; width:44px; justify-content:flex-end;
             opacity:0; transition:opacity .12s ease; }
.fasc-row:hover .fasc-acts, .fasc-row:focus-within .fasc-acts { opacity:1; }
.fasc-act { background:none; border:none; cursor:pointer; padding:1px 3px; border-radius:4px;
            font-size:var(--fs-sm); line-height:1; color:var(--text-faint); text-decoration:none; }
.fasc-act:hover { color:var(--accent); background:var(--panel); }
/* ── Prossimo passo ────────────────────────────────────────────────────────
   Una card sola in cima alla panoramica. Non usa .pc-row perché deve pesare di
   più di una riga d'elenco: è la domanda a cui la schermata risponde. */
.ns-card { border:1px solid var(--border); background:var(--panel); border-radius:var(--radius-md);
           padding:13px 15px; margin-bottom:18px; }
.ns-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ns-kicker { font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.ns-title { font-size:var(--fs-lg); font-weight:550; color:var(--text-primary);
            letter-spacing:-.01em; margin-bottom:5px; }
.ns-meta { font-size:var(--fs-sm); color:var(--text-faint); display:flex; gap:12px;
           flex-wrap:wrap; margin-bottom:11px; }
.ns-actions { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.ns-actions form { display:inline; }
.ns-more { margin-top:10px; border-top:1px solid var(--border-subtle); padding-top:8px; }
.ns-more > summary { font-size:var(--fs-sm); color:var(--text-faint); cursor:pointer; list-style:none; }
.ns-more > summary::-webkit-details-marker { display:none; }
.ns-more > summary::before { content:"▸ "; }
.ns-more[open] > summary::before { content:"▾ "; }
.ns-more > summary:hover { color:var(--accent); }
.ns-more-body { padding-top:6px; }

/* ── Pannello agente ────────────────────────────────────────────────────── */
.ag-run { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 20px; }
.ag-run-item { display:flex; flex-direction:column; gap:3px; }
.ag-run-n { font-size:var(--fs-xs); color:var(--text-faint); }
.ag-last { background:var(--panel); border:1px solid var(--border);
           border-radius:var(--radius-md); overflow:hidden; margin:10px 0; }
.ag-last-row { display:flex; justify-content:space-between; padding:7px 14px;
               border-bottom:1px solid var(--border-subtle); font-size:var(--fs-sm); }
.ag-last-row:last-child { border-bottom:0; }
.ag-when { color:var(--text-muted); font-variant-numeric:tabular-nums; }
.ag-grid { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
           margin:10px 0 20px; }
.ag-grid .minuta-field { max-width:250px; }
.ag-flags { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width: 760px) { .ag-flags { grid-template-columns:1fr; } }
.ag-flag { display:flex; align-items:center; gap:12px; padding:11px 13px;
           background:var(--panel); border:1px solid var(--border-subtle);
           border-radius:var(--radius-md); }
/* Acceso si vede dal bordo prima che dalla pillola: lo stato deve leggersi
   scorrendo la griglia, non fermandosi a leggere ogni riga. */
.ag-flag.is-on { border-color:var(--accent); }
.ag-flag-b { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.ag-flag-t { display:flex; align-items:center; gap:7px; color:var(--text-primary);
             font-weight:500; }
.ag-flag-n { font-size:var(--fs-sm); color:var(--text-muted); }

/* ── Igiene dei dati ────────────────────────────────────────────────────── */
.hy-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:12px 0 18px; }
.hy-n { font-size:var(--fs-xs); color:var(--text-faint); background:var(--panel-2);
        border:1px solid var(--border-subtle); border-radius:999px; padding:0 7px;
        margin-left:6px; }
.hy-list { background:var(--panel); border:1px solid var(--border);
           border-radius:var(--radius-md); overflow:hidden; }
.hy-row { display:flex; align-items:center; gap:12px; padding:10px 14px;
          border-bottom:1px solid var(--border-subtle); }
.hy-row:last-child { border-bottom:0; }
.hy-row:hover { background:var(--panel-2); }
.hy-b { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.hy-t { color:var(--text-primary); font-weight:500; }
/* La prova è la ragione per cui si accetta in un secondo: deve leggersi. */
.hy-e { font-size:var(--fs-sm); color:var(--text-muted); }
.hy-a { display:flex; gap:10px; align-items:center; flex-shrink:0; }

/* ── Portfolio progetti ─────────────────────────────────────────────────── */
.pf-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.pf-h1 { font-size:var(--fs-xl); font-weight:600; color:var(--text-primary);
         letter-spacing:-.01em; margin-right:6px; }
.pf-filters { display:flex; gap:8px; align-items:center; flex:1; min-width:220px; }
/* `.tt-search` nasce dentro una barra già bordata e il suo input è alto 100%:
   fuori da lì collassa a zero. Qui gli si dà una scatola propria. */
.pf-filters .tt-search { flex:1 1 200px; min-width:170px; max-width:320px;
  min-height:34px; padding:0 10px; background:var(--bg-input);
  border:1px solid var(--border-input); border-radius:var(--radius-sm); }
.pf-filters .tt-search input { height:auto; min-width:0; font-size:var(--fs-sm); }
/* Due difetti in una regola sola. I select ereditano una larghezza piena: senza
   tetto si prendono la riga e schiacciano la ricerca a un'icona. E un'altezza
   fissa di 32px non basta al riempimento ereditato (0.55rem sopra e sotto, testo
   a 0.95rem): l'etichetta veniva tagliata a metà. L'altezza si lascia calcolare
   dal riempimento, non si impone. */
.pf-filters select { flex:0 1 auto; width:auto; max-width:180px;
  height:auto; min-height:34px; padding:6px 9px;
  font-size:var(--fs-sm); line-height:1.35; }
.pf-strip { display:flex; background:var(--panel); border:1px solid var(--border);
            border-radius:var(--radius-md); overflow:hidden; margin-bottom:10px; }
.pf-m { flex:1; padding:7px 13px; border-right:1px solid var(--border-subtle);
        text-decoration:none; color:inherit; transition:background .12s; }
.pf-m:last-child { border-right:0; }
.pf-m:hover { background:var(--panel-2); }
.pf-m.is-on { background:var(--accent-bg); }
.pf-m.is-on .pf-m-v { color:var(--accent-text); }
.pf-m-v { display:block; font-size:var(--fs-lg); font-weight:600; color:var(--text-primary);
          line-height:1.25; }
.pf-m-l { font-size:var(--fs-xs); color:var(--text-faint); }
.pf-m-alert .pf-m-v { color:var(--danger); }
.pf-reset { display:flex; justify-content:flex-end; margin:-4px 0 10px; }
.pf-reset a { font-size:var(--fs-xs); color:var(--text-faint); }

.pf-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
@media (max-width: 900px) { .pf-cols { grid-template-columns:1fr; } }
.pf-col { background:var(--panel); border:1px solid var(--border);
          border-radius:var(--radius-md); overflow:hidden; }
.pf-col-h { display:flex; align-items:center; gap:8px; padding:9px 14px;
            background:var(--panel-2); border-bottom:1px solid var(--border-subtle); }
.pf-col-t { font-size:var(--fs-sm); font-weight:600; color:var(--text-primary);
            text-transform:uppercase; letter-spacing:.05em; }
.pf-col-n { font-size:var(--fs-xs); color:var(--text-faint); background:var(--panel);
            border:1px solid var(--border-subtle); border-radius:999px; padding:0 7px; }
.pf-col-v { margin-left:auto; font-size:var(--fs-sm); color:var(--text-muted); }

/* Riga: due livelli. Il primo dice CHI e QUANTO, il secondo COSA FARE. */
.pf-row { display:block; padding:10px 14px; border-bottom:1px solid var(--border-subtle);
          text-decoration:none; color:inherit; position:relative; }
.pf-row:last-child { border-bottom:0; }
.pf-row:hover { background:var(--panel-2); }
.pf-row.is-crit::before, .pf-row.is-warn::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; }
.pf-row.is-crit::before { background:var(--danger); }
.pf-row.is-warn::before { background:var(--warn); }
.pf-r1 { display:flex; align-items:baseline; gap:8px; }
.pf-cli { font-weight:600; color:var(--text-primary); }
.pf-nome { color:var(--text-muted); }
.pf-code { font-size:var(--fs-xs); color:var(--text-faint); }
.pf-val { margin-left:auto; font-weight:500; white-space:nowrap; }
.pf-r2 { display:flex; align-items:center; gap:8px; margin-top:3px;
         font-size:var(--fs-sm); color:var(--text-muted); }
.pf-step { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-step.is-none { color:var(--text-faint); font-style:italic; }
.pf-meta { margin-left:auto; font-size:var(--fs-xs); color:var(--text-faint); white-space:nowrap; }
.pf-bar { display:block; height:3px; border-radius:999px; background:var(--border-subtle);
          margin-top:7px; overflow:hidden; }
.pf-bar i { display:block; height:100%; background:var(--accent); border-radius:999px; }
.pf-empty { padding:22px 14px; text-align:center; color:var(--text-faint);
            font-size:var(--fs-sm); margin:0; }

/* ── Marchi e generazione documenti ─────────────────────────────────────── */
.bk-card { border:1px solid var(--border); background:var(--panel);
           border-radius:var(--radius-md); padding:14px 16px; margin-bottom:16px; }
.bk-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.bk-logo { height:34px; width:auto; max-width:140px; object-fit:contain; border-radius:4px; }
.bk-logo--empty { width:34px; display:inline-block; }
.bk-swatches { display:inline-flex; gap:5px; margin-left:auto; }
.bk-sw { width:16px; height:16px; border-radius:4px; border:1px solid var(--border-subtle); }
.bk-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 14px; }
.bk-grid .bk-full { grid-column:1 / -1; }
@media (max-width: 760px) { .bk-grid { grid-template-columns:1fr; } }
.bk-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px;
              padding-top:12px; border-top:1px solid var(--border-subtle); }
.bk-upload { display:flex; gap:8px; align-items:center; }

.dg-card { border:1px solid var(--border); background:var(--panel);
           border-radius:var(--radius-md); padding:14px 16px; margin-top:12px; }
.dg-kinds { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.dg-kind { flex:1 1 200px; display:flex; flex-direction:column; gap:2px; cursor:pointer;
           border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
           padding:10px 12px; }
.dg-kind:has(input:checked) { border-color:var(--accent); }
.dg-kind input { margin-bottom:4px; }
.dg-kind-t { font-weight:600; }
.dg-kind-s { font-size:var(--fs-sm); color:var(--text-faint); }
.dg-sources { display:flex; flex-wrap:wrap; gap:8px; }

/* ── Ponte calendario ───────────────────────────────────────────────────── */
.br-card { border:1px solid var(--border); background:var(--panel);
           border-radius:var(--radius-md); padding:14px 16px; margin:12px 0 18px; }
.br-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.br-head .btn-outline { margin-left:auto; }
.br-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.br-counts { display:flex; gap:16px; flex-wrap:wrap; margin:12px 0;
             font-size:var(--fs-sm); color:var(--text-dim); }
.br-count strong { color:var(--text); font-size:var(--fs-base); }
.br-count.br-bad strong { color:var(--danger, #e5484d); }
.br-list { margin:6px 0 0 18px; font-size:var(--fs-sm); }
.br-more { margin-top:22px; }
.br-more > summary { cursor:pointer; font-size:var(--fs-xs); text-transform:uppercase;
                     letter-spacing:.07em; color:var(--text-faint); font-weight:600; padding:4px 0; }
.br-more[open] > summary { color:var(--text-muted); margin-bottom:10px; }

/* ── Tab Strategia ──────────────────────────────────────────────────────── */
.st-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
           gap:12px 14px; margin-bottom:18px; }
.st-grid .st-full { grid-column:1 / -1; }
@media (max-width: 760px) { .st-grid { grid-template-columns:1fr; } }
.st-people { display:flex; flex-wrap:wrap; gap:8px; }
.st-person { display:inline-flex; align-items:center; gap:7px; cursor:pointer;
             border:1px solid var(--border-subtle); border-radius:999px;
             padding:5px 12px 5px 9px; font-size:var(--fs-sm); color:var(--text-dim);
             background:var(--panel); }
.st-person.is-key { border-color:var(--accent); color:var(--text); }
.st-person-r { color:var(--text-faint); }
.st-upload { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.st-refine { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:12px; }
.st-ms-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
/* Il nome si corregge dove si legge: campo largo quanto basta a leggerlo intero. */
.st-ms-name { flex:1; min-width:200px; max-width:420px; }
.st-ms-del { display:inline; margin-left:8px; }
.st-ms-del svg { width:13px; height:13px; }
.st-ms-new { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.st-ms-new input[type="text"]:first-child { flex:1; min-width:200px; max-width:420px; }
.st-ms-new input[inputmode="decimal"] { max-width:120px; }
/* Il drawer aperto come pagina: stessa larghezza di lettura degli altri pannelli. */
.pa-page { max-width:760px; }
.pa-page .drawer-foot { margin-top:14px; }
.st-ms-form input[type="text"] { max-width:120px; }
/* La consegna e' un task marcato: il segno sta accanto agli altri campi della
   tappa, non in una schermata a parte. */
.st-ms-flag { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-sm);
              color:var(--text-muted); white-space:nowrap; }
.st-ms-flag input { margin:0; }
.st-ms-consegna { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                  margin-top:4px; font-size:var(--fs-sm); }
.kb-tag { margin-left:6px; padding:1px 6px; border-radius:999px; font-size:11px;
          font-weight:500; letter-spacing:.02em; border:1px solid var(--border);
          color:var(--text-muted); background:var(--panel); }

/* ── Prossimo passo dalla minuta ────────────────────────────────────────── */
.ns-inline { border-top:1px solid var(--border-subtle); margin-top:14px; padding-top:12px; }
.ns-inline-form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.ns-ok, .ns-err { font-size:var(--fs-sm); margin:0 0 8px; }
.ns-ok { color:var(--ok, var(--accent)); }
.ns-err { color:var(--danger, #e5484d); }

/* ── Brief di riunione ─────────────────────────────────────────────────── */
.bf-card { border:1px solid var(--border); background:var(--panel);
           border-radius:var(--radius-md); padding:15px 17px; margin-top:14px; }
.bf-head { display:flex; align-items:center; gap:9px; margin-bottom:12px; flex-wrap:wrap; }
.bf-body { font-size:var(--fs-base); color:var(--text); white-space:pre-wrap; }
.bf-body h2 { font-size:var(--fs-sm); color:var(--accent); text-transform:uppercase;
              letter-spacing:.07em; margin:16px 0 5px; font-weight:600; }
.bf-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.bf-actions form { display:inline; }
.pg-meta-row { display:flex; gap:14px; flex-wrap:wrap; font-size:var(--fs-sm);
               color:var(--text-faint); margin:-8px 0 14px; }

/* ── Vista Giorno ──────────────────────────────────────────────────────────
   Densa e a colonna singola anche su desktop: si scorre, non si esplora. Su
   telefono l'azione primaria va a piena larghezza sotto il testo, raggiungibile
   col pollice. */
.td-sub { font-size:var(--fs-sm); color:var(--text-faint); margin:-10px 0 14px; }
.td-days { display:flex; gap:4px; overflow-x:auto; padding:5px; margin-bottom:18px;
           background:var(--panel); border:1px solid var(--border-subtle);
           border-radius:var(--radius-md); }
.td-day { display:flex; flex-direction:column; align-items:center; gap:1px;
          padding:5px 12px; border-radius:var(--radius-sm); text-decoration:none;
          color:var(--text-muted); white-space:nowrap; line-height:1.25; }
.td-day:hover { color:var(--accent); }
.td-day.is-on { background:var(--accent-bg); color:var(--accent-text); }
.td-day-t { font-size:var(--fs-sm); }
.td-day-d { font-size:var(--fs-xs); color:var(--text-faint); font-variant-numeric:tabular-nums; }
.td-day.is-on .td-day-d { color:inherit; opacity:.75; }

.td-sec-l { font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
            color:var(--text-faint); margin:22px 0 8px; display:flex; align-items:center; gap:8px; }
.td-n { background:var(--pill-neutral-bg); color:var(--pill-neutral-text);
        border-radius:999px; padding:1px 7px; letter-spacing:0; }
.td-row { display:flex; gap:11px; align-items:center; padding:9px 11px; margin-bottom:6px;
          background:var(--panel); border:1px solid var(--border-subtle);
          border-radius:var(--radius-sm); }
.td-row.is-crit { border-left:2px solid var(--danger); }
.td-when { font-size:var(--fs-sm); color:var(--text-faint); min-width:48px;
           flex-shrink:0; font-variant-numeric:tabular-nums; }
.td-b { min-width:0; flex:1; }
.td-t { display:block; font-size:var(--fs-base); color:var(--text-primary);
        font-weight:500; text-decoration:none; }
.td-t:hover { color:var(--accent); }
.td-s { display:block; font-size:var(--fs-sm); color:var(--text-faint); margin-top:1px; }
.td-a { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.td-more > summary { font-size:var(--fs-sm); color:var(--text-faint); cursor:pointer;
                     list-style:none; padding:4px 0; }
.td-more > summary::-webkit-details-marker { display:none; }
.td-more > summary::before { content:"b8  "; }
.td-more[open] > summary::before { content:"be  "; }
.td-more > summary:hover { color:var(--accent); }
.td-empty { font-size:var(--fs-sm); color:var(--text-faint); font-style:italic; padding:4px 0; }
.td-clean { font-size:var(--fs-base); color:var(--text-muted); margin-top:26px;
            display:flex; align-items:center; gap:8px; }

@media (max-width: 640px) {
  .td-row { flex-wrap:wrap; }
  .td-a { width:100%; margin-top:8px; }
  .td-a .btn { flex:1; text-align:center; }
}

/* ── Azioni preparate ──────────────────────────────────────────────────────
   Riga con il MOTIVO sotto il titolo: chi decide deve capire in tre secondi
   cosa sta autorizzando, senza aprire nulla. */
.pa-row { display:flex; gap:12px; align-items:center; padding:10px;
          border:1px solid var(--border-subtle); border-left:2px solid var(--accent);
          border-radius:var(--radius-sm); background:var(--panel); margin-bottom:6px; }
.pa-row.is-failed { border-left-color:var(--danger); }
.pa-b { min-width:0; flex:1; }
.pa-why { background:var(--accent-bg); color:var(--accent-text); border-radius:var(--radius-sm);
          padding:9px 12px; font-size:var(--fs-sm); margin-bottom:14px; }

/* ── Regia commerciale ─────────────────────────────────────────────────── */
/* Strip dei numeri di pipeline sul portfolio: discreta, quattro celle. */
.pipe-strip { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px; }
.pipe-c { display:flex; flex-direction:column; gap:2px; padding:10px 16px; min-width:150px;
          background:var(--panel); border:1px solid var(--border-subtle); border-radius:8px;
          text-decoration:none; color:inherit; }
a.pipe-c:hover { border-color:var(--accent); }
.pipe-v { font-size:var(--fs-lg, 1.15rem); font-weight:600; color:var(--text-primary);
          font-variant-numeric:tabular-nums; }
.pipe-l { font-size:var(--fs-xs); color:var(--text-faint); }
.kb-sum { font-size:var(--fs-xs); color:var(--text-faint); margin-left:auto;
          font-variant-numeric:tabular-nums; }
.kb-val { font-size:var(--fs-xs); color:var(--text-secondary, var(--text-primary));
          font-variant-numeric:tabular-nums; }

/* Radar «Oggi» in dashboard: stesse lenti del digest giornaliero. */
.radar-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
              gap:10px; margin-top:10px; }
.radar-card { background:var(--panel); border:1px solid var(--border-subtle);
              border-radius:8px; padding:10px 12px; }
.radar-head { font-size:var(--fs-sm); font-weight:600; color:var(--text-primary);
              margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.radar-n { font-size:var(--fs-xs); background:var(--pill-neutral-bg, rgba(127,127,127,.15));
           color:var(--text-faint); border-radius:999px; padding:1px 7px; }
.radar-row { display:flex; justify-content:space-between; gap:10px; padding:3px 0;
             text-decoration:none; color:inherit; font-size:var(--fs-sm); min-width:0; }
.radar-row:hover .radar-t { color:var(--accent); }
.radar-t { color:var(--text-primary); white-space:nowrap; overflow:hidden;
           text-overflow:ellipsis; min-width:0; }
.radar-m { color:var(--text-faint); font-size:var(--fs-xs); flex-shrink:0;
           font-variant-numeric:tabular-nums; }
.radar-late { color:var(--danger, #e5484d); }

/* Copia negli appunti: discreto accanto al titolo della sezione, non compete con
   le azioni vere (Salva, Carica nei task). Vedi static/copy.js. */
.copy-btn { background:none; border:1px solid var(--border-subtle); color:var(--text-faint);
            font-size:var(--fs-xs); line-height:1; padding:3px 7px; border-radius:5px;
            cursor:pointer; margin-left:8px; vertical-align:middle; font-family:inherit; }
.copy-btn:hover { color:var(--accent); border-color:var(--accent); }
.copy-btn.is-copied { color:var(--accent); border-color:var(--accent); }

.fasc-upload { display:flex; gap:8px; align-items:center; margin-top:12px; padding:0 6px;
               flex-wrap:wrap; }
.fasc-upload input[type=file] { font-size:var(--fs-xs); color:var(--text-faint); max-width:100%; }
.fasc-preview { width:100%; height:min(72vh, 760px); border:1px solid var(--border-subtle);
                border-radius:6px; background:var(--panel); display:block; }
/* L'anteprima di un documento ha bisogno di più dei 560px del modale standard. */
.modal-dialog--wide { max-width:min(1100px, 94vw); }
.pc-cred-form { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pc-cred-form input { flex:1; min-width:150px; height:34px; }
.pc-cred-form .btn { white-space:nowrap; }
.ai-chip { display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--border-subtle);
  color:var(--text-muted); border-radius:999px; padding:4px 12px; font-size:var(--fs-sm); text-decoration:none; }
.ai-chip:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.ai-chip .sp { color:var(--accent); }

/* ---------------- Mail di follow-up (drawer) ---------------- */
.fu-form { display:flex; flex-direction:column; gap:12px; }
.fu-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:520px){ .fu-grid { grid-template-columns:1fr; } }
.fu-tune { border-top:1px solid var(--border-subtle); padding-top:12px; }
.fu-tune summary { cursor:pointer; font-size:var(--fs-sm); color:var(--text-faint); list-style:none; display:flex; align-items:center; gap:6px; }
.fu-tune summary::before { content:"▸"; font-size:.8em; transition:transform .12s; }
.fu-tune[open] summary::before { transform:rotate(90deg); }
.fu-tune summary:hover { color:var(--accent); }
.fu-tune > div { margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.fu-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:8px; }
.fu-sent { display:flex; flex-direction:column; gap:12px; padding:4px 2px; }
.fu-undo { display:flex; align-items:center; gap:12px; }

/* ---------------- Offerta (il perno) ---------------- */
.of-new { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.of-new input[type=text] { flex:1; min-width:150px; height:34px; }
.of-new input[type=text]:first-child { flex:2; }
.of-list { display:flex; flex-direction:column; gap:12px; }
.of-card { border:0.5px solid var(--border-subtle); border-left:3px solid var(--accent); border-radius:var(--radius-md); padding:14px 16px; background:var(--panel); }
.of-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.of-title { font-size:var(--fs-base); font-weight:650; color:var(--text-primary); }
.of-v { color:var(--text-faint); font-weight:400; font-size:var(--fs-xs); }
.of-amount { font-size:var(--fs-lg); font-weight:600; color:var(--text-primary); margin-top:6px; font-variant-numeric:tabular-nums; }
.of-body { margin-top:8px; font-size:var(--fs-sm); color:var(--text-body); }
.of-when { margin-top:8px; font-size:var(--fs-xs); color:var(--text-faint); }
.of-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px; padding-top:12px; border-top:0.5px solid var(--border-subtle); }
.of-actions form { display:inline-flex; }
.of-accept { gap:6px; align-items:center; }
.of-accept select, .of-accept input[type=date] { height:32px; }

/* ---------------- Logo del brand (sidebar + topbar) ---------------- */
.sb-brand { display:flex; align-items:center; gap:9px; }
.sb-logo { width:26px; height:26px; flex-shrink:0; }
.sb-brand .sb-word { color:var(--text); }
body.sidebar-collapsed .sb-word { display:none; }
.mobile-topbar .brand { display:inline-flex; align-items:center; gap:7px; }
.mobile-topbar .brand .sb-logo { width:22px; height:22px; }

/* ---------------- Modalità "dim": dark ma meno nero (slate morbido) ---------------- */
.mode-dim {
  --bg-base:#1B1E24; --bg:#1B1E24; --bg-surface:#181B20; --bg-input:#252932;
  --panel:#212530; --panel-2:#2A2F3A;
  --border:#39404C; --border-subtle:#2F343E; --border-input:#3B414D;
  --text:#E7E8EC; --text-primary:#FAFBFC; --text-body:#E7E8EC;
  --text-muted:#A8ADB8; --muted:#A8ADB8; --text-faint:#7C828F;
  --pill-neutral-bg:#2A2F39; --pill-neutral-text:#A8ADB8;
  --pill-info-bg:#1B3050;    --pill-info-text:#9CC4F5;
  --pill-warning-bg:#352C16; --pill-warning-text:#E6BD52;
  --pill-danger-bg:#3A1E22;  --pill-danger-text:#F29A9A;
  --pill-success-bg:#193626; --pill-success-text:#7FD79E;
  --pill-violet-bg:#28223F;  --pill-violet-text:#B49CFB;
  --mine-bg:#3A2A16; --mine-line:#8A5A22;
  color-scheme: dark;
}
/* Accent per tema: identici al dark (la modalità cambia solo i neutri). */
.theme-indigo.mode-dim  { --accent:#7F77DD; --accent-hover:#6F66D0; --accent-muted-bg:#312A6B; --accent-muted-text:#CECBF6; --accent-bg:#312A6B; --accent-text:#CECBF6; }
.theme-slate.mode-dim   { --accent:#378ADD; --accent-hover:#2D78C8; --accent-muted-bg:#124E88; --accent-muted-text:#BBD7F5; --accent-bg:#124E88; --accent-text:#BBD7F5; }
.theme-forest.mode-dim  { --accent:#1D9E75; --accent-hover:#178A65; --accent-muted-bg:#0E5A49; --accent-muted-text:#A7E8D0; --accent-bg:#0E5A49; --accent-text:#A7E8D0; }
.theme-sunset.mode-dim  { --accent:#FF6600; --accent-hover:#E65C00; --accent-muted-bg:#6B2E08; --accent-muted-text:#FFD4B8; --accent-bg:#6B2E08; --accent-text:#FFD4B8; }

/* ---------------- Assistente di progetto: strategia ---------------- */
.pc-strategy { margin-top:20px; padding:14px 16px; border:0.5px solid var(--border-subtle);
  border-left:3px solid var(--accent); border-radius:var(--radius-md); background:var(--panel); }
.pc-strategy-head { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:600; color:var(--text-primary); }
.pc-strategy-head svg { width:15px; height:15px; color:var(--accent); }
.pc-strategy-body { margin:8px 0 0; font-size:var(--fs-base); color:var(--text-body); white-space:pre-line; max-width:64ch; }
.pc-steps { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; font-size:var(--fs-base); color:var(--text-body); }

/* ── Blocchi della Panoramica ─────────────────────────────────────────────
   Un blocco è una card, e tutte le card hanno la stessa anatomia:
   ETICHETTA · metriche · spazio · chip di provenienza · azioni.
   Le azioni AI e quelle manuali stanno sulla stessa riga con lo stesso peso —
   cambia il glifo e il colore, non la gerarchia. Separarle in due zone avrebbe
   rimesso in piedi il modello mentale che si sta togliendo. */
.pc-flow { display:flex; flex-direction:column; gap:12px; }
.bl-card { background:var(--panel); border:1px solid var(--border);
           border-radius:var(--radius-lg); padding:12px 14px; }
.bl-card.is-proposta { border-color:var(--pill-violet-text);
                       box-shadow:inset 3px 0 0 var(--pill-violet-text); }
.bl-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.bl-label { font-size:var(--fs-xs); font-weight:600; letter-spacing:.07em;
            text-transform:uppercase; color:var(--text-muted); }
.bl-metric { font-size:var(--fs-sm); color:var(--text-faint); }
.bl-spacer { flex:1 1 auto; }
.bl-actions { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* Un'azione è un'azione: stesso peso, stessa forma. Il viola dice soltanto
   «questa la esegue Argos». */
.bl-a { background:none; border:0; padding:0; cursor:pointer; font-size:var(--fs-sm);
        color:var(--text-muted); font-family:inherit; }
.bl-a:hover { color:var(--text); }
.bl-ai { color:var(--pill-violet-text); }
.bl-ai:hover { color:var(--pill-violet-text); text-decoration:underline; }
.bl-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
           border-radius:999px; font-size:var(--fs-xs); white-space:nowrap; }
.bl-chip.is-argos { background:var(--pill-violet-bg); color:var(--pill-violet-text); }
.bl-chip.is-corretto { background:var(--panel-2); color:var(--text-muted); }
.bl-body { margin:0; font-size:var(--fs-base); line-height:1.55; color:var(--text-body, var(--text)); }
.bl-lead { margin:0; font-size:var(--fs-lg); line-height:1.4; color:var(--text); }
/* Le tue parole dentro il testo generato. Non una nota a parte: quella nessuno
   la legge, e dopo una settimana non si distingue più ciò che hai verificato
   da ciò che il modello ha dedotto. */
.bl-mine { background:var(--mine-bg); color:inherit; border-bottom:1px solid var(--mine-line);
           border-radius:2px; padding:0 1px; }
.bl-foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.bl-foot form { display:inline; }
.bl-src { font-size:var(--fs-sm); color:var(--text-faint); }
.bl-empty { margin:0; font-size:var(--fs-base); color:var(--text-faint); }
.bl-err { margin:0 0 8px; font-size:var(--fs-sm); color:var(--danger); }
.bl-edit textarea { width:100%; font-family:inherit; font-size:var(--fs-base);
                    line-height:1.55; min-height:80px; }
.bl-edit-foot { display:flex; align-items:center; gap:12px; margin-top:8px; }
.bl-inline-form { display:inline; }

.bl-progress { height:3px; background:var(--border-subtle); border-radius:2px;
               overflow:hidden; margin:0 0 10px; }
.bl-progress > span { display:block; height:100%; background:var(--accent); }

.bl-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.bl-item { display:flex; align-items:center; gap:8px; padding:6px 0;
           border-bottom:1px solid var(--border-subtle); font-size:var(--fs-base); }
.bl-item:last-child { border-bottom:0; }
.bl-item-check { flex:none; width:auto; min-width:0; padding:0; margin:0;
                 cursor:pointer; accent-color:var(--accent); }
.bl-item-t { flex:1; min-width:0; overflow-wrap:anywhere; }
.bl-item.is-done { color:var(--text-faint); }
.bl-item.is-done .bl-item-t { text-decoration:line-through; }
.bl-item-meta { flex:none; display:inline-flex; gap:8px; font-size:var(--fs-sm); }
.bl-item-act { flex:none; display:inline-flex; gap:10px; align-items:center; }
.bl-item-act form { display:inline; }
/* La proposta sta nella stessa lista: si distingue dal tratteggio, non dal posto. */
.bl-item.is-proposta { border:1px dashed var(--pill-violet-text); border-radius:var(--radius-sm);
                       padding:6px 8px; margin:3px 0; background:var(--pill-violet-bg); }
.bl-item-dot { flex:none; color:var(--pill-violet-text); font-size:var(--fs-sm); }
.bl-sp { color:var(--pill-violet-text); margin-right:5px; font-size:var(--fs-sm); }

.bl-add { color:var(--text-faint); }
.bl-add-box { flex:none; width:13px; height:13px; border:1px dashed var(--border-input);
              border-radius:3px; }
.bl-add-form { flex:1; display:flex; align-items:center; gap:8px; }
.bl-add-form input { border:0; background:none; padding:0; font-size:var(--fs-base);
                     color:var(--text); width:100%; }
.bl-add-form input::placeholder { color:var(--text-faint); }
.bl-add-hint { font-size:var(--fs-sm); color:var(--text-faint); }

.bl-notes { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.bl-notes li { display:flex; align-items:baseline; gap:10px; font-size:var(--fs-base); }
.bl-note-when { flex:none; font-size:var(--fs-sm); color:var(--text-faint);
                font-variant-numeric:tabular-nums; }
.bl-note-t { flex:1; min-width:0; overflow-wrap:anywhere; }
.bl-note-x { flex:none; opacity:0; color:var(--text-faint); }
.bl-notes li:hover .bl-note-x, .bl-note-x:focus { opacity:1; }
.bl-note-x svg { width:12px; height:12px; }
.bl-note-add { display:flex; align-items:center; gap:8px; margin-top:8px;
               border-top:1px solid var(--border-subtle); padding-top:8px; }
.bl-note-add input { border:0; background:none; padding:0; width:100%;
                     font-size:var(--fs-base); color:var(--text); }
.bl-mail-row { gap:10px; }
.bl-mail-to { color:var(--text-faint); font-size:var(--fs-sm); margin-left:6px; }

/* Il composer: un campo solo, ancorato in fondo alla colonna. È l'unico punto
   di ingresso per creare contenuto, che lo scriva l'utente o Argos. */
.cmp { position:sticky; bottom:0; background:var(--panel); border:1px solid var(--border);
       border-radius:var(--radius-lg); padding:10px 12px; margin-top:4px;
       box-shadow:0 -6px 18px -12px rgba(0,0,0,.5); }
.cmp textarea { width:100%; border:0; background:none; padding:0; resize:vertical;
                font-family:inherit; font-size:var(--fs-base); color:var(--text);
                min-height:38px; }
.cmp textarea::placeholder { color:var(--text-faint); }
.cmp-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px; }
.cmp-switch { display:inline-flex; gap:2px; background:var(--bg-input);
              border-radius:999px; padding:2px; }
.cmp-opt { display:inline-flex; align-items:center; cursor:pointer; position:relative; }
.cmp-opt input { position:absolute; opacity:0; width:0; height:0; }
.cmp-opt span { padding:3px 10px; border-radius:999px; font-size:var(--fs-sm);
                color:var(--text-muted); }
.cmp-opt input:checked + span { background:var(--panel); color:var(--text); }
.cmp-opt--ai input:checked + span { color:var(--pill-violet-text); }
.cmp-hint { flex:1; font-size:var(--fs-sm); color:var(--text-faint); }

.pc-metaline { font-size:var(--fs-sm); color:var(--text-muted); }

/* ── Standby ──────────────────────────────────────────────────────────────
   Un progetto sospeso è fuori dagli elenchi ma non fuori dall'applicazione:
   l'area in fondo è chiusa di default e non risente dei filtri in alto. */
.pf-standby { margin-top:18px; border-top:1px solid var(--border-subtle); padding-top:12px; }
.pf-standby > summary { display:flex; align-items:center; gap:8px; cursor:pointer;
                        list-style:none; font-size:var(--fs-sm); color:var(--text-muted); }
.pf-standby > summary::-webkit-details-marker { display:none; }
.pf-standby > summary::before { content:"▸"; color:var(--text-faint); }
.pf-standby[open] > summary::before { content:"▾"; }
.pf-standby-t { font-weight:600; letter-spacing:.05em; text-transform:uppercase;
                font-size:var(--fs-xs); }
.pf-standby-hint { color:var(--text-faint); }
.pf-standby-body { margin-top:10px; display:flex; flex-direction:column; }
.pf-standby-row { display:flex; align-items:center; gap:12px; padding:7px 0;
                  border-bottom:1px solid var(--border-subtle); font-size:var(--fs-base); }
.pf-standby-row:last-child { border-bottom:0; }
.pf-standby-name { flex:1; min-width:0; color:var(--text); text-decoration:none; }
.pf-standby-name:hover { color:var(--accent); }
.pf-standby-c { flex:none; color:var(--text-muted); font-size:var(--fs-sm); }
.pf-standby-when { flex:none; color:var(--text-faint); font-size:var(--fs-sm); }
.pf-standby-row form { display:inline; }

/* Il banner sulla pagina del progetto: sospeso non vuol dire irraggiungibile,
   ma chi ci entra deve sapere subito perché non lo trovava. */
.pc-standby-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                  margin:0 0 12px; padding:8px 12px; border-radius:var(--radius-md);
                  background:var(--pill-warning-bg); color:var(--pill-warning-text);
                  font-size:var(--fs-sm); }
.pc-standby-bar form { display:inline; }
.pc-standby-bar .link-btn { color:inherit; text-decoration:underline; }
.pc-standby-menu { position:absolute; top:100%; right:0; z-index:40; min-width:250px;
                   background:var(--panel); border:1px solid var(--border);
                   border-radius:var(--radius-md); padding:12px;
                   box-shadow:0 12px 28px -12px rgba(0,0,0,.55); }
.pc-standby-form { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.pc-standby-form input[type="date"] { min-width:150px; }

/* ── «Altro» come menu nativo ─────────────────────────────────────────────
   La barra delle tab scorre in orizzontale: un pannello posizionato al suo
   interno veniva ritagliato e finiva su una seconda riga. Il menu del browser
   si disegna sopra la pagina e non può essere ritagliato. */
.pc-more-select { flex:none; appearance:none; -webkit-appearance:none;
                  background:none; border:0; border-bottom:2px solid transparent;
                  border-radius:0; cursor:pointer; font-family:inherit;
                  width:auto; min-width:0; padding:8px 22px 8px 13px;
                  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                                   linear-gradient(135deg, currentColor 50%, transparent 50%);
                  background-position:calc(100% - 12px) 55%, calc(100% - 7px) 55%;
                  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.pc-more-select:focus { outline:none; }
.pc-more-select.is-active { color:var(--text-primary); font-weight:600;
                            border-bottom-color:var(--accent); }
.pc-more-select option { background:var(--panel); color:var(--text); font-weight:400; }

/* ── Completati ───────────────────────────────────────────────────────────
   Si mettono da parte, non spariscono: una riga di distanza per chi li cerca,
   zero spazio rubato a ciò che c'è ancora da fare. */
.bl-done { margin-top:10px; border-top:1px solid var(--border-subtle); padding-top:8px; }
.bl-done > summary { display:flex; align-items:center; gap:8px; cursor:pointer;
                     list-style:none; font-size:var(--fs-sm); color:var(--text-muted); }
.bl-done > summary::-webkit-details-marker { display:none; }
.bl-done > summary::before { content:"▸"; color:var(--text-faint); }
.bl-done[open] > summary::before { content:"▾"; }
.bl-done-t { font-size:var(--fs-xs); font-weight:600; letter-spacing:.05em;
             text-transform:uppercase; }
.bl-done .bl-list { margin-top:6px; }

/* ── Eliminazione di un progetto ──────────────────────────────────────────
   Volutamente più scomoda dell'archiviazione, che è ciò che serve quasi
   sempre: si dice prima che cosa sparisce, e si chiede di riscrivere il nome. */
.pc-del { border-top:1px solid var(--danger); }
.pc-del .drawer-group-label { color:var(--danger); }
.pc-del-what { margin:0 0 6px; font-size:var(--fs-sm); color:var(--text-muted);
               line-height:1.5; }
.pc-del-form { margin-top:10px; }
.pc-del-form .minuta-field { display:block; margin-bottom:8px; }
.pc-del-form input[type="text"] { width:100%; }

/* ── Stazione di risposta ────────────────────────────────────────────────
   Tre colonne: corsie, elenco, lavoro. Le corsie sono posti, non filtri: una
   mail sta in una sola e la lascia quando è gestita. Il viola è la voce di
   Argos, come nella Panoramica; l'urgenza è una striscia, non una parola. */
.content.content--stazione { max-width:none; }
.st { display:grid; grid-template-columns:208px 470px minmax(0, 1fr); gap:0;
      min-height:calc(100vh - 140px); border:1px solid var(--border); border-radius:var(--radius-lg);
      background:var(--panel); overflow:hidden; }
@media (max-width:1100px) { .st { grid-template-columns:176px 410px minmax(0, 1fr); } }
@media (max-width:860px) { .st { grid-template-columns:minmax(0, 1fr); } .st-lanes, .st-list { border-right:0; } }

.st-lanes { border-right:1px solid var(--border); padding:12px 8px; display:flex; flex-direction:column; gap:2px; }
.st-lanes-l { font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);
              font-weight:600; margin:6px 8px 6px; }
.st-lane { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--radius);
           color:var(--text-body); text-decoration:none; font-size:var(--fs-base); }
.st-lane:hover { background:var(--panel-2); text-decoration:none; }
.st-lane.is-on { background:var(--accent-muted-bg); color:var(--text); font-weight:600; }
.st-lane .st-n { margin-left:auto; font-size:var(--fs-xs); color:var(--text-muted); font-variant-numeric:tabular-nums; }
.st-lane kbd { font-size:10px; }
.st-dot { width:8px; height:8px; border-radius:50%; flex:none; background:var(--text-faint); }
.st-lane--te .st-dot { background:var(--accent); }
.st-lane--loro .st-dot { background:var(--info, #3B82F6); }
.st-lane--rinviate .st-dot { background:var(--warn, #F59E0B); }
.st-lane--fatte .st-dot { background:var(--ok, #22C55E); }
.st-lane--p { font-size:var(--fs-sm); padding:4px 10px; }
.st-sep { height:1px; background:var(--border-subtle); margin:8px; }

.st-list { border-right:1px solid var(--border); display:flex; flex-direction:column; min-height:0; }
.st-list-head { display:flex; align-items:center; gap:10px; padding:10px 12px 8px; border-bottom:1px solid var(--border-subtle); }
.st-list-head h1 { font-size:var(--fs-lg); margin:0; font-weight:650; color:var(--text); }
.st-hint { margin-left:auto; font-size:var(--fs-xs); color:var(--text-faint); white-space:nowrap; }
.st-new { position:relative; }
.st-new-menu { position:absolute; top:100%; left:0; z-index:40; margin-top:4px; min-width:250px; background:var(--panel);
               border:1px solid var(--border); border-radius:var(--radius-md); padding:6px;
               box-shadow:0 12px 28px -12px rgba(0,0,0,.45); }
.st-new-menu button { width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:7px 10px;
                      border:0; background:none; border-radius:6px; text-align:left; font:inherit; color:var(--text-body); cursor:pointer; }
.st-new-menu button:hover { background:var(--panel-2); }
.st-new-menu b { color:var(--text); font-weight:600; }
.st-new-menu small { color:var(--text-faint); font-size:var(--fs-xs); }
.st-rows { overflow-y:auto; }
.st-row { display:grid; grid-template-columns:3px 1fr auto; gap:0 10px; padding:9px 12px 9px 0;
          border-bottom:1px solid var(--border-subtle); text-decoration:none; color:var(--text-body); }
.st-row:hover { background:var(--panel-2); text-decoration:none; }
.st-row.is-on { background:var(--accent-muted-bg); }
.st-stripe { border-radius:2px; }
.st-row.u-alta .st-stripe { background:var(--danger); }
.st-row.u-media .st-stripe { background:var(--warn, #F59E0B); opacity:.7; }
.st-row.u-bassa .st-stripe { background:transparent; }
.st-row-b { min-width:0; display:flex; flex-direction:column; gap:1px; }
.st-who { display:flex; gap:6px; align-items:baseline; white-space:nowrap; overflow:hidden; }
.st-who b { color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.st-co { color:var(--text-faint); font-size:var(--fs-xs); }
.st-subj { color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-ask { color:var(--text-muted); font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-ask::before { content:"→ "; color:var(--text-faint); }
.st-side { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.st-age { font-size:var(--fs-xs); color:var(--text-faint); font-variant-numeric:tabular-nums; }
.st-age.late { color:var(--danger); }
.st-tag { display:inline-block; font-size:10.5px; padding:1px 6px; border-radius:999px; white-space:nowrap; border:1px solid var(--border); color:var(--text-muted); }
.st-tag.ai { border-color:transparent; background:var(--pill-violet-bg); color:var(--pill-violet-text); }
.st-tag.wait { border-color:transparent; background:var(--pill-info-bg, var(--panel-2)); color:var(--info, #3B82F6); }
.st-prj { font-size:var(--fs-xs); color:var(--text-faint); max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-empty { padding:30px 16px; color:var(--text-faint); text-align:center; }

.st-pane { min-height:0; overflow-y:auto; }
.st-conv { max-width:980px; margin:0 auto; padding:16px 20px 30px; display:flex; flex-direction:column; gap:12px; }
.st-conv-head h1 { font-size:var(--fs-xl); margin:0 0 4px; color:var(--text); font-weight:650; text-wrap:balance; }
.st-meta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:var(--text-muted); font-size:var(--fs-sm); }
.st-meta a { color:var(--accent); font-weight:600; text-decoration:none; }
.st-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px; font-size:var(--fs-xs); background:var(--panel-2); color:var(--text-muted); }
.st-chip.key { background:var(--accent-muted-bg); color:var(--text); }
.st-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-subtle); }
.st-tool-proj { display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-size:var(--fs-sm); }
.st-tools select { width:auto; max-width:300px; padding:5px 28px 5px 8px; font-size:var(--fs-sm); }
.st-tools .btn-outline { padding:5px 10px; }
.st-tools .st-tool-del { color:var(--danger); margin-left:auto; }
.st-tools .st-tool-del:hover { border-color:var(--danger); }

.st-ctx { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); padding:0; }
@media (max-width:720px) { .st-ctx { grid-template-columns:minmax(0, 1fr); } }
.st-ctx > div { padding:10px 14px; border-right:1px solid var(--border-subtle); }
.st-ctx > div:last-child { border-right:0; }
.st-ctx-k { font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.st-ctx-v { color:var(--text); margin-top:3px; }
.st-ctx-v.late { color:var(--danger); }
.st-ctx-s { font-size:var(--fs-xs); color:var(--text-faint); margin-top:2px; }

.st-thread { padding:0; }
.st-msg { padding:10px 14px; border-bottom:1px solid var(--border-subtle); }
.st-msg:last-child { border-bottom:0; }
.st-msg-from { display:flex; gap:8px; align-items:baseline; }
.st-msg-from b { color:var(--text); }
.st-msg-t { margin-left:auto; font-size:var(--fs-xs); color:var(--text-faint); font-variant-numeric:tabular-nums; white-space:nowrap; }
.st-msg-prev { color:var(--text-faint); font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:48ch; }
.st-msg.folded { cursor:pointer; }
.st-msg.folded .st-msg-body { display:none; }
.st-msg.folded .st-msg-from b { color:var(--text-muted); font-weight:500; }
.st-msg-body { margin-top:6px; }
.st-msg-pre { white-space:pre-wrap; font-family:inherit; margin:0; color:var(--text-body); }
.st-frame { width:100%; min-height:420px; height:min(70vh, 900px); border:0; background:#fff; border-radius:var(--radius-sm); }

.st-reply { display:flex; flex-direction:column; gap:12px; }
.st-draft { padding:0; }
.st-draft .bl-head { padding:9px 14px 6px; margin:0; }
.st-draft-body { width:100%; border:0; background:none; padding:6px 14px 10px; font:inherit; font-size:var(--fs-base);
                 line-height:1.55; color:var(--text); resize:vertical; min-height:150px; }
.st-draft-body:focus { outline:none; background:var(--bg-input); }
.st-ask { display:flex; gap:8px; padding:8px 14px; border-top:1px solid var(--border-subtle); }
.st-ask input { flex:1; }
.st-cons { padding:8px 14px 10px; }
.st-cons .bl-head { margin-bottom:4px; }
.st-cons-row { display:flex; gap:10px; align-items:flex-start; padding:6px 0; border-bottom:1px solid var(--border-subtle); }
.st-cons-row:last-child { border-bottom:0; }
.st-cons-row input { margin-top:3px; width:auto; accent-color:var(--accent); }
.st-cons-what { display:block; color:var(--text); }
.st-cons-why { display:block; font-size:var(--fs-xs); color:var(--text-faint); }

.st-bar { position:sticky; bottom:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px;
          background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
          box-shadow:0 -8px 24px -16px rgba(0,0,0,.4); }
.st-bar kbd { font-size:10px; margin-left:4px; }
.st-expect { display:inline-flex; gap:6px; align-items:center; font-size:var(--fs-sm); color:var(--text-muted); }
.st-expect input { width:auto; margin:0; accent-color:var(--accent); }
.st-undo { margin-left:auto; font-size:var(--fs-xs); }
.st-keys { display:flex; gap:14px; flex-wrap:wrap; padding:10px 4px 0; color:var(--text-faint); font-size:var(--fs-xs); }
.st-keys span { display:inline-flex; gap:4px; align-items:center; }

/* Proponi un incontro */
.st-fields { padding:12px 14px; }
.st-fld { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:8px 12px; align-items:center; }
.st-fld label { font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.st-fld--inline { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:8px 14px 4px; }
.st-fld--inline select { width:auto; }
.st-a { position:relative; }
.st-persone { position:absolute; left:0; right:0; z-index:30; }
.st-persone-list { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:4px;
                   box-shadow:0 12px 28px -12px rgba(0,0,0,.45); }
.st-persone-list button { width:100%; display:flex; flex-direction:column; align-items:flex-start; padding:6px 10px; border:0;
                          background:none; border-radius:6px; text-align:left; font:inherit; color:var(--text-body); cursor:pointer; }
.st-persone-list button:hover { background:var(--panel-2); }
.st-persone-list b { color:var(--text); }
.st-persone-list small { color:var(--text-faint); font-size:var(--fs-xs); }
.st-cals { display:inline-flex; gap:6px; flex-wrap:wrap; }
.st-cal { display:inline-flex; gap:5px; align-items:center; font-size:var(--fs-xs); padding:2px 8px; border-radius:999px;
          border:1px solid var(--border); color:var(--text-muted); }
.st-cal::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--ok, #22C55E); }
.st-slots { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; padding:8px 14px 4px; }
.st-slot { border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; display:flex; flex-direction:column;
           gap:2px; cursor:pointer; background:var(--panel); }
.st-slot input { position:absolute; opacity:0; width:0; height:0; }
.st-slot b { color:var(--text); font-weight:600; }
.st-slot span { color:var(--text-muted); font-size:var(--fs-sm); }
.st-slot:hover { border-color:var(--accent); }
.st-slot.is-on { border-color:var(--accent); background:var(--accent-muted-bg); }
.st-slot.is-on b::before { content:"✓ "; color:var(--accent); }
.st-slots-foot { display:flex; gap:12px; align-items:center; padding:6px 14px 10px; font-size:var(--fs-xs); }
.st-slots-foot a { color:var(--accent); font-weight:600; text-decoration:none; }
.st-sent .flash { margin:0; }

/* ── Stazione: la riga che si decide senza aprirla ──────────────────────
   Sopra chi scrive, l'oggetto, che cosa chiede. Sotto cliente e progetto,
   sempre, e i gesti di ogni corsia: a portata di clic mentre si scorre. */
.st-item { border-bottom:1px solid var(--border-subtle); }
.st-item:hover { background:var(--panel-2); }
.st-item.is-on { background:var(--accent-muted-bg); }
.st-item .st-row { border-bottom:0; padding-bottom:3px; }
.st-item .st-row:hover, .st-item .st-row.is-on { background:transparent; }
.st-item.u-alta .st-stripe { background:var(--danger); }
.st-item.u-media .st-stripe { background:var(--warn, #F59E0B); opacity:.7; }
.st-act { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:2px 10px 9px 13px; }
.st-cli { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); color:var(--text-muted);
          max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-cli.muted { color:var(--text-faint); }
.st-cli svg, .st-owner svg { width:13px; height:13px; flex:none; }
.st-act select.st-prj-sel { width:auto; max-width:150px; height:24px; padding:1px 20px 1px 6px; font-size:var(--fs-xs); }
.st-seg { display:inline-flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--panel); }
.st-seg button { border:0; background:transparent; padding:2px 7px; font-size:var(--fs-xs); color:var(--text-muted); cursor:pointer; line-height:18px; }
.st-seg button + button { border-left:1px solid var(--border); }
.st-seg button:hover { background:var(--panel-2); color:var(--text); }
.st-seg button.is-on { background:var(--accent-muted-bg); color:var(--text); font-weight:600; }
.st-ico-group { display:inline-flex; gap:1px; margin-left:auto; }
.st-ico { border:0; background:transparent; padding:3px; border-radius:6px; color:var(--text-faint); cursor:pointer; display:inline-flex; }
.st-ico:hover { background:var(--panel-2); color:var(--text); }
.st-ico.st-del:hover { color:var(--danger); }
.st-ico svg { width:15px; height:15px; }

/* ── Stazione: il pannello dice sempre di chi è la conversazione ── */
.st-owner { display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; font-size:var(--fs-sm); color:var(--text-muted); }
.st-owner > span { display:inline-flex; align-items:center; gap:5px; }
.st-owner b { color:var(--text); font-weight:600; }
.st-owner a { color:var(--accent); font-weight:600; text-decoration:none; }

/* ── Stazione: il testo del messaggio, non l'HTML appiattito ── */
.st-msg-from { cursor:pointer; }
.st-msg-text { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text-body); line-height:1.55; }
.st-quote, .st-orig { margin-top:10px; }
.st-quote summary, .st-orig summary { cursor:pointer; font-size:var(--fs-xs); color:var(--text-faint); }
.st-quote .st-msg-text { margin-top:6px; padding-left:10px; border-left:2px solid var(--border); color:var(--text-muted); font-size:var(--fs-sm); }
.st-orig .st-frame { margin-top:6px; }

/* ── Stazione v3: una barra sola sopra l'elenco ─────────────────────────
   Agisce sulla mail selezionata e poi si passa da soli alla successiva: la
   barra resta ferma sotto il mouse. Le righe si leggono e basta. */
.st-qbar { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; padding:7px 12px; background:var(--panel-2);
           border-block:1px solid var(--border); }
.st-qseg { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm, 6px); overflow:hidden; background:var(--panel); }
.st-qseg button { border:0; background:transparent; padding:4px 8px; font-size:var(--fs-xs); color:var(--text-muted);
                  display:inline-flex; gap:5px; align-items:center; white-space:nowrap; cursor:pointer; line-height:18px; }
.st-qseg button + button { border-left:1px solid var(--border); }
.st-qseg button:hover { background:var(--panel-2); color:var(--text); }
.st-qseg button[aria-pressed="true"] { background:var(--accent-muted-bg); color:var(--text); font-weight:600; }
.st-qd { width:7px; height:7px; border-radius:50%; flex:none; }
.st-qd--te { background:var(--accent); }
.st-qd--leggere { background:var(--text-faint); }
.st-qd--loro { background:var(--info, #3B82F6); }
.st-qb { border:1px solid var(--border); background:var(--panel); border-radius:var(--radius-sm, 6px); padding:4px 7px;
         display:inline-flex; gap:5px; align-items:center; color:var(--text-muted); font-size:var(--fs-xs); cursor:pointer;
         white-space:nowrap; line-height:18px; }
.st-qb:hover { color:var(--text); border-color:var(--text-muted); }
.st-qb.is-suggest { border-color:var(--accent); color:var(--accent); font-weight:600; }
.st-qb svg { width:14px; height:14px; }
.st-qdel:hover { color:var(--danger); border-color:var(--danger); }
.st-qsep { width:1px; height:18px; background:var(--border); flex:none; }
.st-qbar button:disabled { opacity:.45; cursor:default; }
@media (max-width:1180px) { .st-qlbl { display:none; } }
@media (max-width:480px) { .st-qd { display:none; } }
.st-bulk { display:flex; gap:8px; align-items:center; padding:6px 12px; font-size:var(--fs-xs); color:var(--text-muted);
           border-bottom:1px solid var(--border-subtle); }
.st-bulk[hidden] { display:none; }
.st-bulk button { border:0; background:none; color:var(--accent); font-weight:600; padding:0; cursor:pointer; }
.st-item.is-leaving { opacity:.35; transition:opacity .15s; }
.st-item .st-row { padding-bottom:9px; }
/* Il flag «gestita» sulla riga: compare al passaggio del mouse, sopra i meta
   di destra (come le azioni rapide di una casella di posta). */
.st-item { position:relative; }
.st-done { position:absolute; right:8px; top:50%; transform:translateY(-50%);
           width:26px; height:26px; display:flex; align-items:center; justify-content:center;
           border:1px solid var(--border); border-radius:6px; background:var(--panel);
           color:var(--success, #16A34A); font-size:14px; line-height:1; cursor:pointer;
           opacity:0; transition:opacity .12s; }
.st-item:hover .st-done, .st-done:focus-visible { opacity:1; }
.st-done:hover { background:var(--pill-success-bg, rgba(22,163,74,.12));
                 border-color:var(--success, #16A34A); }
@media (prefers-reduced-motion: reduce) { .st-done { transition:none; } }
.st-own { display:block; font-size:var(--fs-xs); color:var(--text-faint); white-space:nowrap; overflow:hidden;
          text-overflow:ellipsis; margin-top:2px; }
.st-own b { color:var(--text-muted); font-weight:500; }

/* ── Stazione v3: cliente e progetto si scelgono dalla testata ── */
.st-owner { gap:8px; align-items:center; }
.st-pick { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--panel);
           border-radius:var(--radius-sm, 6px); padding:4px 9px 4px 7px; color:var(--text); cursor:pointer; max-width:100%; font:inherit; }
.st-pick:hover { border-color:var(--text-muted); }
.st-pick svg { width:14px; height:14px; color:var(--text-muted); }
.st-pick-k { font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.st-pick-v { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
.st-pick-v.is-empty { color:var(--accent); }
.st-car { color:var(--text-faint); font-size:10px; }
.st-pick-open { font-size:var(--fs-xs); color:var(--accent); text-decoration:none; }
.st-pop-slot { position:relative; }
.st-pop { position:absolute; z-index:30; top:6px; left:0; width:320px; max-width:calc(100vw - 32px); background:var(--panel);
          border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 16px 36px -14px rgba(0,0,0,.35); padding:6px; }
.st-pop-list { list-style:none; margin:6px 0 2px; padding:0; max-height:260px; overflow-y:auto; }
.st-pop-list button { width:100%; text-align:left; border:0; background:none; padding:6px 8px; border-radius:6px;
                      display:flex; justify-content:space-between; gap:8px; color:var(--text); cursor:pointer; font:inherit; }
.st-pop-list button:hover, .st-pop-list button.is-sel { background:var(--panel-2); }
.st-pop-list small { color:var(--text-faint); white-space:nowrap; }
.st-pop-list .st-pop-clear { color:var(--text-muted); }
.st-pop-none { padding:6px 8px; color:var(--text-faint); }
.st-pop-foot { display:flex; gap:8px; align-items:flex-start; margin:4px 0 0; padding:8px 8px 4px;
               border-top:1px solid var(--border-subtle); font-size:var(--fs-xs); color:var(--text-muted); }
.st-pop-foot input { width:auto; margin-top:2px; accent-color:var(--accent); }

/* ── Stazione v3: a chi rispondi, e la storia sotto la firma ── */
.st-to { padding:0; }
.st-mode { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:9px 14px 6px; }
.st-mode-l { font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint); font-weight:600; margin-right:4px; }
.st-mode-pill { position:relative; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border);
                border-radius:999px; padding:3px 11px; font-size:var(--fs-xs); color:var(--text-muted); cursor:pointer; }
.st-mode-pill input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.st-mode-pill:has(input:checked) { border-color:var(--accent); background:var(--accent-muted-bg); color:var(--text); font-weight:600; }
.st-mode-pill:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.st-rcpt { display:grid; grid-template-columns:28px minmax(0, 1fr); gap:6px 8px; padding:4px 14px 10px; align-items:center; }
.st-rcpt[hidden] { display:none; }
.st-rcpt-l { font-size:var(--fs-xs); color:var(--text-faint); font-weight:600; }
.st-ppl { display:flex; flex-wrap:wrap; gap:5px; }
.st-pp { font-size:var(--fs-xs); padding:2px 8px; border-radius:999px; background:var(--panel-2); color:var(--text); }
.st-rcpt input { width:100%; }
.st-hist { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--panel); }
.st-hist summary { padding:8px 14px; cursor:pointer; font-size:var(--fs-xs); color:var(--text-muted); }
.st-q { margin:0 14px 10px; padding:6px 12px; border-left:2px solid var(--border); color:var(--text-muted);
        font-size:var(--fs-sm); white-space:pre-wrap; overflow-wrap:anywhere; }
.st-q b { display:block; color:var(--text-faint); font-weight:600; font-size:var(--fs-xs); margin-bottom:3px; }

/* ── Stazione v3: l'avviso dopo un gesto, con «Annulla» ── */
.st-toast-slot { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60; }
.st-toast { display:flex; gap:14px; align-items:center; background:var(--text); color:var(--panel); padding:9px 14px;
            border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,.25); font-size:var(--fs-sm); max-width:calc(100vw - 32px); }
.st-toast button { background:none; border:0; color:var(--accent); font-weight:600; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.st-toast kbd { background:transparent; color:inherit; border-color:currentColor; }
@media (prefers-reduced-motion: reduce) { .st-item.is-leaving { transition:none; } }

/* ── Registrazione: com'è la riunione ────────────────────────────────────
   Tre modi, perché cambiano tutto: dove sta il microfono, se la riunione va su
   un canale suo, se il browser deve togliere l'eco. */
.rec-modes { border:0; padding:0; margin:0 0 8px; display:grid; gap:6px; }
.rec-modes legend { margin-bottom:4px; }
.rec-mode { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--border); border-radius:var(--radius-sm, 6px);
            padding:8px 10px; cursor:pointer; background:var(--panel); }
.rec-mode input { width:auto; margin-top:3px; accent-color:var(--accent); }
.rec-mode span { display:flex; flex-direction:column; }
.rec-mode b { color:var(--text); font-weight:600; }
.rec-mode small { color:var(--text-muted); font-size:var(--fs-xs); }
.rec-mode svg { width:16px; height:16px; margin-top:2px; color:var(--text-muted); flex:none; }
.rec-mode:has(input:checked) { border-color:var(--accent); background:var(--accent-muted-bg); }

/* ── Minuta: l'audio, chi parla, le conseguenze ── */
.minuta-audio { display:flex; flex-direction:column; gap:8px; padding:12px 14px; margin-bottom:12px; }
.minuta-audio audio { width:100%; }
.minuta-audio-act { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0; }
.minuta-voci, .minuta-aperti { padding:12px 14px; margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.minuta-voce { display:grid; grid-template-columns:minmax(120px, 190px) minmax(0, 1fr) auto; gap:4px 10px; align-items:center; }
.minuta-voce-l { color:var(--text); font-weight:600; font-size:var(--fs-sm); }
.minuta-voce-ai { font-size:var(--fs-xs); color:var(--pill-violet-text, #6D4BD0); background:var(--pill-violet-bg, #ECE7FB);
                  padding:1px 7px; border-radius:999px; white-space:nowrap; }
.minuta-voce-es { grid-column:2 / -1; margin:0; font-size:var(--fs-xs); color:var(--text-faint); }
@media (max-width:640px) { .minuta-voce { grid-template-columns:minmax(0, 1fr); } .minuta-voce-es { grid-column:auto; } }
.minuta-cons { display:flex; flex-direction:column; gap:6px; }
.minuta-cons-row { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--border-subtle); }
.minuta-cons-row > input[type="checkbox"] { width:auto; margin-top:4px; accent-color:var(--accent); }
.minuta-cons-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.minuta-cons-kind { font-size:var(--fs-xs); font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.minuta-cons-row.is-loro .minuta-cons-kind { color:var(--info, #2F6FB5); }
.minuta-cons-fields { display:grid; grid-template-columns:minmax(0, 1fr) 150px; gap:6px; }
@media (max-width:640px) { .minuta-cons-fields { grid-template-columns:minmax(0, 1fr); } }
.minuta-cons-prova { margin:0; font-size:var(--fs-xs); color:var(--text-faint); }
.minuta-seek { font-family:var(--font-mono, ui-monospace, monospace); font-size:var(--fs-xs); border:0; background:var(--panel-2);
               color:var(--accent); padding:0 5px; border-radius:4px; cursor:pointer; }
.minuta-cons-dec { margin:2px 0 0; padding-left:18px; font-size:var(--fs-sm); color:var(--text-muted); }
.minuta-cons-sum { margin:0; color:var(--text-muted); font-size:var(--fs-sm); }
.minuta-cons-done li.is-skip { color:var(--text-faint); text-decoration:line-through; }

/* ── Task, vista semplice: una riga per task ─────────────────────────────
   Il cerchio completa, la ✕ elimina, il titolo sta su una riga sola e si
   accorcia invece di andare a capo. Bersagli da 40px: si usa col pollice. */
.tsk-switch { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--text-muted);
              text-decoration:none; border:1px solid var(--border); border-radius:var(--radius-sm, 6px);
              padding:5px 10px; background:var(--panel); white-space:nowrap; }
.tsk-switch:hover { color:var(--text); border-color:var(--text-muted); text-decoration:none; }
.tsk-switch svg { width:14px; height:14px; }
.tsk-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px;
            flex-wrap:wrap; }
.tsk-links { display:inline-flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; }
/* Visibile solo da telefono o nell'app installata: sul desktop c'è il menu a lato. */
.solo-telefono { display:none; }
@media (max-width: 720px) { .solo-telefono { display:inline-flex; margin:0 0 10px; } }
@media all and (display-mode: standalone) { .solo-telefono { display:inline-flex; margin:0 0 10px; } }
.tsk-count { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); }
.tsk-list { list-style:none; margin:0; padding:0; background:var(--panel); border:1px solid var(--border);
            border-radius:var(--radius-lg); overflow:hidden; }
.tsk-row { display:flex; align-items:center; gap:6px; min-height:48px; padding:0 6px 0 4px;
           border-bottom:1px solid var(--border-subtle); }
.tsk-row:last-child { border-bottom:0; }
.tsk-f { display:contents; }
.tsk-title { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.tsk-check, .tsk-del { flex:none; width:40px; height:40px; display:inline-grid; place-items:center; border:0;
                       background:none; border-radius:50%; cursor:pointer; padding:0; }
.tsk-check svg { width:14px; height:14px; color:transparent; border:2px solid var(--text-faint); border-radius:50%;
                 padding:3px; box-sizing:content-box; transition:color .12s, border-color .12s, background .12s; }
.tsk-check:hover svg, .tsk-check:focus-visible svg { color:var(--ok, #1F8A5B); border-color:var(--ok, #1F8A5B); }
.tsk-check.is-done svg { color:var(--panel); background:var(--ok, #1F8A5B); border-color:var(--ok, #1F8A5B); }
.tsk-del { color:var(--text-faint); }
.tsk-del svg { width:16px; height:16px; }
.tsk-del:hover, .tsk-del:focus-visible { color:var(--danger); background:var(--panel-2); }
.tsk-row.is-done .tsk-title { color:var(--text-faint); text-decoration:line-through; }
.tsk-empty { color:var(--text-faint); padding:14px 2px; margin:0; }
.tsk-done { margin-top:14px; }
.tsk-done summary { cursor:pointer; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em;
                    color:var(--text-faint); padding:4px 0; margin-bottom:6px; }
@media (prefers-reduced-motion: reduce) { .tsk-check svg { transition:none; } }

/* Dettato del task: il microfono accanto al campo, rosso mentre ascolta. */
.task-mic { flex:none; display:inline-grid; place-items:center; }
.task-mic[hidden] { display:none; }
.task-mic svg { width:16px; height:16px; }
.task-mic.is-rec { color:#fff; background:var(--danger); border-color:var(--danger);
                   animation:tsk-rec 1.2s ease-in-out infinite; }
.task-mic.is-busy { opacity:.6; cursor:progress; }
@keyframes tsk-rec { 50% { box-shadow:0 0 0 6px rgba(220, 38, 38, .25); } }
.dettato-msg { margin:-6px 0 12px; font-size:var(--fs-sm); color:var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .task-mic.is-rec { animation:none; } }

/* Comunicazioni: ordine dell'elenco, per priorità (di base) o per data. */
.st-sort { margin-left:auto; flex:none; display:inline-flex; border:1px solid var(--border);
           border-radius:8px; overflow:hidden; }
.st-hint + .st-sort { margin-left:8px; }
/* Con il suggerimento delle bozze la testata non ci sta in una riga: va a capo. */
.st-list-head { flex-wrap:wrap; row-gap:6px; }
.st-sort a { padding:3px 9px; font-size:var(--fs-xs); color:var(--text-muted); white-space:nowrap; }
.st-sort a + a { border-left:1px solid var(--border); }
.st-sort a:hover { color:var(--text); text-decoration:none; }
.st-sort a.is-on { background:var(--panel-2); color:var(--text); font-weight:600; }

/* ---------------- Minuta: dettaglio v3 (mockup 2026-10-09) ----------------
   Una carta sola, meta su una riga, task con «+» inline, salvataggio in barra,
   audio+transcript ripiegati in fondo. */
.minuta-head2 { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0 16px; }
.minuta-head2-sub { font-size:var(--fs-sm); color:var(--text-muted); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.minuta-head2-sub .dot { color:var(--text-faint); }
.minuta-chip-soft { font-size:var(--fs-xs); background:var(--bg-input); border:0.5px solid var(--border-subtle);
  border-radius:20px; padding:2px 9px; color:var(--text-muted); white-space:nowrap; }
.minuta-head2-actions { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.minuta-meta4 { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,.9fr); gap:12px; }
@media (max-width:900px){ .minuta-meta4 { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .minuta-meta4 { grid-template-columns:1fr; } }

.minuta-hintpill { margin-top:12px; font-size:var(--fs-sm); color:var(--accent-text); background:var(--accent-bg);
  border-radius:7px; padding:6px 10px; display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; max-width:100%; }
.minuta-hintpill svg { width:14px; height:14px; flex:none; }
.minuta-hintpill form { display:inline; }
.minuta-hintpill .btn-outline { padding:3px 9px; font-size:var(--fs-xs); }

.minuta-sec { display:flex; align-items:center; gap:8px; margin:22px 0 10px; }
.minuta-sec-right { margin-left:auto; display:flex; gap:8px; align-items:center; }

.mt-list { list-style:none; margin:0 0 10px; padding:0; }
.mt-list li { display:flex; gap:8px; align-items:baseline; padding:7px 4px;
  border-bottom:1px dashed var(--border-subtle); font-size:var(--fs-sm); color:var(--text-body); }
.mt-list li:last-child { border-bottom:none; }
.mt-ck { color:var(--ok); font-weight:700; flex:none; }
.mt-due { margin-left:auto; color:var(--text-faint); font-size:var(--fs-xs); white-space:nowrap; }
.mt-addrow { display:flex; gap:8px; align-items:center; }
.mt-addrow input[type="text"] { flex:1; min-width:0; }
.mt-addrow input[type="date"] { width:150px; flex:none; color:var(--text-muted); }
.mt-plus { width:38px; height:38px; flex:0 0 38px; border-radius:var(--radius-md); border:none;
  background:var(--accent); color:#fff; font-size:19px; line-height:1; cursor:pointer; font-weight:600; padding:0; }
.mt-plus:hover { background:var(--accent-hover); }

.minuta-savebar { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:0.5px solid var(--border-subtle); margin-top:18px; padding-top:14px; }
.minuta-savebar .minuta-sep { width:1px; height:26px; background:var(--border); margin:0 4px; flex:none; }
.minuta-savebar select { max-width:240px; width:auto; color:var(--text-muted); }
.minuta-savebar .minuta-save-status { margin-left:auto; color:var(--text-faint); }

.minuta-fondo summary { cursor:pointer; font-weight:500; color:var(--text-primary);
  display:flex; align-items:center; gap:8px; font-size:var(--fs-base); }
.minuta-fondo summary svg { width:15px; height:15px; }
.minuta-fondo-act { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:14px 0 10px; }
.minuta-fondo-act audio { height:36px; flex:1; min-width:240px; }
.minuta-fondo-act form { display:inline; }

/* Scala tipografica del dettaglio: tre gradini e basta.
   Didascalie fs-xs 600 · controlli fs-base h34 · titoli di sezione fs-base 500.
   La regola base dell'app dà agli input 0.95rem: qui dentro stonava con tutto. */
.minuta-flab { display:flex; align-items:baseline; gap:2px; white-space:nowrap;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.02em; color:var(--text-muted); }
.minuta-flab .minuta-weekday { font-weight:400; color:var(--text-faint); }
.minuta-meta4 .minuta-field { gap:5px; }
.minuta-meta4 input, .minuta-meta4 select {
  font-size:var(--fs-base); height:34px; padding:6px 10px; box-sizing:border-box; }
#minuta-edit .minuta-edit-text { font-size:var(--fs-base); line-height:1.6; }
.mt-addrow input[type="text"], .mt-addrow input[type="date"] {
  font-size:var(--fs-base); height:38px; box-sizing:border-box; }
.minuta-savebar select { font-size:var(--fs-base); height:36px; box-sizing:border-box; }
.minuta-fondo .minuta-mono { font-size:var(--fs-xs); }

/* ---------------- Form: una metrica sola (armonizzazione 2026-10-10) ----------------
   Convivevano due generazioni: i form legacy di app.css (controlli 0.95rem alti,
   label 0.85rem) e quelli del design system (fs-base compatti). Queste regole a
   SOLI selettori di elemento portano la base sulla scala del sistema: qualunque
   classe esistente le scavalca, quindi le pagine già migrate non cambiano. */
input, select, textarea {
  font-size: var(--fs-base);
  padding: 7px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  color: var(--text-body);
}
label { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 4px; }
input[type="checkbox"], input[type="radio"] {
  width: auto; accent-color: var(--accent); padding: 0;
}
/* Il «Choose File» nativo del browser, vestito da .btn-outline: vale per ogni
   upload dell'app (minuta, avatar, documenti) senza toccare i template. */
input[type="file"] { border: none; background: transparent; padding: 4px 0; }
input[type="file"]::file-selector-button {
  font: inherit; font-size: var(--fs-base); line-height: 1.3;
  padding: 6px 11px; margin-right: 10px; cursor: pointer;
  background: transparent; color: var(--text-body);
  border: 0.5px solid var(--border-input); border-radius: var(--radius-sm);
}
input[type="file"]::file-selector-button:hover { border-color: var(--text-faint); }

/* ---------------- Cockpit/Calendario: header su meno righe (2026-10-10) ---------------- */
/* Cockpit: le azioni stanno nella riga del breadcrumb, la fase fra i metadati. */
.metabar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.metabar .pc-phase { margin-left:2px; }
.metabar .pc-phase-btn { padding:4px 11px; }
/* Calendario: un toolbar solo che sta su una riga — i gruppi impacchettati a
   sinistra, le azioni a destra; se proprio manca spazio, va a capo per gruppi. */
.cal-toolbar { justify-content:flex-start; }
.cal-toolbar .cal-actions { margin-left:auto; }
.cal-week { font-size:var(--fs-sm); color:var(--text-muted); font-weight:500; white-space:nowrap; align-self:center; padding-left:2px; }
.cal-date-jump { width:126px; }