/* PULSE — модуль «Задачи» (tasks-board.js): веб-канбан задач компании для
 * кабинета руководителя/HR. Доска (4 колонки) + карточки + drag-and-drop +
 * drawer с деталями + шапка с фильтрами.
 *
 * Оболочка PULSE (сайдбар/топбар) не затрагивается — она в styles.css/voice.css.
 * Все классы/id — префикс tb-, во избежание конфликтов с остальным кабинетом.
 *
 * Переменные объявлены на .tb-shell (не на :root), чтобы не утекать в остальной
 * кабинет — тот же приём, что в execution-loop.css (.exec-shell) и quality.css
 * (.qms-shell). Светлая тема — дефолт; тёмная — по prefers-color-scheme и по
 * ручному переключателю data-theme. Акцент — teal (#0F766E), как во всём кабинете. */

.tb-shell{
  --tb-plane:#F7F7F6; --tb-surface:#FFFFFF; --tb-surface-2:#F6F6F5; --tb-surface-3:#F1F1F1;
  --tb-ink:#0A0A0A; --tb-ink2:#6A6A6A; --tb-muted:#9A9A9A;
  --tb-hair:#ECECEC; --tb-hair2:#F2F2F1;
  --tb-accent:#0F766E; --tb-accent-2:#0B5C56; --tb-accent-wash:#E7F3F1;
  --tb-good:#5F8B6F; --tb-good-wash:#EEF4EF;
  --tb-warn:#B28A50; --tb-warn-wash:#F7F1E6;
  --tb-risk:#B6736B; --tb-risk-wash:#F7EDEB;
  --tb-r:16px; --tb-r-s:11px;
  --tb-col-h:clamp(460px, calc(100vh - 320px), 760px);
  color:var(--tb-ink);
}
@media (prefers-color-scheme: dark){
  .tb-shell{
    --tb-plane:#161616; --tb-surface:#1D1D1C; --tb-surface-2:#232322; --tb-surface-3:#2A2A28;
    --tb-ink:#F2F2F0; --tb-ink2:#B5B5B0; --tb-muted:#83837E;
    --tb-hair:#333331; --tb-hair2:#2B2B29;
    --tb-accent:#4FBDB2; --tb-accent-2:#6FD1C7; --tb-accent-wash:#163330;
    --tb-good:#8FCBA2; --tb-good-wash:#1E2B22;
    --tb-warn:#E0B87B; --tb-warn-wash:#2E2617;
    --tb-risk:#E0958A; --tb-risk-wash:#332120;
  }
}
:root[data-theme="dark"] .tb-shell{
  --tb-plane:#161616; --tb-surface:#1D1D1C; --tb-surface-2:#232322; --tb-surface-3:#2A2A28;
  --tb-ink:#F2F2F0; --tb-ink2:#B5B5B0; --tb-muted:#83837E;
  --tb-hair:#333331; --tb-hair2:#2B2B29;
  --tb-accent:#4FBDB2; --tb-accent-2:#6FD1C7; --tb-accent-wash:#163330;
  --tb-good:#8FCBA2; --tb-good-wash:#1E2B22;
  --tb-warn:#E0B87B; --tb-warn-wash:#2E2617;
  --tb-risk:#E0958A; --tb-risk-wash:#332120;
}
:root[data-theme="light"] .tb-shell{
  --tb-plane:#F7F7F6; --tb-surface:#FFFFFF; --tb-surface-2:#F6F6F5; --tb-surface-3:#F1F1F1;
  --tb-ink:#0A0A0A; --tb-ink2:#6A6A6A; --tb-muted:#9A9A9A;
  --tb-hair:#ECECEC; --tb-hair2:#F2F2F1;
  --tb-accent:#0F766E; --tb-accent-2:#0B5C56; --tb-accent-wash:#E7F3F1;
  --tb-good:#5F8B6F; --tb-good-wash:#EEF4EF;
  --tb-warn:#B28A50; --tb-warn-wash:#F7F1E6;
  --tb-risk:#B6736B; --tb-risk-wash:#F7EDEB;
}

.tb-shell{ max-width:1440px; width:100%; animation:tbFade .25s ease; }
.tb-shell *{ box-sizing:border-box; }
.tb-shell button{ font-family:inherit; }
@keyframes tbFade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .tb-shell{ animation:none; } }

.tb-hint{ font-size:12px; color:var(--tb-muted); margin:0; }

