/* ============================================================
   Wild Group Hub — CSS Moduli v2.0
   Tasks, Kanban, Processi, Note, Team, Notifiche
   ============================================================ */

/* ══════════════════════════════════════════════════
   TABS NAVIGAZIONE (dentro viste)
══════════════════════════════════════════════════ */
.view-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-base);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 24px;
  width: fit-content;
  border: 1px solid var(--border);
}
.view-tab-btn {
  padding: 7px 16px;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.view-tab-btn:hover { color: var(--text-primary); background: var(--bg-card); }
.view-tab-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm); font-weight: 600; }
.view-tab-btn .tab-count {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 6px;
  color: var(--text-secondary);
}
.view-tab-btn.active .tab-count { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }

/* ══════════════════════════════════════════════════
   TASK CARDS (lista)
══════════════════════════════════════════════════ */
.tasks-list { display: flex; flex-direction: column; gap: 8px; }

.task-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.task-card:hover { box-shadow: var(--shadow); border-color: #ccc; transform: translateY(-1px); }
.task-card.done { opacity: .65; }
.task-card.done .task-title { text-decoration: line-through; color: var(--text-muted); }
.task-card.overdue { border-left: 3px solid #ff453a; }

/* Checkbox custom */
.task-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: 1px;
}
.task-check:hover { border-color: var(--accent); background: var(--accent-light); }
.task-check.checked { background: #30d158; border-color: #30d158; }
.task-check.checked::after { content: '✓'; color: #fff; font-size: .72rem; font-weight: 700; }

.task-body { flex: 1; min-width: 0; }
.task-title { font-size: .9rem; font-weight: 500; margin-bottom: 5px; line-height: 1.4; }
.task-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .75rem; color: var(--text-secondary);
}
.task-assignee {
  display: flex; align-items: center; gap: 5px;
}
.task-assignee .mini-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.task-due {
  display: flex; align-items: center; gap: 3px;
}
.task-due.overdue { color: #ff453a; font-weight: 600; }
.task-due.today { color: #ff9500; font-weight: 600; }

.priority-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px;
  font-size: .7rem; font-weight: 600;
}

.task-card-actions {
  display: flex; gap: 4px; align-items: center;
  opacity: 0; transition: opacity var(--transition);
  flex-shrink: 0;
}
.task-card:hover .task-card-actions { opacity: 1; }

/* Task comments count badge */
.task-comments-badge {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--text-muted); font-size: .75rem;
}
.task-comments-badge svg { width: 12px; height: 12px; }

/* ══════════════════════════════════════════════════
   KANBAN BOARD
══════════════════════════════════════════════════ */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 16px;
  min-height: 400px;
  align-items: start;
}

.kanban-col {
  background: var(--bg-base);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  min-height: 200px;
}

.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-base);
  border-radius: var(--radius) var(--radius) 0 0;
  z-index: 1;
}
.kanban-col-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 700;
}
.kanban-col-count {
  font-size: .7rem; font-weight: 600;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 99px; padding: 1px 7px;
  color: var(--text-secondary);
}
.kanban-add-btn {
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer;
  transition: all var(--transition);
  font-size: 1.1rem; line-height: 1;
}
.kanban-add-btn:hover { background: var(--bg-card); color: var(--accent); }

.kanban-cards { padding: 10px 10px; display: flex; flex-direction: column; gap: 8px; }

.kanban-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  padding: 12px;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.kanban-card:hover { box-shadow: var(--shadow); border-color: #bbb; transform: translateY(-1px); }
.kanban-card.dragging { opacity: .5; }

.kanban-card-title { font-size: .85rem; font-weight: 500; margin-bottom: 8px; line-height: 1.4; }
.kanban-card-footer { display: flex; align-items: center; justify-content: space-between; }
.kanban-card-area {
  font-size: .7rem; font-weight: 600;
  padding: 2px 6px; border-radius: 99px;
}
.kanban-card .mini-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700; color: #fff;
}

/* Drag-over highlight */
.kanban-col.drag-over { border-color: var(--accent); background: var(--accent-light); }

/* ══════════════════════════════════════════════════
   PROCESSI / WORKFLOW
══════════════════════════════════════════════════ */

/* Template card */
.process-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.process-template-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.process-template-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--process-color, var(--accent));
}
.process-template-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.process-icon { font-size: 1.6rem; margin-bottom: 10px; display: block; }
.process-name { font-size: .95rem; font-weight: 700; margin-bottom: 4px; }
.process-desc { font-size: .78rem; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.5; }
.process-meta { display: flex; align-items: center; gap: 10px; font-size: .75rem; color: var(--text-muted); }
.process-steps-count {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-base); padding: 3px 8px; border-radius: 99px;
  border: 1px solid var(--border); font-weight: 600;
}

