/* React-порт текущей desktop-дорожной карты с bpmwork.
   Файл подключается последним и ограничен #tab-plan. */

#tab-plan .roadmap-commandbar {
  display: flex;
  position: relative;
  z-index: 5000 !important;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: nowrap;
  margin: 0 32px 10px;
  padding: 6px 0;
  overflow: visible;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

#tab-plan .roadmap-sheet {
  overflow: visible !important;
}

#tab-plan .scrollable {
  position: relative;
  z-index: 1;
}

#tab-plan .roadmap-command-zone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

#tab-plan .roadmap-command-zone + .roadmap-command-zone {
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border);
}

#tab-plan .roadmap-command-zone--views {
  flex: 0 0 auto;
}

#tab-plan .roadmap-command-zone--controls {
  margin-left: auto;
}

#tab-plan .roadmap-commandbar .roadmap-view-bar,
#tab-plan .roadmap-commandbar .roadmap-view-switch {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  flex-wrap: nowrap;
}

#tab-plan .roadmap-commandbar .roadmap-view-switch {
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#tab-plan .roadmap-commandbar .rv-seg {
  position: relative;
  min-height: 32px;
  padding: 7px 2px 6px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  box-shadow: none !important;
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

#tab-plan .roadmap-commandbar .rv-seg:hover {
  color: var(--color-text) !important;
}

#tab-plan .roadmap-commandbar .rv-seg.is-active {
  border-bottom-color: var(--color-primary) !important;
  color: var(--color-text) !important;
  font-weight: 600 !important;
}

#tab-plan .roadmap-commandbar .rv-seg:focus-visible {
  outline: none !important;
  border-bottom-color: var(--color-border-focus) !important;
  color: var(--color-text-primary) !important;
}

#tab-plan .roadmap-commandbar .rd-seg,
#tab-plan .roadmap-commandbar .file-menu-btn,
#tab-plan .roadmap-commandbar .btn-expand,
#tab-plan .roadmap-commandbar .btn-toolbar-add {
  min-height: 32px;
  padding: 6px 10px !important;
  border-radius: 7px !important;
  font-size: var(--text-base) !important;
  line-height: 1.2 !important;
}

#tab-plan .roadmap-commandbar .file-menu-btn,
#tab-plan .roadmap-commandbar .btn-expand {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
}

#tab-plan .roadmap-commandbar .file-menu-btn:hover,
#tab-plan .roadmap-commandbar .btn-expand:hover {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text) !important;
}

#tab-plan .roadmap-commandbar .btn-toolbar-add {
  border: 1px solid var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: var(--on-accent, #fff) !important;
}

#tab-plan .roadmap-commandbar .filter-group {
  margin-left: 0;
  gap: 6px;
}

#tab-plan .roadmap-commandbar .filter-group label {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

#tab-plan .roadmap-commandbar .filter-group select {
  min-height: 32px;
  max-width: 190px;
  border-color: var(--color-border);
  border-radius: 7px;
  background-color: var(--color-surface);
  color: var(--color-text);
}

#tab-plan .roadmap-toolbar-menu {
  position: relative;
  color: var(--color-text-secondary);
}

#tab-plan .roadmap-toolbar-menu[open] {
  z-index: 5050;
}

#tab-plan .roadmap-toolbar-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

#tab-plan .roadmap-toolbar-menu > summary::-webkit-details-marker {
  display: none;
}

#tab-plan .roadmap-toolbar-menu > summary:hover,
#tab-plan .roadmap-toolbar-menu[open] > summary {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

#tab-plan .roadmap-toolbar-menu > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

#tab-plan .roadmap-toolbar-popover {
  position: absolute;
  z-index: 5100 !important;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: var(--space-2);
  width: max-content;
  min-width: 230px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg, 0 14px 36px rgba(34, 28, 22, .14));
}

/* Фильтр таблицы рендерится через React portal в body, как legacy popup
   на bpmwork: он не обрезается scrollable и всегда открыт только в одном
   экземпляре. Явный reset нужен, потому что это button, а legacy использовал div. */
