/* ============================================================
   tab4.css — Вкладка 4 (T601–T800): финиш таблиц, прогресса,
   форм, кастомных контролов, состояний, тостов/баннеров,
   канбана и модалок. Аддитивный партиал поверх components.css
   (владелец Вкладки 4). Только токены, без хардкод-хексов.
   Подключается отдельным <link> в base.html (после components.css).
   ============================================================ */

/* ------------------------------------------------------------
   4.1–4.2 Таблицы: базовый стиль + интерактив
   ------------------------------------------------------------ */
.ds-table caption {
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  text-align: left;
}

/* Числовые колонки — вправо, моноширинные цифры (T607). */
.ds-table .num,
.ds-table th.num,
.ds-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Активная строка — акцентная полоса слева (T604). */
.ds-table tbody tr.is-active {
  box-shadow: inset 3px 0 0 0 var(--accent);
}
.ds-table tbody tr.is-active > td:first-child { font-weight: var(--fw-semibold); }

/* Выбранные строки (T626). */
.ds-table tbody tr.is-selected { background: var(--accent-soft); }
.ds-table tbody tr.is-selected:hover { background: var(--accent-soft); }

/* Строка выполнена — приглушение (T637). */
.ds-table tbody tr.rdone,
.ds-table tbody tr.is-done { opacity: .55; }
.ds-table tbody tr.rdone:hover,
.ds-table tbody tr.is-done:hover { opacity: 1; }

/* Просторный режим (T609). */
.ds-table-comfortable th,
.ds-table-comfortable td { padding: 15px 18px; }

/* Truncate длинных значений (T610). */
.ds-table .truncate,
.ds-trunc {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Тонкие разделители колонок (T611, опц.). */
.ds-table-divided th + th,
.ds-table-divided td + td { border-left: 1px solid var(--border); }

/* Итоговая строка/футер (T614). */
.ds-table tfoot td {
  border-top: 2px solid var(--border-strong);
  background: var(--surface-3);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.ds-table tfoot td.num { text-align: right; }

/* Группа-заголовок строк (T615). */
.ds-table tbody tr.ds-row-group td {
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Sticky-thead — тень при скролле обёртки. */
.ds-table-wrap { position: relative; }
.ds-table thead::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--shadow-2);
}

/* Сортируемые заголовки — индикатор направления (T621). */
.ds-table th.ds-sortable { padding-right: 26px; position: relative; white-space: nowrap; }
.ds-table th.ds-sortable::after {
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  width: 0; height: 0;
  margin-top: -2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-subtle);
  opacity: .35;
  transition: opacity var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard);
}
.ds-table th.ds-sortable:hover::after { opacity: .7; }
.ds-table th.ds-sortable.is-sorted-asc::after { opacity: 1; transform: rotate(180deg); border-top-color: var(--accent-300); }
.ds-table th.ds-sortable.is-sorted-desc::after { opacity: 1; border-top-color: var(--accent-300); }

/* Ховер-действия в конце строки (T622). */
.ds-row-actions {
  display: inline-flex;
  gap: var(--sp-1);
  justify-content: flex-end;
}
.ds-table td.ds-row-actions-cell { width: 1%; white-space: nowrap; text-align: right; }