/* Template builder — step list */
.process-steps-builder { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }

.process-step-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-base);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border: 1px solid var(--border);
}
.step-number {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff; font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-content { flex: 1; min-width: 0; }
.step-content input {
  width: 100%; background: transparent; border: none; outline: none;
  font-size: .875rem; font-weight: 500; color: var(--text-primary);
  font-family: var(--font);
}
.step-content input::placeholder { color: var(--text-muted); }
.step-meta { font-size: .75rem; color: var(--text-secondary); margin-top: 2px; }
.step-delete {
  color: var(--text-muted); cursor: pointer; padding: 4px;
  border-radius: var(--radius-sm); transition: all var(--transition);
}
.step-delete:hover { color: #ff453a; background: #fff0ef; }

/* Instance (processo attivo) */
.process-instances-list { display: flex; flex-direction: column; gap: 12px; }

.process-instance-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.process-instance-card:hover { box-shadow: var(--shadow); }

.process-instance-header {
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
}
.process-instance-title { font-size: .9rem; font-weight: 600; }
.process-instance-meta { font-size: .78rem; color: var(--text-secondary); margin-top: 2px; display: flex; gap: 10px; }

.process-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin: 0 16px 0;
}
.process-progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #30d158);
  transition: width .4s ease;
}

.process-steps-list {
  padding: 0 16px 16px;
  display: none;
}
.process-instance-card.expanded .process-steps-list { display: block; }

.process-step-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  position: relative;
}
.process-step-row:last-child { border-bottom: none; }

