/* ══════════════════════════════════════
   TASKS PAGE — New Design
   ══════════════════════════════════════ */

/* ── Local tokens ── */
.page-tasks {
    --tk-green:  #A8E76A;
    --tk-ink:    #111217;
    --tk-muted:  #8d919d;
    --tk-line:   rgba(17, 18, 23, .07);
}

/* ── Page shell ── */
.page-tasks {
    padding: 0 !important;
}
.page-tasks.active {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
/* «Регулярные» — единственная вкладка, где карточки/таблица/матрица не
   обязаны вписываться в один экран: их не сжимаем и не даём им свой
   внутренний скролл, а разрешаем странице расти и скроллиться целиком.
   Переключается в switchTasksView() (assets/js/tasks.js). У остальных
   вкладок (канбан-доска и т.п.) поведение "ровно один экран" не трогаем. */
.page-tasks.active.tasks-page-scroll {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}
.tasks-page-scroll .tasks-view.active {
    flex: none;
    overflow: visible;
}
.tasks-page-scroll .tasks-recur-grid,
.tasks-page-scroll .tasks-recur-table-wrap,
.tasks-page-scroll .tasks-recur-matrix-wrap {
    flex: none;
    overflow: visible;
    height: auto;
}

/* ── Header ── */
.tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px 20px;
    background: transparent;
    flex-shrink: 0;
    gap: 16px;
}
.tasks-header-left  {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.tasks-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.tasks-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Unbounded', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--tk-ink);
    letter-spacing: -0.3px;
    flex-shrink: 0;
}
.tasks-page-title svg { color: var(--tk-ink); opacity: .55; }

/* ── Search ── */
.tasks-search-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 999px;
    padding: 7px 16px;
    color: var(--tk-muted);
    height: 38px;
}
.tasks-search {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--tk-ink);
    width: 150px;
    font-family: inherit;
}
.tasks-search::placeholder { color: var(--tk-muted); }

/* ── Primary button ── */
.crm-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 18px;
    background: #111217;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: opacity .15s;
}
.crm-btn-primary:hover { opacity: .78; }

/* ── Stats strip: segmented view-switcher with a sliding indicator ──
   Каждый таб flex-shrink:0 (текст никогда не наезжает на соседей), а сама
   полоса — flex:1 min-width:0 + overflow-x:auto: если места объективно не
   хватает (например открытый modern-сайдбар уменьшает ширину контента, но
   viewport при этом не меняется и медиа-запрос ниже не срабатывает) — полоса
   мягко скроллится по горизонтали вместо наезда текста на "Поиск...". */
.tasks-stats {
    position: relative;
    display: flex;
    background: rgba(17, 18, 23, .05);
    border-radius: 999px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 4px;
    gap: 2px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}
.tasks-stats::-webkit-scrollbar { display: none; }

/* Скользящая тёмная плашка активного таба — двигается через translateX/width,
   позиция считается в JS (_tasksTabsIndicatorSync в tasks.js). */
.tasks-tabsbar-indicator {
    position: absolute;
    top: 4px; left: 0;
    height: calc(100% - 8px);
    width: 0;
    background: #111217;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(17, 18, 23, .18);
    transform: translateX(0);
    transition: transform .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), opacity .15s;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}
.tasks-tabsbar-indicator.no-anim { transition: none; }

.tasks-stat-chip {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: default;
    transition: color .15s, opacity .15s;
    white-space: nowrap;
}
.tasks-stat-chip--clickable { cursor: pointer; }
.tasks-stat-chip--active { color: #fff; }
.tasks-stat-chip--active .tasks-stat-chip-label,
.tasks-stat-chip--active .tasks-stat-chip-count,
.tasks-stat-chip--active svg { color: #fff !important; stroke: currentColor; }
.tasks-stat-chip:hover {
    color: var(--tk-ink);
    background: rgba(17, 18, 23, .07);
}
.tasks-stat-chip--active:hover { background: transparent; }
.tasks-stat-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tasks-stat-chip-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--tk-muted);
}
/* Цветной акцент только пока таб неактивен — на активном (белый текст на
   тёмной плашке) свой цвет спорил бы с общим видом сегмент-контрола. */
.tasks-stat-chip-label--overdue { color: #ef4444; }
.tasks-stat-chip-label--recur   { color: #7c3aed; }
.tasks-stat-chip--active .tasks-stat-chip-label--overdue,
.tasks-stat-chip--active .tasks-stat-chip-label--recur { color: #fff !important; }
.tasks-stat-chip-count {
    font-size: 12px;
    font-weight: 800;
    color: var(--tk-ink);
}
.tasks-stat-chip-count--red   { color: #dc2626; }
.tasks-stat-chip-count--green { color: #16a34a; }

@media (max-width: 1180px) {
    .tasks-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .tasks-header-left {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .tasks-header-right {
        margin-left: auto;
    }
}

/* ── Views ── */
/* min-height:0 обязателен — без него flex:1 внутри flex-колонки не
   сжимается меньше высоты своего контента, и вложенный overflow:auto
   (например .tasks-recur-matrix-wrap) не скроллит, а контент просто
   обрезается верхним .page-tasks (height:100vh; overflow:hidden). */
.tasks-view { display: none; flex: 1; min-height: 0; overflow: hidden; }
.tasks-view.active { display: flex; flex-direction: column; }

/* ── Kanban ── */
.tasks-kanban {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 0 28px 24px;
}
.tasks-kanban--3col .tasks-col {
    min-width: 380px;
    max-width: 380px;
}

.tasks-col {
    min-width: 360px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .58);
    border-radius: 20px;
    border: 1px solid rgba(17, 18, 23, .07);
    overflow: hidden;
    max-height: calc(100vh - 185px);
}

/* Column tints */
.tasks-col[data-col="new"]         { background: rgba(247, 248, 246, .9); }
.tasks-col[data-col="in_progress"] { background: rgba(241, 244, 251, .9); }
.tasks-col[data-col="review"]      { background: rgba(242, 249, 238, .9); }

/* Column head */
.tasks-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 15px 14px 12px;
    background: transparent;
    flex-shrink: 0;
}
.tasks-col-head-left  { display: flex; align-items: center; gap: 8px; }
.tasks-col-head-right { display: flex; align-items: center; gap: 3px; }

.tasks-col-indicator {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tasks-col-label {
    font-size: 11px;
    font-weight: 900;
    color: var(--tk-ink);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.tasks-col-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--tk-muted);
    background: rgba(17, 18, 23, .06);
    border: none;
    border-radius: 100px;
    padding: 2px 8px;
}
.tasks-col-add-btn,
.tasks-col-more-btn {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--tk-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .15s;
}
.tasks-col-add-btn:hover,
.tasks-col-more-btn:hover {
    background: rgba(17, 18, 23, .07);
    color: var(--tk-ink);
}

/* Column body */
.tasks-col-body {
    flex: 1;
    overflow-y: auto;
    /* top:10px — не 4px: бейдж «повторяется» (.task-recur-badge) торчит на
       -7px над карточкой, а overflow-y:auto обрезает всё, что выходит за
       padding-box контейнера — у первой карточки колонки не хватало места. */
    padding: 10px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tasks-col-body::-webkit-scrollbar { width: 3px; }
.tasks-col-body::-webkit-scrollbar-track { background: transparent; }
.tasks-col-body::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .12); border-radius: 4px; }

/* Column footer */
.tasks-col-footer-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tk-muted);
    background: none;
    border: none;
    border-top: 1px solid rgba(17, 18, 23, .07);
    cursor: pointer;
    font-family: inherit;
    transition: color .13s, background .13s;
    text-align: left;
    flex-shrink: 0;
}
.tasks-col-footer-btn:hover { color: var(--tk-ink); background: rgba(255, 255, 255, .6); }

.tasks-col-empty {
    font-size: 13px;
    color: var(--tk-muted);
    text-align: center;
    padding: 28px 0;
    opacity: .55;
}

/* ══════════════════════════════════════
   TASK CARD
   ══════════════════════════════════════ */

.task-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .08);
    border-radius: 16px;
    padding: 16px 16px 14px;
    cursor: pointer;
    transition: box-shadow .18s, border-color .18s, transform .18s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.task-card:hover {
    box-shadow: 0 6px 22px rgba(17, 18, 23, .1);
    border-color: rgba(17, 18, 23, .14);
    transform: translateY(-1px);
}

/* Бейдж «повторяется» (см. tmRecur* / _recurApplyBadge в tasks.js) —
   правило хранится на фронте, поэтому проставляется JS-ом после рендера. */
.task-recur-badge {
    position: absolute;
    top: -7px; right: -7px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #f3ecfe;
    color: #7c3aed;
    border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(124, 58, 237, .25);
}
.task-recur-badge svg { width: 11px; height: 11px; }

/* Title */
.task-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tk-ink);
    line-height: 1.45;
    padding-top: 3px;
    /* длинные названия (в т.ч. без пробелов): перенос в границах карточки,
       максимум 2 строки, дальше — внутренний скролл */
    overflow-wrap: anywhere;
    word-break: break-word;
    max-height: calc(1.45em * 2 + 3px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 18, 23, .14) transparent;
}
.task-card-title::-webkit-scrollbar { width: 3px; }
.task-card-title::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .14); border-radius: 99px; }

/* Hide info labels */
.task-card-info-label { display: none; }

/* Person row */
.task-card-person-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.task-card-person-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.task-card-person-col--right { align-items: flex-end; }