/* Прогресс в ячейке (T632, T644). */
.ds-progress-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 120px;
}
.ds-progress-cell .ds-progress,
.ds-progress-cell .bar { flex: 1; }
.ds-progress-cell .ds-progress-val {
  min-width: 38px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Пустая ячейка «—» единообразно (T716). */
.ds-na { color: var(--text-subtle); }

/* ------------------------------------------------------------
   4.3 Прогресс-индикаторы
   ------------------------------------------------------------ */
/* Пороговые цвета для ::before (ДС-бар) и >span (легаси) (T643, T649). */
.bar.lvl-low::before,   .ds-progress.lvl-low::before   { background: linear-gradient(90deg, var(--danger), #fb7185); }
.bar.lvl-mid::before,   .ds-progress.lvl-mid::before   { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.bar.lvl-high::before,  .ds-progress.lvl-high::before  { background: linear-gradient(90deg, var(--success), #34d399); }

/* Индетерминированный прогресс (T648). */
.ds-progress.is-indeterminate::before {
  width: 38%;
  animation: ds-progress-slide 1.2s var(--ease-standard) infinite;
}
@keyframes ds-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

/* Анимация заполнения при появлении (T650). */
.ds-progress.is-animated::before { transition: width var(--dur-3) var(--ease-out); }

/* Кольцо прогресса — обёртка с подписью в центре (T645). */
.ds-ring-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
}
.ds-ring-wrap .ds-ring-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--txt);
}
.ds-ring-value { transition: stroke-dasharray var(--dur-3) var(--ease-out); }
.ds-ring.lvl-low  { --ring-color: var(--danger); }
.ds-ring.lvl-mid  { --ring-color: var(--warning); }
.ds-ring.lvl-high { --ring-color: var(--success); }

/* Мини-gauge (полукруг) (T646). */
.ds-gauge { --val: 0; width: 120px; height: 64px; color: var(--accent); }
.ds-gauge-track { stroke: var(--surface-4); }
.ds-gauge-fill {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: calc(var(--val) * .01 * 126) 126;
  transition: stroke-dasharray var(--dur-3) var(--ease-out);
}
.ds-gauge.lvl-low  { color: var(--danger); }
.ds-gauge.lvl-mid  { color: var(--warning); }
.ds-gauge.lvl-high { color: var(--success); }

/* Сегментированный прогресс — шаги (T647). */
.ds-progress-seg {
  --steps: 5;
  --done: 0;
  display: grid;
  grid-template-columns: repeat(var(--steps), 1fr);
  gap: 4px;
}
.ds-progress-seg .seg {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-4);
}
.ds-progress-seg .seg.is-done { background: var(--accent); }

/* Стопка прогрессов (мульти-метрика) (T655). */
.ds-progress-stack { display: grid; gap: var(--sp-2); }
.ds-progress-stack .row { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: var(--sp-2); }
.ds-progress-stack .row .lbl { color: var(--muted); font-size: var(--fs-xs); }
.ds-progress-stack .row .val { text-align: right; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--muted); }

/* ------------------------------------------------------------
   4.4 Формы: фокус, структура, состояния
   ------------------------------------------------------------ */
/* Фокус-ринг через --focus-ring (T662). */
.ds-input:focus-visible,
.ds-select:focus-visible,
.ds-textarea:focus-visible,
input.ds-input:focus,
select.ds-select:focus,
textarea.ds-textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}
.ds-btn:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Состояние успеха (T667). */
.ds-field.is-valid .ds-input,
.ds-field.is-valid .ds-select,
.ds-field.is-valid .ds-textarea { border-color: rgba(34, 197, 94, .55); }
.ds-ok-text { color: #86efac; }

/* Обязательное поле — маркер (T668). */
.ds-label .req,
.ds-required::after { content: " *"; color: var(--danger); }

/* Disabled / readonly (T669). */
.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled,
.ds-input[readonly],
.ds-textarea[readonly] {
  opacity: .6;
  cursor: not-allowed;
  background: var(--surface-sunken);
}

/* Фолдсет/секция полей (T671). */
.ds-fieldset {
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
.ds-fieldset > legend {
  padding: 0 var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}

/* Сетка форм — 2 колонки на десктопе (T672). */
.ds-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.ds-form-grid .ds-field-full { grid-column: 1 / -1; }
@media (max-width: 720px) { .ds-form-grid { grid-template-columns: 1fr; } }

/* Кнопки формы — выравнивание (T676). */
.ds-form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.ds-form-actions .spacer { margin-left: auto; }

/* Префикс/суффикс в поле (T673). */
.ds-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--field-bg);
  overflow: hidden;
}
.ds-input-group:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.ds-input-group .ds-input,
.ds-input-group input {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.ds-input-group .ds-affix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-3);
  background: var(--surface-3);
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* Поле поиска с иконкой/очисткой (T674). */
.ds-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.ds-search > .ds-icon:first-child {
  position: absolute;
  left: 10px;
  color: var(--text-subtle);
  pointer-events: none;
}
.ds-search input {
  width: 100%;
  min-height: 38px;
  padding: 8px 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--field-bg);
  color: var(--txt);
  font: inherit;
  font-size: var(--fs-sm);
}
.ds-search input:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
.ds-search .ds-search-clear {
  position: absolute;
  right: 8px;
  display: none;
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-4);
  color: var(--muted);
  cursor: pointer;
}
.ds-search.has-value .ds-search-clear { display: inline-flex; align-items: center; justify-content: center; }

