/* 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);
}

#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 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; }
}

@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;
}

#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: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 700px;
  flex-wrap: nowrap;
}

#tab-plan #planTable .step-name-cell > 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-cell > .done-badge,
#tab-plan #planTable .step-name-cell > .btn-attach,
#tab-plan #planTable .step-name-cell > .btn-comment,
#tab-plan #planTable .step-name-cell > .btn-inline-add-step,
#tab-plan #planTable .step-name-cell > .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: 9px;
}

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

#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;
}