.roadmap-column-filter-portal {
  z-index: 10000 !important;
  width: 240px;
  max-width: min(240px, calc(100vw - 20px));
  max-height: min(360px, calc(100vh - 20px));
  padding: var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.roadmap-column-filter-portal .col-filter-section-title {
  padding: 4px 8px 6px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.roadmap-column-filter-portal button.col-filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text);
  box-shadow: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
  transform: none;
}

.roadmap-column-filter-portal button.col-filter-option:hover {
  background: var(--color-bg-subtle);
}

.roadmap-column-filter-portal button.col-filter-option.is-selected {
  background: var(--color-primary-25);
  color: var(--color-primary);
  font-weight: 600;
}

.roadmap-column-filter-portal .col-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1);
}

.roadmap-column-filter-portal .col-menu-reset,
.roadmap-column-filter-portal .col-menu-done {
  min-height: 30px;
  margin: 0;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  line-height: 1.2;
  transform: none;
}

.roadmap-column-filter-portal .col-menu-done {
  background: var(--color-primary);
  color: var(--on-accent, #fff);
}

.roadmap-column-filter-portal .col-filter-option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  color: transparent;
  font-size: var(--text-xs);
  opacity: 1;
}

.roadmap-column-filter-portal .col-filter-check.is-selected .col-filter-option-check {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--on-accent, #fff);
}

/* Phase/stage/task actions are rendered into body so that the roadmap scroll
   container cannot clip them. Keep this portal on the shared PrimeBPM popover
   contract instead of inheriting the legacy, filled button styles. */
body > .ui-popover.roadmap-actions-menu {
  position: fixed;
  z-index: 10050 !important;
  display: grid;
  gap: 2px;
  width: 220px;
  min-width: 220px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  padding: 6px;
  border-color: var(--color-border, #e3e7ee);
  border-radius: 10px;
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-lg, 0 14px 36px rgba(34, 28, 22, .14));
}

body > .ui-popover.roadmap-actions-menu .ui-popover-item {
  min-height: 34px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--color-text, #252938);
  font: inherit;
  font-size: var(--text-sm, 13px);
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  transform: none;
}