/* ------------------------------------------------------------
   4.5 Кастомные контролы
   ------------------------------------------------------------ */
/* Кастомный чекбокс/радио с SVG-галочкой (T682, T683). */
.ds-check,
.ds-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  color: var(--txt);
  font-size: var(--fs-sm);
  user-select: none;
}
.ds-check input,
.ds-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-check .box,
.ds-radio .box {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border: 1px solid var(--border-strong);
  background: var(--field-bg);
  transition: background var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard);
}
.ds-check .box { border-radius: var(--r-xs); }
.ds-radio .box { border-radius: 50%; }
.ds-check .box svg { width: 12px; height: 12px; stroke: white; opacity: 0; transform: scale(.6); transition: opacity var(--dur-1), transform var(--dur-1) var(--ease-out); }
.ds-radio .box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: white; opacity: 0; transform: scale(.4); transition: opacity var(--dur-1), transform var(--dur-1) var(--ease-out); }
.ds-check input:checked + .box,
.ds-radio input:checked + .box { background: var(--accent); border-color: var(--accent); }
.ds-check input:checked + .box svg { opacity: 1; transform: scale(1); }
.ds-radio input:checked + .box::after { opacity: 1; transform: scale(1); }
.ds-check input:focus-visible + .box,
.ds-radio input:focus-visible + .box { box-shadow: var(--focus-ring); }
.ds-check input:disabled ~ *,
.ds-radio input:disabled ~ * { opacity: .5; }

.ds-switch input:focus-visible + .ds-switch-track { box-shadow: var(--focus-ring); }

/* Сегмент-контрол (T690). */
.ds-segment {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  gap: 2px;
}
.ds-segment > button,
.ds-segment > label {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.ds-segment > button.is-active,
.ds-segment > [aria-pressed="true"],
.ds-segment input:checked + span {
  background: var(--accent-soft);
  color: var(--accent-200);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.ds-segment label { padding: 0; }
.ds-segment label span { display: inline-flex; padding: 6px 14px; border-radius: var(--r-sm); }
.ds-segment input { position: absolute; opacity: 0; }

/* Range-слайдер (T687). */
.ds-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-pill); background: var(--surface-4); }
.ds-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-raised); cursor: pointer; }
.ds-range::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--surface-raised); border-radius: 50%; background: var(--accent); cursor: pointer; }
.ds-range:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Файл-инпут (кнопка + имя) (T688). */
.ds-file-field { display: grid; gap: var(--sp-2); }
.ds-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ds-file-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: start;
}
.ds-file-name { color: var(--muted); font-size: var(--fs-sm); }

/* Drag-n-drop зона (T689). */
.ds-dropzone {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  padding: var(--sp-7);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard);
}
.ds-dropzone:hover { border-color: var(--accent-line); }
.ds-dropzone.is-dragover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-100); }
.ds-dropzone .ds-icon { color: var(--text-subtle); }
.ds-dropzone.is-dragover .ds-icon { color: var(--accent-300); }

/* ------------------------------------------------------------
   4.6 Пустые состояния
   ------------------------------------------------------------ */