/* ---------------- шапка с фильтрами ---------------- */
.tb-filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 18px; }
.tb-search{
  display:flex; align-items:center; gap:8px; flex:1 1 240px; min-width:200px; max-width:360px;
  border:1px solid var(--tb-hair); border-radius:999px; background:var(--tb-surface); padding:0 14px; height:40px;
}
.tb-search__ic{ color:var(--tb-muted); display:flex; flex:none; }
.tb-search input{
  all:unset; flex:1; min-width:0; font-size:13.5px; color:var(--tb-ink); height:40px;
}
.tb-search input::placeholder{ color:var(--tb-muted); }
.tb-search:focus-within{ border-color:var(--tb-accent); }
.tb-select{
  font-family:inherit; font-size:13px; font-weight:560; color:var(--tb-ink); background:var(--tb-surface);
  border:1px solid var(--tb-hair); border-radius:999px; padding:0 32px 0 14px; height:40px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
}
.tb-select:hover{ border-color:var(--tb-accent); }
.tb-select:focus{ outline:none; border-color:var(--tb-accent); }

/* ---------------- доска Kanban (4 колонки) ---------------- */
.tb-board{
  display:grid; grid-template-columns:repeat(4,minmax(240px,1fr)); gap:14px;
  align-items:start; overflow-x:auto; padding-bottom:4px;
}
.tb-col{
  display:flex; flex-direction:column; min-width:0; min-height:180px;
  border:1px solid var(--tb-hair); border-radius:var(--tb-r); background:var(--tb-plane); overflow:hidden;
}
.tb-col__head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--tb-hair); background:var(--tb-surface);
}
.tb-col__ttl{ font-size:13px; font-weight:680; color:var(--tb-ink); }
.tb-col__n{ font-size:11.5px; font-weight:650; color:var(--tb-ink2); background:var(--tb-surface-3); border-radius:999px; padding:2px 9px; }
.tb-col__body{ flex:1; min-height:0; max-height:var(--tb-col-h); overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; transition:background .14s; }
.tb-col__body--over{ background:var(--tb-accent-wash); outline:2px dashed var(--tb-accent); outline-offset:-6px; border-radius:var(--tb-r); }
.tb-col__empty{ font-size:12px; color:var(--tb-muted); text-align:center; padding:18px 4px; margin:0; }

