/* ─── Tasks ──────────────────────────────────────────────── */

/* Fade-out statt hartem Rand am Scroll-Container-Anfang/-Ende (#1169).
   --fade-top/--fade-bottom werden per JS auf 0px oder FADE_SIZE gesetzt. */
.scroll-fade {
    --fade-top: 0px;
    --fade-bottom: 0px;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0,
        black var(--fade-top),
        black calc(100% - var(--fade-bottom)),
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0,
        black var(--fade-top),
        black calc(100% - var(--fade-bottom)),
        transparent 100%);
}

.task-item {
  transition: all 0.15s ease;
}
.task-item:hover {
  background: rgba(255, 106, 18, 0.06);
}
.task-detail {
  transition: all 0.2s ease;
}

/* Status badges */
.task-status-backlog    { background: rgba(100,100,120,0.15); color: #a0a0b0; }
.task-status-draft      { background: rgba(80,80,100,0.12);   color: #888;    }
.task-status-in_progress{ background: rgba(255,106,18,0.12);  color: #ff6a12; }
.task-status-paused     { background: rgba(255,200,50,0.08);  color: #ffc832; }
.task-status-review     { background: rgba(255,200,50,0.12);  color: #ffc832; }
.task-status-done       { background: rgba(50,200,100,0.12);  color: #32c864; }
.task-status-rejected   { background: rgba(255,60,60,0.12);   color: #ff3c3c; }
.task-status-aborted    { background: rgba(120,60,60,0.10);   color: #aa5555; }

/* Priority */
.task-priority-critical { color: #ff3c3c; }
.task-priority-high     { color: #ff6a12; }
.task-priority-medium   { color: #ffc832; }
.task-priority-low      { color: #888;    }

/* Due date badges */
.task-due-today    { color: #14b8a6; }
.task-due-tomorrow { color: #ffc832; }
.task-due-future   { color: #6b7280; }

/* ─── Sidebar items ──────────────────────────────────────── */
.tasks-inbox-item {
  transition: all 0.15s;
}
.tasks-sidebar-item {
  transition: all 0.15s;
}
.tasks-project-row,
.tasks-project-group-header {
  transition: background 0.15s, opacity 0.15s;
}
.tasks-drag-target {
  outline: 1px dashed rgba(255, 106, 18, 0.55);
  outline-offset: -2px;
  background: rgba(255, 106, 18, 0.08) !important;
}
.tasks-project-filter-divider {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 0 !important;
}

/* Gruppen-Header: Rename/Delete nur on-hover / focus-within (#1166 Reject) */
.tasks-project-group-header .project-group-rename-btn,
.tasks-project-group-header .project-group-delete-btn {
  opacity: 0;
}
.tasks-project-group-header:hover .project-group-rename-btn,
.tasks-project-group-header:hover .project-group-delete-btn,
.tasks-project-group-header:focus-within .project-group-rename-btn,
.tasks-project-group-header:focus-within .project-group-delete-btn {
  opacity: 1;
}
.tasks-project-group-header[draggable="true"] {
  cursor: grab;
}
.tasks-project-group-header[draggable="true"]:active {
  cursor: grabbing;
}

/* List filter chips (#1168) */
.tasks-list-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(19, 21, 23, 0.6);
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tasks-list-filter-chip:hover {
  background: rgba(255, 106, 18, 0.08);
  color: #e5e7eb;
}
.tasks-list-filter-chip-active[data-filter="today"] {
  background: rgba(20, 184, 166, 0.15);
  border-color: rgba(20, 184, 166, 0.35);
  color: #5eead4;
}
.tasks-list-filter-chip-active[data-filter="tomorrow"] {
  background: rgba(255, 200, 50, 0.12);
  border-color: rgba(255, 200, 50, 0.35);
  color: #ffc832;
}
.tasks-list-filter-chip-active[data-filter="reminders"] {
  background: rgba(255, 106, 18, 0.15);
  border-color: rgba(255, 106, 18, 0.35);
  color: #ff6a12;
}

/* ─── Modal ──────────────────────────────────────────────── */
#task-modal input,
#task-modal textarea,
#task-modal select {
  transition: border-color 0.2s, box-shadow 0.2s;
}
#task-modal input:focus,
#task-modal textarea:focus,
#task-modal select:focus {
  box-shadow: 0 0 0 2px rgba(255, 106, 18, 0.15);
}
#task-modal #task-form-checklist:focus {
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}
#task-modal ::-webkit-scrollbar       { width: 6px; }
#task-modal ::-webkit-scrollbar-track { background: transparent; }
#task-modal ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

/* Dark date picker */
#task-form-due {
  color-scheme: dark;
}

/* Chrome autocomplete override */
#task-modal input:-webkit-autofill,
#task-modal select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #131517 inset !important;
  -webkit-text-fill-color: #e0e0e0 !important;
  caret-color: #e0e0e0 !important;
  border: 1px solid #1e293b !important;
  border-radius: 0.75rem !important;
  transition: background-color 50000s ease-in-out 0s;
}