/* Connettore verticale tra step */
.process-step-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 11px; top: 34px;
  width: 2px; height: calc(100% - 12px);
  background: var(--border);
}
.process-step-row.step-done::after { background: #30d158; }

.step-status-icon {
  width: 24px; height: 24px;
  border-radius: 50%; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .75rem;
  transition: all var(--transition);
  z-index: 1; background: var(--bg-card);
}
.step-status-icon.done { background: #30d158; border-color: #30d158; color: #fff; }
.step-status-icon.active { background: var(--accent); border-color: var(--accent); color: #fff; animation: pulse 1.5s ease infinite; }
.step-status-icon.blocked { background: #ff453a; border-color: #ff453a; color: #fff; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,113,227,.4); }
  50% { box-shadow: 0 0 0 6px rgba(0,113,227,0); }
}

.step-info { flex: 1; }
.step-title { font-size: .875rem; font-weight: 500; }
.step-assignee-label { font-size: .75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.step-complete-btn {
  padding: 5px 12px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: .78rem; font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.step-complete-btn:hover { background: var(--accent-hover); }
.step-complete-btn.disabled { background: var(--bg-base); color: var(--text-muted); border: 1px solid var(--border); cursor: default; }

/* ══════════════════════════════════════════════════
   NOTE
══════════════════════════════════════════════════ */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.note-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.note-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.note-card-header {
  height: 6px;
  background: var(--note-color, #8e8e93);
}
.note-card-body { padding: 16px; flex: 1; }
.note-title { font-size: .9rem; font-weight: 700; margin-bottom: 8px; }
.note-preview {
  font-size: .8rem; color: var(--text-secondary);
  line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.note-card-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .73rem; color: var(--text-muted);
}
.note-area-pill {
  font-size: .68rem; font-weight: 600;
  padding: 2px 7px; border-radius: 99px;
}

/* Note editor */
.note-editor-wrap {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  overflow: hidden;
}
.note-editor-toolbar {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);
}
.editor-btn {
  width: 30px; height: 28px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700;
  color: var(--text-secondary); cursor: pointer;
  transition: all var(--transition);
}
.editor-btn:hover { background: var(--bg-card); color: var(--text-primary); }
.editor-btn.active { background: var(--accent-light); color: var(--accent); }
.editor-sep { width: 1px; background: var(--border); margin: 4px 4px; }
[contenteditable="true"] {
  outline: none;
  padding: 16px;
  min-height: 200px;
  font-size: .9rem; line-height: 1.7;
  color: var(--text-primary);
  font-family: var(--font);
}
[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════
   TEAM
══════════════════════════════════════════════════ */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.team-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.team-card:hover { box-shadow: var(--shadow); }
.team-card-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; gap: 12px;
}
.team-color-dot {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.team-card-info { flex: 1; }
.team-name { font-size: .92rem; font-weight: 700; }
.team-area-label { font-size: .75rem; color: var(--text-secondary); margin-top: 2px; }
.team-members-row {
  padding: 12px 18px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.team-member-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: 99px; padding: 4px 10px 4px 4px;
  font-size: .78rem;
}
.team-member-chip .mini-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700; color: #fff;
}
.team-card-actions {
  padding: 10px 18px;
  border-top: 1px solid var(--border-light);
  display: flex; gap: 8px;
}

/* ══════════════════════════════════════════════════
   NOTIFICHE
══════════════════════════════════════════════════ */
.notif-bell {
  position: relative;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition);
}
.notif-bell:hover { background: var(--bg-base); color: var(--text-primary); }
.notif-badge {
  position: absolute; top: 4px; right: 4px;
  width: 16px; height: 16px;
  background: #ff453a; border-radius: 50%;
  font-size: .6rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-card);
  display: none;
}
.notif-badge.visible { display: flex; }

.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  overflow: hidden;
  display: none;
  animation: dropdownIn .15s ease;
  max-height: 480px;
  overflow-y: auto;
}
.notif-dropdown.visible { display: block; }

.notif-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.notif-header h3 { font-size: .9rem; font-weight: 700; }
.notif-mark-read { font-size: .78rem; color: var(--accent); cursor: pointer; }
.notif-mark-read:hover { text-decoration: underline; }

.notif-item {
  display: flex; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--transition);
}
.notif-item:hover { background: var(--bg-base); }
.notif-item.unread { background: #f0f6ff; }
.notif-item.unread:hover { background: #e8f1fb; }
.notif-item:last-child { border-bottom: none; }

.notif-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
  background: var(--bg-base);
}
.notif-content { flex: 1; min-width: 0; }
.notif-text { font-size: .82rem; line-height: 1.5; color: var(--text-primary); }
.notif-text strong { font-weight: 600; }
.notif-time { font-size: .72rem; color: var(--text-muted); margin-top: 3px; }
.notif-unread-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; margin-top: 6px;
}

.notif-empty {
  padding: 32px 16px; text-align: center;
  color: var(--text-secondary); font-size: .85rem;
}
.notif-empty .icon { font-size: 2rem; margin-bottom: 8px; }

/* ══════════════════════════════════════════════════
   TASK DETAIL MODAL
══════════════════════════════════════════════════ */
.task-detail-header {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 20px;
}
.task-detail-check {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; margin-top: 2px;
  transition: all var(--transition);
}
.task-detail-check:hover { border-color: #30d158; }
.task-detail-check.checked { background: #30d158; border-color: #30d158; color: #fff; font-size: .9rem; }
.task-detail-title { font-size: 1.1rem; font-weight: 700; flex: 1; line-height: 1.4; }

.task-detail-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 20px;
}
.task-meta-item label {
  display: block; font-size: .72rem; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 5px;
}
.task-meta-item select, .task-meta-item input {
  width: 100%; padding: 7px 10px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: .85rem; color: var(--text-primary);
  background: var(--bg-base); outline: none;
  font-family: var(--font);
  transition: border-color var(--transition);
}
.task-meta-item select:focus, .task-meta-item input:focus { border-color: var(--accent); }

.task-description-area {
  width: 100%; min-height: 80px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: .875rem; line-height: 1.6;
  font-family: var(--font); color: var(--text-primary);
  background: var(--bg-base); resize: vertical; outline: none;
  transition: border-color var(--transition);
}
.task-description-area:focus { border-color: var(--accent); }

/* Commenti */
.comments-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.comments-section h4 { font-size: .85rem; font-weight: 700; margin-bottom: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }

.comment-item {
  display: flex; gap: 10px; margin-bottom: 14px;
}
.comment-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.comment-bubble {
  flex: 1; background: var(--bg-base);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 8px 12px;
  border: 1px solid var(--border);
}
.comment-author { font-size: .75rem; font-weight: 700; margin-bottom: 3px; }
.comment-text { font-size: .85rem; line-height: 1.5; }
.comment-time { font-size: .7rem; color: var(--text-muted); margin-top: 3px; }

.comment-input-row {
  display: flex; gap: 8px; align-items: flex-end; margin-top: 12px;
}
.comment-input {
  flex: 1; padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: .875rem; font-family: var(--font);
  background: var(--bg-base); outline: none; resize: none;
  min-height: 38px; max-height: 100px; line-height: 1.5;
  transition: border-color var(--transition);
}
.comment-input:focus { border-color: var(--accent); background: var(--bg-card); }

/* ══════════════════════════════════════════════════
   OVERVIEW / DASHBOARD V2
══════════════════════════════════════════════════ */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.overview-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.overview-card h3 { font-size: .85rem; font-weight: 700; margin-bottom: 14px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }

.my-tasks-mini { display: flex; flex-direction: column; gap: 6px; }
.my-task-mini-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--bg-base); cursor: pointer;
  transition: background var(--transition);
  font-size: .82rem;
}
.my-task-mini-item:hover { background: var(--border-light); }
.my-task-mini-item.done { opacity: .6; text-decoration: line-through; }