.task-card-person {
    display: flex;
    align-items: center;
    gap: 6px;
}
.task-assignee-dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 0;
}
.task-assignee-dot img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.task-assignee-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-muted);
}
.task-card-deadline {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-muted);
}
.task-card-deadline.overdue       { color: #dc2626; }
.task-card-deadline.overdue svg   { stroke: #dc2626; }

/* Tags + counters */
.task-card-tags-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.task-card-tags { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }

.task-tag {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--tk-muted);
    background: rgba(17, 18, 23, .05);
    border: none;
    border-radius: 999px;
    padding: 3px 9px;
}
.task-tag--priority {
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 10.5px;
    font-weight: 700;
    border: none;
}

.task-card-counters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Quick status pill on card */
.task-status-pill {
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
    background: none;
}
.task-status-pill:hover { opacity: .75; }

/* Quick status dropdown */
.quick-status-menu {
    background: #fff;
    border: 1px solid rgba(17,18,23,.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 4px;
    min-width: 148px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.quick-status-option {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--tk-text, #111217);
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}
.quick-status-option:hover { background: rgba(17,18,23,.06); }
.quick-status-option.active { background: rgba(17,18,23,.05); }
.quick-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.task-counter {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--tk-muted);
    opacity: .65;
}

/* Progress row */
.task-card-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    cursor: pointer;
    user-select: none;
}
.task-card-progress-row:hover .task-subtasks-toggle {
    border-color: rgba(17, 18, 23, .2);
    color: var(--tk-ink);
}
.task-progress-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--tk-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.task-progress-track {
    flex: 1;
    height: 5px;
    background: rgba(17, 18, 23, .08);
    border-radius: 99px;
    overflow: hidden;
}
.task-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .3s ease;
}
.task-subtasks-toggle {
    width: 24px; height: 24px;
    border-radius: 7px;
    border: 1px solid rgba(17, 18, 23, .12);
    background: transparent;
    color: var(--tk-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s;
    pointer-events: none;
}
.task-subtasks-toggle.open .toggle-icon { transform: rotate(180deg); }
.toggle-icon { transition: transform .22s ease; }

/* Subtasks expanded */
.task-subtasks-expand {
    display: none;
    flex-direction: column;
    gap: 1px;
    border-top: 1px solid rgba(17, 18, 23, .07);
    padding-top: 8px;
    margin-top: -4px;
}
.task-subtasks-expand.open { display: flex; }

.task-sub-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 6px;
    border-radius: 8px;
    transition: background .12s;
}
.task-sub-row:hover { background: rgba(17, 18, 23, .04); }
.task-sub-check {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(17, 18, 23, .18);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    align-self: center;
}
.task-sub-check:not(.done):not(.locked):hover { border-color: var(--tk-green, #A8E76A); }
.task-sub-check.done { background: var(--tk-green, #A8E76A); border-color: var(--tk-green, #A8E76A); color: #2a5c12; }
.task-sub-check.locked { cursor: not-allowed; opacity: .45; }
.task-sub-check.locked:hover { border-color: rgba(17,18,23,.18); }

/* Подзадача с клиентами (карточка доски) — тот же вычисляемый бейдж "X/Y" +
   разворот мини-чек-листа, что и в модалке (см. .tm-sub-client-badge). */
.task-sub-client-badge {
    display: inline-flex; align-items: center; gap: 3px;
    height: 18px; padding: 0 6px; flex-shrink: 0;
    border-radius: 999px;
    border: 1.5px solid rgba(17, 18, 23, .16);
    background: #fff;
    font-size: 9.5px; font-weight: 800;
    color: var(--tk-muted);
    font-family: inherit;
    cursor: pointer;
    transition: all .13s;
}
.task-sub-client-badge svg { opacity: .55; transition: transform .15s, opacity .15s; }
.task-sub-client-badge.expanded svg { transform: rotate(180deg); }
.task-sub-client-badge:hover { border-color: #7c3aed; color: #7c3aed; }
.task-sub-client-badge.done { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.task-sub-client-badge.done svg { opacity: 1; }

.task-sub-clients-panel {
    display: flex; flex-wrap: wrap; gap: 5px;
    padding: 2px 6px 8px 31px;
    width: 100%;
}
.task-sub-client-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(17, 18, 23, .12);
    background: #fff;
    font-size: 10.5px; font-weight: 600; color: var(--tk-ink);
    font-family: inherit;
    cursor: pointer;
    transition: all .13s;
}
.task-sub-client-chip:hover { border-color: #7c3aed; }
.task-sub-client-chip.done { background: rgba(124, 58, 237, .1); border-color: rgba(124, 58, 237, .3); color: #6d28d9; }
.task-sub-client-chip svg { flex-shrink: 0; }

.task-sub-title {
    font-size: 12px;
    color: var(--tk-ink);
    flex: 1;
    min-width: 0;
    /* до 2 строк, дальше скролл внутри */
    line-height: 1.4;
    max-height: calc(1.4em * 2);
    overflow-y: auto;
    overflow-wrap: anywhere;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.task-sub-title.done { text-decoration: line-through; color: var(--tk-muted); }

/* Тонкий скроллбар названий подзадач (карточка + модалка) */
.task-sub-title::-webkit-scrollbar,
.tm-sub-title::-webkit-scrollbar { width: 3px; }
.task-sub-title::-webkit-scrollbar-thumb,
.tm-sub-title::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .18); border-radius: 2px; }
.task-sub-title::-webkit-scrollbar-track,
.tm-sub-title::-webkit-scrollbar-track { background: transparent; }

.task-sub-person {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-left: auto;
    width: 90px;
}
.task-sub-avatar {
    width: 16px; height: 16px;
    border-radius: 50%;
    font-size: 7px; font-weight: 700;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.task-sub-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.task-sub-person-name {
    font-size: 11px;
    color: var(--tk-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
.task-sub-due {
    font-size: 11px;
    color: var(--tk-muted);
    white-space: nowrap;
    flex-shrink: 0;
    width: 40px;
    text-align: right;
}
.task-sub-add {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tk-muted);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 5px 6px;
    border-radius: 7px;
    margin-top: 2px;
    transition: color .12s, background .12s;
    text-align: left;
}
.task-sub-add:hover { color: var(--tk-ink); background: rgba(17, 18, 23, .04); }

/* Inline subtask input */
.task-sub-input-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(17, 18, 23, .03);
    border: 1.5px solid var(--tk-green, #A8E76A);
    margin-bottom: 2px;
}
.task-sub-input-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.task-sub-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--tk-ink);
    font-family: inherit;
}
.task-sub-input::placeholder { color: var(--tk-muted); }
.task-sub-input-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 26px;
}
.task-sub-picker-wrap { display: flex; gap: 4px; align-items: center; }
.task-sub-picker-btn {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    color: #fff;
    font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: .4;
    transition: opacity .13s, box-shadow .13s;
    flex-shrink: 0;
    overflow: hidden;
    padding: 0;
}
.task-sub-picker-btn:hover { opacity: .75; }
.task-sub-picker-btn.selected { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px currentColor; }
.task-sub-picker-btn img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.task-sub-date {
    border: 1px solid rgba(17, 18, 23, .12);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--tk-ink);
    font-family: inherit;
    background: #fff;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}
.task-sub-date:focus { border-color: var(--accent); }
.task-date-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    line-height: 1;
}
.task-date-trigger.is-empty {
    color: rgba(17, 18, 23, .34);
}
.task-sub-input-confirm,
.task-sub-input-cancel {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .13s;
}
.task-sub-input-confirm { background: rgba(168, 231, 106, .35); color: #2a5c12; }
.task-sub-input-confirm:hover { background: var(--tk-green, #A8E76A); }
.task-sub-input-cancel  { background: rgba(17, 18, 23, .07); color: var(--tk-muted); }
.task-sub-input-cancel:hover  { background: #fee2e2; color: #dc2626; }
.task-sub-input-meta .task-sub-input-confirm { margin-left: auto; }

/* ══════════════════════════════════════
   TASK MODAL
   ══════════════════════════════════════ */

.tm-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .28);
    z-index: 500;
    opacity: 0; pointer-events: none;
    transition: opacity .22s;
    backdrop-filter: blur(3px);
}
.tm-overlay.show { opacity: 1; pointer-events: auto; }

.tm-modal {
    --tk-green:  #A8E76A;
    --tk-ink:    #111217;
    --tk-muted:  #8d919d;
    --tk-line:   rgba(17, 18, 23, .07);
    position: fixed;
    top: 50%; left: 50%;
    width: min(1080px, 96vw);
    max-height: 90vh;
    background: #f8f9f6;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .18), 0 4px 16px rgba(0, 0, 0, .06);
    z-index: 501;
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translate(-50%, -48%) scale(.96);
    opacity: 0; pointer-events: none;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .22s ease;
}
.tm-modal.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; pointer-events: auto;
}

/* Modal header */
.tmn-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 22px;
    border-bottom: 1px solid rgba(17, 18, 23, .07);
    flex-shrink: 0;
    background: transparent;
    min-height: 50px;
}
.tmn-header-left  { display: flex; align-items: center; gap: 10px; }
.tmn-header-right { display: flex; align-items: center; gap: 10px; }
.tmn-header-title {
    font-size: 10px; font-weight: 900;
    color: var(--tk-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}
.tm-delete-btn {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; color: var(--tk-muted);
    background: none; border: none; cursor: pointer;
    padding: 6px 12px; border-radius: 999px;
    transition: all .13s; font-family: inherit;
}
.tm-delete-btn:hover { background: #fff1f1; color: #dc2626; }
.tmn-close-btn {
    width: 26px; height: 26px; border-radius: 50%;
    border: none; background: rgba(17, 18, 23, .07); color: var(--tk-ink);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .13s;
}
.tmn-close-btn:hover { background: rgba(17, 18, 23, .14); }

/* Modal body */
.tmn-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Left column */
.tmn-left {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 22px 28px 20px;
    border-right: 1px solid rgba(17, 18, 23, .07);
    display: flex;
    flex-direction: column;
    background: #fff;
    gap: 0;
}
.tmn-left::-webkit-scrollbar { width: 3px; }
.tmn-left::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .1); border-radius: 4px; }

.tmn-title-input {
    width: 100%;
    font-size: 22px;
    font-weight: 700;
    color: var(--tk-ink);
    font-family: inherit;
    border: none;
    outline: none;
    background: transparent;
    margin-bottom: 14px;
    line-height: 1.3;
}
.tmn-title-input::placeholder { color: rgba(17, 18, 23, .22); }

/* Привязка задачи к клиенту CRM — .dm-client-link/.dm-client-pick-list и
   т.п. переиспользуют готовые классы из manager.css один в один, здесь
   ничего своего не нужно. Клик по привязанному клиенту (карточка-плашка)
   открывает его карточку в CRM — см. tmClientLinkOpenCard() в tasks.js. */

.tmn-desc-wrap {
    position: relative;
    margin-bottom: 18px;
}
.tmn-desc {
    width: 100%;
    min-height: 60px;
    max-height: 220px;
    overflow-y: auto;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--tk-muted);
    font-family: inherit;
    background: transparent;
    line-height: 1.6;
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: text;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 18, 23, .14) transparent;
}
.tmn-desc::-webkit-scrollbar { width: 4px; }
.tmn-desc::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .14); border-radius: 99px; }
/* плейсхолдер contenteditable */
.tmn-desc:empty::before {
    content: attr(data-placeholder);
    color: rgba(17, 18, 23, .2);
    pointer-events: none;
}

