/* ============================================================
   CROMA — Gestionale · 4. COMPONENTI
   Mattoni riusabili. I colori per-elemento (accento cliente,
   urgenza, tag) arrivano dalla custom property --accent settata
   inline dal JS; qui si compongono con color-mix per le tinte.
   ============================================================ */

/* ----------------------------------------------------------
   Bottoni
   ---------------------------------------------------------- */
.cg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--sm-text);
  font-weight: var(--w-medium);
  border: 1px solid transparent;
  border-radius: var(--regular-radius);
  padding: 0.5625rem 0.9375rem;
  cursor: pointer;
  transition: background var(--t-fast), filter var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.cg-btn [data-lucide] { width: 1rem; height: 1rem; }
.cg-btn--primary { background: var(--c-purple); color: var(--c-on-accent); }
.cg-btn--primary:hover { filter: brightness(1.07); }
.cg-btn--primary:active { transform: translateY(1px); }
.cg-btn--green { background: var(--c-green); color: #10241a; }
.cg-btn--green:hover { filter: brightness(1.06); }
.cg-btn--ghost { background: var(--hover); color: var(--cg-text); border-color: var(--line-strong); }
.cg-btn--ghost:hover { background: var(--hover-strong); }
.cg-btn--danger { color: var(--c-pink); background: var(--hover); border-color: var(--line-strong); }
.cg-btn--danger:hover { background: rgba(239, 120, 182, 0.12); }
.cg-btn--danger-solid { color: #2a0f1c; background: var(--c-pink); border-color: transparent; }
.cg-btn--danger-solid:hover { filter: brightness(1.06); }
.cg-btn--danger-ghost { color: rgba(var(--cg-ink), 0.6); }
.cg-btn--danger-ghost:hover { color: var(--c-pink); background: rgba(239, 120, 182, 0.12); border-color: rgba(239, 120, 182, 0.4); }
.cg-btn--icon { padding: 0.5625rem; }

.cg-iconbtn {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--cg-raised); border: 1px solid var(--line-strong);
  border-radius: var(--regular-radius); cursor: pointer;
  position: relative; color: rgba(var(--cg-ink), 0.75);
  transition: background var(--t-fast);
}
.cg-iconbtn:hover { background: var(--hover-strong); }
.cg-iconbtn [data-lucide] { width: 1.0625rem; height: 1.0625rem; }

/* — Pulsante "Nuovo" + tendina contestuale — */
.cg-addwrap { position: relative; flex: none; }
.cg-addwrap .cg-btn--primary [data-lucide]:last-child,
.cg-addwrap .cg-btn--primary svg.lucide:last-child { width: 0.9em; height: 0.9em; opacity: 0.8; }
.cg-menu-catcher { position: fixed; inset: 0; z-index: 40; }
.cg-addmenu {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 50;
  width: 17rem; padding: 0.375rem;
  background: var(--cg-surface); border: 1px solid var(--line-strong);
  border-radius: var(--medium-radius); box-shadow: var(--shadow-float, 0 1.5rem 3.75rem -1.25rem rgba(0,0,0,0.55));
  animation: cg-pop var(--t-fast) var(--ease);
}
.cg-addmenu__item {
  display: flex; align-items: center; gap: 0.625rem; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: var(--regular-radius);
  padding: 0.625rem 0.6875rem; cursor: pointer; color: var(--cg-text);
  transition: background var(--t-fast);
}
.cg-addmenu__item:hover { background: var(--hover); }
.cg-addmenu__item [data-lucide], .cg-addmenu__item svg.lucide { width: 1.125rem; height: 1.125rem; flex: none; color: var(--c-purple); }
.cg-addmenu__item span { display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; }
.cg-addmenu__item b { font-weight: var(--w-medium); font-size: var(--sm-text); }
.cg-addmenu__item small { font-size: var(--xs-text); color: var(--faint); }
.cg-iconbtn__dot {
  position: absolute; top: -0.1875rem; right: -0.1875rem;
  width: 1rem; height: 1rem; font-size: 0.625rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-orange); color: var(--c-on-accent);
  border: 0.125rem solid var(--cg-bg); border-radius: 50%;
}

/* ----------------------------------------------------------
   Superfici
   ---------------------------------------------------------- */
.cg-card {
  background: var(--cg-surface);
  border: 1px solid var(--line);
  border-radius: var(--large-radius);
  padding: var(--md-space);
}

/* ----------------------------------------------------------
   Avatar
   ---------------------------------------------------------- */
.cg-avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--xs-text);
  flex: none;
  width: var(--avatar-md);
  height: var(--avatar-md);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-ink);
  overflow: hidden;
}
.cg-avatar img,
.cg-account__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.cg-avatar--xs { width: 1.25rem; height: 1.25rem; font-size: 0.5625rem; }
.cg-avatar--sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: 0.625rem; }
.cg-avatar--lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: var(--md-text); }
.cg-stack { display: flex; }
.cg-stack .cg-avatar { margin-right: -0.4375rem; border: 1.5px solid var(--cg-surface); }

/* ----------------------------------------------------------
   Tag, pill, dot, barra di avanzamento
   ---------------------------------------------------------- */
.cg-tag {
  font-size: var(--xs-text);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5625rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--small-radius);
  color: rgba(var(--cg-ink), 0.74);
  white-space: nowrap;
}
.cg-tag__dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--accent); }

.cg-pill {
  font-size: var(--xs-text);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.625rem;
  border-radius: var(--small-radius);
  white-space: nowrap;
  width: fit-content;
}
/* pill colorata: usa --accent per testo e tinta di fondo */
.cg-pill--accent { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.cg-pill--accent .cg-dot { background: var(--accent); }
.cg-pill--neutral { background: var(--hover); color: rgba(var(--cg-ink), 0.82); }

.cg-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; flex: none; background: var(--accent); }
.cg-dot--lg { width: 0.5rem; height: 0.5rem; }

.cg-bar {
  flex: 1;
  height: 0.375rem;
  background: rgba(var(--cg-ink), 0.08);
  border-radius: 0.25rem;
  overflow: hidden;
}
.cg-bar__fill { height: 100%; border-radius: 0.25rem; background: var(--accent); width: 0%; }

/* ----------------------------------------------------------
   Campi form
   ---------------------------------------------------------- */