/* ══════════════════════════════════════════════════
   RESPONSIVE ADDITIONS
══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .kanban-board { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
  .overview-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .kanban-board { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .overview-grid { grid-template-columns: 1fr; }
  .notif-dropdown { width: 300px; }
  .task-detail-meta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .kanban-board { grid-template-columns: 1fr; }
  .process-template-grid { grid-template-columns: 1fr; }
  .notes-grid { grid-template-columns: 1fr; }
  .teams-grid { grid-template-columns: 1fr; }
  .view-tabs { width: 100%; overflow-x: auto; }
}

/* ══════════════════════════════════════════════════
   TASK FILTERS BAR
══════════════════════════════════════════════════ */
.tasks-filters {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.filter-select {
  padding: 5px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  color: var(--text-primary);
  background: var(--bg-base);
  outline: none;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color var(--transition);
  max-width: 160px;
}
.filter-select:focus { border-color: var(--accent); }

/* ══════════════════════════════════════════════════
   TASK DETAIL MODAL — COMMENTS AREA
══════════════════════════════════════════════════ */
.task-comments-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
  max-height: 220px;
  overflow-y: auto;
}
.comment-item {
  display: flex;
  gap: 10px;
}
.comment-body {
  flex: 1;
  background: var(--bg-base);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 8px 12px;
  border: 1px solid var(--border);
}
.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.comment-header strong { font-size: .8rem; color: var(--text-primary); }
.comment-time { font-size: .7rem; color: var(--text-muted); }
.comment-text { font-size: .84rem; line-height: 1.5; color: var(--text-secondary); }

.comment-input-area {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.comment-input-area textarea {
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-family: var(--font);
  background: var(--bg-base);
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}
.comment-input-area textarea:focus { border-color: var(--accent); }

.user-avatar-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Status buttons nel detail modal */
.status-btn {
  padding: 5px 14px;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--bg-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}
.status-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

/* ══════════════════════════════════════════════════
   PROCESS — STEP BUILDER
══════════════════════════════════════════════════ */
.proc-steps-builder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 2px;
}
.proc-step-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}
.proc-step-row:hover { border-color: var(--accent); }
.step-num-indicator {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4px;
}
.step-inputs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.step-title-input, .step-desc-input {
  width: 100%;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: .84rem;
  color: var(--text-primary);
  background: var(--bg-card);
  outline: none;
  transition: border-color var(--transition);
}
.step-title-input:focus, .step-desc-input:focus { border-color: var(--accent); }

/* Launch modal: process preview */
.process-steps-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.process-step-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-info { flex: 1; }
.step-title { font-size: .82rem; font-weight: 500; color: var(--text-primary); }
.step-desc  { font-size: .75rem; color: var(--text-muted); }

/* Process timeline nel dettaglio istanza */
.process-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
}
.timeline-step {
  display: flex;
  gap: 14px;
  position: relative;
}
.timeline-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 30px;
  width: 2px;
  height: calc(100% - 12px);
  background: var(--border);
}
.timeline-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
}
.timeline-dot.done   { background: #edfaf1; border-color: #30d158; color: #30d158; }
.timeline-dot.active { background: #e8f1fb; border-color: #0071e3; color: #0071e3; }
.timeline-dot.waiting{ background: var(--bg-base); border-color: var(--border);    color: var(--text-muted); }

.timeline-content {
  flex: 1;
  padding: 4px 0 18px;
}
.timeline-step-title  { font-size: .88rem; font-weight: 600; margin-bottom: 2px; }
.timeline-step-meta   { font-size: .76rem; color: var(--text-muted); }
.timeline-step-action { margin-top: 6px; }

/* ══════════════════════════════════════════════════
   NOTE — EDITOR & RENDERED
══════════════════════════════════════════════════ */
.note-toolbar {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg-base);
  border: 1.5px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  flex-wrap: wrap;
}
.note-toolbar button {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: .78rem;
  color: var(--text-secondary);
  transition: all var(--transition);
  font-family: var(--font);
}
.note-toolbar button:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}
.note-editor {
  min-height: 180px;
  max-height: 340px;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--bg-card);
  outline: none;
  font-family: var(--font);
  transition: border-color var(--transition);
}
.note-editor:focus { border-color: var(--accent); }
.note-editor:empty::before {
  content: attr(placeholder);
  color: var(--text-muted);
  pointer-events: none;
}
.note-editor h2     { font-size: 1rem; font-weight: 700; margin: 12px 0 6px; }
.note-editor ul, .note-editor ol { padding-left: 20px; margin: 8px 0; }
.note-editor li     { margin-bottom: 4px; }
.note-editor pre, .note-editor code {
  background: var(--bg-base);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: .82rem;
}