/* Инлайн-ссылка на файл внутри текста (описание + чат) */
.tm-desc-flink {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    padding: 1.5px 8px;
    border-radius: 999px;
    background: #eef8e2;
    color: #3d7a12;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .13s, color .13s;
}
.tm-desc-flink:hover { background: #ddf3c2; color: #2d5c0d; }
.tm-desc-flink--gone {
    background: #f0f0f2;
    color: var(--tk-muted);
    text-decoration: line-through;
    cursor: default;
}

/* Слеш-меню описания: fixed + JS-координаты (паттерн .cdd-panel/.tm-date-panel —
   левая колонка скроллится, absolute внутри неё обрезается) */
.tm-slash-menu-desc {
    position: fixed;
    top: auto; bottom: auto; left: auto; right: auto;
    width: 420px;
    z-index: 9100;
}

/* Info rows */
.tmn-info-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(17, 18, 23, .07);
    border-bottom: 1px solid rgba(17, 18, 23, .07);
    margin-bottom: 20px;
}
.tmn-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(17, 18, 23, .06);
    min-height: 40px;
}
.tmn-info-row:last-child { border-bottom: none; }
.tmn-info-label {
    font-size: 10px;
    font-weight: 900;
    color: var(--tk-muted);
    width: 100px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tmn-field-select {
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tk-ink);
    font-family: inherit;
    background: rgba(17, 18, 23, .05);
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}
.tmn-field-select:focus { border-color: var(--accent); }
.tm-date-pill {
    border: 1px solid rgba(17,18,23,.1);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tk-ink);
    font-family: inherit;
    background: rgba(17,18,23,.04);
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
    flex: 1;
}
.tm-date-pill:focus {
    border-color: var(--tk-green, #A8E76A);
}
.tm-date-picker {
    position: relative;
    flex: 1;
    min-width: 0;
}

.tm-date-trigger {
    width: min(180px, 100%);
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid rgba(17,18,23,.1);
    border-radius: 999px;
    background: rgba(17,18,23,.04);
    color: var(--tk-ink, #111217);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.tm-date-trigger:hover,
.tm-date-picker.open .tm-date-trigger {
    border-color: var(--tk-green, #A8E76A);
    background: #fff;
}
.tm-date-trigger svg {
    color: var(--tk-ink, #111217);
    flex-shrink: 0;
}
.tm-date-trigger.is-empty .tm-date-value {
    color: rgba(17,18,23,.34);
}

.tm-date-panel {
    position: fixed;
    display: none;
    width: 292px;
    padding: 14px;
    border: 1px solid rgba(17,18,23,.1);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(17,18,23,.16), 0 2px 8px rgba(17,18,23,.06);
    z-index: 9000;
}
.tm-date-panel.open {
    display: block;
    animation: tkFadeIn .16s ease;
}
.tm-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.tm-cal-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--tk-ink, #111217);
    text-transform: lowercase;
}
.tm-cal-title-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 10px;
    border-radius: 999px;
    transition: background .13s;
}
.tm-cal-title-btn:hover {
    background: rgba(168,231,106,.16);
}
.tm-cal-year-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-height: 230px;
    overflow-y: auto;
    margin-bottom: 4px;
}
.tm-cal-year-item {
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--tk-ink, #111217);
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .13s, color .13s;
}
.tm-cal-year-item:hover {
    background: rgba(168,231,106,.16);
    color: #2a5c12;
}
.tm-cal-year-item.is-current {
    background: var(--tk-green, #A8E76A);
    color: #2a5c12;
}
.tm-cal-nav {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(17,18,23,.05);
    color: var(--tk-ink, #111217);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .13s;
}
.tm-cal-nav:hover {
    background: rgba(17,18,23,.1);
}
.tm-cal-week,
.tm-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.tm-cal-week {
    margin-bottom: 5px;
}
.tm-cal-week span {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    color: var(--tk-muted, #8d919d);
    text-transform: uppercase;
}
.tm-cal-day {
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--tk-ink, #111217);
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .13s, color .13s, box-shadow .13s;
}
.tm-cal-day:hover {
    background: rgba(168,231,106,.16);
    color: #2a5c12;
}
.tm-cal-day.is-muted {
    color: rgba(17,18,23,.32);
}
.tm-cal-day.is-today {
    box-shadow: inset 0 0 0 1.5px rgba(168,231,106,.75);
}
.tm-cal-day.is-selected {
    background: var(--tk-green, #A8E76A);
    color: #2a5c12;
    box-shadow: 0 0 0 2px rgba(168,231,106,.28);
}
.tm-cal-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(17,18,23,.07);
}
.tm-cal-action {
    border: none;
    background: transparent;
    color: var(--tk-ink, #111217);
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 999px;
}
.tm-cal-action:hover {
    background: rgba(17,18,23,.06);
}
.tm-cal-action--clear {
    color: var(--tk-muted, #8d919d);
}
.tmn-status-cdd {
    max-width: 240px;
}

.tmn-assignees { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tm-assignee-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    cursor: pointer;
    transition: opacity .13s, box-shadow .18s;
    flex-shrink: 0;
    opacity: .32;
    overflow: hidden;
    padding: 0;
}
.tm-assignee-btn.selected { opacity: 1; }
.tm-assignee-btn:hover { opacity: .85; }
.tm-assignee-btn img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.tm-assignee-name { font-size: 12px; font-weight: 800; color: var(--tk-ink); }
.tm-assignee-tip {
    position: fixed;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) translateY(-100%);
    transition: opacity .12s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.tm-assignee-tip.show { opacity: 1; }
.tmn-priority-wrap {
    display: flex; align-items: center;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: opacity .13s;
    user-select: none;
}
.tmn-priority-wrap:hover { opacity: .78; }
.tmn-tags-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
}
.tm-tags-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tm-tag-chip {
    display: flex; align-items: center; gap: 4px;
    background: rgba(17, 18, 23, .06); color: var(--tk-ink);
    font-size: 11.5px; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
    border: none;
}
.tm-tag-chip button {
    background: none; border: none; color: var(--tk-muted);
    cursor: pointer; font-size: 13px; line-height: 1;
    padding: 0; display: flex; align-items: center;
}
.tmn-tag-input {
    border: none; outline: none;
    font-size: 13px; color: var(--tk-ink);
    background: transparent; font-family: inherit;
    min-width: 100px;
}
.tmn-tag-input::placeholder { color: rgba(17, 18, 23, .25); }

/* Tabs */
.tmn-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(17, 18, 23, .08);
    margin-bottom: 0;
}
.tmn-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 16px;
    font-size: 11px; font-weight: 900;
    color: var(--tk-muted);
    background: none; border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: color .13s, border-color .13s;
}
.tmn-tab:hover { color: var(--tk-ink); }
.tmn-tab.active { color: var(--tk-ink); border-bottom-color: var(--tk-ink); }
.tmn-tab-badge {
    font-size: 10px; font-weight: 800;
    background: rgba(17, 18, 23, .07); color: var(--tk-muted);
    border: none;
    border-radius: 999px;
    padding: 1px 7px;
}
.tmn-tab.active .tmn-tab-badge { background: var(--tk-ink); color: #fff; }

/* Tab panels */
.tmn-panel { display: none; padding-top: 16px; }
.tmn-panel.active {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

/* Subtasks panel */
.tmn-sub-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.tmn-sub-count { font-size: 13px; font-weight: 700; color: var(--tk-muted); }
.tmn-add-sub-btn {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 800; color: var(--tk-ink);
    background: rgba(17, 18, 23, .07);
    border: none;
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer; font-family: inherit;
    transition: background .13s;
}
.tmn-add-sub-btn:hover { background: rgba(17, 18, 23, .13); }

/* Modal subtask rows */
.tm-subtask-list { display: flex; flex-direction: column; gap: 4px; padding-bottom: 5px; }
.tm-subtask-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 10px;
    background: rgba(17, 18, 23, .04);
    border: 1px solid transparent;
    transition: border-color .13s, background .13s;
}
.tm-subtask-row:hover { border-color: rgba(17, 18, 23, .1); background: rgba(17, 18, 23, .06); }
.tm-sub-check {
    width: 18px; height: 18px; border-radius: 5px;
    border: 2px solid rgba(17, 18, 23, .2); background: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: all .13s;
}
.tm-sub-check.done { background: var(--tk-green, #A8E76A); border-color: var(--tk-green, #A8E76A); color: #2a5c12; }
.tm-sub-check:not(.done):hover { border-color: var(--tk-green, #A8E76A); }
.tm-sub-title {
    flex: 1; min-width: 0; border: none; outline: none;
    font-size: 13px; color: var(--tk-ink); background: transparent;
    font-family: inherit;
    /* textarea: 1 строка по умолчанию, растёт до 2, дальше скролл */
    resize: none;
    padding: 0; margin: 0;
    display: block;
    line-height: 1.4;
    max-height: calc(1.4em * 2);
    overflow-y: auto;
    overflow-wrap: anywhere;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.tm-sub-title.done { text-decoration: line-through; color: var(--tk-muted); }
.tm-sub-priority {
    font-size: 11px; border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 999px; padding: 3px 9px;
    background: rgba(17, 18, 23, .04); color: var(--tk-muted);
    cursor: pointer; outline: none; font-family: inherit; font-weight: 700;
}
.tm-sub-del {
    width: 22px; height: 22px; border-radius: 6px;
    border: none; background: none; color: rgba(17, 18, 23, .28);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .12s; flex-shrink: 0; font-size: 15px;
}
.tm-sub-del:hover { background: #fff1f1; color: #dc2626; }

/* ── Подзадача с клиентами: вместо ручного чекбокса — вычисляемый бейдж
   прогресса "X/Y" (done = отмечены все клиенты) + разворот мини-чек-листа
   под строкой. Фиолетовый — тот же акцент, что у всего блока «Повторять»/
   «Клиенты» и у матрицы на «Регулярные», чтобы визуально не путать с
   обычным (зелёным) done подзадачи. ── */
.tm-sub-client-badge {
    display: inline-flex; align-items: center; gap: 4px;
    height: 22px; padding: 0 8px; flex-shrink: 0;
    border-radius: 999px;
    border: 1.5px solid rgba(17, 18, 23, .16);
    background: #fff;
    font-size: 10.5px; font-weight: 800;
    color: var(--tk-muted);
    font-family: inherit;
    cursor: pointer;
    transition: all .13s;
}
.tm-sub-client-badge svg { opacity: .55; transition: transform .15s, opacity .15s; }
.tm-sub-client-badge.expanded svg { transform: rotate(180deg); }
.tm-sub-client-badge:hover { border-color: #7c3aed; color: #7c3aed; }
.tm-sub-client-badge.done { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.tm-sub-client-badge.done svg { opacity: 1; }
.tm-sub-client-badge--disabled { cursor: not-allowed; opacity: .5; }
.tm-sub-client-badge--disabled:hover { border-color: rgba(17, 18, 23, .16); color: var(--tk-muted); }

.tm-sub-clients-panel {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 2px 10px 10px 38px;
    margin-top: -2px;
}
.tm-sub-client-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(17, 18, 23, .12);
    background: #fff;
    font-size: 11.5px; font-weight: 600; color: var(--tk-ink);
    font-family: inherit;
    cursor: pointer;
    transition: all .13s;
}
.tm-sub-client-chip:hover { border-color: #7c3aed; }
.tm-sub-client-chip.done { background: rgba(124, 58, 237, .1); border-color: rgba(124, 58, 237, .3); color: #6d28d9; }
.tm-sub-client-chip svg { flex-shrink: 0; }

/* Comments */
.tm-comment-list {
    min-height: 0;
    padding-right: 4px;
}
.tm-comment-list::-webkit-scrollbar { width: 3px; }
.tm-comment-list::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .12); border-radius: 4px; }
.tm-comment-item { display: flex; gap: 10px; margin-bottom: 14px; }
.tm-comment-ava {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
    overflow: hidden;
}
.tm-comment-ava img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.tm-comment-body { flex: 1; min-width: 0; }
.tm-comment-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.tm-comment-author { font-size: 13px; font-weight: 700; color: var(--tk-ink); }
.tm-comment-time   { font-size: 11px; color: var(--tk-muted); }
/* сообщение — белый пузырь, чтобы не сливалось с фоном колонки */
.tm-comment-text   {
    font-size: 13px;
    color: rgba(17, 18, 23, .78);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .07);
    border-radius: 4px 14px 14px 14px;
    padding: 9px 13px;
    box-shadow: 0 1px 3px rgba(17, 18, 23, .04);
}
.tmn-compose {
    display: flex; align-items: flex-end; gap: 8px;
    margin-top: 14px; padding-top: 14px;
    flex-shrink: 0;
}
.tmn-compose-input {
    flex: 1; border: 1px solid rgba(17, 18, 23, .1); border-radius: 999px;
    min-height: 36px;
    max-height: 96px;
    padding: 9px 16px; font-size: 13px; color: var(--tk-ink);
    font-family: inherit; outline: none; background: rgba(17, 18, 23, .04);
    transition: border-color .15s;
    resize: none;
    overflow-y: hidden;
    line-height: 1.35;
}
.tmn-compose-input.is-overflowing {
    overflow-y: auto;
}
.tmn-compose-input::-webkit-scrollbar { width: 3px; }
.tmn-compose-input::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .14); border-radius: 4px; }
.tmn-compose-input:focus { border-color: var(--accent); background: #fff; }
.tmn-compose-send {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--tk-ink); border: none; color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: opacity .13s;
}
.tmn-compose-send:hover { opacity: .7; }

/* Files */
.tmn-drop-zone {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 17px 12px; border: 2px dashed rgba(17, 18, 23, .12); border-radius: 12px;
    cursor: pointer; transition: border-color .15s, background .15s;
    color: var(--tk-muted); font-size: 13px;
    margin-bottom: 12px;
}
.tmn-drop-zone svg { width: 15px; height: 15px; }
.tmn-drop-zone:hover {
    border-color: rgba(17, 18, 23, .28);
    background: rgba(17, 18, 23, .04);
    color: var(--tk-ink);
}
.tmn-file-list { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; }
.tmn-file-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: rgba(17, 18, 23, .04); border-radius: 10px;
    border: 1px solid rgba(17, 18, 23, .07); font-size: 13px; color: var(--tk-muted);
}
.tmn-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmn-file-size { font-size: 11px; color: var(--tk-muted); flex-shrink: 0; }
.tmn-file-dl {
    width: 24px; height: 24px; border-radius: 5px;
    color: rgba(17, 18, 23, .35); display: flex; align-items: center; justify-content: center;
    transition: all .12s; flex-shrink: 0; text-decoration: none;
}
.tmn-file-dl:hover { background: #f0fdf4; color: #16a34a; }
.tmn-file-del {
    width: 20px; height: 20px; border-radius: 5px; border: none;
    background: none; color: rgba(17, 18, 23, .28); cursor: pointer;
    font-size: 14px; display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.tmn-file-del:hover { background: #fff1f1; color: #dc2626; }
.tmn-drop-zone.drag-over {
    border-color: var(--accent, #6366f1);
    background: rgba(99, 102, 241, .06);
    color: var(--accent, #6366f1);
}
/* File type icon (badge с расширением) */
.tmn-file-icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; letter-spacing: .3px;
    background: rgba(17, 18, 23, .06); color: var(--tk-muted);
}

/* File item: two-line layout с метой */
.tmn-file-item { padding: 10px 12px; gap: 12px; }
.tmn-file-item .tmn-file-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tmn-file-row1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tmn-file-row1 .tmn-file-name {
    flex: 0 1 auto; /* размер стоит сразу за именем, а не у правого края */
    color: var(--tk-ink); font-weight: 500;
}
.tmn-file-row1 .tmn-file-size { position: relative; top: -.5px; }
.tmn-file-row2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tmn-file-kind {
    font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
    padding: 2.5px 9px; border-radius: 999px; flex-shrink: 0; white-space: nowrap;
}
.tmn-file-note {
    font-size: 12px; color: var(--tk-muted); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tmn-file-item.has-meta { background: #fff; }
/* Файл в очереди «до сохранения» (create-режим) */
.tmn-file-item.tmn-file-pending {
    border-style: dashed;
    border-color: rgba(17, 18, 23, .14);
    background: rgba(17, 18, 23, .02);
}
.tmn-file-wait {
    font-size: 11px; color: var(--tk-muted); font-style: italic;
    flex-shrink: 0; white-space: nowrap;
}
/* кнопки скачать/удалить — ровная колонка справа */
.tmn-file-item .tmn-file-dl { margin-left: auto; }
.tmn-file-item .tmn-file-dl,
.tmn-file-item .tmn-file-del { align-self: center; }

/* ── Карточка оформления файла перед загрузкой ── */
.tmn-file-stage { display: none; }
.tmn-file-stage.show {
    display: block;
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 10px 28px -18px rgba(17, 18, 23, .35);
    animation: tmnStageIn .18s ease;
}
@keyframes tmnStageIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tmn-fstage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tmn-fstage-fileinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tmn-fstage-name {
    font-size: 13px; font-weight: 600; color: var(--tk-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tmn-fstage-size { font-size: 11px; color: var(--tk-muted); }
.tmn-fstage-counter {
    font-size: 11px; font-weight: 600; color: var(--tk-muted);
    background: rgba(17, 18, 23, .05); border-radius: 999px;
    padding: 3px 9px; flex-shrink: 0; white-space: nowrap;
}
.tmn-fstage-close {
    width: 24px; height: 24px; border-radius: 6px; border: none;
    background: none; color: rgba(17, 18, 23, .3); cursor: pointer;
    font-size: 16px; line-height: 1; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.tmn-fstage-close:hover { background: #fff1f1; color: #dc2626; }
.tmn-fstage-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--tk-muted);
    margin-bottom: 8px;
}
.tmn-fstage-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tmn-fkind-chip {
    border: 1px solid rgba(17, 18, 23, .12); background: #fff;
    color: var(--tk-muted); font-size: 12px; font-weight: 600;
    padding: 5px 12px; border-radius: 999px; cursor: pointer;
    transition: all .13s;
}
.tmn-fkind-chip:hover { border-color: var(--fk-color); color: var(--fk-color); }
.tmn-fkind-chip.active {
    background: var(--fk-bg); color: var(--fk-color);
    border-color: var(--fk-color);
}
.tmn-fstage-note {
    width: 100%; border: 1px solid rgba(17, 18, 23, .12); border-radius: 10px;
    padding: 8px 12px; font-size: 13px; color: var(--tk-ink);
    background: rgba(17, 18, 23, .02); outline: none;
    transition: border-color .13s, background .13s;
    margin-bottom: 12px; font-family: inherit;
}
.tmn-fstage-note::placeholder { color: rgba(17, 18, 23, .35); }
.tmn-fstage-note:focus { border-color: var(--tk-green, #A8E76A); background: #fff; }
.tmn-fstage-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.tmn-fstage-skip {
    border: none; background: none; color: var(--tk-muted);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    padding: 7px 10px; border-radius: 8px; transition: all .12s;
}
.tmn-fstage-skip:hover { background: rgba(17, 18, 23, .05); color: var(--tk-ink); }
.tmn-fstage-attach {
    display: flex; align-items: center; gap: 7px;
    border: none; background: var(--tk-ink); color: #fff;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    padding: 8px 16px; border-radius: 999px; transition: opacity .13s;
}
.tmn-fstage-attach:hover { opacity: .8; }

/* ── Слеш-меню файлов в комментариях ── */
.tmn-compose { position: relative; }
.tm-slash-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 14px;
    box-shadow: 0 14px 34px -14px rgba(17, 18, 23, .3);
    padding: 6px 8px 6px 6px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 30;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 18, 23, .14) transparent;
}
.tm-slash-menu.show { display: block; animation: tmnStageIn .15s ease; }
.tm-slash-menu::-webkit-scrollbar { width: 4px; }
.tm-slash-menu::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.tm-slash-menu::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .14); border-radius: 99px; }
.tm-slash-menu::-webkit-scrollbar-thumb:hover { background: rgba(17, 18, 23, .26); }
.tm-slash-title {
    font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--tk-muted);
    padding: 6px 10px 4px;
}
.tm-slash-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 10px; cursor: pointer;
}
.tm-slash-item.active { background: rgba(17, 18, 23, .05); }
.tm-slash-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tm-slash-name {
    font-size: 13px; font-weight: 500; color: var(--tk-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tm-slash-sub { font-size: 11px; color: var(--tk-muted); }
.tm-slash-empty { padding: 12px 10px; font-size: 12.5px; color: var(--tk-muted); text-align: center; }
.tm-slash-menu .tm-cfile-icon { width: 30px; height: 30px; border-radius: 8px; }

/* ── Карточка файла внутри комментария ── */
.tm-cfile {
    display: inline-flex; align-items: center; gap: 9px;
    max-width: 100%; margin: 4px 0;
    padding: 7px 12px 7px 8px;
    background: #fff; border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 12px; cursor: pointer;
    font-family: inherit; text-align: left;
    transition: border-color .13s, box-shadow .13s;
    vertical-align: middle;
}
.tm-cfile:hover {
    border-color: var(--accent, #6366f1);
    box-shadow: 0 4px 14px -8px rgba(17, 18, 23, .3);
}
.tm-cfile-icon {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; letter-spacing: .3px;
    background: rgba(17, 18, 23, .06); color: var(--tk-muted);
}
.tm-cfile-mid { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tm-cfile-name {
    font-size: 12.5px; font-weight: 600; color: var(--tk-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tm-cfile-sub { font-size: 10.5px; color: var(--tk-muted); }
.tm-cfile-arr { color: rgba(17, 18, 23, .3); flex-shrink: 0; transition: transform .13s, color .13s; }
.tm-cfile:hover .tm-cfile-arr { color: var(--accent, #6366f1); transform: translateX(2px); }
.tm-cfile-gone { cursor: default; opacity: .6; }
.tm-cfile-gone:hover { border-color: rgba(17, 18, 23, .1); box-shadow: none; }

/* Подсветка файла при переходе из комментария — фирменный зелёный */
.tmn-file-item.tm-flash {
    border-color: #8ed44e;
    background: #f6fcee;
    box-shadow: 0 0 0 3px rgba(168, 231, 106, .25);
    transition: border-color .4s, box-shadow .4s, background .4s;
}

/* Right column */
.tmn-right {
    width: 420px;
    flex-shrink: 0;
    overflow: hidden; /* скролл — внутри активной вкладки */
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(17, 18, 23, .025);
}

/* Переключатель вкладок правой колонки */
.tmn-side-tabs {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: rgba(17, 18, 23, .055);
    border-radius: 999px;
    flex-shrink: 0;
}
.tmn-side-tab {
    flex: 1;
    padding: 7px 10px;
    border: none; border-radius: 999px;
    background: none;
    font-size: 11.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--tk-muted);
    cursor: pointer; font-family: inherit;
    transition: background .13s, color .13s, box-shadow .13s;
}
.tmn-side-tab:hover { color: var(--tk-ink); }
.tmn-side-tab.active {
    background: #fff;
    color: var(--tk-ink);
    box-shadow: 0 2px 8px -3px rgba(17, 18, 23, .25);
}

/* Панели вкладок */
.tmn-side-pane { display: none; }
.tmn-side-pane.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}
#tmSidePaneSummary.active,
.tmn-side-pane-files.active {
    overflow-y: auto;
    /* скроллбар — в отдельном жёлобе справа, не прилипает к карточкам */
    margin-right: -14px;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 18, 23, .14) transparent;
}
#tmSidePaneSummary.active::-webkit-scrollbar,
.tmn-side-pane-files.active::-webkit-scrollbar { width: 4px; }
#tmSidePaneSummary.active::-webkit-scrollbar-track,
.tmn-side-pane-files.active::-webkit-scrollbar-track { background: transparent; }
#tmSidePaneSummary.active::-webkit-scrollbar-thumb,
.tmn-side-pane-files.active::-webkit-scrollbar-thumb {
    background: rgba(17, 18, 23, .14);
    border-radius: 99px;
}
#tmSidePaneSummary.active::-webkit-scrollbar-thumb:hover,
.tmn-side-pane-files.active::-webkit-scrollbar-thumb:hover { background: rgba(17, 18, 23, .26); }

/* Вкладка «Чат»: лента на всю высоту, composer прижат к низу */
.tmn-side-pane-chat.active { gap: 10px; }
.tmn-side-pane-chat .tm-comment-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    /* скроллбар в отдельном жёлобе справа — как во вкладках Сводка/Файлы */
    margin-right: -14px;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 18, 23, .14) transparent;
}
.tmn-side-pane-chat .tm-comment-list::-webkit-scrollbar { width: 4px; }
.tmn-side-pane-chat .tm-comment-list::-webkit-scrollbar-track { background: transparent; }
.tmn-side-pane-chat .tm-comment-list::-webkit-scrollbar-thumb {
    background: rgba(17, 18, 23, .14);
    border-radius: 99px;
}
.tmn-side-pane-chat .tm-comment-list::-webkit-scrollbar-thumb:hover { background: rgba(17, 18, 23, .26); }
.tmn-side-pane-chat .tmn-compose { flex-shrink: 0; }

/* Вкладка «Файлы» */
.tmn-side-pane-files .tmn-file-list { padding-bottom: 4px; }

.tmn-sidebar-card {
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .08);
    border-radius: 16px;
    padding: 16px;
}
.tmn-sidebar-title {
    font-size: 11px; font-weight: 900;
    color: var(--tk-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 14px;
}
.tmn-deadline-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.tmn-deadline-row { display: flex; align-items: center; justify-content: space-between; }
.tmn-deadline-label { font-size: 12px; color: var(--tk-muted); font-weight: 600; }
.tmn-deadline-val   { font-size: 13px; font-weight: 700; color: var(--tk-ink); }
.tmn-prog-wrap { display: flex; align-items: center; gap: 8px; }
.tmn-prog-track {
    flex: 1; height: 6px; background: rgba(17, 18, 23, .08);
    border-radius: 99px; overflow: hidden;
}
.tmn-prog-fill {
    height: 100%;
    background: var(--tk-green);
    border-radius: 99px;
    transition: width .4s ease;
}
.tmn-prog-pct { font-size: 13px; font-weight: 800; color: var(--tk-ink); flex-shrink: 0; }

.tmn-empty-sm   { font-size: 12px; color: rgba(17, 18, 23, .25); }

/* Activity block */
.tmn-activity-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 12px;
}
.tmn-act-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.tmn-act-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.tmn-act-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.tmn-act-body { flex: 1; min-width: 0; }
.tmn-act-text {
    font-size: 12px;
    color: var(--tk-ink);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}
.tmn-act-author { font-weight: 700; }
.tmn-act-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 99px;
    line-height: 1.6;
}
.tmn-act-time {
    font-size: 11px;
    color: var(--tk-muted);
    margin-top: 2px;
}
.tmn-activity-more {
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-muted);
    cursor: pointer;
    font-family: inherit;
    transition: color .13s, border-color .13s;
    text-align: center;
}
.tmn-activity-more:hover {
    color: var(--tk-ink);
    border-color: rgba(17, 18, 23, .22);
}

/* Footer */
.tmn-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; padding: 12px 22px 14px;
    border-top: 1px solid rgba(17, 18, 23, .07);
    flex-shrink: 0;
    background: #f8f9f6;
}

/* ══════════════════════════════════════
   CONFIRM DIALOG (замена браузерного confirm())
   ══════════════════════════════════════ */
.tm-confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(17, 18, 23, .32);
    /* Выше любых других модалок в приложении (#modal-plan/#modal-cancel и т.п. = z-index:9999) —
       это финальное подтверждение должно быть поверх всего. */
    z-index: 10050;
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
    backdrop-filter: blur(3px);
}
.tm-confirm-overlay.show { opacity: 1; pointer-events: auto; }

.tm-confirm-box {
    position: fixed;
    top: 50%; left: 50%;
    width: min(360px, 90vw);
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(17, 18, 23, .07);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .2), 0 4px 16px rgba(0, 0, 0, .08);
    padding: 24px 22px 20px;
    z-index: 10051;
    text-align: center;
    transform: translate(-50%, -48%) scale(.94);
    opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}
.tm-confirm-box.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; pointer-events: auto;
}
.tm-confirm-icon {
    width: 44px; height: 44px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: #fff1f1;
    color: #dc2626;
    display: flex; align-items: center; justify-content: center;
}
.tm-confirm-title {
    font-size: 15px; font-weight: 800;
    color: #111217;
    margin-bottom: 6px;
}
.tm-confirm-msg {
    font-size: 13px;
    color: #8d919d;
    line-height: 1.45;
    margin-bottom: 20px;
}
.tm-confirm-actions {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
}
.tm-confirm-actions .btn { flex: 1; justify-content: center; }

/* ══════════════════════════════════════
   SHARE TASK MODAL
   ══════════════════════════════════════ */
.tm-share-btn {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; color: var(--tk-muted);
    background: none; border: none; cursor: pointer;
    padding: 6px 12px; border-radius: 999px;
    transition: all .13s; font-family: inherit;
}
.tm-share-btn:hover { background: rgba(168, 231, 106, .25); color: #3d7a12; }

.tm-share-overlay {
    position: fixed; inset: 0;
    background: rgba(17, 18, 23, .32);
    z-index: 10060;
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
    backdrop-filter: blur(3px);
}
.tm-share-overlay.show { opacity: 1; pointer-events: auto; }

.tm-share-box {
    position: fixed;
    top: 50%; left: 50%;
    width: min(580px, 94vw);
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(17, 18, 23, .07);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .2), 0 4px 16px rgba(0, 0, 0, .08);
    z-index: 10061;
    transform: translate(-50%, -48%) scale(.94);
    opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
    overflow: hidden;
}
.tm-share-box.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; pointer-events: auto;
}
.tm-share-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(17, 18, 23, .07);
}
.tm-share-title { font-size: 15px; font-weight: 800; color: var(--tk-ink, #111217); }
.tm-share-close {
    width: 26px; height: 26px; border-radius: 50%;
    border: none; background: rgba(17, 18, 23, .07); color: var(--tk-ink, #111217);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .13s; flex-shrink: 0;
}
.tm-share-close:hover { background: rgba(17, 18, 23, .14); }

.tm-share-body { padding: 20px 24px 24px; }
.tm-share-label {
    display: block;
    font-size: 10px; font-weight: 900;
    color: var(--tk-muted, #8d919d);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 9px;
}
.tm-share-link-row {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 12px;
    padding: 5px 5px 5px 14px;
    background: #f8f9f6;
}
.tm-share-link-scroll {
    flex: 1; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 18, 23, .22) transparent;
    cursor: default;
    padding-bottom: 2px;
}
.tm-share-link-scroll::-webkit-scrollbar { height: 5px; }
.tm-share-link-scroll::-webkit-scrollbar-track { background: transparent; }
.tm-share-link-scroll::-webkit-scrollbar-thumb {
    background: rgba(17, 18, 23, .2);
    border-radius: 99px;
}
.tm-share-link-scroll::-webkit-scrollbar-thumb:hover { background: rgba(17, 18, 23, .32); }
.tm-share-link-text {
    display: inline-block;
    white-space: nowrap;
    font-size: 13.5px; font-weight: 600; color: var(--tk-ink, #111217);
    font-family: inherit;
    padding: 9px 0;
}
.tm-share-copy-btn {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 34px; height: 34px;
    color: #2a5c12;
    background: rgba(168, 231, 106, .3);
    border: 1px solid rgba(168, 231, 106, .6);
    border-radius: 9px;
    padding: 0;
    cursor: pointer; font-family: inherit;
    transition: background .13s, border-color .13s, color .13s;
}
.tm-share-copy-btn:hover { background: rgba(168, 231, 106, .48); border-color: var(--tk-green, #A8E76A); }
.tm-share-copy-btn.copied { color: #2a5c12; background: rgba(168, 231, 106, .58); border-color: var(--tk-green, #A8E76A); }
.tm-share-copy-icon { display: flex; align-items: center; justify-content: center; }

.tm-share-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(17, 18, 23, .07);
}
.tm-share-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-share-toggle-label { font-size: 13px; font-weight: 700; color: var(--tk-ink, #111217); }
.tm-share-toggle-hint  { font-size: 11.5px; color: var(--tk-muted, #8d919d); line-height: 1.4; }

.tm-share-switch {
    position: relative; flex-shrink: 0;
    width: 40px; height: 24px;
    border-radius: 999px;
    border: none; cursor: pointer;
    background: rgba(17, 18, 23, .16);
    transition: background .18s;
    padding: 0;
}
.tm-share-switch-knob {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .18s cubic-bezier(.4,0,.2,1);
}
.tm-share-switch.on { background: var(--tk-green, #A8E76A); }
.tm-share-switch.on .tm-share-switch-knob { transform: translateX(16px); }

/* ══════════════════════════════════════
   ПОВТОР ЗАДАЧИ (tmn-recur-*) — правило хранится на фронте (localStorage),
   см. tmRecur* / _recur* в tasks.js. Бэкенд/БД не меняли.
   ══════════════════════════════════════ */
.tmn-recur-block {
    border: 1px solid rgba(124, 58, 237, .18);
    background: rgba(124, 58, 237, .05);
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.tmn-recur-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.tmn-recur-head-left { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.tmn-recur-head-left > svg { color: #7c3aed; flex-shrink: 0; margin-top: 2px; }
.tmn-recur-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tmn-recur-title { font-size: 13px; font-weight: 800; color: var(--tk-ink); }
.tmn-recur-sub { font-size: 11px; color: var(--tk-muted); line-height: 1.4; }

.tmn-recur-switch {
    position: relative; flex-shrink: 0;
    width: 38px; height: 22px;
    border-radius: 999px;
    border: none; cursor: pointer;
    background: rgba(17, 18, 23, .16);
    transition: background .18s;
    padding: 0;
}
.tmn-recur-switch-knob {
    position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .18s cubic-bezier(.4,0,.2,1);
}
.tmn-recur-switch.on { background: #7c3aed; }
.tmn-recur-switch.on .tmn-recur-switch-knob { transform: translateX(16px); }

.tmn-recur-body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(124, 58, 237, .14);
}
.tmn-recur-cadence {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 10px;
}
.tmn-recur-cad-btn {
    border: 1px solid rgba(17, 18, 23, .12);
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px; font-weight: 700; color: var(--tk-ink);
    font-family: inherit;
    cursor: pointer;
    transition: all .13s;
}
.tmn-recur-cad-btn:hover { border-color: rgba(124, 58, 237, .4); }
.tmn-recur-cad-btn.active {
    background: #7c3aed; border-color: #7c3aed; color: #fff;
}
.tmn-recur-custom-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
    font-size: 12.5px; color: var(--tk-ink); font-weight: 600;
}
.tmn-recur-custom-input {
    width: 60px;
    border: 1px solid rgba(17, 18, 23, .12);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 12.5px; font-weight: 700; color: var(--tk-ink);
    font-family: inherit;
    text-align: center;
}
.tmn-recur-preview {
    font-size: 12px;
    color: #6d28d9;
    font-weight: 600;
    background: rgba(124, 58, 237, .1);
    border-radius: 10px;
    padding: 7px 10px;
}

/* ── Клиенты регулярной задачи (чек-лист по клиентам из CRM) ──
   Один шаблон задачи → сразу несколько клиентов, каждый — отдельный чекбокс
   в матрице «Регулярные» → «Клиенты». См. tmRecur* в tasks.js. ── */
.tmn-recur-clients {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(124, 58, 237, .14);
}
.tmn-recur-clients-head {
    display: flex; flex-direction: column; gap: 2px;
    margin-bottom: 9px;
}
.tmn-recur-clients-title { font-size: 12.5px; font-weight: 800; color: var(--tk-ink); }
.tmn-recur-clients-hint  { font-size: 11px; color: var(--tk-muted); line-height: 1.4; }

.tmn-recur-clients-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 9px;
}
.tmn-recur-clients-empty { font-size: 12px; color: var(--tk-muted); }
.tmn-recur-client-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff;
    border: 1px solid rgba(124, 58, 237, .25);
    border-radius: 999px;
    padding: 5px 6px 5px 12px;
    font-size: 12px; font-weight: 700; color: #6d28d9;
}
.tmn-recur-client-chip button {
    width: 16px; height: 16px; border-radius: 50%;
    border: none; background: rgba(124, 58, 237, .14); color: #6d28d9;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .13s; flex-shrink: 0;
}
.tmn-recur-client-chip button:hover { background: rgba(124, 58, 237, .28); }

.tmn-recur-clients-picker-wrap { position: relative; }
.tmn-recur-clients-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px dashed rgba(124, 58, 237, .4);
    background: transparent; color: #7c3aed;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: background .13s;
}
.tmn-recur-clients-add-btn:hover { background: rgba(124, 58, 237, .08); }

.tmn-recur-clients-picker {
    position: absolute; top: calc(100% + 6px); left: 0;
    width: 260px; max-width: 80vw;
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    padding: 8px;
    z-index: 20;
}
.tmn-recur-clients-search {
    width: 100%;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12.5px; font-family: inherit;
    outline: none;
    margin-bottom: 6px;
}
.tmn-recur-clients-search:focus { border-color: rgba(124, 58, 237, .4); }
.tmn-recur-clients-picker-list {
    max-height: 220px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 1px;
}
.tmn-recur-clients-picker-item {
    display: block; width: 100%; text-align: left;
    padding: 7px 9px;
    border: none; background: none; border-radius: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--tk-ink);
    font-family: inherit;
    cursor: pointer; transition: background .12s;
}
.tmn-recur-clients-picker-item:hover { background: rgba(124, 58, 237, .08); }
.tmn-recur-clients-picker-empty {
    font-size: 12px; color: var(--tk-muted);
    padding: 10px 6px; text-align: center;
}

/* ══════════════════════════════════════
   VIEW: РЕГУЛЯРНЫЕ (tasks-recur-*)
   ══════════════════════════════════════ */
.tasks-recur-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
    color: rgba(17,18,23,.2);
    text-align: center;
}
.tasks-recur-empty svg  { opacity: .55; }
.tasks-recur-empty span { font-size: 15px; font-weight: 700; color: var(--tk-muted); }
.tasks-recur-empty p    { font-size: 12px; color: rgba(17,18,23,.3); max-width: 320px; line-height: 1.55; margin: 0; }

.tasks-recur-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 28px 28px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 12px;
    align-content: start;
    align-items: start;
}
.tasks-recur-grid::-webkit-scrollbar { width: 4px; }
.tasks-recur-grid::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .1); border-radius: 4px; }

/* ── Регулярные: переключатель карточки/список — тот же паттерн, что вид
   «Клиенты» в CRM (manager.css .crm-view-toggle), свои классы намеренно,
   чтобы не тянуть чужой page-модуль между страницами. ── */
.tasks-recur-toolbar {
    display: flex;
    justify-content: flex-end;
    /* .tasks-header выше уже даёт 20px своим padding-bottom — сверху эта
       кнопка ничего не добавляет, а снизу 4px + верхний padding грида (16px)
       складываются в те же ~20px, чтобы зазор сверху и снизу совпадал. */
    padding: 0 28px 4px;
    flex-shrink: 0;
}
.tasks-recur-view-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(17, 18, 23, .09);
    border-radius: 999px;
    padding: 3px;
}
.tasks-recur-view-toggle-btn {
    width: 30px; height: 30px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #8d919d;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.tasks-recur-view-toggle-btn:hover { background: rgba(17, 18, 23, .06); color: var(--tk-ink); }
.tasks-recur-view-toggle-btn.active {
    background: rgba(124, 58, 237, .16);
    color: #7c3aed;
}

/* ── Регулярные: строчный (табличный) вид ── */
.tasks-recur-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 28px 28px;
}
.tasks-recur-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(17,18,23,.07), 0 0 0 1px rgba(17,18,23,.05);
    overflow: hidden;
}
.tasks-recur-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tk-muted);
    padding: 12px 16px;
    border-bottom: 1px solid rgba(17,18,23,.07);
    white-space: nowrap;
}
.tasks-recur-row { cursor: pointer; transition: background .13s; }
.tasks-recur-row:hover { background: rgba(124, 58, 237, .05); }
.tasks-recur-row.is-paused { opacity: .55; }
/* CRM-сделки (manager.php), recur.hidden=true — тот же принцип, что у
   .recur-card.is-dormant выше: гасим отдельные ячейки (opacity на каждой
   <td> своя, они не в общей группе композитинга), а не всю строку — иначе
   ячейка с пилюлью «Этап» (.trr-stage) и «Ещё действия»/кнопка запуска
   (.trr-actions) выглядели бы неактивными, хотя рабочие. */
.tasks-recur-row.is-dormant td:not(.trr-stage):not(.trr-actions) { opacity: .55; }
.tasks-recur-row:not(:last-child) td { border-bottom: 1px solid rgba(17,18,23,.06); }
.tasks-recur-table td {
    padding: 9px 16px;
    font-size: 13px;
    color: var(--tk-ink);
    vertical-align: middle;
    white-space: nowrap;
}
.trr-task { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.trr-task-title { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.trr-assignee { display: flex; align-items: center; gap: 6px; }
.trr-last { color: var(--tk-muted); font-size: 12px; }
.trr-actions { width: 1%; text-align: right; }
.trr-actions-inner { display: inline-flex; align-items: center; gap: 6px; }

.recur-card-icon--sm { width: 26px; height: 26px; border-radius: 9px; }

.tasks-recur-row-cta {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid #111217;
    background: #111217;
    color: #fff;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px; font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity .13s;
    white-space: nowrap;
}
.tasks-recur-row-cta:hover { opacity: .84; }
.tasks-recur-row-cta--paused {
    background: transparent;
    color: rgba(17, 18, 23, .4);
    border-color: rgba(17, 18, 23, .12);
    border-style: dashed;
    cursor: not-allowed;
}

/* ── Регулярные: матрица «клиенты × задачи» ──
   Каждая регулярная задача с привязанными клиентами — своя секция (у разных
   задач может быть разный набор клиентов, поэтому единой сквозной таблицы
   нет). Внутри секции: строки — ПОДЗАДАЧИ этой задачи, столбцы — только её
   клиенты, ячейка — статус конкретной пары подзадача×клиент. Первая колонка
   и шапка внутри каждой мини-таблицы закреплены (sticky) на случай большого
   числа клиентов. ── */
.tasks-recur-matrix-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tasks-recur-matrix-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%;
    text-align: center;
    font-size: 13px; line-height: 1.6;
    color: var(--tk-muted);
    padding: 40px 20px;
}

.trm-section {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(17,18,23,.07), 0 0 0 1px rgba(17,18,23,.05);
    overflow: hidden;
}
.trm-section-head {
    display: flex; align-items: baseline; gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(17,18,23,.06);
    transition: background .13s;
}
.trm-section-head:hover { background: rgba(124, 58, 237, .05); }
.trm-section-title { font-size: 13.5px; font-weight: 800; color: var(--tk-ink); }
.trm-section-cad   { font-size: 11px; color: var(--tk-muted); }
.trm-section-empty { padding: 16px; font-size: 12.5px; color: var(--tk-muted); }

/* Раньше .trm-section сам был overflow:hidden и таблица внутри просто
   обрезалась вместе со скруглением углов — при 8-9+ клиентах колонки
   схлопывались до нечитаемости. Теперь скролл — отдельный внутренний слой:
   .trm-section по-прежнему клипает скруглённые углы, а .trm-table-scroll
   сам решает вопрос переполнения по горизонтали (скроллом, не обрезкой). */
/* Скроллбар невидим в покое и мягко проявляется только при наведении —
   тоньше (3px) и без постоянно маячащей серой полосы под таблицей. */
.trm-table-scroll {
    overflow-x: auto;
    scrollbar-width: none;
}
.trm-table-scroll:hover { scrollbar-width: thin; scrollbar-color: rgba(17, 18, 23, .2) transparent; }
.trm-table-scroll::-webkit-scrollbar { height: 3px; }
.trm-table-scroll::-webkit-scrollbar-track { background: transparent; }
.trm-table-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; transition: background .15s; }
.trm-table-scroll:hover::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .2); }
.trm-table-scroll::-webkit-scrollbar-thumb:hover { background: rgba(17, 18, 23, .34); }
/* CSS Grid вместо <table> — sticky одновременно "по строке" и "по колонке"
   (угловая ячейка «Подзадача») в HTML-таблицах — известное слабое место
   рендеринга в Chrome/Safari: соседняя со sticky-колонкой ячейка съезжает
   или пропадает при скролле. На div-гриде та же раскладка работает
   предсказуемо. Число колонок разное у каждой задачи — grid-template-columns
   проставляется инлайн в JS (_recurMatrixHtml), здесь только сами ячейки. */
.trm-grid {
    display: grid;
}
.trm-g-row { display: contents; }
.trm-g-row:hover .trm-g-cell { background: rgba(124, 58, 237, .04); }
.trm-g-row:hover .trm-g-task { background: #f9f7fe; }
.trm-g-row:last-child .trm-g-cell { border-bottom: none; }

.trm-g-cell {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid rgba(17,18,23,.06);
}
.trm-g-headrow .trm-g-cell {
    position: sticky; top: 0; z-index: 3;
    background: #fafaf9;
    text-align: left;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tk-muted);
    border-bottom: 1px solid rgba(17,18,23,.08);
    white-space: nowrap;
}
.trm-g-headrow .trm-g-corner { left: 0; z-index: 4; }
.trm-g-client { justify-content: center; text-align: center; }

.trm-g-task {
    position: sticky; left: 0; z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 rgba(17,18,23,.06);
}
.trm-task-name { font-size: 13px; font-weight: 700; color: var(--tk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.trm-g-check-cell { justify-content: center; padding: 8px; }
.trm-check {
    width: 24px; height: 24px;
    border-radius: 8px;
    border: 1.5px solid rgba(17, 18, 23, .16);
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: all .13s;
}
.trm-check:hover { border-color: #7c3aed; }
.trm-check.done {
    background: #7c3aed;
    border-color: #7c3aed;
}

.recur-card {
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .08);
    border-radius: 18px;
    padding: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
.recur-card:hover { box-shadow: 0 6px 22px rgba(17, 18, 23, .1); border-color: rgba(17, 18, 23, .14); transform: translateY(-1px); }
.recur-card.is-paused { opacity: .6; }
/* CRM-сделки (manager.php), recur.hidden=true — гасим только
   информационные элементы, НЕ всю карточку через opacity: opacity предка
   нельзя "перекрыть" через opacity потомка — они composite'ятся как единая
   группа, поэтому кнопка «Запустить цикл сейчас» и пилюля «Этап» выглядели
   бы неактивными/серыми, хотя обе полностью рабочие в этом состоянии. */
.recur-card.is-dormant .recur-card-icon,
.recur-card.is-dormant .recur-card-title,
.recur-card.is-dormant .recur-card-cadence,
.recur-card.is-dormant .recur-card-divider,
.recur-card.is-dormant .recur-card-meta-label,
.recur-card.is-dormant .recur-card-meta-val,
.recur-card.is-dormant .recur-card-assignee,
.recur-card.is-dormant .recur-card-last-run {
    opacity: .55;
}

.recur-card-top { display: flex; align-items: flex-start; gap: 10px; }
.recur-card-icon {
    width: 34px; height: 34px; border-radius: 11px;
    background: rgba(124, 58, 237, .12); color: #7c3aed;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.recur-card-titles { flex: 1; min-width: 0; }
.recur-card-title {
    font-size: 14px; font-weight: 700; color: var(--tk-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recur-card-cadence { font-size: 11.5px; color: var(--tk-muted); margin-top: 2px; }
.recur-card-status-pill {
    flex-shrink: 0;
    font-size: 10px; font-weight: 800;
    padding: 3px 9px; border-radius: 999px;
    white-space: nowrap;
}
.recur-card-kebab {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    border-radius: 8px;
    color: rgba(17, 18, 23, .38);
    cursor: pointer;
    transition: background .13s, color .13s;
    margin: -3px -4px 0 0;
}
.recur-card-kebab:hover { background: rgba(17, 18, 23, .07); color: var(--tk-ink); }

.recur-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: -4px;
}

.recur-card-divider { height: 1px; background: rgba(17, 18, 23, .06); }

.recur-card-meta-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.recur-card-meta {
    display: flex; flex-direction: column; gap: 2px;
}
.recur-card-meta-label {
    font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
    color: var(--tk-muted);
}
.recur-card-meta-val { font-size: 13px; font-weight: 700; color: var(--tk-ink); }
.recur-card-assignee { display: flex; align-items: center; gap: 6px; }

.recur-card-last-run { font-size: 11px; color: rgba(17,18,23,.3); min-height: 14px; }

/* Единая CTA-кнопка внизу карточки — фиксированной высоты, не растягивается
   когда грид (align-items:start уже не тянет, но на всякий случай) даёт
   карточке лишнее место; state "пауза" занимает тот же слот, а не пропадает,
   чтобы карточки в ряду не расползались по высоте. */
.recur-card-cta {
    flex: 0 0 auto;
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid #111217;
    background: #111217;
    color: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 12.5px; font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity .13s, background .13s, color .13s, border-color .13s;
}
.recur-card-cta:hover { opacity: .84; }
.recur-card-cta--paused {
    background: transparent;
    color: rgba(17, 18, 23, .4);
    border-color: rgba(17, 18, 23, .12);
    border-style: dashed;
    cursor: not-allowed;
}
.recur-card-cta--paused:hover { opacity: 1; }

/* Меню "ещё" (кебаб): Пауза/Возобновить + Отменить повтор */
.recur-actions-menu {
    background: #fff;
    border: 1px solid rgba(17,18,23,.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    padding: 4px;
    min-width: 184px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.recur-actions-menu-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 8px 10px;
    font-size: 12.5px; font-weight: 600;
    font-family: inherit;
    color: var(--tk-ink);
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}
.recur-actions-menu-item:hover { background: rgba(17,18,23,.06); }
.recur-actions-menu-item--danger { color: #dc2626; }
.recur-actions-menu-item--danger:hover { background: #fff1f1; }
.recur-actions-menu-divider { height: 1px; background: rgba(17,18,23,.07); margin: 3px 2px; }

/* Modal subtask assignee + date */
.tm-sub-assignee-wrap { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.tm-sub-date {
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--tk-ink);
    font-family: inherit;
    background: #fff;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
    max-width: 120px;
    font-weight: 600;
}
.tm-sub-date:focus { border-color: var(--accent); }

/* ── Complete button ── */
.task-complete-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    color: #2a5c12;
    background: rgba(168, 231, 106, .22);
    border: 1px solid rgba(168, 231, 106, .55);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}
.task-complete-btn.visible { display: flex; }
.task-complete-btn:hover {
    background: rgba(168, 231, 106, .38);
    border-color: var(--tk-green, #A8E76A);
}
.task-complete-btn--review {
    color: #7c3aed;
    background: rgba(139, 92, 246, .12);
    border-color: rgba(139, 92, 246, .35);
}
.task-complete-btn--review:hover {
    background: rgba(139, 92, 246, .22);
    border-color: #7c3aed;
}

/* ══════════════════════════════════════
   DONE VIEW
   ══════════════════════════════════════ */

/* Column wrapper — прозрачный, без фона */
.tasks-done-column {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 12px 28px 24px;
}

/* Кнопка «Очистить список» в шапке (видна только на вкладке Завершённые) */
.tasks-clear-done-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--tk-muted);
    background: rgba(17, 18, 23, .06);
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 7px 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: color .13s, background .13s;
}
.tasks-clear-done-btn:hover { color: #dc2626; background: #fff1f1; }

/* Scroll area */
.tasks-done-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.tasks-done-scroll::-webkit-scrollbar { width: 4px; }
.tasks-done-scroll::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .1); border-radius: 4px; }

.tasks-done-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    max-width: 100%;
}

.tasks-done-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 80px 20px;
    color: rgba(17, 18, 23, .2);
    text-align: center;
}
.tasks-done-empty svg { opacity: .22; }
.tasks-done-empty span {
    font-size: 15px;
    font-weight: 700;
    color: var(--tk-muted);
}
.tasks-done-empty p {
    font-size: 12px;
    color: rgba(17, 18, 23, .3);
    max-width: 260px;
    line-height: 1.55;
    margin: 0;
}

/* Done card — выглядит как board-карточка, без цветного бордера */
.task-card--done { opacity: .88; }
.task-card--done:hover { opacity: 1; }

.task-tag--done-badge {
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
    border: none;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 800;
}

/* ── Compatibility stubs ── */
.tm-tags-wrap { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tm-tag-input { border: none; outline: none; font-size: 12.5px; color: var(--tk-ink); background: transparent; font-family: inherit; }
.tm-tag-input::placeholder { color: rgba(17, 18, 23, .25); }

/* ── Чип «ИИ-план» (ведёт на ИИ Аудит → Задачи от ИИ) ── */
.tasks-stat-chip-alert {
    font-size: 10px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    white-space: nowrap;
}

/* ══════════════════════════════════════
   ПРОСРОЧЕННЫЕ VIEW
   ══════════════════════════════════════ */

/* Kanban layout */
.tasks-ov-kanban {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 28px 24px;
}

/* Column tints per time bucket */
.ov-col[data-ov-col="recent"] { background: rgba(253, 246, 230, .88); }
.ov-col[data-ov-col="week"]   { background: rgba(255, 241, 229, .88); }
.ov-col[data-ov-col="month"]  { background: rgba(254, 236, 236, .88); }

/* Column size (same as board 3-col) */
.ov-col {
    min-width: 380px;
    max-width: 380px;
}

/* Sublabel in column header */
.ov-col-range {
    font-size: 10px;
    font-weight: 700;
    color: var(--tk-muted);
    background: rgba(17,18,23,.06);
    border-radius: 999px;
    padding: 2px 8px;
}

/* Static progress row (no expand toggle) */
.task-card-progress-row--static { cursor: default; }
.task-card-progress-row--static:hover .task-subtasks-toggle {
    border-color: rgba(17,18,23,.12);
    color: var(--tk-muted);
}

/* Quick action buttons */
.task-ov-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 2px;
}

.task-ov-reschedule-btn,
.task-ov-complete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}

.task-ov-reschedule-btn {
    border: 1.5px solid rgba(17,18,23,.12);
    background: transparent;
    color: var(--tk-muted);
}
.task-ov-reschedule-btn:hover {
    border-color: rgba(17,18,23,.3);
    color: var(--tk-ink);
    background: rgba(17,18,23,.05);
}

.task-ov-complete-btn {
    border: 1px solid rgba(168,231,106,.55);
    background: rgba(168,231,106,.2);
    color: #16a34a;
}
.task-ov-complete-btn:hover {
    background: rgba(168,231,106,.38);
    border-color: #16a34a;
}

/* Global empty state */
.tasks-ov-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 80px 20px;
    color: rgba(17,18,23,.2);
    text-align: center;
}
.tasks-ov-empty svg  { opacity: .28; }
.tasks-ov-empty span { font-size: 15px; font-weight: 700; color: var(--tk-muted); }
.tasks-ov-empty p    { font-size: 12px; color: rgba(17,18,23,.3); max-width: 260px; line-height: 1.55; margin: 0; }

/* ══════════════════════════════════════
   READ-ONLY MODAL (завершённые задачи)
   ══════════════════════════════════════ */

/* Шапка — зелёная полоска вместо серой */
/* ── Readonly modal ─────────────────────────────────────────────────── */
.tm-readonly-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    background: rgba(107,114,128,.1);
    border-radius: 6px;
    padding: 2px 8px;
}

/* Заблокировать ввод текста */
.tm-modal.tm-readonly .tmn-title-input,
.tm-modal.tm-readonly .tmn-desc {
    pointer-events: none;
    opacity: .75;
    cursor: default;
}
/* ...но ссылки на файлы в описании остаются кликабельными */
.tm-modal.tm-readonly .tmn-desc .tm-desc-flink {
    pointer-events: auto;
}

/* Заблокировать контролы редактирования */
.tm-modal.tm-readonly .cdd-trigger,
.tm-modal.tm-readonly .tm-date-trigger,
.tm-modal.tm-readonly .tmn-priority-wrap,
.tm-modal.tm-readonly .tm-assignee-btn,
.tm-modal.tm-readonly .tm-sub-del,
.tm-modal.tm-readonly .tm-sub-title,
.tm-modal.tm-readonly .tm-sub-priority,
.tm-modal.tm-readonly .tm-sub-date,
.tm-modal.tm-readonly .tm-sub-client-chip,
.tm-modal.tm-readonly .task-sub-picker-btn {
    pointer-events: none;
    cursor: default;
    opacity: .6;
}

/* Скрыть кнопки добавления (но НЕ комментарии и файлы) */
.tm-modal.tm-readonly .tmn-add-sub-btn,
.tm-modal.tm-readonly .task-sub-add {
    display: none !important;
}

/* Скрыть управление тегами */
.tm-modal.tm-readonly .tm-tag-chip button { display: none; }
.tm-modal.tm-readonly .tmn-tag-input      { display: none; }

/* Скрыть футер (кнопки сохранить/удалить — управляется JS) */
.tm-modal.tm-readonly .tmn-footer { display: none; }

/* Чуть светлее правая колонка */
.tm-modal.tm-readonly .tmn-right { background: rgba(17,18,23,.018); }

/* ── Завершённая задача: комментарии и файлы тоже только чтение ── */
.tm-modal.tm-done .tmn-compose    { display: none !important; }
.tm-modal.tm-done .tmn-drop-zone  { display: none !important; }
.tm-modal.tm-done .tmn-file-list  { pointer-events: none; }
.tm-modal.tm-done .tm-comment-list .tm-comment-del { display: none; }

/* ── Меню доски + Архив (Trello-style) ── */
.tasks-menu-wrap { position: relative; }
.tasks-menu-btn {
    width: 38px; height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(17, 18, 23, .1);
    background: #fff;
    color: #4b5563;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .13s, border-color .13s;
}
.tasks-menu-btn:hover { background: rgba(17, 18, 23, .05); border-color: rgba(17, 18, 23, .2); }

.tasks-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px); right: 0;
    width: 240px;
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 14px;
    box-shadow: 0 16px 40px -14px rgba(17, 18, 23, .3);
    padding: 6px;
    z-index: 320;
}
.tasks-menu.show { display: block; animation: tmnStageIn .15s ease; }
.tasks-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none; border-radius: 10px;
    background: none;
    font-size: 13px; font-weight: 600; color: #111217;
    cursor: pointer; font-family: inherit;
    transition: background .12s;
}
.tasks-menu-item:hover { background: rgba(17, 18, 23, .05); }
.tasks-menu-item svg { color: #8d919d; flex-shrink: 0; }
.tasks-menu-item span:first-of-type { flex: 1; text-align: left; }
.tasks-menu-count {
    font-size: 11px; font-weight: 800;
    background: rgba(17, 18, 23, .07); color: #8d919d;
    border-radius: 999px; padding: 1px 8px;
}

/* ── Фильтры ── */
.tasks-filter-wrap { position: relative; }
.tasks-filter-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(17, 18, 23, .1);
    background: #fff;
    color: var(--tk-ink);
    font-family: inherit;
    cursor: pointer;
    transition: background .13s, border-color .13s, color .13s;
}
.tasks-filter-btn:hover { background: rgba(17, 18, 23, .05); border-color: rgba(17, 18, 23, .2); }
.tasks-filter-wrap.tf-active .tasks-filter-btn {
    background: rgba(168, 231, 106, .28);
    border-color: var(--tk-green);
    color: #2a5c12;
}
.tasks-filter-badge {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: -5px; right: -5px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--tk-ink);
    color: #fff;
    font-size: 9.5px; font-weight: 900;
    border: 2px solid #fff;
}
.tf-active .tasks-filter-badge { background: #2a5c12; }

.tasks-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px); right: 0;
    width: 280px;
    max-height: min(560px, 74vh);
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 16px;
    box-shadow: 0 16px 40px -14px rgba(17, 18, 23, .3);
    padding: 14px;
    z-index: 320;
}
.tasks-filter-panel.show { display: block; animation: tmnStageIn .15s ease; }
.tasks-filter-panel::-webkit-scrollbar { width: 4px; }
.tasks-filter-panel::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .12); border-radius: 4px; }