.ds-empty .ds-empty-title { color: var(--txt); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.ds-empty .ds-empty-text { color: var(--muted); font-size: var(--fs-sm); max-width: 38ch; }
.ds-empty .ds-icon { color: var(--text-subtle); }
.ds-empty-sm { min-height: 110px; padding: var(--sp-5); }
/* Позитивное «всё чисто» (T706). */
.ds-empty-ok { border-color: rgba(34, 197, 94, .3); background: var(--success-soft); color: #bbf7d0; }
.ds-empty-ok .ds-icon,
.ds-empty-ok .ds-empty-title { color: #bbf7d0; }
/* Пустая ячейка таблицы по центру (T716). */
.ds-table td.ds-empty-cell,
.ds-table td.empty-cell {
  padding: var(--sp-7);
  color: var(--muted);
  text-align: center;
}

/* ------------------------------------------------------------
   4.7 Скелетоны и загрузка
   ------------------------------------------------------------ */
.ds-skeleton-text { height: 12px; margin: 5px 0; }
.ds-skeleton-line { height: 12px; border-radius: var(--r-pill); }
.ds-skeleton-circle { border-radius: 50%; }
.ds-skeleton-card {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
}
.ds-skeleton-chart { height: 220px; border-radius: var(--r-lg); }
.ds-skeleton-row { display: grid; grid-auto-flow: column; gap: var(--sp-4); padding: 11px 14px; }
.ds-skeleton-kpi { height: 84px; border-radius: var(--r-lg); }

/* Спиннер размеры (T728). */
.ds-spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.ds-spinner-lg { width: 32px; height: 32px; border-width: 3px; }

/* Оверлей-лоадер на карточке/секции (T729). */
.ds-loading { position: relative; }
.ds-loading[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  background: rgba(15, 17, 21, .55);
  border-radius: inherit;
  backdrop-filter: blur(1px);
}
.ds-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  place-items: center;
  background: rgba(15, 17, 21, .55);
  border-radius: inherit;
}
.ds-loading[aria-busy="true"] .ds-loading-overlay,
.ds-loading.is-loading .ds-loading-overlay { display: grid; }

/* Плавный переход skeleton→контент (T733). */
.ds-fade-in { animation: ds-fade-in var(--dur-3) var(--ease-out); }
@keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Глобальная прогресс-полоса вверху (T730). */
.ds-toploader {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-toast);
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--dur-3) var(--ease-out);
}
.ds-toploader.is-active { transform: scaleX(.8); }

@media (prefers-reduced-motion: reduce) {
  .ds-skeleton { animation: none; background: var(--skeleton-a); }
}

/* ------------------------------------------------------------
   4.8 Тосты, алерты, баннеры
   ------------------------------------------------------------ */
/* Левая полоса семантики + анимация входа (T741, T742). */
.ds-toast {
  position: relative;
  border-left: 3px solid var(--border-strong);
  overflow: hidden;
  animation: ds-toast-in var(--dur-3) var(--ease-out);
}
.ds-toast-ok   { border-left-color: var(--success); }
.ds-toast-warn { border-left-color: var(--warning); }
.ds-toast-err,
.ds-toast-danger { border-left-color: var(--danger); }
.ds-toast-info { border-left-color: var(--info); }
.ds-toast .ds-toast-title { font-weight: var(--fw-semibold); }
.ds-toast .ds-toast-body { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.ds-toast .ds-toast-close {
  margin-left: auto;
  width: 24px; height: 24px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.ds-toast .ds-toast-close:hover { background: var(--surface-4); color: var(--txt); }
.ds-toast .ds-toast-action {
  margin-top: var(--sp-2);
  align-self: flex-start;
}
/* Прогресс-полоска времени (T745). */
.ds-toast .ds-toast-timer {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: currentColor;
  opacity: .4;
  transform-origin: left;
  animation: ds-toast-timer linear forwards;
}
.ds-toast-ok .ds-toast-timer { color: var(--success); }
.ds-toast-warn .ds-toast-timer { color: var(--warning); }
.ds-toast-err .ds-toast-timer { color: var(--danger); }
.ds-toast-info .ds-toast-timer { color: var(--info); }
.ds-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-2), transform var(--dur-2); }

@keyframes ds-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Мобильная позиция стека (низ-центр) (T747). */
@media (max-width: 600px) {
  .ds-toast-stack { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); justify-items: stretch; }
  .ds-toast { width: 100%; }
}