.cg-input, .cg-textarea, .cg-select {
  width: 100%;
  font-size: var(--regular-text);
  color: var(--cg-text);
  background: var(--cg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--medium-radius);
  padding: 0.625rem 0.8125rem;
  outline: none;
}
.cg-textarea { resize: vertical; min-height: 2.875rem; }
.cg-select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.375rem;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%239a96a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: calc(100% - 0.875rem) 50%;
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
}
.cg-input:focus, .cg-textarea:focus, .cg-select:focus { border-color: rgba(151, 136, 255, 0.6); }
.cg-label { font-size: var(--xs-text); color: rgba(var(--cg-ink), 0.46); }
.cg-mention {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: var(--small-radius);
  padding: 0.0625rem 0.3125rem;
  background: color-mix(in srgb, var(--accent, var(--c-purple)) 13%, transparent);
  color: color-mix(in srgb, var(--accent, var(--c-purple)) 82%, var(--cg-text));
  font-weight: var(--w-medium);
}
.cg-mention-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: inherit;
  font-size: inherit;
  font-weight: var(--w-semibold);
  line-height: 1;
}
.cg-mention-menu {
  position: fixed;
  z-index: 90;
  padding: 0.1875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--medium-radius);
  background: var(--cg-raised);
  box-shadow: var(--shadow-pop);
}
.cg-mention-menu__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.4375rem;
  border: 0;
  border-radius: var(--regular-radius);
  background: transparent;
  color: var(--cg-text);
  text-align: left;
  cursor: pointer;
}
.cg-mention-menu__item:hover,
.cg-mention-menu__item.is-active { background: var(--hover); }
.cg-mention-menu__name {
  min-width: 0;
  font-size: var(--sm-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   KANBAN
   ---------------------------------------------------------- */
.cg-board {
  display: flex;
  gap: var(--regular-space);
  overflow-x: auto;
  padding-bottom: var(--sm-space);
  align-items: flex-start;
  -webkit-overflow-scrolling: touch;
}
.cg-kcol {
  position: relative;
  width: 20.125rem;
  flex: none;
  background: var(--cg-col);
  border: 1px solid var(--line-soft);
  border-radius: 0.8125rem;
  padding: 0.875rem;
}
.cg-kcol.cg-kcol--scrollable:not(.is-at-bottom)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.75rem;
  z-index: 2;
  height: 3.25rem;
  background: linear-gradient(to top, var(--cg-sidebar) 0%, color-mix(in srgb, var(--cg-sidebar) 78%, transparent) 42%, transparent 100%);
  pointer-events: none;
}
.cg-kcol__head { display: flex; align-items: center; gap: var(--xs-space); margin-bottom: 0.875rem; padding: 0 0.1875rem; }
.cg-kcol__name { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; font: inherit; font-size: var(--sm-text); font-weight: var(--w-medium); color: rgba(var(--cg-ink), 0.82); cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-kcol__name:hover { color: var(--cg-text); }
.cg-kcol__name-input { flex: 1; min-width: 0; height: 1.75rem; padding: 0 0.375rem; border: 1px solid var(--line-strong); border-radius: var(--small-radius); background: var(--cg-raised); color: var(--cg-text); font: inherit; font-size: var(--sm-text); font-weight: var(--w-medium); outline: none; }
.cg-kcol__name-input:focus { border-color: rgba(151, 136, 255, 0.75); box-shadow: 0 0 0 2px rgba(151, 136, 255, 0.16); }
.cg-kcol__count { font-size: var(--xs-text); color: var(--faint); }
.cg-kcol__del {
  width: 1.375rem; height: 1.375rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--faint);
  border-radius: var(--small-radius); cursor: pointer; opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.cg-kcol:hover .cg-kcol__del { opacity: 1; }
.cg-kcol__del:hover { background: var(--hover); color: var(--c-pink); }
.cg-kcol__del [data-lucide] { width: 0.8125rem; height: 0.8125rem; }
.cg-kcol__add {
  width: 1.375rem; height: 1.375rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--hover); border: none; border-radius: var(--small-radius);
  cursor: pointer; color: rgba(var(--cg-ink), 0.7); transition: background var(--t-fast);
}
.cg-kcol__add:hover { background: rgba(151, 136, 255, 0.25); }
.cg-kcol__add [data-lucide] { width: 0.8125rem; height: 0.8125rem; }

.cg-kcol__body {
  display: flex; flex-direction: column; gap: var(--sm-space);
  min-height: 3.75rem;
  max-height: min(36rem, calc(100vh - 20rem));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  margin-right: -0.875rem;
  padding-right: 0.325rem;
  border-radius: 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: background var(--t-fast), scrollbar-color var(--t-fast);
}
.cg-kcol__body::-webkit-scrollbar { width: 0.375rem; height: 0.375rem; }
.cg-kcol__body::-webkit-scrollbar-track { background: transparent; }
.cg-kcol__body::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--pill-radius);
}
.cg-kcol__body:hover,
.cg-kcol__body:focus-within,
.cg-kcol__body.is-scrolling {
  scrollbar-color: rgba(var(--cg-ink), 0.2) transparent;
}
.cg-kcol__body:hover::-webkit-scrollbar-thumb,
.cg-kcol__body:focus-within::-webkit-scrollbar-thumb,
.cg-kcol__body.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(var(--cg-ink), 0.2);
}
.cg-kcol__body.cg-col-over {
  background: rgba(151, 136, 255, 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(151, 136, 255, 0.5);
}

.cg-kcard {
  background: var(--cg-card);
  border: 1px solid var(--line);
  border-radius: 0.6875rem;
  padding: 0.875rem;
  cursor: grab;
  transform-origin: center;
  will-change: transform;
  transition: border-color var(--t-fast), transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow var(--t-fast), opacity var(--t-fast), background var(--t-fast);
}
.cg-kcard:hover { border-color: rgba(var(--cg-ink), 0.22); }
.cg-kcard:active { cursor: grabbing; }
.cg-kcard.cg-dragging {
  opacity: 0.22;
  transform: scale(0.985);
  border-color: rgba(151, 136, 255, 0.38);
  border-style: dashed;
  background: color-mix(in srgb, var(--cg-card) 48%, transparent);
  box-shadow: inset 0 0 0 1px rgba(151, 136, 255, 0.12);
  cursor: grabbing;
}
.cg-kcard.cg-dropped { animation: cg-droppulse 0.5s var(--ease); border-color: rgba(151, 136, 255, 0.6); }
.cg-kcard.cg-dnd-moving,
.cg-ph.cg-dnd-moving {
  pointer-events: none;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cg-kcard__top { display: flex; align-items: flex-start; gap: var(--xs-space); }
.cg-kcard__title {
  font-size: var(--sm-text);
  line-height: var(--leading-snug);
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cg-kcard__flags { display: flex; gap: 0.375rem; margin-top: var(--xs-space); flex-wrap: wrap; }
.cg-flag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: var(--xxs-text); border-radius: var(--small-radius); padding: 0.125rem 0.4375rem;
}
.cg-flag [data-lucide] { width: 0.6875rem; height: 0.6875rem; }
.cg-flag--block { color: var(--c-pink); background: rgba(239, 120, 182, 0.14); }
.cg-flag--late { color: var(--c-orange); background: rgba(255, 136, 0, 0.14); }
.cg-kcard__foot {
  display: flex; align-items: center; gap: 0.5625rem;
  margin-top: 0.6875rem; padding-top: 0.625rem; border-top: 1px solid var(--line-soft);
}
.cg-meta { display: inline-flex; align-items: center; gap: 0.1875rem; font-size: var(--xs-text); color: var(--faint); }
.cg-meta [data-lucide] { width: 0.75rem; height: 0.75rem; }
.cg-kcard__due { font-size: var(--xs-text); color: var(--accent, var(--faint)); }

/* task completata: più scura/recessa, nome barrato (resta sulla board) */
.cg-kcard.is-completed { background: transparent; border-style: dashed; border-color: var(--line); opacity: 0.5; }
.cg-kcard.is-completed:hover { opacity: 0.75; }
.cg-kcard.is-completed .cg-kcard__title { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(var(--cg-ink), 0.3); }
.cg-list__row.is-completed .cg-list__title { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(var(--cg-ink), 0.25); }

/* placeholder di rilascio */
.cg-ph {
  height: 2.875rem;
  border-radius: 0.6875rem;
  border: none;
  background: linear-gradient(135deg, rgba(151, 136, 255, 0.14), rgba(63, 217, 255, 0.08));
  box-shadow: inset 0 0 0 1px rgba(151, 136, 255, 0.22), inset 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
  opacity: 0.9;
  transform-origin: center;
  will-change: transform;
  transition: height 150ms cubic-bezier(0.22, 1, 0.36, 1), margin 150ms cubic-bezier(0.22, 1, 0.36, 1), opacity var(--t-fast), transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .cg-kcard,
  .cg-kcard.cg-dnd-moving,
  .cg-ph,
  .cg-ph.cg-dnd-moving {
    transition: none;
  }
}

.cg-addcol {
  width: 10.75rem; flex: none; align-self: flex-start;
  font-size: var(--sm-text); color: var(--faint);
  background: transparent; border: 1px dashed var(--line-strong);
  border-radius: 0.75rem; padding: 0.875rem; cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.cg-addcol:hover { border-color: rgba(var(--cg-ink), 0.4); color: var(--cg-text); }

/* quick-add in coda alla colonna kanban */
.cg-quickadd {
  position: relative;
  z-index: 3;
  display: flex; align-items: center; gap: 0.375rem;
  margin-top: 0.875rem; padding: 0 0.0625rem;
  background: var(--cg-col);
}
.cg-quickadd__input {
  flex: 1; min-width: 0;
  min-height: 2rem;
  background: var(--cg-col);
  border: 1px solid transparent;
  border-radius: 0.6875rem;
  padding: 0.4375rem 0.5625rem;
  font: inherit; font-size: var(--sm-text);
  line-height: var(--leading-snug);
  color: var(--cg-text);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cg-quickadd__input::placeholder { color: var(--faint); }
.cg-quickadd__input:hover { background: var(--hover); }
.cg-quickadd__input:focus {
  outline: none;
  background: var(--cg-card);
  border-color: rgba(151, 136, 255, 0.5);
}
.cg-quickadd__btn {
  width: 1.75rem; height: 1.75rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--hover); border: none;
  border-radius: 0.5rem;
  color: var(--faint); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.cg-quickadd:focus-within .cg-quickadd__btn { background: var(--c-purple); color: var(--c-on-accent); }
.cg-quickadd__btn:hover { transform: translateY(-1px); }
.cg-quickadd__btn [data-lucide] { width: 0.875rem; height: 0.875rem; }

/* switch di visualizzazione board (Kanban / Schede) */
.cg-bswitch {
  display: inline-flex;
  flex: none;
  gap: 0.125rem;
  padding: 0.125rem;
  background: rgba(var(--cg-ink), 0.035);
  border: 1px solid var(--line-soft);
  border-radius: var(--regular-radius);
}
.cg-bswitch__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  padding: 0.375rem 0.5rem; border-radius: var(--small-radius);
  font-size: var(--xs-text); font-weight: var(--w-medium); color: var(--muted);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.cg-bswitch__btn:hover { background: var(--hover); color: var(--cg-text); }
.cg-bswitch__btn.is-active { background: rgba(151, 136, 255, 0.16); color: var(--c-purple); }
.cg-bswitch__btn:focus-visible {
  outline: 1px solid rgba(151, 136, 255, 0.65);
  outline-offset: -1px;
}
.cg-kanban-head .cg-bswitch__btn [data-lucide] { width: 0.875rem; height: 0.875rem; color: currentColor; }

/* vista a schede: colonne impilate in bande orizzontali */
.cg-rows { display: flex; flex-direction: column; gap: 0.75rem; }
.cg-rowcol { background: var(--cg-col); border: 1px solid var(--line-soft); border-radius: 0.8125rem; padding: 0.625rem 0.875rem 0.875rem; }
.cg-rowcol__head { display: flex; align-items: center; gap: var(--xs-space); margin-bottom: 0.75rem; padding: 0.125rem 0.0625rem 0; }
.cg-rowcol__head .cg-kcol__name { flex: none; }
.cg-rowcol__grid {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem; min-height: 2.75rem;
  border-radius: var(--regular-radius); transition: background var(--t-fast);
}
.cg-rowcol__grid.cg-col-over { background: rgba(151, 136, 255, 0.08); box-shadow: inset 0 0 0 1.5px rgba(151, 136, 255, 0.5); }
.cg-rowcol__grid--empty { align-items: stretch; }
.cg-rowcol__empty { font-size: var(--sm-text); color: var(--faint); padding: 0.5rem 0.1875rem; }
.cg-addcol--row { width: 100%; padding: 0.6875rem; }
.cg-quickadd--row {
  margin-top: 0.625rem;
  padding: 0.125rem 0.1875rem 0;
}
.cg-rows .cg-kcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem;
  padding: 0.6875rem 0.8125rem;
}
.cg-rows .cg-kcard__top { align-items: center; min-width: 0; }
.cg-rows .cg-kcard__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.cg-rows .cg-kcard__flags {
  grid-column: 1 / -1;
  margin-top: 0;
}
.cg-rows .cg-kcard__foot {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  justify-content: flex-end;
  min-width: 11rem;
}
.cg-rows .cg-kcard__foot--solo {
  min-width: 0;
}
.cg-rows .cg-kcard__foot--solo .cg-spacer {
  display: none;
}

/* ----------------------------------------------------------
   OVERLAY: pannello laterale, modale, toast
   ---------------------------------------------------------- */
.cg-overlay { position: fixed; inset: 0; z-index: 40; }
.cg-overlay--modal { display: flex; align-items: center; justify-content: center; z-index: 50; }
.cg-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); animation: cg-fade var(--t-mid) var(--ease); }
.cg-scrim--strong { background: rgba(0, 0, 0, 0.55); }
.cg-overlay--task .cg-scrim { background: rgba(0, 0, 0, 0.6); }

.cg-panel {
  position: absolute; top: 0; right: 0; height: 100dvh;
  width: 27.5rem; max-width: 92vw;
  background: var(--cg-col); border-left: 1px solid var(--line-strong);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-panel);
  animation: cg-slide var(--t-slow) var(--ease);
}
.cg-overlay--task .cg-panel { width: 36vw; }
.cg-panel__head, .cg-panel__foot {
  display: flex; align-items: center; gap: var(--sm-space);
  padding: var(--regular-space) var(--md-space);
}
.cg-panel__head { border-bottom: 1px solid var(--line); }
.cg-panel__foot { border-top: 1px solid var(--line); gap: 0.5625rem; }
.cg-panel__body { flex: 1; overflow-y: auto; padding: var(--md-space); }
.cg-panel__title { font-size: var(--xl-text); font-weight: var(--w-medium); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.cg-title-edit {
  width: 100%;
  min-height: 2.25rem;
  height: auto;
  padding: 0.125rem 0.25rem;
  margin: -0.125rem -0.25rem 0;
  color: rgb(var(--cg-ink));
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--small-radius);
  resize: none;
  overflow: hidden;
}
.cg-title-edit:focus {
  outline: none;
  background: var(--hover);
  border-color: var(--line-strong);
}
.cg-panel__banner {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1rem; padding: 0.625rem 0.875rem;
  border-radius: var(--medium-radius); font-size: var(--sm-text); font-weight: var(--w-medium);
}
.cg-panel__banner [data-lucide] { width: 1rem; height: 1rem; }
.cg-panel__banner--done { background: rgba(54, 244, 164, 0.14); color: var(--ink-green); }
.cg-panel__banner--arch { background: var(--hover-strong); color: var(--muted); }
.cg-panel__client { display: flex; align-items: center; gap: var(--xs-space); margin-top: 0.4375rem; font-size: var(--sm-text); color: rgba(var(--cg-ink), 0.46); }
.cg-panel__client-link { display: inline-flex; align-items: center; gap: var(--xs-space); min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.cg-panel__client-link:hover { color: var(--cg-text); text-decoration: underline; text-underline-offset: 0.1875rem; }
.cg-panel__client [data-lucide] { width: 0.875rem; height: 0.875rem; }
.cg-close {
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--hover); border: 1px solid var(--line-strong);
  border-radius: var(--regular-radius); cursor: pointer; color: var(--cg-text);
}
.cg-close:hover { background: var(--hover-strong); }
.cg-close [data-lucide] { width: 1rem; height: 1rem; }

