/* Штаб — задачник: список, строка задачи, карточка, «Сегодня», плитка на Пульте.
   Цвета и размеры — из макетов Tasks, TaskCard, Today, ProjectList (canvas/project). */

/* ---------- фильтры задачника ---------- */
.tfilters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tfilters-q { flex: 1 1 200px; width: auto; }
.fbtn {
  display: inline-flex; align-items: center; height: 38px; padding: 0 12px; background: var(--card);
  border: 1px solid #D5DAE2; border-radius: 9px; color: #3A4150;
}
.fbtn.is-on { background: #E4E7FF; border-color: #C9CEF7; color: #2C3BC4; }
.ppills, .dpills { display: flex; flex-wrap: wrap; gap: 6px; }
.ppill {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; background: var(--card);
  border: 1px solid #D5DAE2; border-radius: 15px; font-size: 13px;
}
.ppill.is-on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.ppill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p); }
.ppill.is-on .ppill-dot { background: #FFFFFF; }
.ppill-n { color: var(--muted-2); }
.ppill.is-on .ppill-n { color: #B9BCC6; }
.dpill {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 16px;
  border: 1px solid transparent; font-size: 13px; font-weight: 600;
}
.dpill--all { background: var(--card); }
.dpill.is-on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.dpill-n { opacity: 0.7; font-weight: 500; }

/* ---------- быстрое добавление ---------- */
.quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; background: var(--card); border-radius: 20px; }
.quick-input { flex: 1 1 280px; min-width: 0; height: 40px; padding: 0 10px; border: 0; font-size: 15px; background: transparent; color: var(--ink); }
.quick-input:focus { outline: none; }
.quick-preview { order: 3; flex: 1 1 100%; padding: 0 10px; color: var(--muted); font-size: 13px; }
.quick-preview:empty { display: none; }
.quick-error { color: var(--danger); }
.quick--day { background: transparent; border: 1px dashed #D5DAE2; border-radius: 10px; padding: 4px 6px; }

/* ---------- группы и строка задачи ---------- */
.tgroup { display: flex; flex-direction: column; gap: 4px; }
.tgroup-head { display: flex; align-items: center; gap: 8px; padding: 6px 4px; }
.tgroup-title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.tgroup-title--late { color: #B85A0E; }
.tgroup-title--muted { color: #5A5D66; }
.tgroup-count { color: var(--muted-2); font-size: 13px; }
.tlist { display: flex; flex-direction: column; background: var(--card); border-radius: 20px; overflow: hidden; }
.trow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px; border-top: 1px solid #EEF0F3; background: var(--card); }
.tlist .trow:first-child { border-top: 0; }
.trow.is-late { background: #FFF4EA; }
.trow-title { flex: 1 1 220px; min-width: 0; font-weight: 500; }
.trow-title:hover { color: var(--link); }
.trow.is-done .trow-title { color: #7A7D86; text-decoration: line-through; }
.trow-meta { font-size: 12px; color: #5A5D66; }
.trow-due { min-width: 64px; text-align: right; font-size: 13px; color: #5A5D66; }
.trow.is-late .trow-due, .overdue-box .trow-due { color: #B5300F; }
.star { color: #8A6400; }
.tcheck { width: 22px; height: 22px; flex: none; padding: 0; border-radius: 50%; border: 2px solid #9AA2B1; background: transparent; cursor: pointer; }
.tcheck.is-late { border-color: #F2994A; }
.tcheck.is-done { border-color: #4CC38A; background: #4CC38A; }
.tcheck--big { width: 26px; height: 26px; margin-top: 4px; }

/* плашки и чипы в строке */
.pchip { padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--p) 28%, #FFFFFF); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pdot { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--p); }
.chip { padding: 2px 9px; border-radius: 10px; background: #F0F1F4; color: #3A4150; font-size: 12px; white-space: nowrap; }
.chip--late { background: transparent; border: 1px solid #F3B8A8; color: #B5300F; font-weight: 600; }
.chip--source { background: #F4EEFF; color: #6B3FB5; }
.who { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #3A4150; white-space: nowrap; }
.who-av {
  width: 22px; height: 22px; flex: none; border-radius: 50%; background: #E3E6EB; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px;
}
.who-av--to { background: var(--ink); color: #FFFFFF; }

/* ---------- карточка задачи ---------- */
.tcard { background: var(--card); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; }
.tcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid #EEF0F3; }
.tcard-sub { color: var(--muted-2); font-size: 13px; }
.tcard-gap { flex: 1; }
.tcard-close { width: 34px; height: 34px; border-radius: 17px; background: #F0F2F5; display: inline-flex; align-items: center; justify-content: center; }
.tcard > .error { margin: 12px 22px 0; }
.tcard-body { display: flex; flex-wrap: wrap; }
.tcard-main { flex: 999 1 520px; min-width: 0; padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 20px; }
.tcard-side { flex: 1 1 300px; min-width: 0; padding: 22px 22px 28px; background: #FAFAFB; border-left: 1px solid #EEF0F3; display: flex; flex-direction: column; gap: 16px; }
.tcard-title { display: flex; gap: 14px; align-items: flex-start; }
.tcard-h1 { flex: 1; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.25; }
.tcard-h1.is-done { color: #7A7D86; text-decoration: line-through; }
.tcard-star { width: 36px; height: 36px; border: 0; border-radius: 18px; background: #F0F2F5; color: #9AA2B1; font-size: 18px; cursor: pointer; }
.tcard-star.is-on { background: #FFF4C7; color: #8A6400; }
.status-row { display: flex; flex-wrap: wrap; gap: 6px; }
.status-btn { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid #D7DAE2; background: var(--card); color: #3A4150; font-size: 13px; font-weight: 500; cursor: pointer; }
.status-btn.is-on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.tcard-section { display: flex; flex-direction: column; gap: 8px; }
.tcard-details { padding: 14px 16px; border: 1px solid #E6E8EE; border-radius: 16px; line-height: 1.6; white-space: pre-wrap; }
.tcard-edit summary { cursor: pointer; color: var(--link); font-size: 13px; }
.tcard-edit form { margin-top: 8px; }
.field--area { height: auto; padding: 10px 12px; resize: vertical; }
.field--dashed { border-style: dashed; }
.progress { height: 6px; background: #EEF0F3; border-radius: 3px; }
.progress-bar { height: 6px; background: #3BB273; border-radius: 3px; }
.check-item { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px; border-radius: 8px; }
.check-item.is-done span { color: #7A7D86; text-decoration: line-through; }
.check-line { flex: 1; display: flex; align-items: center; gap: 10px; }
.check-line input { width: 18px; height: 18px; accent-color: #3BB273; }
.feed-item { display: flex; gap: 10px; }
.feed-av { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #E3E6EB; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.feed-item--event .feed-av { background: var(--ink); color: var(--accent); }
.feed-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.feed-meta { font-size: 12px; color: var(--muted-2); }
.feed-meta strong { color: var(--ink); }
.feed-text { line-height: 1.5; white-space: pre-wrap; }
.feed-item--event .feed-text { color: var(--muted-2); }
.comment { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 14px; border: 1px solid #D7DAE2; border-radius: 22px; }
.comment-input { flex: 1; min-width: 0; height: 34px; border: 0; background: transparent; }
.comment-input:focus { outline: none; }

/* правая колонка: поля и действия */
.fields { display: flex; flex-direction: column; gap: 4px; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: 12px; background: var(--card); }
.field-row--days { justify-content: flex-start; flex-wrap: wrap; gap: 4px; padding: 6px 10px; }
.field-k { color: var(--muted-2); font-size: 13px; }
.field-v { max-width: 60%; border: 0; background: transparent; font-weight: 500; text-align: right; color: var(--ink); }
.field-v--static { display: inline-flex; align-items: center; gap: 6px; }
.field-v--pair { display: inline-flex; gap: 4px; max-width: none; }
.field-v--pair input { border: 0; background: transparent; font-weight: 500; }
.day-box { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; }
.fields .btn { margin-top: 6px; justify-content: center; }
.watchers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--card); }
.watcher { display: inline-flex; align-items: center; gap: 4px; }
.side-actions { display: flex; flex-direction: column; gap: 8px; }
.btn--wide { width: 100%; justify-content: center; height: 42px; border-radius: 21px; }
.side-more summary { list-style: none; cursor: pointer; }
.side-more summary::-webkit-details-marker { display: none; }
.side-more form { margin-top: 8px; }
.side-box { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--card); border-radius: 14px; font-size: 13px; color: #3A4150; line-height: 1.5; }
.side-box-title { font-weight: 600; color: var(--ink); }
.side-box--danger summary { cursor: pointer; color: var(--danger); }

/* ---------- «Сегодня» ---------- */
.main--today { padding: 32px 40px 48px; gap: 24px; }
.today-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.today-id { display: flex; align-items: center; gap: 18px; }
.ring {
  width: 64px; height: 64px; flex: none; border-radius: 50%;
  background: conic-gradient(#4CC38A 0 var(--pct), #E3E6EB var(--pct) 100%);
  display: flex; align-items: center; justify-content: center;
}
.ring-in { width: 50px; height: 50px; border-radius: 50%; background: var(--page); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.week { display: flex; gap: 6px; flex-wrap: wrap; }
.wday { width: 52px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 10px; background: var(--card); color: #8A90A0; }
.wday-wd { font-size: 12px; }
.wday-n { font-weight: 700; font-size: 16px; color: var(--ink); }
.wday-dots { font-size: 11px; color: var(--muted-2); }
.wday.is-late .wday-dots { color: #B85A0E; }
.wday.is-today { background: var(--ink); color: #B9BCC6; }
.wday.is-today .wday-n { color: var(--accent); }
.wday.is-today .wday-dots { color: #FFFFFF; }
.overdue-box { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: #FFF4EA; border: 1px solid #F5D6B8; border-radius: 18px; }
.overdue-title { margin: 0; font-size: 14px; font-weight: 600; color: #A4500C; }
.link-btn--late { color: #A4500C; }
.overdue-box .trow { background: transparent; border: 0; padding: 0; min-height: 40px; }
.day-block { display: flex; flex-direction: column; gap: 6px; }
.day-block .h3 { padding-bottom: 6px; }
.trow--day { min-height: 48px; padding: 0 12px; border: 1px solid #E8EBF0; border-radius: 10px; }
.regular { display: flex; flex-wrap: wrap; gap: 8px; }
.reg-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; background: var(--card);
  border: 1px solid #D5DAE2; border-radius: 20px; color: var(--ink); cursor: pointer;
}
.reg-chip.is-done { background: #E8F6EE; cursor: default; }
.reg-mark { color: var(--muted-2); }
.reg-chip.is-done .reg-mark { color: var(--ok); }

/* ---------- плитка «Сегодня» на Пульте ---------- */
.today-tile { background: var(--card); border-radius: 28px; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.today-tile-link { padding: 6px 12px; background: var(--page); border-radius: 20px; font-weight: 600; }
.trow--tile { min-height: 42px; padding: 0 10px; border: 0; border-radius: 12px; }
.trow--tile.is-late { background: #FFEBDD; }

@media (max-width: 700px) {
  .main--today { padding: 16px; }
  .trow-due { min-width: 0; }
  .field-v { max-width: 70%; }
}