/* ============================================================
   Модуль ЗАДАЧИ — список, Kanban, Мой день, модал задачи
   ============================================================ */

/* ---------- Переключатель видов (segmented control) ---------- */
.view-switch {
  display: inline-flex;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.view-switch button {
  border: none; background: none;
  padding: 6px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--text2);
  border-radius: var(--radius-sm);
}
.view-switch button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ---------- Цветная точка приоритета ---------- */
.prio-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.prio-dot.prio-low      { background: var(--text2); }
.prio-dot.prio-medium   { background: var(--blue); }
.prio-dot.prio-high     { background: var(--yellow); }
.prio-dot.prio-critical { background: var(--red); }

/* ---------- Kanban карточки задач ---------- */
.kanban-card.task-card { position: relative; padding-left: 14px; }
.kanban-card.task-card .prio-stripe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.kanban-card.task-card .prio-stripe.prio-low      { background: var(--text2); }
.kanban-card.task-card .prio-stripe.prio-medium   { background: var(--blue); }
.kanban-card.task-card .prio-stripe.prio-high     { background: var(--yellow); }
.kanban-card.task-card .prio-stripe.prio-critical { background: var(--red); }
.kanban-card.task-card .tc-title { font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.kanban-card.task-card .tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kanban-card.task-card .tc-due { font-size: 11.5px; color: var(--text2); }
.kanban-card.task-card .tc-due.overdue { color: var(--red); font-weight: 700; }
.kanban-card-overdue { border-color: var(--red); }

/* ---------- Статусы задач (бейджи) ---------- */
.badge.tstatus-new         { background: var(--surface2); color: var(--text2); }
.badge.tstatus-in_progress { background: #e0ebff; color: var(--blue); }
.badge.tstatus-review      { background: #fdecd0; color: var(--yellow); }
.badge.tstatus-done        { background: #d3f3e7; color: var(--green); }
.badge.tstatus-deferred    { background: #ece0fb; color: var(--purple); }

/* ---------- Мой день ---------- */
.myday-section { margin-bottom: 26px; }
.myday-section .mds-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.myday-section .mds-title .count { font-size: 12px; color: var(--text2); font-weight: 600; }
.myday-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px; margin-bottom: 8px;
  cursor: pointer;
}
.myday-item:hover { background: var(--surface2); }
.myday-item .md-check {
  width: 20px; height: 20px; border-radius: 5px;
  border: 2px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px;
}
.myday-item.done .md-check { background: var(--green); border-color: var(--green); }
.myday-item.done .md-title { text-decoration: line-through; color: var(--text2); }
.myday-item .md-title { flex: 1; font-size: 13.5px; }
.myday-item .md-meta { font-size: 12px; color: var(--text2); }

/* ============================================================
   Модал задачи (двухколоночный)
   ============================================================ */
.task-modal-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; }
@media (max-width: 760px) { .task-modal-grid { grid-template-columns: 1fr; } }

.tm-title-edit {
  font-size: 19px; font-weight: 700;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px 6px; width: 100%;
  background: transparent;
}
.tm-title-edit:hover { background: var(--surface2); }
.tm-title-edit:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(232,50,30,.12); }

.tm-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text2); font-weight: 700; margin: 16px 0 8px; }

/* Markdown preview / editor split */
.md-editor { display: grid; grid-template-columns: 1fr; gap: 12px; }
.md-editor.split { grid-template-columns: 1fr 1fr; }
.md-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--surface2);
  min-height: 72px;
  font-size: 13.5px;
}
.md-preview p { margin-bottom: 8px; }
.md-preview h1, .md-preview h2, .md-preview h3 { margin: 10px 0 6px; }
.md-preview ul, .md-preview ol { padding-left: 20px; margin-bottom: 8px; }
.md-preview code { background: var(--surface); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.md-preview pre { background: var(--surface); padding: 10px; border-radius: var(--radius-sm); overflow-x: auto; margin-bottom: 8px; }
.md-preview a { color: var(--blue); }
.md-preview table { border-collapse: collapse; margin-bottom: 8px; }
.md-preview th, .md-preview td { border: 1px solid var(--border); padding: 5px 8px; }

/* Subtasks */
.subtask-list { display: flex; flex-direction: column; gap: 6px; }
.subtask-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.subtask-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--green); }
.subtask-item.done span { text-decoration: line-through; color: var(--text2); }
.subtask-item .st-del { margin-left: auto; background: none; border: none; color: var(--text2); }
.subtask-item .st-del:hover { color: var(--red); }