.cg-colorline {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.cg-colorline__input {
  width: 2.75rem;
  height: 2.25rem;
  padding: 0.125rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--small-radius);
  background: var(--cg-raised);
  cursor: pointer;
}
.cg-colorline__value {
  font-size: var(--sm-text);
  color: var(--muted);
}

.cg-metagrid {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 1rem;
  margin-top: var(--regular-space); font-size: var(--sm-text); align-items: center;
}
.cg-metagrid dt { color: rgba(var(--cg-ink), 0.46); }
.cg-metagrid dd { margin: 0; }
.cg-block-label { font-size: var(--xs-text); color: var(--faint); margin-bottom: 0.375rem; }
.cg-desc { font-size: var(--sm-text); line-height: var(--leading-normal); color: rgba(var(--cg-ink), 0.84); background: var(--cg-raised); border: 1px solid var(--line); border-radius: var(--medium-radius); padding: 0.75rem 0.875rem; }

.cg-checklist { display: flex; flex-direction: column; gap: 0.125rem; }
.cg-check { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; padding: 0.25rem 0; }
.cg-check.is-check-dragging {
  opacity: 0.45;
}
.cg-check-ph {
  min-height: 2rem;
  border: 1px dashed rgba(151, 136, 255, 0.55);
  border-radius: var(--small-radius);
  background: rgba(151, 136, 255, 0.08);
}
.cg-check__grip {
  width: 1.25rem; height: 1.25rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--small-radius);
  background: transparent; color: var(--faint);
  cursor: grab; opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.cg-check:hover .cg-check__grip,