body > .ui-popover.roadmap-actions-menu .ui-popover-item:hover,
body > .ui-popover.roadmap-actions-menu .ui-popover-item:focus-visible {
  background: var(--color-bg-subtle, #f5f6f8);
  color: var(--color-text, #252938);
}

body > .ui-popover.roadmap-actions-menu .ui-popover-item.is-danger {
  color: var(--status-failed, var(--color-danger, #c45c5c));
}

body > .ui-popover.roadmap-actions-menu .ui-popover-item.is-danger:hover,
body > .ui-popover.roadmap-actions-menu .ui-popover-item.is-danger:focus-visible {
  background: var(--status-failed-soft, var(--color-danger-50, #fef2f2));
  color: var(--status-failed, var(--color-danger, #c45c5c));
}

@media (max-width: 768px) {
  body > .ui-popover.roadmap-actions-menu .ui-popover-item {
    min-height: 44px;
  }
}

#tab-plan .roadmap-toolbar-menu-label {
  padding: 0 2px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

#tab-plan .roadmap-view-options-popover .roadmap-density-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#tab-plan .roadmap-view-options-popover .cv-bar {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

#tab-plan .roadmap-view-options-popover .cv-hide-btn,
#tab-plan .roadmap-view-options-popover .cv-collapse-btn {
  justify-content: flex-start;
  width: 100%;
  border-color: transparent;
  background: transparent;
}

#tab-plan .cv-hide-btn,
#tab-plan .cv-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--border, #e3e7ee);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text-muted, #6a7180);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

#tab-plan .cv-hide-btn:hover,
#tab-plan .cv-collapse-btn:hover {
  border-color: var(--text-muted, #6a7180);
  color: var(--text, #181b26);
}

#tab-plan .cv-hide-btn.is-on,
#tab-plan .cv-collapse-btn.is-on {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
}

#tab-plan .cv-hide-ic,
#tab-plan .cv-hide-ic svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Финальная desktop-сетка повторяет bpmwork: название и примечание делят
   свободное место, а рабочие поля не сжимаются. Жёсткий min-width: 1508px
   здесь ломал эту адаптивность и создавал горизонтальный скролл. */
@media (min-width: 769px) {
  #tab-plan #planTable {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #tab-plan #planTable col.pt-col-name { width: auto !important; }
  #tab-plan #planTable col.pt-col-dates { width: 252px !important; }
  #tab-plan #planTable col.pt-col-owner { width: 170px !important; }
  #tab-plan #planTable col.pt-col-status { width: 128px !important; }
  #tab-plan #planTable col.pt-col-urgency { width: 104px !important; }
  #tab-plan #planTable col.pt-col-note { width: 180px !important; }
  #tab-plan #planTable col.pt-col-actions { width: 30px !important; }

  #tab-plan #planTable th:nth-child(2),
  #tab-plan #planTable td:nth-child(2),
  #tab-plan #planTable .task-name-cell,
  #tab-plan #planTable .step-name-cell {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

}

@media (min-width: 769px) and (max-width: 1050px) {
  /* При открытом сайдбаре полезная ширина уже ширины окна. Таблице нужен
     минимальный запас под иерархическую колонку, иначе фиксированные сроки,
     ответственный и статус сжимают название задачи практически до нуля. */
  #tab-plan #planTable { min-width: 820px !important; }
  #tab-plan #planTable col.pt-col-name { width: 300px !important; }
  #tab-plan #planTable col.pt-col-dates { width: 248px !important; }
  #tab-plan #planTable col.pt-col-owner { width: 146px !important; }
  #tab-plan #planTable col.pt-col-status { width: 112px !important; }
  #tab-plan #planTable col.pt-col-urgency { width: 94px !important; }
  #tab-plan #planTable col.pt-col-note { width: 0 !important; }
  #tab-plan #planTable thead th:nth-child(7),
  #tab-plan #planTable tbody td:nth-child(7) { display: none !important; }

  #tab-plan #planTable thead th:nth-child(2),
  #tab-plan #planTable tbody td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 3;
    box-shadow: 2px 0 5px rgba(15, 23, 42, 0.08);
  }

  #tab-plan #planTable thead th:nth-child(2) {
    z-index: 7;
    background: var(--color-primary);
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  #tab-plan #planTable col.pt-col-urgency { width: 0 !important; }
  #tab-plan #planTable thead th:nth-child(6),
  #tab-plan #planTable tbody td:nth-child(6) { display: none !important; }
}

@media (min-width: 1600px) {
  #tab-plan #planTable col.pt-col-name { width: 48% !important; }
  #tab-plan #planTable col.pt-col-note { width: auto !important; }
}

#tab-plan #planTable th,
#tab-plan #planTable td {
  overflow: hidden;
}

/* Согласование должно оставаться внутри узкой колонки статуса. Раньше
   nowrap-чип шириной до 220px выходил из 128px-ячейки и перекрывал
   ответственного, срочность и примечание. Полное имя остаётся в title. */
#tab-plan #planTable td.status-cell {
  overflow: hidden !important;
}

#tab-plan #planTable td.status-cell .task-approval-chips,
#tab-plan #planTable td.status-cell .task-approval-chip-row {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: stretch;
}

#tab-plan #planTable td.status-cell .task-approval-chip-row {
  flex-direction: column;
  flex-wrap: nowrap;
}

#tab-plan #planTable td.status-cell .appr-pending-chip {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tab-plan #planTable .task-name-cell .task-name-text {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-base);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Desktop hierarchy clearance: the status checkbox is absolutely positioned
   inside this cell, so the title needs its own guaranteed horizontal lane.
   Without this final override a compressed first column leaves only a few
   pixels between the marker and text, which reads as one element overlapping
   the other. Mobile keeps its dedicated spacing from design-2026.css. */
@media (min-width: 769px) {
  #tab-plan #planTable .task-row .task-name-cell {
    padding-left: 6.25em !important;
  }
}

#tab-plan #planTable .step-name-cell {
  display: table-cell;
  padding-left: 1.23em !important;
  min-width: 0;
  max-width: 700px;
  vertical-align: middle;
}