/* Comments */
.comment-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.comment {
  display: flex; gap: 10px;
}
.comment .c-body { flex: 1; }
.comment .c-head { font-size: 12px; color: var(--text2); margin-bottom: 2px; }
.comment .c-head b { color: var(--text); }
.comment .c-text { font-size: 13.5px; background: var(--surface2); border-radius: var(--radius-sm); padding: 8px 11px; }

/* Tags */
.tag-input-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; }
.tag-input-wrap input { border: none; outline: none; flex: 1; min-width: 80px; font-size: 13px; background: transparent; }
.tag-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--surface2); border-radius: 999px; padding: 2px 9px; font-size: 12px; }
.tag-chip .x { cursor: pointer; color: var(--text2); }
.tag-chip .x:hover { color: var(--red); }

/* multi-select исполнителей */
.assignee-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.assignee-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface2); border-radius: 999px; padding: 3px 10px 3px 3px;
  font-size: 12px; cursor: pointer; border: 1px solid var(--border);
}
.assignee-chip.selected { background: #e0ebff; border-color: var(--blue); color: var(--blue); }

/* Done tasks — green row */
.row-done td { color: var(--text-muted, #888); background: #f0fff4; }
.row-done td:first-child { border-left: 3px solid #0d9e6e; }

/* Status badge — no wrap */
.badge[class*="tstatus-"] { white-space: nowrap; }
.badge.tstatus-in_progress { background: #dbeafe; color: #1e40af; }
.badge.tstatus-done { background: #d1fae5; color: #065f46; }
.badge.tstatus-new { background: #f3f4f6; color: #374151; }
.badge.tstatus-review { background: #fef3c7; color: #92400e; }
.badge.tstatus-deferred { background: #f3f4f6; color: #6b7280; }


/* ===== Task Preset Chips ===== */
.task-presets-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; }
.preset-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
  border: 1.5px solid var(--border-color, #e5e7eb); background: var(--bg-secondary, #f8f9fa);
  color: var(--text-primary); cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.preset-chip:hover { border-color: var(--color-primary, #2563eb); color: var(--color-primary, #2563eb); }
.preset-chip.active { background: var(--color-primary, #2563eb); border-color: var(--color-primary, #2563eb); color: #fff; }
.preset-chip.preset-clear { border-color: #f87171; color: #ef4444; background: #fff0f0; }
.preset-chip.preset-clear:hover { background: #ef4444; color: #fff; }

/* ===== Kanban Group Toggle ===== */
.kanban-group-toggle { display: flex; align-items: center; gap: 8px; padding: 4px 0 10px; }
.kgt-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.kgt-btn {
  padding: 3px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  border: 1.5px solid var(--border-color, #e5e7eb);
  background: var(--bg-secondary, #f8f9fa); color: var(--text-secondary); cursor: pointer;
}
.kgt-btn.active { background: var(--color-primary, #2563eb); border-color: var(--color-primary, #2563eb); color: #fff; }
.kgt-btn:hover:not(.active) { border-color: var(--color-primary, #2563eb); color: var(--color-primary, #2563eb); }

/* ===== Task filters row compact ===== */
.task-filters-row { padding: 2px 0 8px !important; flex-wrap: wrap; }


/* ===== Task grouping row ===== */
.task-group-row { display: flex; align-items: center; gap: 8px; padding: 6px 0 10px; }
.tgr-label { font-size: 12px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.tgr-btn {
  padding: 3px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  border: 1.5px solid var(--border-color, #e5e7eb);
  background: var(--bg-secondary, #f8f9fa); color: var(--text-secondary); cursor: pointer;
  transition: all .15s;
}
.tgr-btn.active { background: var(--color-primary, #2563eb); border-color: var(--color-primary, #2563eb); color: #fff; }
.tgr-btn:hover:not(.active) { border-color: var(--color-primary, #2563eb); color: var(--color-primary, #2563eb); }

/* ===== Task project groups ===== */
.task-project-group { margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--border-color, #e5e7eb); overflow: hidden; }
.tpg-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--bg-secondary, #f5f5f5); cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.tpg-header:hover { background: var(--bg-hover, #ebebeb); }
.tpg-toggle { font-size: 10px; color: var(--text-muted); width: 12px; }
.tpg-name { font-weight: 600; font-size: 13px; flex: 1; }
.tpg-counts { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.tpg-progress { width: 60px; height: 4px; background: var(--border-color, #e5e7eb); border-radius: 2px; overflow: hidden; }
.tpg-bar { height: 100%; background: #22c55e; border-radius: 2px; transition: width .3s; }
.tpg-body .table-wrap { border-radius: 0; border: none; }
.tpg-body .table { border: none; }
.tpg-body .table thead th { background: var(--bg-main, #fff); font-size: 11px; }

/* ===== Filters row ===== */
.task-filters-row { flex-wrap: wrap; padding: 4px 0 2px !important; }