.tf-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.tf-panel-title { font-size: 13px; font-weight: 800; color: var(--tk-ink); }
.tf-reset-btn {
    border: none; background: none; cursor: pointer;
    font-size: 11.5px; font-weight: 700; color: #dc2626;
    font-family: inherit; padding: 2px 4px;
}
.tf-reset-btn:hover { text-decoration: underline; }

.tf-quick-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(17, 18, 23, .07);
    margin-bottom: 10px;
    font-size: 12.5px; font-weight: 700; color: var(--tk-ink);
    cursor: pointer;
}
.tf-quick-row input { accent-color: var(--tk-green); width: 15px; height: 15px; cursor: pointer; }

.tf-section { margin-bottom: 12px; }
.tf-section:last-child { margin-bottom: 0; }
.tf-section-title {
    font-size: 10px; font-weight: 900;
    color: var(--tk-muted);
    text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: 6px;
}
.tf-check-list { display: flex; flex-direction: column; gap: 1px; max-height: 160px; overflow-y: auto; }
.tf-check-list.tf-disabled { opacity: .4; pointer-events: none; }
.tf-check-list::-webkit-scrollbar { width: 4px; }
.tf-check-list::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .12); border-radius: 4px; }
.tf-check-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 6px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--tk-ink);
    cursor: pointer;
    transition: background .12s;
}
.tf-check-row:hover { background: rgba(17, 18, 23, .05); }
.tf-check-row input { accent-color: var(--tk-green); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
.tf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tf-check-row .tf-ava {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; color: #fff;
    overflow: hidden; flex-shrink: 0;
}
.tf-check-row .tf-ava img { width: 100%; height: 100%; object-fit: cover; }
.tf-check-empty { font-size: 12px; color: var(--tk-muted); padding: 6px; }

/* Панель архива */
.tasks-archive {
    display: none;
    position: absolute;
    top: calc(100% + 8px); right: 0;
    width: 400px;
    max-height: min(560px, 72vh);
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 16px;
    box-shadow: 0 18px 48px -16px rgba(17, 18, 23, .35);
    z-index: 320;
    flex-direction: column;
    overflow: hidden;
}
.tasks-archive.show { display: flex; animation: tmnStageIn .15s ease; }
.tasks-archive-head {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(17, 18, 23, .07);
    flex-shrink: 0;
}
.tasks-archive-title {
    flex: 1; text-align: center;
    font-size: 13px; font-weight: 800; color: #111217;
    text-transform: uppercase; letter-spacing: .04em;
}
.tasks-archive-back, .tasks-archive-close {
    width: 26px; height: 26px; border-radius: 8px;
    border: none; background: none; color: #8d919d;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .12s, color .12s;
    flex-shrink: 0;
}
.tasks-archive-back:hover, .tasks-archive-close:hover { background: rgba(17, 18, 23, .06); color: #111217; }
.tasks-archive-search-wrap {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 14px;
    padding: 8px 12px;
    border: 1px solid rgba(17, 18, 23, .12);
    border-radius: 10px;
    color: #8d919d;
    flex-shrink: 0;
    transition: border-color .13s;
}
.tasks-archive-search-wrap:focus-within { border-color: var(--tk-green, #A8E76A); }
.tasks-archive-search {
    flex: 1; border: none; outline: none;
    font-size: 13px; color: #111217; font-family: inherit;
    background: transparent;
}
.tasks-archive-list {
    flex: 1; min-height: 60px;
    overflow-y: auto;
    padding: 0 14px 10px;
    display: flex; flex-direction: column; gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 18, 23, .14) transparent;
}
.tasks-archive-list::-webkit-scrollbar { width: 4px; }
.tasks-archive-list::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .14); border-radius: 99px; }
.tasks-archive-empty {
    padding: 26px 0; text-align: center;
    font-size: 12.5px; color: rgba(17, 18, 23, .35);
}
.tasks-archive-item {
    border: 1px solid rgba(17, 18, 23, .08);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .13s, box-shadow .13s;
    background: #fff;
}
.tasks-archive-item:hover {
    border-color: rgba(17, 18, 23, .2);
    box-shadow: 0 4px 14px -8px rgba(17, 18, 23, .25);
}
.tasks-archive-item-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tasks-archive-item-check {
    width: 18px; height: 18px; border-radius: 50%;
    background: #e9f7ec; color: #1e9e4a;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tasks-archive-item-title {
    font-size: 13px; font-weight: 600; color: #111217;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tasks-archive-item-meta {
    font-size: 11.5px; color: #8d919d;
    margin: 4px 0 0 26px;
}
.tasks-archive-item-actions {
    display: flex; align-items: center; gap: 8px;
    margin: 7px 0 0 26px;
}
.tasks-archive-act {
    border: none; background: none; padding: 0;
    font-size: 12px; font-weight: 600; color: #4b5563;
    cursor: pointer; font-family: inherit;
    text-decoration: underline; text-underline-offset: 2px;
    transition: color .12s;
}
.tasks-archive-act:hover { color: #111217; }
.tasks-archive-act--danger:hover { color: #dc2626; }
.tasks-archive-act-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(17, 18, 23, .25); }
.tasks-archive-foot {
    padding: 10px 14px;
    border-top: 1px solid rgba(17, 18, 23, .07);
    flex-shrink: 0;
}
.tasks-archive-clear {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 10px;
    background: none;
    font-size: 12.5px; font-weight: 700; color: #8d919d;
    cursor: pointer; font-family: inherit;
    transition: background .13s, color .13s, border-color .13s;
}
.tasks-archive-clear:hover { background: #fff1f1; color: #dc2626; border-color: rgba(220, 38, 38, .3); }

/* ── Drag & drop карточек по доске ── */
.tasks-col-body .task-card { cursor: grab; }
.tasks-col-body .task-card:active { cursor: grabbing; }

/* Только просмотр (см. tasksIsViewOnly() в assets/js/tasks.js) */
body.tasks-readonly .tasks-col-body .task-card,
body.tasks-readonly .tasks-col-body .task-card:active { cursor: default; }
.task-card.dragging {
    opacity: .45;
    transform: rotate(1.5deg) scale(.99);
    box-shadow: 0 14px 30px -12px rgba(17, 18, 23, .3);
}
.tasks-col-body.drag-over {
    background: rgba(168, 231, 106, .07);
    border-radius: 14px;
    transition: background .15s;
}
.task-drop-slot {
    border: 2px dashed rgba(168, 231, 106, .9);
    background: rgba(168, 231, 106, .12);
    border-radius: 14px;
    margin: 4px 0;
    transition: height .12s ease;
    pointer-events: none;
}