/* A <td> must remain a table-cell. Making it a flex container removes it from
   the table formatting context and Chromium can synthesize an anonymous row
   between the stage and its first task. Keep flex layout on an inner wrapper. */
#tab-plan #planTable .step-name-content {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 0;
  flex-wrap: nowrap;
}

#tab-plan #planTable .step-name-cell::before {
  content: none !important;
}

#tab-plan #planTable .step-name-content > .plan-drag-handle,
#tab-plan #planTable .step-name-content > .toggle-icon {
  flex: 0 0 auto;
}

#tab-plan #planTable .task-name-cell > .plan-drag-handle {
  position: absolute;
  left: 1.25em;
  top: 50%;
  z-index: 2;
  margin: 0;
  transform: translateY(-50%);
}

#tab-plan #planTable .step-name-content > strong {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 100%;
  overflow: hidden;
  font-size: var(--text-base);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tab-plan #planTable .step-name-content > .done-badge,
#tab-plan #planTable .step-name-content > .btn-attach,
#tab-plan #planTable .step-name-content > .btn-comment,
#tab-plan #planTable .step-name-content > .btn-inline-add-step,
#tab-plan #planTable .step-name-content > .btn-del-step {
  flex: 0 0 auto;
}

#tab-plan #planTable .step-dates {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#tab-plan #planTable .task-note-input {
  width: 100%;
  min-width: 0;
  max-width: 320px;
}

#tab-plan #planTable .task-dates-wrap,
#tab-plan #planTable .step-dates {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-flow: row nowrap;
}

#tab-plan #planTable .task-date-input,
#tab-plan #planTable .step-date-input {
  flex: 1 1 108px;
  width: auto;
  min-width: 0;
  padding-inline: 4px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--text-sm) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
  text-align: center;
}

/* В эталонном чеклисте дата сама открывает date-picker, поэтому
   отдельная пиктограмма и невидимая кнопка не нужны. */
#tab-plan #planTable .plan-date-calendar-icon,
#tab-plan #planTable .plan-date-trigger {
  display: none !important;
}

#tab-plan #planTable .plan-date-editor > .task-date-input,
#tab-plan #planTable .plan-date-editor > .step-date-input {
  padding-right: 4px !important;
}

#tab-plan #planTable .task-date-input:focus,
#tab-plan #planTable .task-date-input:focus-visible,
#tab-plan #planTable .step-date-input:focus,
#tab-plan #planTable .step-date-input:focus-visible {
  border-radius: 4px !important;
  outline: none !important;
  background: color-mix(in srgb, var(--phase-color, var(--color-primary, #4e5180)) 8%, transparent) !important;
}

#tab-plan #planTable .task-dates-days {
  font-size: var(--type-caption-size, 0.75rem);
}

#tab-plan .plan-table-wrap {
  max-width: 100%;
  overflow-x: auto !important;
}

#tab-plan #planTable .plan-drag-handle[draggable="true"],
#tab-plan #planCards [draggable="true"] {
  cursor: grab;
}

#tab-plan #planTable .plan-drag-handle[draggable="true"]:active,
#tab-plan #planCards [draggable="true"]:active {
  cursor: grabbing;
}

#tab-plan #planTable tr.is-drag-over > td {
  box-shadow: inset 0 2px 0 var(--color-primary), inset 0 -2px 0 var(--color-primary) !important;
}

#tab-plan #planCards .rc-phase.is-drag-over,
#tab-plan #planCards .rc-stage-group.is-drag-over {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 72%, transparent);
  outline-offset: -2px;
}

#tab-plan #planCards .rc-drag--phase {
  flex: 0 0 auto;
}