/* Баннеры: варианты + закрытие + действие (T750–T753). */
.ds-banner { position: relative; }
.ds-banner-ok   { border-color: rgba(34, 197, 94, .42); background: var(--success-soft); color: #bbf7d0; }
.ds-banner-warn { border-color: rgba(245, 158, 11, .42); background: var(--warning-soft); color: #fde68a; }
.ds-banner-err,
.ds-banner-danger { border-color: rgba(239, 68, 68, .42); background: var(--danger-soft); color: #fecaca; }
.ds-banner-info { border-color: rgba(56, 189, 248, .42); background: var(--info-soft); color: #bae6fd; }
.ds-banner .ds-banner-body { flex: 1; }
.ds-banner .ds-banner-title { font-weight: var(--fw-semibold); margin: 0 0 2px; }
.ds-banner .ds-banner-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.ds-banner .ds-banner-close {
  width: 24px; height: 24px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  opacity: .7;
  cursor: pointer;
}
.ds-banner .ds-banner-close:hover { opacity: 1; }
.ds-banner.is-dismissed { display: none; }

/* ------------------------------------------------------------
   4.9 Канбан
   ------------------------------------------------------------ */
.ds-kanban-col.is-scroll { max-height: 72vh; overflow-y: auto; }
.ds-kanban-count {
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--surface-4);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}
.ds-kanban-card { cursor: grab; }
.ds-kanban-card:active { cursor: grabbing; }
.ds-kanban-card[draggable="false"] { cursor: default; }
.ds-kanban-card .kc-title { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--txt); }
.ds-kanban-card .kc-sub { color: var(--muted); font-size: var(--fs-2xs); margin-top: 2px; word-break: break-word; }
.ds-kanban-card .kc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: var(--sp-2); }

/* Мини-бейджи карточки (T764). */
.ds-kc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--muted);
  font-size: var(--fs-2xs);
  line-height: 1.5;
  white-space: nowrap;
}
.ds-kc-tag .ds-icon { width: 12px; height: 12px; }
/* Авто/⚙ (T766). */
.ds-kc-tag.is-auto { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-200); }
/* Дедлайн по близости (T768). */
.ds-kc-tag.is-soon { border-color: rgba(245, 158, 11, .4); background: var(--warning-soft); color: #fde68a; }
/* Late/просрочено (T765). */
.ds-kc-late {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: white;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}
/* Аватар-инициалы исполнителя (T767). */
.ds-kc-assignee {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-200);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}

/* Состояния drag (T769–T771). */
.ds-kanban-card.is-dragging { opacity: .5; outline: 1px dashed var(--accent-line); cursor: grabbing; }
.ds-kanban-col.is-drop-target { border-color: var(--accent); background: rgba(59, 130, 246, .08); }
.ds-kanban-placeholder {
  height: 38px;
  margin-bottom: var(--sp-3);
  border: 1.5px dashed var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-soft);
}
.ds-kanban-card.is-busy { pointer-events: none; opacity: .6; }

/* Пустая колонка — заглушка-пунктир (T773). */
.ds-kanban-empty {
  display: grid;
  place-items: center;
  min-height: 80px;
  padding: var(--sp-4);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  text-align: center;
}

/* ------------------------------------------------------------
   4.10 Модалки и диалоги
   ------------------------------------------------------------ */
/* Анимация открытия (fade + scale) (T784). */
.ds-overlay { transition: opacity var(--dur-2) var(--ease-standard); opacity: 0; }
.ds-overlay.is-open { opacity: 1; }
.ds-modal { transform: translate(-50%, -48%) scale(.98); opacity: 0; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.ds-modal.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.ds-drawer { transform: translateX(12px); opacity: 0; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.ds-drawer.is-open { transform: translateX(0); opacity: 1; }

/* Шапка/тело/футер (T782). */
.ds-modal-header,
.ds-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.ds-modal-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.ds-modal-sub { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.ds-modal-body { padding: var(--sp-5); }
.ds-modal-footer,
.ds-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
}
.ds-modal-footer .spacer { margin-right: auto; }
.ds-modal-close,
.ds-drawer-close {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.ds-modal-close:hover,
.ds-drawer-close:hover { background: var(--surface-4); color: var(--txt); }

/* Danger-вариант (T788). */
.ds-modal.is-danger .ds-modal-title { color: #fecaca; }

/* На весь экран на мобиле (T792). */
@media (max-width: 600px) {
  .ds-modal {
    top: auto; bottom: 0; left: 0;
    width: 100vw;
    max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(8px);
  }
  .ds-modal.is-open { transform: translateY(0); }
  .ds-drawer { width: 100vw; }
}

/* Сегмент-контрол как ссылки-табы (для фильтров). */
.ds-segment-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.ds-segment-link.is-active {
  background: var(--accent-soft);
  color: var(--accent-200);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.ds-segment-link:hover { color: var(--txt); }
.ds-segment .ds-kanban-count { background: var(--surface-4); }