.cg-check__grip:focus-visible { opacity: 1; }
.cg-check__grip:hover { background: var(--hover); color: var(--c-purple); }
.cg-check__grip:active { cursor: grabbing; }
.cg-check__grip [data-lucide] { width: 0.875rem; height: 0.875rem; }
.cg-check__box {
  width: 1.125rem; height: 1.125rem; flex: none;
  border: 1.5px solid var(--line-strong); border-radius: var(--small-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; color: transparent;
}
.cg-check.is-done .cg-check__box { background: var(--c-green); border-color: var(--c-green); color: var(--c-on-accent); }
.cg-check__box { cursor: pointer; }
.cg-check__txt {
  flex: 1; min-width: 0;
  border: 1px solid transparent; border-radius: var(--small-radius);
  background: transparent; color: rgb(var(--cg-ink));
  font: inherit; font-size: var(--sm-text);
  padding: 0.25rem 0.375rem;
  cursor: text;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.cg-check__txt:hover { background: var(--hover); }
.cg-check__txt:focus {
  outline: none;
  background: var(--cg-card);
  border-color: rgba(151, 136, 255, 0.5);
}
.cg-check.is-done .cg-check__txt { color: var(--faint); text-decoration: line-through; }
.cg-check__del {
  flex: none; width: 1.25rem; height: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--faint);
  border-radius: var(--small-radius); cursor: pointer; opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.cg-check:hover .cg-check__del { opacity: 1; }
.cg-check__del:hover { background: var(--hover); color: var(--c-pink); }
.cg-check__del [data-lucide] { width: 0.8125rem; height: 0.8125rem; }

/* aggiunta voce di checklist nel pannello dettaglio */
.cg-checkadd { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; }
.cg-checkadd__input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 1px solid var(--line); border-radius: var(--small-radius);
  padding: 0.4375rem 0.625rem;
  color: rgb(var(--cg-ink)); font: inherit; font-size: var(--sm-text);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cg-checkadd__input::placeholder { color: var(--faint); }
.cg-checkadd__input:hover { background: var(--hover); }
.cg-checkadd__input:focus { outline: none; background: var(--cg-card); border-color: rgba(151, 136, 255, 0.5); }
.cg-checkadd__btn {
  width: 1.75rem; height: 1.75rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--small-radius);
  background: var(--cg-raised); color: rgb(var(--cg-ink)); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.cg-checkadd:focus-within .cg-checkadd__btn { background: var(--c-purple); color: var(--c-on-accent); }
.cg-checkadd__btn:hover { transform: translateY(-1px); }
.cg-checkadd__btn [data-lucide] { width: 0.875rem; height: 0.875rem; }

.cg-modal {
  position: relative; width: 29.375rem; max-width: 92vw;
  background: var(--cg-surface); border: 1px solid var(--line-strong);
  border-radius: var(--xl-radius); box-shadow: var(--shadow-modal);
  padding: 1.375rem 1.5rem; animation: cg-pop var(--t-mid) var(--ease);
}
.cg-modal__head { display: flex; align-items: center; gap: var(--sm-space); margin-bottom: var(--regular-space); }
.cg-modal__head [data-lucide] { width: 1.1875rem; height: 1.1875rem; color: var(--c-purple); }
.cg-modal__title { font-size: var(--lg-text); font-weight: var(--w-medium); flex: 1; }
.cg-modal__body { max-height: 68dvh; overflow-y: auto; margin: 0 -0.25rem; padding: 0 0.25rem; }
.cg-field { display: flex; flex-direction: column; gap: 0.375rem; }
.cg-field + .cg-field, .cg-field-row { margin-top: 0.875rem; }
.cg-dupcheck { margin-top: 0.5rem; border: 1px solid var(--line-soft); border-radius: var(--small-radius); background: rgba(var(--cg-ink), 0.035); overflow: hidden; }
.cg-dupcheck__label { padding: 0.5rem 0.625rem; font-size: var(--xs-text); color: var(--faint); border-bottom: 1px solid var(--line-soft); }
.cg-dupcheck__item { width: 100%; display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 0.625rem; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; color: var(--cg-text); text-align: left; cursor: pointer; }
.cg-dupcheck__item:last-child { border-bottom: 0; }
.cg-dupcheck__item:hover { background: rgba(var(--cg-ink), 0.06); }
.cg-dupcheck__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.125rem; }
.cg-dupcheck__name, .cg-dupcheck__project { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-dupcheck__name { font-size: var(--sm-text); font-weight: var(--w-medium); }
.cg-dupcheck__project { font-size: var(--xs-text); color: var(--muted); }
.cg-dupcheck__state { flex: 0 0 auto; font-size: var(--xs-text); color: var(--faint); }
.cg-logo--sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: 0.6875rem; }
.cg-field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cg-modal__actions { display: flex; gap: 0.5625rem; margin-top: 1.375rem; justify-content: flex-end; }

/* swatch colore (modale nuovo utente) */
.cg-swatches { display: flex; gap: 0.5625rem; flex-wrap: wrap; }
.cg-swatch {
  width: 1.875rem; height: 1.875rem; flex: none;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  box-shadow: 0 0 0 1px var(--line-strong);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.cg-swatch:hover { transform: translateY(-1px); }
.cg-swatch.is-active { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--cg-surface), 0 0 0 4px var(--accent); }

/* color picker (modale nuovo utente) */
.cg-colorpick { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.cg-colorpick__input {
  width: 2.25rem; height: 2.25rem; flex: none; padding: 0;
  border: none; background: none; cursor: pointer; border-radius: 50%;
}
.cg-colorpick__input::-webkit-color-swatch-wrapper { padding: 0; }
.cg-colorpick__input::-webkit-color-swatch { border: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.cg-colorpick__input::-moz-color-swatch { border: none; border-radius: 50%; }
.cg-colorpick__hex {
  font-size: var(--sm-text); color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  min-width: 4.5rem;
}
.cg-swatches--presets { margin-left: auto; }

/* Modale di conferma (eliminazione) */
.cg-modal--confirm { width: 26rem; text-align: center; }
.cg-confirm__icon {
  width: 3rem; height: 3rem; margin: 0 auto 0.875rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(239, 120, 182, 0.14); color: var(--c-pink);
}
.cg-confirm__icon svg.lucide, .cg-confirm__icon [data-lucide] { width: 1.5rem; height: 1.5rem; }
.cg-confirm__title { font-size: var(--lg-text); font-weight: var(--w-medium); }
.cg-confirm__text { margin-top: 0.5rem; font-size: var(--sm-text); color: rgba(var(--cg-ink), 0.62); line-height: var(--leading-normal); }
.cg-confirm__actions { justify-content: center; margin-top: 1.5rem; }

/* Selezione multipla assegnatari */
.cg-assignees { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.cg-achip {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.25rem 0.625rem 0.25rem 0.3125rem;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--pill-radius); cursor: pointer;
  font-size: var(--sm-text); color: rgba(var(--cg-ink), 0.72);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.cg-achip:hover { background: var(--hover); }
.cg-achip__check { display: none; width: 0.875rem; height: 0.875rem; color: var(--c-purple); }
.cg-achip__check svg.lucide { width: 100%; height: 100%; }
.cg-achip.is-selected { border-color: var(--c-purple); background: var(--accent-soft); color: var(--cg-text); }
.cg-achip.is-selected .cg-achip__check { display: inline-flex; }

/* Dropdown multi-select assegnatari (compatto) */
.cg-msel { position: relative; }
.cg-msel__trigger {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  min-height: 2.375rem; padding: 0.375rem 0.625rem;
  background: var(--cg-raised); border: 1px solid var(--line-strong);
  border-radius: var(--medium-radius); color: rgb(var(--cg-ink));
  cursor: pointer; text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cg-msel__trigger:hover { background: var(--hover); }
.cg-msel--disabled .cg-msel__trigger {
  cursor: not-allowed;
  opacity: 0.58;
  color: var(--muted);
}
.cg-msel--disabled .cg-msel__trigger:hover { background: var(--cg-raised); }
.cg-msel--disabled .cg-msel__trigger [data-lucide] { width: 0.9375rem; height: 0.9375rem; color: var(--faint); }
.cg-msel.is-open .cg-msel__trigger { border-color: rgba(151, 136, 255, 0.55); background: var(--cg-card); }
.cg-msel__avatars { display: inline-flex; flex: none; padding-left: 0.125rem; }
.cg-msel__avatars .cg-avatar { margin-right: -0.4375rem; box-shadow: 0 0 0 2px var(--cg-raised); }
.cg-msel.is-open .cg-msel__avatars .cg-avatar { box-shadow: 0 0 0 2px var(--cg-card); }
.cg-msel__more {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--avatar-sm, 1.5rem); padding: 0 0.3125rem 0 0.5rem;
  font-size: var(--xxs-text); color: var(--muted);
}
.cg-msel__label { flex: 1; min-width: 0; font-size: var(--sm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-msel__label--empty { color: var(--faint); }
.cg-msel__chev { flex: none; display: inline-flex; color: var(--muted); transition: transform var(--t-fast) var(--ease); }
.cg-msel__chev [data-lucide] { width: 1rem; height: 1rem; }
.cg-msel.is-open .cg-msel__chev { transform: rotate(180deg); }

.cg-msel__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.375rem); z-index: 60;
  max-height: 15.5rem; overflow-y: auto; padding: 0.3125rem;
  background: var(--cg-surface); border: 1px solid var(--line-strong);
  border-radius: var(--medium-radius); box-shadow: var(--shadow-pop);
  animation: cg-pop var(--t-fast) var(--ease);
}
.cg-msel__opt {
  display: flex; align-items: center; gap: 0.5625rem; width: 100%;
  padding: 0.4375rem 0.5rem; border: none; background: transparent;
  border-radius: var(--small-radius); cursor: pointer; text-align: left;
  color: rgb(var(--cg-ink));
  transition: background var(--t-fast);
}
.cg-msel__opt:hover { background: var(--hover); }
.cg-msel__optname { flex: none; font-size: var(--sm-text); }
.cg-msel__optrole { flex: 1; min-width: 0; font-size: var(--xs-text); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-msel__check { flex: none; width: 1rem; height: 1rem; color: var(--c-purple); opacity: 0; transition: opacity var(--t-fast); }
.cg-msel__check [data-lucide] { width: 100%; height: 100%; }
.cg-msel__opt.is-on { background: var(--accent-soft); }
.cg-msel__opt.is-on .cg-msel__check { opacity: 1; }
.cg-msel--single .cg-msel__check [data-lucide] { width: 0.875rem; height: 0.875rem; }

/* Segmented control a piena larghezza (urgenza) */
.cg-segment--full { display: flex; width: 100%; }
.cg-segment--full .cg-segment__btn { flex: 1; text-align: center; }

/* Date input nativo (l'icona segue color-scheme del tema) */
.cg-input--date { cursor: pointer; }
.cg-input--date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; }
.cg-input--date:hover::-webkit-calendar-picker-indicator { opacity: 0.9; }

/* ----------------------------------------------------------
   PANNELLO DETTAGLIO · campi e spaziature
   ---------------------------------------------------------- */
.cg-panel__meta { margin-top: var(--regular-space); padding: var(--sm-space) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.cg-panel__field { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: 0.75rem; min-height: 2.125rem; }
.cg-panel__field .cg-block-label { margin-bottom: 0; }
.cg-panel__fieldval { font-size: var(--sm-text); color: rgba(var(--cg-ink), 0.84); }

/* — Meta task compatta ma con affordance chiare — */
.cg-pmeta__row--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--md-space); align-items: start; }
.cg-pmeta__row--recurrence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--md-space); align-items: start; margin-top: 0.75rem; }
.cg-pmeta__field { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; min-width: 0; }
.cg-pmeta__label { font-size: var(--xs-text); color: var(--faint); white-space: nowrap; }
.cg-rec__select { width: 100%; min-height: 2rem; padding: 0.3125rem 0.5rem; background: var(--cg-raised); border-color: var(--line-strong); }
.cg-rec__inline { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-width: 0; }
.cg-rec__interval { width: 4.5rem; min-height: 2rem; padding: 0.3125rem 0.5rem; background: var(--cg-raised); border-color: var(--line-strong); }
.cg-rec__weekdays {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 2rem; padding: 0.3125rem 0.5rem;
  border: 1px solid var(--line-strong); border-radius: var(--medium-radius);
  background: var(--cg-raised); color: rgba(var(--cg-ink), 0.76);
  font-size: var(--xs-text); white-space: nowrap; cursor: pointer;
}
.cg-rec__weekdays input { accent-color: var(--c-purple); }
.cg-rec__weekdays:has(input:disabled) { opacity: 0.5; cursor: default; }
.cg-rec__hint {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: 0.375rem;
  color: var(--muted); font-size: var(--xs-text);
}
.cg-rec__hint [data-lucide] { width: 0.875rem; height: 0.875rem; color: var(--c-purple); }

/* assegnatari nel head: avatar + bottone smile che apre il select */
.cg-headassign { position: relative; display: flex; align-items: center; gap: 0.5rem; }
.cg-headassign__avatars .cg-avatar { box-shadow: 0 0 0 2px var(--cg-col); border-color: var(--cg-col); }
.cg-headassign__empty { font-size: var(--sm-text); color: var(--faint); }
.cg-headassign__add {
  width: 1.75rem; height: 1.75rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px dashed var(--line-strong);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cg-headassign__add:hover { background: var(--accent-soft); border-style: solid; border-color: rgba(151, 136, 255, 0.4); color: var(--c-purple); }
.cg-headassign__add [data-lucide], .cg-headassign__add svg.lucide { width: 1rem; height: 1rem; }
.cg-headassign.is-open .cg-headassign__add { background: var(--accent-soft); border-style: solid; border-color: rgba(151, 136, 255, 0.45); color: var(--c-purple); }
.cg-headassign__menu { left: 0; right: auto; min-width: 17rem; }

/* campo data: bordo + fondo riconoscibili, icona calendario visibile */
.cg-pmeta__date { width: auto; min-width: 8.75rem; padding: 0.3125rem 0.5625rem; font-size: var(--sm-text); background: var(--cg-raised); border: 1px solid var(--line-strong); border-radius: var(--medium-radius); color: var(--cg-text); }
.cg-pmeta__date:hover { border-color: rgba(var(--cg-ink), 0.22); }
.cg-pmeta__date::-webkit-calendar-picker-indicator { opacity: 0.7; }

/* urgenza: segmented compatto con track visibile = chiaramente un selettore */
.cg-urgdots { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.1875rem; background: var(--cg-raised); border: 1px solid var(--line-strong); border-radius: var(--pill-radius); }
.cg-urgdot { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 1.5rem; justify-content: center; padding: 0.25rem; border: none; background: transparent; border-radius: var(--pill-radius); cursor: pointer; transition: background var(--t-fast); }
.cg-urgdot__dot { width: 0.625rem; height: 0.625rem; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 transparent; transition: box-shadow var(--t-fast); }
.cg-urgdot--unset .cg-urgdot__dot { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); }
.cg-urgdot__txt { display: none; font-size: var(--xs-text); font-weight: var(--w-medium); color: var(--cg-text); }
.cg-urgdot:hover { background: var(--hover-strong); }
.cg-urgdot.is-active { min-width: 0; padding: 0.25rem 0.5625rem 0.25rem 0.4375rem; background: color-mix(in srgb, var(--accent) 24%, transparent); }
.cg-urgdot.is-active .cg-urgdot__dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.cg-urgdot.is-active .cg-urgdot__txt { display: inline; }
.cg-urgdot:focus-visible { outline: 1px solid rgba(151, 136, 255, 0.65); outline-offset: 1px; }
.cg-panel__section { margin-top: 1.625rem; }
.cg-panel__tags { display: flex; gap: 0.45rem; margin-top: 1rem; flex-wrap: wrap; }

/* controlli compatti nel blocco meta */
.cg-panel__meta .cg-msel__trigger { min-height: 2rem; padding: 0.25rem 0.5rem; }
.cg-panel__meta .cg-segment--sm { padding: 0.125rem; }
.cg-panel__meta .cg-segment--sm .cg-segment__btn { padding: 0.3125rem 0.375rem; font-size: var(--xs-text); }
.cg-panel__meta .cg-input--date { padding-top: 0.3125rem; padding-bottom: 0.3125rem; }

/* segmento urgenza compatto */
.cg-segment--sm { background: var(--cg-raised); border: 1px solid var(--line); border-radius: var(--medium-radius); padding: 0.1875rem; }
.cg-segment--sm .cg-segment__btn { padding: 0.4375rem 0.5rem; font-size: var(--xs-text); }

/* descrizione editabile + thread commenti */
.cg-desc-edit { width: 100%; min-height: 4.75rem; resize: vertical; line-height: var(--leading-normal); }
.cg-desc-view {
  min-height: 4.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--medium-radius);
  background: var(--cg-raised);
  color: rgba(var(--cg-ink), 0.86);
  font-size: var(--sm-text);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.cg-desc-view:hover { border-color: rgba(151, 136, 255, 0.45); background: var(--cg-card); }
.cg-taskdetail .cg-desc-edit,
.cg-taskdetail .cg-desc-view {
  min-height: 8rem;
}
.cg-desc-view a {
  color: var(--c-cyan);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}
.cg-desc-view a:hover { color: var(--cg-text); }
.cg-desc-view__placeholder { color: var(--faint); }
.cg-comments { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 0.875rem; }

/* allegati nel pannello task */
.cg-atts { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.625rem; }
.cg-att {
  display: flex; align-items: center; gap: 0.625rem;
  background: var(--cg-raised); border: 1px solid var(--line);
  border-radius: var(--medium-radius); padding: 0.5rem 0.625rem;
}
.cg-att__icon { flex: none; display: flex; color: var(--c-cyan); }
.cg-att__icon [data-lucide] { width: 1.0625rem; height: 1.0625rem; }
.cg-att__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.0625rem; text-decoration: none; color: inherit; }
.cg-att__name { font-size: var(--sm-text); color: rgb(var(--cg-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-att__main:hover .cg-att__name { color: var(--c-cyan); text-decoration: underline; }
.cg-att__meta { font-size: var(--xxs-text); color: var(--faint); }
.cg-att__actions { display: flex; align-items: center; gap: var(--sm-space); flex: none; }
.cg-att__del, .cg-att__download {
  flex: none; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--faint); border-radius: var(--small-radius); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.cg-att__del:hover { background: var(--hover); color: var(--c-pink); }
.cg-att__download { text-decoration: none; color: var(--muted); }
.cg-att__download:hover { background: var(--hover); color: var(--cg-text); }
.cg-att__download:disabled { opacity: .4; cursor: default; }
.cg-att__download:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }
.cg-att__del [data-lucide], .cg-att__download [data-lucide] { width: 0.875rem; height: 0.875rem; }
.cg-attadd {
  display: inline-flex; align-items: center; gap: 0.4375rem; justify-content: center; width: 100%;
  font-size: var(--sm-text); color: var(--muted);
  background: transparent; border: 1px dashed var(--line-strong);
  border-radius: var(--medium-radius); padding: 0.5rem 0.75rem; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.cg-attadd:hover { color: var(--c-purple); border-color: rgba(151, 136, 255, 0.5); background: rgba(151, 136, 255, 0.06); }
.cg-attadd [data-lucide] { width: 0.9375rem; height: 0.9375rem; }
.cg-comment { display: flex; gap: 0.625rem; align-items: flex-start; }
.cg-comment .cg-avatar { flex: none; margin-top: 0.125rem; }
.cg-comment__body {
  flex: 1; min-width: 0;
  background: var(--cg-raised); border: 1px solid var(--line);
  border-radius: var(--medium-radius); padding: 0.5rem 0.6875rem 0.5625rem;
}
.cg-comment__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.1875rem; }
.cg-comment__author { font-size: var(--sm-text); font-weight: 600; color: rgb(var(--cg-ink)); }
.cg-comment__time { font-size: var(--xxs-text); color: var(--faint); }
.cg-comment__text { font-size: var(--sm-text); line-height: var(--leading-normal); color: rgba(var(--cg-ink), 0.86); white-space: pre-wrap; word-break: break-word; }
.cg-comment__del {
  flex: none; width: 1.625rem; height: 1.625rem; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--small-radius); background: transparent; color: var(--faint); cursor: pointer;
  opacity: 0.58; transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.cg-comment__del:hover,
.cg-comment__del:focus-visible { opacity: 1; background: var(--hover); color: var(--c-pink); outline: none; }
.cg-comment__del [data-lucide] { width: 0.875rem; height: 0.875rem; }
.cg-comments-empty { font-size: var(--sm-text); color: var(--faint); padding: 0.875rem 0 0.25rem; }
.cg-comment-add { --cg-comment-control-size: calc(var(--regular-text) * var(--leading-normal) + 1.25rem + 2px); display: flex; align-items: center; gap: 0.5rem; }
.cg-comment-add .cg-avatar { flex: none; }
.cg-comment-add .cg-input { flex: 1; min-width: 0; height: var(--cg-comment-control-size); }
.cg-comment-add .cg-btn--icon { flex: none; width: var(--cg-comment-control-size); height: var(--cg-comment-control-size); padding: 0; justify-content: center; }

.cg-toast {
  position: fixed; bottom: 1.625rem; left: 50%; transform: translateX(-50%);
  z-index: 60; background: var(--cg-toast-bg); color: var(--cg-toast-text);
  font-size: var(--sm-text); font-weight: var(--w-medium);
  padding: 0.6875rem 1.375rem; border-radius: var(--medium-radius);
  box-shadow: var(--shadow-pop); animation: cg-toast-in var(--t-mid) var(--ease);
}
@keyframes cg-toast-in {
  from { transform: translateX(-50%) translateY(0.375rem) scale(0.98); opacity: 0; }
  to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

/* ----------------------------------------------------------
   DRAWER NOTIFICHE (campanella)
   ---------------------------------------------------------- */
.cg-iconbtn.is-active { background: var(--accent-soft); color: var(--c-purple); }
.cg-notif { width: 24rem; }
.cg-notif__title { font-size: var(--lg-text); font-weight: var(--w-medium); }
.cg-notif__count {
  font-size: var(--xxs-text); font-weight: var(--w-medium);
  color: var(--c-on-accent); background: var(--c-purple);
  border-radius: 1rem; padding: 0.0625rem 0.4375rem; margin-left: 0.5rem;
}
.cg-notif__readall {
  font-size: var(--sm-text); color: var(--muted);
  background: transparent; border: none; cursor: pointer;
  padding: 0.25rem 0.5rem; border-radius: var(--small-radius);
  transition: color var(--t-fast), background var(--t-fast);
}
.cg-notif__readall:hover { color: var(--cg-text); background: var(--hover); }
.cg-notif__clear {
  width: 2rem;
  height: 2rem;
  color: rgba(var(--cg-ink), 0.58);
}
.cg-notif__clear [data-lucide] { width: 1rem; height: 1rem; }
.cg-notif__clear:hover {
  color: var(--c-pink);
  background: rgba(239, 120, 182, 0.12);
}
.cg-notif__body { padding: 0; }
.cg-notif__group {
  font-size: var(--xxs-text); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--faint);
  padding: 1rem var(--md-space) 0.4375rem;
}
.cg-notif__row {
  display: flex; align-items: flex-start; gap: 0.6875rem;
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: none;
  border-top: 1px solid var(--line-soft);
  padding: 0.8125rem var(--md-space);
  transition: background var(--t-fast);
}
.cg-notif__row:hover { background: var(--hover); }
.cg-notif__row.is-unread { background: rgba(151, 136, 255, 0.045); }
.cg-notif__icon {
  width: 1.75rem; height: 1.75rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--accent); background: var(--hover-strong);
}
.cg-notif__icon [data-lucide] { width: 0.9375rem; height: 0.9375rem; }
.cg-notif__main { flex: 1; min-width: 0; }
.cg-notif__text { font-size: var(--sm-text); line-height: var(--leading-snug); }
.cg-notif__row.is-unread .cg-notif__text { color: var(--cg-text); }
.cg-notif__row:not(.is-unread) .cg-notif__text { color: var(--muted); }
.cg-notif__meta { font-size: var(--xs-text); color: var(--faint); margin-top: 0.25rem; }

@media (max-width: 52rem) {
  .cg-panel,
  .cg-overlay--task .cg-panel { width: 100vw; max-width: 100vw; }
  .cg-modal { width: 94vw; }
}
.cg-file-native {
  max-width: 14rem;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
}
.cg-file-native::file-selector-button {
  margin-right: 0.625rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}
.cg-file-native::file-selector-button:hover { border-color: var(--muted); }
.cg-doc-upload-form {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cg-att__main {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.cg-att__main[href] { cursor: pointer; }
.cg-media-view {
  width: min(64rem, 94vw);
  max-width: 94vw;
  padding: 0;
  overflow: hidden;
}
.cg-media-view .cg-modal__head {
  margin: 0;
  padding: var(--regular-space) var(--md-space);
  border-bottom: 1px solid var(--line);
}
.cg-media-view__body {
  height: min(72dvh, 44rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cg-bg);
}
.cg-media-view__img,
.cg-media-view__video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.cg-media-view__pdf {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--cg-surface);
}
.cg-media-view__audio,
.cg-media-view__empty {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--muted);
}
.cg-media-view__audio [data-lucide] { width: 1.5rem; height: 1.5rem; color: var(--c-cyan); }
.cg-media-view__audio audio { width: min(30rem, 70vw); }