/* ---------------- карточка задачи ---------------- */
.tb-card{
  position:relative; display:flex; flex-direction:column; gap:8px; width:100%; cursor:grab;
  padding:12px 13px 13px; border-radius:var(--tb-r-s); border:1px solid var(--tb-hair); background:var(--tb-surface);
  transition:border-color .14s, transform .14s, box-shadow .14s;
}
.tb-card:hover{ border-color:var(--tb-accent); transform:translateY(-1px); box-shadow:0 6px 18px rgba(10,10,10,.08); }
.tb-card:focus-visible{ outline:2px solid var(--tb-accent); outline-offset:2px; }
.tb-card--dragging{ opacity:.5; cursor:grabbing; border-color:var(--tb-accent); box-shadow:0 10px 24px rgba(10,10,10,.14); }
.tb-card__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tb-card__title{ font-size:13.5px; font-weight:600; line-height:1.4; color:var(--tb-ink); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tb-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.tb-card__by{ font-size:11px; color:var(--tb-muted); }

/* приоритет */
.tb-prio{ font-size:10.5px; font-weight:700; letter-spacing:.3px; padding:2.5px 9px; border-radius:999px; white-space:nowrap; }
.tb-prio--high{ color:var(--tb-risk); background:var(--tb-risk-wash); }
.tb-prio--normal{ color:var(--tb-ink2); background:var(--tb-surface-3); }
.tb-prio--low{ color:var(--tb-accent-2); background:var(--tb-accent-wash); }

/* срок */
.tb-due{ font-size:11px; font-weight:600; color:var(--tb-ink2); white-space:nowrap; }
.tb-due--over{ color:var(--tb-risk); }

/* прогресс чек-листа */
.tb-check{ display:flex; align-items:center; gap:8px; }
.tb-check__bar{ flex:1; height:6px; background:var(--tb-surface-3); border-radius:999px; overflow:hidden; }
.tb-check__bar i{ display:block; height:100%; border-radius:999px; background:var(--tb-accent); }
.tb-check__n{ font-size:11px; font-weight:620; color:var(--tb-ink2); white-space:nowrap; }
.tb-check--wide{ margin-top:2px; }

/* исполнитель на карточке */
.tb-who{ display:inline-flex; align-items:center; gap:8px; min-width:0; }
.tb-who__name{ font-size:12px; color:var(--tb-ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.tb-ava{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:26px; height:26px; border-radius:50%; background:var(--tb-accent-wash); color:var(--tb-accent-2);
  font-size:10.5px; font-weight:700; letter-spacing:.3px;
}

@media (max-width:1180px){ .tb-board{ grid-template-columns:repeat(4,minmax(224px,1fr)); } }
@media (max-width:900px){
  .tb-board{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:min(80vw,300px); }
  .tb-col{ min-width:0; }
}
@media (max-width:560px){
  .tb-filters{ gap:8px; }
  .tb-search{ flex:1 1 100%; max-width:none; }
  .tb-select{ flex:1 1 calc(50% - 4px); }
}

/* ================= DRAWER деталей задачи ================= */
.tb-scrim{ position:fixed; inset:0; background:rgba(10,16,24,.45); opacity:0; pointer-events:none; transition:opacity .2s; z-index:960; }
.tb-scrim.tb-on{ opacity:1; pointer-events:auto; }
.tb-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(520px,94vw); background:var(--tb-surface); z-index:961;
  box-shadow:0 30px 70px rgba(10,10,10,.28); transform:translateX(105%); transition:transform .34s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column; border-left:1px solid var(--tb-hair); border-top:3px solid var(--tb-ink);
}
.tb-drawer.tb-on{ transform:none; }
@media (prefers-reduced-motion:reduce){ .tb-drawer{ transition:none!important; } }
.tb-dhead{ display:flex; align-items:flex-start; gap:10px; padding:16px 20px; border-bottom:1px solid var(--tb-hair); flex:0 0 auto; }
.tb-dttl{ font-size:15px; font-weight:680; line-height:1.3; color:var(--tb-ink); }
.tb-dsub{ font-size:11.5px; color:var(--tb-muted); margin-top:2px; }
.tb-dclose{ all:unset; cursor:pointer; margin-left:auto; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--tb-muted); font-size:15px; flex:none; }
.tb-dclose:hover{ background:var(--tb-surface-2); color:var(--tb-ink); }
.tb-dbody{ overflow-y:auto; padding:18px 20px 30px; flex:1; }
.tb-dsec{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.tb-dlab{ font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--tb-muted); margin-bottom:6px; }
.tb-dval{ font-size:13.5px; color:var(--tb-ink); line-height:1.5; margin:0; }
.tb-drow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }

.tb-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:620; padding:2.5px 10px; border-radius:999px; white-space:nowrap; color:var(--tb-ink2); background:var(--tb-surface-3); }
.tb-pill--status{ color:var(--tb-accent-2); background:var(--tb-accent-wash); }
.tb-pill--over{ color:var(--tb-risk); background:var(--tb-risk-wash); }

/* кнопки перемещения (мобильный аналог DnD) */
.tb-move{ display:flex; gap:8px; flex-wrap:wrap; }
.tb-move__btn{
  all:unset; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--tb-ink2);
  padding:7px 14px; border-radius:999px; border:1px solid var(--tb-hair); background:var(--tb-surface);
  transition:color .12s, border-color .12s, background .12s;
}
.tb-move__btn:hover{ border-color:var(--tb-accent); color:var(--tb-ink); }
.tb-move__btn--on{ background:var(--tb-accent); border-color:var(--tb-accent); color:#fff; cursor:default; }
.tb-move__btn:focus-visible{ outline:2px solid var(--tb-accent); outline-offset:2px; }

/* персоны в drawer */
.tb-person{ display:inline-flex; align-items:center; gap:10px; }
.tb-person__name{ display:block; font-size:13.5px; font-weight:560; color:var(--tb-ink); }
.tb-person__sub{ display:block; font-size:11.5px; color:var(--tb-muted); margin-top:1px; }
.tb-people{ display:flex; flex-direction:column; gap:8px; }
.tb-person--sm .tb-person__name{ font-size:12.5px; font-weight:500; }

@media (max-width:560px){
  .tb-drawer{ width:100vw; }
  .tb-drow{ grid-template-columns:1fr; gap:12px; }
}