/* ============================================================
   Дела
   ============================================================ */

.todo-add {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel);
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  box-shadow: var(--shadow-sm);
}
.todo-add input {
  flex: 1;
  border: none; background: none; outline: none;
  font-family: inherit; font-size: 14.5px; color: var(--text);
  -webkit-appearance: none;
}
.todo-add input::placeholder { color: var(--muted); }
.todo-add-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: var(--pink-grad);
  color: #fff;
  box-shadow: 0 6px 14px rgba(var(--shadow-rgb), 0.24);
  display: flex; align-items: center; justify-content: center;
}
.todo-add-btn svg { width: 20px; height: 20px; }
.todo-add-btn:active { transform: scale(0.94); }

.todo-list { display: flex; flex-direction: column; gap: 8px; }
/* обёртка — только позиционирование; видимая карточка внутри .todo-content,
   кнопки пин/удалить лежат в .todo-actions под ней и открываются свайпом влево */
.todo-item { position: relative; }
/* шапка карточки: сама строка дела и спрятанные под ней кнопки свайпа */
.todo-head {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}
.todo-content {
  display: flex; align-items: center; gap: 11px;
  background: var(--panel);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 12px 12px 12px 13px;
  position: relative;
  z-index: 1;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pan-y;
}
.todo-actions {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 112px;
  display: flex;
}
.todo-actions button {
  flex: 1;
  border: none;
  background: var(--panel);
  color: var(--muted-2);
  display: flex; align-items: center; justify-content: center;
}
.todo-actions svg { width: 18px; height: 18px; }
.todo-actions .todo-pin.on { color: var(--pink-deep); }
.todo-actions .todo-del { color: var(--pink-deep); }
.todo-actions button:last-child { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
/* кружок слева: нажали — дело сделано и зачёркнуто, но осталось в списке */
.todo-check {
  width: 24px; height: 24px; min-width: 24px;
  padding: 0;
  border: 2px solid var(--pink);
  border-radius: 50%;
  background: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.todo-check svg { width: 13px; height: 13px; opacity: 0; transition: opacity 0.15s ease; }
.todo-item.done .todo-check,
.todo-row.done .todo-check { background: var(--pink-grad); border-color: transparent; }
.todo-item.done .todo-check svg,
.todo-row.done .todo-check svg { opacity: 1; }

.todo-body { flex: 1; min-width: 0; }
.todo-text { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; word-break: break-word; }
.todo-item.done .todo-text { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.todo-meta { font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.todo-event-badge {
  font-size: 12px; color: var(--pink-deep); font-weight: 600; margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}
.todo-repeat-badge { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
/* просроченное дело: дата прошла, а галочки нет — карточка светится красным */
.todo-prio-badge { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.todo-label-badge { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.todo-assignees { font-size: 12px; color: var(--pink-deep); font-weight: 600; margin-top: 2px; }
.todo-remind-badge { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.todo-item.prio-high .todo-content { box-shadow: inset 3px 0 0 var(--red), var(--shadow); }
.todo-item.prio-low .todo-content { box-shadow: inset 3px 0 0 var(--muted-2), var(--shadow); }

.todo-item.overdue .todo-content { box-shadow: inset 0 0 0 1.5px var(--red), var(--shadow); }
.todo-item.overdue .todo-text { color: var(--red); }
.todo-item.overdue .todo-event-badge { color: var(--red); }
#todos-hide-done.active { color: var(--pink-deep); }
.todo-row.overdue .row-title { color: var(--red); }

/* ручка перетаскивания: touch-action none, иначе жест уедет в скролл страницы */
.todo-grip {
  color: var(--muted-2);
  display: flex; flex-shrink: 0;
  padding: 4px 2px;
  touch-action: none;
  cursor: grab;
}
.todo-grip svg { width: 18px; height: 18px; }
.todo-item.dragging {
  position: relative;
  z-index: 5;
  will-change: transform;
  overflow: visible;
}
.todo-item.dragging .todo-content {
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
}

/* строка важного дела на главной — внутри .panel, поэтому на базе .row */
.todo-row.done .row-title { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.todo-row .row-body { min-width: 0; }

/* ---------- подпункты дела ---------- */

/* полоска выполнения в карточке: тап по ней разворачивает список подпунктов */
.todo-progress {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  margin-top: 6px; padding: 0;
  border: none; background: none;
  color: var(--muted);
  text-align: left;
}
.todo-progress-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.todo-progress-fill {
  display: block; height: 100%;
  border-radius: 999px;
  background: var(--pink-grad);
  transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.todo-progress-text { font-size: 12px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.todo-progress-chev {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--muted-2);
  transition: transform 0.2s ease;
}
.todo-progress.open .todo-progress-chev { transform: rotate(180deg); }
/* всё сделано: процент розовеет, полоска коротко вспыхивает */
.todo-progress.full .todo-progress-text { color: var(--pink-deep); }
.todo-progress.shine .todo-progress-fill { animation: progress-shine 1.3s ease-out; }
@keyframes progress-shine {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.45); }
  100% { filter: brightness(1); }
}

/* карточка вспыхивает розовым в момент, когда дело отмечено сделанным */
.todo-content.just-done { animation: todo-done-glow 0.95s ease-out; }
@keyframes todo-done-glow {
  0% { box-shadow: var(--shadow); }
  30% { box-shadow: 0 0 0 2px var(--pink), 0 12px 26px rgba(var(--shadow-rgb), 0.28); }
  100% { box-shadow: var(--shadow); }
}

.todo-subs { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px 2px 22px; }
.subtask-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.subtask-check { width: 19px; height: 19px; min-width: 19px; }
.subtask-check svg { width: 11px; height: 11px; }
.subtask-row.done .subtask-check { background: var(--pink-grad); border-color: transparent; }
.subtask-row.done .subtask-check svg { opacity: 1; }
.subtask-text { font-size: 14px; font-weight: 500; word-break: break-word; }
.subtask-row.done .subtask-text { text-decoration: line-through; color: var(--muted); }

/* редактор подпунктов в шторке дела */
.subtask-editor { display: flex; flex-direction: column; gap: 2px; }
.subtask-hint { font-size: 12.5px; color: var(--muted); padding: 2px 0 4px; }
.subtask-edit .subtask-field {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text);
  padding: 2px 0;
}
.subtask-edit.done .subtask-field { text-decoration: line-through; color: var(--muted); }
.subtask-del {
  border: none; background: none; padding: 0;
  color: var(--pink-deep);
  display: flex; flex-shrink: 0;
}
.subtask-del svg { width: 16px; height: 16px; }
.subtask-grip svg { width: 16px; height: 16px; }
.subtask-row.dragging { z-index: 5; will-change: transform; }
.subtask-add { margin-top: 6px; }

/* New-todo sheet (opened from the round "+" at the bottom) */
/* Room below the list so the "+" button does not cover the last todo */
#todos-list { padding-bottom: 72px; }