.note-rendered-content {
  padding: 4px 0;
  max-height: 60vh;
  overflow-y: auto;
}
.note-rendered-content h2 { font-size: 1.05rem; font-weight: 700; margin: 14px 0 8px; }
.note-rendered-content ul, .note-rendered-content ol { padding-left: 22px; margin: 8px 0; }
.note-rendered-content li { margin-bottom: 4px; }
.note-rendered-content pre, .note-rendered-content code {
  background: var(--bg-base);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: monospace;
  font-size: .82rem;
}
.note-rendered-content hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* Note area tabs (filtro) */
.notes-area-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════
   NOTIFICATION DROPDOWN
══════════════════════════════════════════════════ */
.notif-dropdown {
  position: fixed;
  top: 56px;
  right: 24px;
  width: 360px;
  max-height: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  z-index: 9999;
  flex-direction: column;
  overflow: hidden;
}
.notif-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
  font-weight: 600;
  background: var(--bg-card);
  position: sticky;
  top: 0;
  z-index: 1;
}
.notif-dropdown-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
#notif-dropdown-list {
  overflow-y: auto;
  max-height: 360px;
  flex: 1;
}

/* Singola notifica (sia dropdown che full view) */
.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  align-items: flex-start;
}
.notif-item:hover { background: var(--bg-base); }
.notif-item.unread { background: var(--accent-light); }
.notif-item.unread:hover { background: #d6e8fc; }
.notif-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.notif-body { flex: 1; }
.notif-text {
  font-size: .82rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 2px;
}
.notif-time { font-size: .72rem; color: var(--text-muted); }

/* Full notifications view */
.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ══════════════════════════════════════════════════
   TEAMS GRID
══════════════════════════════════════════════════ */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.team-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.team-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.team-card-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.team-card-name {
  font-size: .92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.team-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.team-card-area {
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 600;
}
.team-card-body {
  padding: 12px 18px 14px;
}
.team-description {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
  min-height: 20px;
}
.team-members-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.team-card-actions {
  display: flex;
  gap: 6px;
  padding: 0 14px 14px;
}

/* ══════════════════════════════════════════════════
   PROCESSES VIEW ADDITIONS
══════════════════════════════════════════════════ */
.processes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.process-template-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}
.process-template-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.process-card-accent {
  height: 4px;
  background: var(--accent);
}
.process-card-body {
  padding: 16px 18px;
}
.process-card-icon {
  font-size: 1.6rem;
  margin-bottom: 8px;
}
.process-card-name {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.process-card-desc {
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}
.process-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: .72rem;
  color: var(--text-muted);
}
.process-card-steps-count {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 8px;
  font-weight: 600;
  font-size: .72rem;
}

/* Instance list items */
.instances-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.instance-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.instance-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--accent);
}
.instance-info { flex: 1; }
.instance-title { font-size: .9rem; font-weight: 600; margin-bottom: 4px; }
.instance-meta  { font-size: .76rem; color: var(--text-muted); }
.instance-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.progress-bar-wrap {
  width: 80px;
  height: 5px;
  background: var(--bg-base);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .4s;
}
.progress-label {
  font-size: .7rem;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════
   MINI-AVATAR
══════════════════════════════════════════════════ */
.mini-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   EXTRA RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tasks-filters   { gap: 10px; }
  .filter-select   { max-width: 120px; }
  .teams-grid      { grid-template-columns: 1fr; }
  .processes-grid  { grid-template-columns: 1fr; }
  .notif-dropdown  { width: calc(100vw - 48px); right: 12px; }
}
@media (max-width: 600px) {
  .tasks-filters   { flex-direction: column; align-items: flex-start; }
  .filter-group    { width: 100%; }
  .filter-select   { max-width: 100%; flex: 1; }
  .proc-steps-builder { max-height: 240px; }
}