#tab-plan #planTable thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Цвет фаз и состояния задач соответствуют текущему bpmwork. */
#tab-plan #planTable .phase-row > td {
  background: color-mix(in srgb, var(--phase-color, #68769b) 14%, var(--color-surface, #fff)) !important;
  border-top: 0 !important;
  box-shadow: inset 4px 0 0 var(--phase-color, var(--color-primary, #4e5180));
}

#tab-plan #planTable .phase-row:hover > td {
  background: color-mix(in srgb, var(--phase-color, #68769b) 18%, var(--color-surface, #fff)) !important;
}

#tab-plan #planTable .phase-row .btn-inline-add,
#tab-plan #planTable .phase-row .btn-del-phase,
#tab-plan #planTable .phase-row .btn-phase-menu {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--phase-color, #68769b) 42%, var(--color-text-secondary, #5f6675)) !important;
  box-shadow: none !important;
}

#tab-plan #planTable .phase-row .btn-del-phase {
  opacity: .56;
}

#tab-plan #planTable .phase-row:hover .btn-del-phase,
#tab-plan #planTable .phase-row .btn-del-phase:focus-visible {
  opacity: .84;
}

#tab-plan #planTable .phase-row .btn-inline-add:hover,
#tab-plan #planTable .phase-row .btn-del-phase:hover,
#tab-plan #planTable .phase-row .btn-phase-menu:hover {
  border-color: color-mix(in srgb, var(--phase-color, #68769b) 18%, var(--color-border, #e3e7ee)) !important;
  background: color-mix(in srgb, var(--phase-color, #68769b) 11%, var(--color-surface, #fff)) !important;
}

#tab-plan #planTable .phase-row .btn-del-phase:hover {
  color: var(--color-danger, #b5553b) !important;
  opacity: 1;
}

#tab-plan #planTable .task-row.is-overdue > td {
  background: var(--color-danger-25) !important;
}

#tab-plan #planTable .task-row.is-overdue:hover > td {
  background: var(--color-danger-50) !important;
}

#tab-plan #planTable .task-row.is-overdue .task-name-cell {
  box-shadow: inset 3px 0 0 var(--status-overdue);
}

#tab-plan #planTable .task-row.is-overdue .task-name-text,
#tab-plan #planTable .task-row.is-overdue .task-date-input[data-iso]:last-of-type {
  color: var(--status-overdue) !important;
}

#tab-plan #planCards .rc-task.is-overdue {
  background: var(--color-danger-25);
  box-shadow: inset 3px 0 0 var(--status-overdue);
}

#tab-plan #planCards .rc-task.is-overdue:hover {
  background: var(--color-danger-50);
}

#tab-plan #planCards .rc-task.is-overdue .rc-task-title,
#tab-plan #planCards .rc-task.is-overdue .rc-task-dates {
  color: var(--status-overdue);
}

#tab-plan .rc-task-dates {
  font-size: var(--text-base);
  font-weight: 700;
}

#tab-plan .rc-task-owner,
#tab-plan .task-owner-display {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#tab-plan .rc-owner-readonly {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text, #2f2a24);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tab-plan .status-pill.is-readonly,
#tab-plan .rc-check.is-readonly {
  cursor: default !important;
  opacity: .72;
}

[data-theme="dark"] #tab-plan #planTable .phase-row > td {
  background: color-mix(in srgb, var(--phase-color, #68769b) 20%, var(--color-surface, #1b1f2a)) !important;
}

[data-theme="dark"] #tab-plan #planTable .phase-row:hover > td {
  background: color-mix(in srgb, var(--phase-color, #68769b) 24%, var(--color-surface, #1b1f2a)) !important;
}

/* Названия вложений остаются видимыми прямо в задаче; открытие строки или
   карточки ведёт в тот же drawer с полным управлением файлами. */
#tab-plan .task-name-content {
  display: inline-flex;
  min-width: 0;
  max-width: calc(100% - 28px);
  flex-direction: column;
  vertical-align: middle;
}

#tab-plan .roadmap-task-files {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
  margin-top: 4px;
  color: var(--color-text-secondary, #6b7280);
  font-size: var(--type-caption-size, 0.75rem);
  font-weight: 500;
  line-height: 1.3;
}

/* В таблице один файл и счётчик дают понять, что вложения перенесены, но не
   превращают каждую задачу с большим архивом в многострочную карточку. Полный
   список остаётся в title/aria-label и в карточном виде. */
#tab-plan #planTable .roadmap-task-files--compact {
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}

#tab-plan #planTable .roadmap-task-files--compact .roadmap-task-files-label,
#tab-plan #planTable .roadmap-task-files--compact .roadmap-task-files-more {
  flex: 0 0 auto;
}

#tab-plan #planTable .roadmap-task-files--compact .roadmap-task-file-name {
  min-width: 0;
  flex: 0 1 220px;
}

#tab-plan .roadmap-task-files-more {
  color: var(--color-text-tertiary, #8a909b);
  font-weight: 600;
}

#tab-plan .roadmap-task-files-label {
  color: var(--color-text-tertiary, #8a909b);
}

#tab-plan .roadmap-task-file-name {
  display: inline-block;
  overflow: hidden;
  max-width: 220px;
  padding: 2px 6px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 5px;
  background: var(--color-bg-app, #f8f9fb);
  color: var(--color-text-secondary, #5f6877);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tab-plan button.roadmap-task-file-name {
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#tab-plan button.roadmap-task-file-name:hover,
#tab-plan button.roadmap-task-file-name:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #56558b) 42%, var(--color-border, #e5e7eb));
  background: color-mix(in srgb, var(--accent, #56558b) 8%, var(--color-bg-app, #f8f9fb));
  color: var(--accent, #56558b);
}

#tab-plan #planCards .rc-task-title > .roadmap-task-files {
  font-weight: 500;
}

@media (max-width: 820px) {
  #tab-plan .roadmap-task-file-name {
    max-width: min(220px, 70vw);
  }
}

[data-theme="dark"] #tab-plan .roadmap-task-file-name {
  border-color: var(--color-border, #363b46);
  background: var(--color-bg-app, #20242d);
  color: var(--color-text-secondary, #b9c0cc);
}

/* Одноразовый фокус после перехода из поручения или с главной. */
#tab-plan :is([data-roadmap-task-id], [data-roadmap-step-id]) {
  scroll-margin-block: 96px;
}

#tab-plan #planTable .step-row.is-focus-target > td {
  background: color-mix(in srgb, var(--accent-tint) 82%, var(--surface, #fff)) !important;
}

#tab-plan #planTable .step-row.is-focus-target > .step-name-cell,
#tab-plan .mobile-project-step.is-focus-target > .mobile-project-step-row {
  box-shadow: inset 4px 0 0 var(--accent);
  animation: roadmap-focus-edge 1.15s ease-in-out 2;
}

#tab-plan #planCards .rc-stage-group.is-focus-target > .rc-stage {
  background: color-mix(in srgb, var(--accent-tint) 82%, var(--surface, #fff));
  box-shadow: inset 4px 0 0 var(--accent);
  animation: roadmap-focus-edge 1.15s ease-in-out 2;
}

#tab-plan #planTable .task-row.is-focus-target > td {
  background: color-mix(in srgb, var(--accent-tint) 82%, var(--surface, #fff)) !important;
}

#tab-plan #planTable .task-row.is-focus-target > .task-name-cell {
  box-shadow: inset 4px 0 0 var(--accent);
  animation: roadmap-focus-edge 1.15s ease-in-out 2;
}

#tab-plan #planCards .rc-task.is-focus-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-tint) 82%, var(--surface, #fff));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: roadmap-focus-card 1.15s ease-in-out 2;
}

#tab-plan .is-focus-target .task-name-text,
#tab-plan .is-focus-target .rc-task-title {
  color: var(--color-text-primary, var(--text));
  font-weight: 700;
}

@keyframes roadmap-focus-edge {
  50% {
    box-shadow: inset 7px 0 0 var(--accent);
  }
}

@keyframes roadmap-focus-card {
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tab-plan #planTable .task-row.is-focus-target > td,
  #tab-plan #planTable .task-row.is-focus-target > .task-name-cell,
  #tab-plan #planTable .step-row.is-focus-target > td,
  #tab-plan #planTable .step-row.is-focus-target > .step-name-cell,
  #tab-plan .mobile-project-step.is-focus-target > .mobile-project-step-row,
  #tab-plan #planCards .rc-stage-group.is-focus-target > .rc-stage,
  #tab-plan #planCards .rc-task.is-focus-target {
    animation: none;
  }
}