/* ====== ШРИФТ MONT ====== */
@font-face {
  font-family: 'Mont';
  src: url('font/Mont-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mont';
  src: url('font/Mont-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mont';
  src: url('font/Mont-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mont';
  src: url('font/Mont-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mont';
  src: url('font/Mont-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mont';
  src: url('font/Mont-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mont';
  src: url('font/Mont-Heavy.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mont';
  src: url('font/Mont-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Применяем шрифт ко всем элементам BPMN и текстовым элементам */
body,
.bpmn-container,
.bpmn-container *,
.djs-palette,
.djs-popup,
.djs-context-pad,
.djs-label,
.djs-direct-editing-parent,
.djs-direct-editing-parent textarea,
.djs-shape label,
.djs-element .djs-label,
.djs-element-label,
.bjs-breadcrumbs,
.bjs-powered-by,
.properties-panel * {
  /* font-family: 'Mont', 'Segoe UI', Arial, sans-serif !important; */
  font-family: sans-serif;
}

/* Особо для текстовых элементов в SVG */
.djs-container text,
.djs-container tspan,
.djs-container .djs-label {
  /* font-family: 'Mont', 'Segoe UI', Arial, sans-serif !important; */
  font-family: sans-serif;
  font-weight: 400 !important;
}

/* Для полей ввода в properties panel */
input[type="text"],
textarea {
  /* font-family: 'Mont', 'Segoe UI', Arial, sans-serif !important; */
  font-family: sans-serif;
}

/* ====== ТЕМЫ И СЕТКА ====== */
:root {
  --grid-size: 20px;
  /* Размер сетки */
  --palette-w: 42px;
  /* Ширина панели инструментов */

  /* Светлая тема */
  --bg-canvas: #ffffff;
  /* Фон рабочей области */
  --grid-dot: rgba(172, 172, 172, 0.242);
  /* Цвет точек сетки */

  --panel-bg: #eef2f7;
  --panel-bg-alpha: #eef2f768;
  /* Фон панели инструментов */
  --panel-border: #cfd7e3;
  /* Граница панели */
  --panel-entry: #ffffff;
  /* Фон элементов панели */
  --panel-entry-hover: #e9eef5;
  /* Фон при наведении */
  --panel-entry-active: #dbe4f0;
  /* Фон при активации */

  --icon: #1f2937;
  /* Цвет иконок */
  --label: #f10707;
  /* Цвет текста */

  --shape-fill: #ffffff;
  /* Заливка фигур */
  --shape-stroke: #111827;
  /* Обводка фигур */
  --conn-stroke: #374151;
  /* Цвет соединений */

  /* Стили элементов */
  --task-color: #e3f2fd;
  /* Цвет фона задач */
  --event-color: #c8e6c9;
  /* Цвет фона событий */
  --gateway-color: #ffecb3;
  /* Цвет фона шлюзов */
  --stroke-width: 2px;
  /* Толщина обводки */
  --shadow-size: 2px 2px 3px rgba(0, 0, 0, 0.1);
  /* Тень фигур */
  /* --font-main: 'Mont', 'Segoe UI', Arial, sans-serif; */
  --font-main: sans-serif;
  /* Основной шрифт */
  --font-size: 11px;
  /* Размер шрифта */
  --font-weight-regular: 400;
  /* Обычное начертание */
  --font-weight-bold: 600;
  /* Полужирное начертание */

  /* ИЗМЕНЕНИЕ 2: Переменные для светлой темы сделаны темнее */
  --main-bg-color: #d9dce1;
  /* Светлый фон (темнее) */
  --main-text-color: #1f2937;
  /* Темный текст */
  /* ИЗМЕНЕНИЕ 5: Appbar в светлой теме остается темным (УПРАВЛЯЕТСЯ В style_landscape.css) */
  --appbar-bg-color: rgba(205, 210, 215, 0.85);
  /* Светло-серый фон для appbar (темнее) */
  --appbar-border-color: rgba(0, 0, 0, 0.12);
  /* ИЗМЕНЕНИЕ: Задаем черный цвет для контура кнопок в светлой теме */
  --button-group-border-color: #000000;
}

[data-theme="dark"] {
  --bg-canvas: #151A20;
  /* Фон рабочей области (тёмная) */
  --grid-dot: rgba(82, 82, 82, 0.374);
  /* Цвет точек сетки (тёмная) */

  --panel-bg: #21272D;
  --panel-bg-alpha: #21272D68;
  /* Фон панели инструментов (тёмная) */
  --panel-border: #4c637a;
  /* Граница панели (тёмная) */
  --panel-entry: #2d3748;
  /* Фон элементов панели (тёмная) */
  --panel-entry-hover: #4a5568;
  /* Фон при наведении (тёмная) */
  --panel-entry-active: #718096;
  /* Фон при активации (тёмная) */

  --icon: #b6b6b6;
  /* Цвет иконок (тёмная) */
  --label: #eb790f;
  /* Цвет текста при вводе (тёмная) */

  --shape-fill: #21272D;
  /* Заливка фигур (тёмная) */
  --shape-stroke: #6b7783;
  /* Обводка фигур (тёмная) */
  --conn-stroke: #7d8fa1;
  /* Цвет соединений (тёмная) */

  /* Новые переменные для дорожек */
  --lane-fill-light: #f8f9fa;
  /* Светлый фон дорожек в светлой теме */
  --lane-fill-dark: #2a3342;
  /* Темный фон дорожек в темной теме */
  /* ДОБАВЛЕНО */

  --main-bg-color: #151A20;
  --main-text-color: #F4F4F4;
  --appbar-bg-color: rgba(10, 14, 22, 0.9);
  --appbar-border-color: rgba(255, 255, 255, 0.08);
  --button-group-border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .djs-container svg.new-parent {
  background: #00000030 !important;
  transition: background 0.3s ease-out;
  /*  var(--bg-canvas) */
}

/* Рабочая область + плотная точечная сетка */
.bpmn-container {
  border: 1px solid #656565;
  /* Рамка контейнера */
  border-radius: 12px;
  /* Закругление углов */
  background-color: var(--bg-canvas);
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  overflow: hidden;
}


/* SVG-холст всегда прозрачный */
.djs-container,
.djs-container .viewport,
.djs-container svg {
  background: transparent !important;
}

/* Drag/Connect превью не «белеет» */
.djs-drag-active,
.djs-drag-active .djs-container,
.djs-dragger {
  background: transparent !important;
  z-index: 999999 !important;
}

/* Скрыть «Powered by» */
.bjs-powered-by {
  display: none !important;
}

/* ====== Панель инструментов ====== */
.djs-palette {
  position: relative !important; /* <-- ВКЛЮЧАЕТ РАБОТУ Z-INDEX */
  z-index: 20 !important;        /* <-- ПОДНИМАЕТ ПАНЕЛЬ ВЕРХ */
  background: rgba(10, 14, 22, 0.747) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 30px;
  padding: 10px 5px !important; /* Немного уменьшили внутренние отступы */
  display: flex;
  flex-direction: column;

  /* ИСПРАВЛЕНИЕ: Жестко блокируем ширину, чтобы она не "толстела" */
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  
  margin-top: 0;
  height: fit-content;
  flex-shrink: 0;
  align-self: center;
  overflow-x: hidden !important; /* Запрещаем горизонтальное расширение */
  scrollbar-width: none;
  z-index: 5;
}

/* Выравниваем элементы ВНУТРИ групп палитры */
.djs-palette .group {
  display: flex;
  flex-direction: column;
  gap: 1px; /* Аккуратный отступ между всеми кнопками */
  margin-bottom: 0px;
}

/* Убираем лишние отступы у разделителей внутри палитры */
.djs-palette .separator {
  margin: 5px auto !important;
  width: 60%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}


.djs-palette::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.djs-palette .entry,
.djs-palette .djs-palette-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background: transparent;
  /* Фон элементов панели по умолчанию прозрачный */
  color: var(--icon);
  border-radius: 8px;
  border: 2px solid transparent;
  /* Добавлена прозрачная рамка 2px */
  transition: background-color .15s ease;
  /* Анимируем фон */
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
  font-family: var(--font-main) !important;
}

.djs-palette .entry,
.djs-palette .djs-palette-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* ИСПРАВЛЕНИЕ: Фиксируем размер иконок и центрируем их */
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto !important; 
  
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.djs-palette .entry:active,
.djs-palette .entry.djs-active {
  background: transparent;
  /* Фон активного элемента тоже прозрачный */
}

/* ИЗМЕНЕНИЕ 4: Добавлен .djs-palette-toggle для корректного применения цвета */
.djs-palette .entry[class*="bpmn-icon-"],
.djs-palette .entry [class^="bpmn-icon-"],
.djs-palette .entry [class*=" bpmn-icon-"],
.djs-palette .djs-palette-toggle {
  color: var(--icon) !important;
  font-size: 25px;
  transition: color 0.15s ease;
}

/* ИЗМЕНЕНИЕ 3: Принудительное применение синего цвета для подсветки иконки */
/* ИЗМЕНЕНИЕ 4: Добавлен .djs-palette-toggle для корректного применения hover-эффекта */
.djs-palette .entry[class*="bpmn-icon-"]:hover,
.djs-palette .entry[class*="bpmn-icon-"].djs-active,
.djs-palette .entry:hover [class^="bpmn-icon-"],
.djs-palette .entry:hover [class*=" bpmn-icon-"],
.djs-palette .entry:active [class^="bpmn-icon-"],
.djs-palette .entry.djs-active [class*=" bpmn-icon-"],
.djs-palette .djs-palette-toggle:hover,
.djs-palette .djs-palette-toggle.djs-active {
  color: #4492ff !important;
}


/* ====== Popup / Context pad ====== */
.djs-popup {
  background: var(--panel-bg) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  color: var(--label) !important;
  font-family: var(--font-main) !important;
  /* Шрифт для всплывающих окон */
}

.djs-popup .entry,
.djs-popup .bjs-entry {
  background: var(--panel-entry) !important;
  color: var(--icon) !important;
  border-radius: 6px !important;
  padding: 6px !important;
  margin: 4px 2px !important;
  font-family: var(--font-main) !important;
  /* Шрифт для элементов всплывающих окон */
}

.djs-popup .entry:hover,
.djs-popup .bjs-entry:hover {
  background: var(--panel-entry-hover) !important;
}

.djs-popup .entry:active,
.djs-popup .bjs-entry:active,
.djs-popup .entry.active,
.djs-popup .bjs-entry.active {
  background: var(--panel-entry-active) !important;
}

.djs-popup [class^="bpmn-icon-"],
.djs-popup [class*=" bpmn-icon-"] {
  color: var(--icon) !important;
  /* Цвет иконок */
}

.djs-context-pad {
  background: var(--panel-bg-alpha) !important;
  backdrop-filter: blur(5px);
  /* Фон контекстного меню */
  border: 1px solid var(--panel-border) !important;
  border-radius: 10px !important;
  /* padding: 4px !important; */

  animation: fadeInScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center center;
  z-index: 9 !important;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.djs-container .group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
  padding: 4px;
}

.djs-container .group:not(:last-child) {
  border-bottom: 1px dotted var(--panel-border);
}

.djs-context-pad .entry {
  margin: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* @keyframes fadeOutScale {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.8);
  }
} */

.djs-overlay-container {
  display: block !important;
}

.djs-context-pad .entry {
  background: var(--panel-entry) !important;
  color: var(--icon) !important;
  border-radius: 6px !important;
  font-family: var(--font-main) !important;
  padding: 3px !important;
  width: auto !important;
  height: auto !important;
  /* Шрифт для контекстного меню */
  transition: background 0.3s ease;
}

.djs-context-pad .entry:hover {
  background: var(--panel-entry-hover) !important;
}

.djs-context-pad .entry [class^="bpmn-icon-"],
.djs-context-pad .entry [class*=" bpmn-icon-"] {
  color: var(--icon) !important;
  /* Цвет иконок */
}

.djs-element.selected .djs-outline {
  visibility: visible;
  opacity: 1 !important;
  stroke: var(--element-selected-outline-stroke-color);
}

.djs-element:not(.selected) .djs-outline {
  visibility: visible !important;
  display: block !important;
  opacity: 0 !important;
}

.djs-element.animate-deselect .djs-outline {
  visibility: visible;
  opacity: 0 !important;
  stroke: var(--element-selected-outline-stroke-color);
}

.layer-complex-preview * {
  animation: fadeIn .2s ease-out;
}

/* @keyframes fadeInMove {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
} */

.djs-outline {
  stroke-width: 1px !important;
  stroke-linecap: round;
  stroke-dasharray: 1, 3;
  transition: opacity 0.2s;
}


.bjs-drilldown {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  width: 20px !important;
  height: 20px !important;


  transform: translate(-15px, -105px);
}


/* .bjs-drilldown>* {
  display: none !important;
}


.bjs-drilldown::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;


  -webkit-mask-image: url(svg/from-square.svg);
  mask-image: url(svg/from-square.svg);
  -webkit-mask-size: 22px 22px;
  mask-size: 20px 20px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  background-color: var(--shape-stroke);
  transition: all 0.2s ease-in-out;
}


.bjs-drilldown:hover::after {

  background-color: #0899b3;
  transform: scale(1.15);
} */


/* ====== СТИЛИ ДЛЯ НОВЫХ КНОПОК ИЗМЕНЕНИЯ РАЗМЕРА И ПЕРЕМЕЩЕНИЯ ====== */
.bpmn-icon-resize,
.bpmn-icon-lane-move {
  font-weight: bold;
  font-size: 22px;
  line-height: 1;
  /* Для лучшего вертикального выравнивания */
}

.bpmn-icon-width-plus::before {
  content: 'ш+';
  font-size: 16px;
}

.bpmn-icon-width-minus::before {
  content: 'ш-';
  font-size: 16px;
}

.bpmn-icon-height-plus::before {
  content: 'в+';
  font-size: 16px;
}

.bpmn-icon-height-minus::before {
  content: 'в-';
  font-size: 16px;
}

.bpmn-icon-lane-up::before {
  content: '↑';
}

.bpmn-icon-lane-down::before {
  content: '↓';
}


/* ====== ЭЛЕМЕНТЫ ДИАГРАММЫ ====== */
/* .djs-shape { */
/* stroke-width: var(--stroke-width); */
/* Толщина обводки */
/* transition: stroke .2s ease; */
/* filter: drop-shadow(var(--shadow-size)); */
/* Тень под фигурами */
/* } */

/* ИСПРАВЛЕНИЕ 2: Анимация перемещения только для дорожек */
.djs-shape.djs-moving {
  transition: transform 0.4s ease-in-out;
}

/* Задачи */
.bpmn-task,
.bpmn-user-task,
.bpmn-script-task {
  fill: var(--task-color);
  /* Заливка задач */
  stroke: #64b5f6;
  /* Обводка задач */
  rx: 8px;
  /* Скругление углов */
}

/* Стартовое событие */
.bpmn-start-event {
  fill: var(--event-color);
  /* Заливка событий */
  stroke: #4caf50;
  /* Обводка событий */
}

/* Конечное событие */
.bpmn-end-event {
  fill: #ffcdd2;
  /* Заливка конечного события */
  stroke: #f44336;
  /* Обводка конечного события */
}

/* Промежуточные события */
.bpmn-intermediate-event {
  fill: #fff9c4;
  /* Заливка промежуточного события */
  stroke: #ffd54f;
  /* Обводка промежуточного события */
}

/* Шлюзы */
.bpmn-gateway {
  fill: var(--gateway-color);
  /* Заливка шлюзов */
  stroke: #ffc107;
  /* Обводка шлюзов */
}

/* Подпроцессы */
.bpmn-subprocess {
  fill: #f3e5f5;
  /* Заливка подпроцессов */
  stroke: #9c27b0;
  /* Обводка подпроцессов */
  stroke-dasharray: 5, 3;
  /* Пунктирная обводка */
}

/* ====== СОЕДИНЕНИЯ ====== */
.djs-connection {
  stroke-width: var(--stroke-width);
  /* Толщина линий */
  /* animation: fadeInConnect 0.2s ease-out; */
}

@keyframes fadeInConnect {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Потоки выполнения */
.bpmn-sequence-flow {
  stroke: #37474f;
  /* Цвет потока выполнения */
  stroke-linecap: round;
  /* Скругление концов линий */
}

/* Ассоциации */
.bpmn-association {
  stroke: #9e9e9e;
  /* Цвет ассоциаций */
  stroke-dasharray: 4, 2;
  /* Пунктирная линия */
}

.djs-shape:hover,
.djs-connection:hover {
  /* Оранжевая обводка при наведении */
  /* stroke: #ff0000 !important; */
  /* stroke-width: 3px !important;  */
  /* Увеличенная толщина */
  cursor: pointer;
  /* Курсор-указатель */
}

/* .djs-shape .selected { */
/* stroke: #00f8aa !important; */
/* Яркая обводка выделения */
/* stroke-width: 3px !important; */
/* Толщина при выделении */
/* filter: drop-shadow(0 0 8px rgba(255, 87, 34, 0.35)); */
/* Свечение */
/* } */

/* Отключённые элементы */
.djs-shature.djs-element-disabled {
  opacity: 0.5;
  /* Полупрозрачность */
  filter: grayscale(80%);
  /* Обесцвечивание */
}

/* ИСПРАВЛЕНИЕ 3: Убран !important, чтобы JS мог перекрашивать текст */
.djs-label,
text.djs-label {
  fill: var(--label);
  /* Цвет текста меток */
  font-family: var(--font-main) !important;
  /* Шрифт меток */
  font-size: var(--font-size) !important;
  /* Размер шрифта меток */
  font-weight: var(--font-weight-regular) !important;
  /* Начертание шрифта */
}

/* Кастомные подписи */
.custom-label {
  font-family: var(--font-main) !important;
  /* Основной шрифт */
  font-size: var(--font-size) !important;
  /* Размер шрифта */
  fill: #9a0f7e !important;
  /* Цвет текста */
  text-anchor: middle;
  /* Выравнивание по центру */
  pointer-events: none;
  /* Не перехватывает события мыши */
  font-weight: var(--font-weight-bold) !important;
  /* Полужирное начертание */
}

/* Цвет подписи внутри задачи */
.bpmn-task .custom-label {
  fill: #1565c0 !important;
  /* Тёмно-синий текст */
}

/* Стили подписи для событий */
.bpmn-event .custom-label {
  font-style: italic !important;
  /* Курсив для событий */
}

/* ====== Direct Editing overlay — прозрачный ====== */
.djs-direct-editing-parent,
.djs-direct-editing-parent .content,
.djs-direct-editing {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: var(--label) !important;
  font-family: var(--font-main) !important;
  /* Шрифт для редактирования */
}

.djs-direct-editing-parent .content:focus {
  outline: none !important;
}

.djs-direct-editing-parent textarea,
.djs-direct-editing textarea {
  background-color: transparent !important;
  /* Убран белый фон */
  color: var(--label) !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  /* Убрана тень */
  font-family: var(--font-main) !important;
  /* Шрифт для текстовых полей */
  font-size: var(--font-size) !important;
}


/* ====== FIX: превью соединения ВСЕГДА в цвете темы (переписано) ====== */

/* --- Общие стили для контейнеров превью --- */
.djs-connect-preview,
.djs-dragger .djs-connection .djs-visual {
  /* Устанавливаем цвет обводки, но убираем заливку по умолчанию */
  stroke: var(--conn-stroke) !important;
  fill: none !important;
}

/* --- Стили для перетаскиваемых ФИГУР --- */
/* Задаем правильную заливку и обводку для основных фигур (задачи, события, шлюзы) */
.djs-dragger .djs-shape .djs-visual> :first-child {
  fill: var(--shape-fill) !important;
  stroke: var(--shape-stroke) !important;
}

/* --- Стили для превью СОЕДИНЕНИЙ --- */
/* Задаем обводку для ЛИНИИ, но НЕ заливку */
.djs-connect-preview path,
.djs-dragger .djs-connection .djs-visual>path {
  stroke: var(--conn-stroke) !important;
  fill: none !important;
}

/* Задаем и обводку, и заливку для НАКОНЕЧНИКОВ стрелок */
.djs-connect-preview marker path,
.djs-dragger marker path {
  stroke: var(--conn-stroke) !important;
  fill: var(--conn-stroke) !important;
}


/* ====== FIX: белая заливка цели при hover/connect в тёмной теме ====== */
[data-theme="dark"] .djs-shape.drop-ok .djs-visual> :first-child,
[data-theme="dark"] .djs-shape.connect-ok .djs-visual> :first-child,
[data-theme="dark"] .djs-shape.new-parent .djs-visual> :first-child,
[data-theme="dark"] .djs-hover .djs-visual> :first-child {
  fill: var(--shape-fill) !important;
  stroke: var(--shape-stroke) !important;
}

[data-theme="dark"] .drop-ok .djs-visual> :first-child,
[data-theme="dark"] .connect-ok .djs-visual> :first-child,
[data-theme="dark"] .new-parent .djs-visual> :first-child {
  fill: var(--shape-fill) !important;
  stroke: var(--shape-stroke) !important;
}

.new-parent {
  background: transparent !important;
}

/* ====== ТЁМНАЯ ТЕМА ДЛЯ ЭЛЕМЕНТОВ ====== */
[data-theme="dark"] .bpmn-task {
  fill: #2c5282;
  /* Тёмный фон задачи */
  stroke: #3182ce;
  /* Светлая обводка задачи */
}

[data-theme="dark"] .bpmn-event,
[data-theme="dark"] .bpmn-start-event,
[data-theme="dark"] .bpmn-end-event,
[data-theme="dark"] .bpmn-intermediate-event {
  fill: #2a3b2c;
  /* Тёмный фон событий */
  stroke: #6ee7a4;
  /* Светлая обводка событий */
}

[data-theme="dark"] .bpmn-gateway {
  fill: #3a2f1a;
  /* Тёмный фон шлюзов */
  stroke: #ffcc66;
  /* Светлая обводка шлюзов */
}

[data-theme="dark"] .bpmn-subprocess {
  fill: #2a2436;
  /* Тёмный фон подпроцессов */
  stroke: #c084fc;
  /* Светлая обводка подпроцессов */
}

[data-theme="dark"] .bpmn-sequence-flow {
  stroke: #cbd5e0;
  /* Светлые линии потока */
}

[data-theme="dark"] .bpmn-association {
  stroke: #94a3b8;
  /* Светлые линии ассоциаций */
}

/* Стили для печати/экспорта */
@media print {
  * {
    /* font-family: 'Mont', 'Segoe UI', Arial, sans-serif !important; */
    font-family: sans-serif;
  }
}

/* Стили для режима копирования */
body.copy-style-active,
body.copy-style-active * {
  cursor: copy !important;
}

header.appbar button.active-tool {
  background-color: rgba(0, 123, 255, 0.3) !important;
  border: 1px solid rgba(0, 123, 255, 0.7) !important;
}


/* Адаптив */
@media (max-width: 768px) {
  :root {
    --palette-w: 52px;
    /* Уже панель на мобильных */
    --font-size: 12px;
    /* Меньше размер шрифта на мобильных */
  }

  .djs-palette .entry {
    height: 32px;
    line-height: 32px;
  }
}

/* ====== Стили для маркеров изменения размера (ФИНАЛЬНАЯ ВЕРСИЯ С !important) ====== */
.djs-resizer {
  animation: fadeIn 0.2s;
  /* display: block !important; */
  /* background-color: #007bff !important; */
  /* Яркий синий фон */
  /* border: 2px solid white !important; */
  /* Белая рамка для контраста */
  /* border-radius: 4px !important; */
  /* width: 12px !important; */
  /* height: 12px !important; */
  /* box-shadow: 0 0 8px rgba(0, 123, 255, 0.9) !important; */
  /* Яркое свечение */
  /* z-index: 10000 !important; */
  /* Быть поверх абсолютно всего */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*
  Адаптивный цвет перекрестия (crosshair) для инструмента 
  «Создание/удаление пространства» (Space Tool) в зависимости от темы.
*/
/* Для темной темы задаем оранжевый цвет */
[data-theme="dark"] .djs-crosshair,
[data-theme="dark"] .djs-crosshair * {
  border-color: #ff9800 !important;
  /* Оранжевый для темной темы */
  stroke: #ff9800 !important;
}

/* Для светлой темы задаем черный цвет */
[data-theme="light"] .djs-crosshair,
[data-theme="light"] .djs-crosshair * {
  border-color: #000000 !important;
  /* Черный для светлой темы */
  stroke: #000000 !important;
}

/* ИЗМЕНЕНИЕ: Задаем черный контур для панели инструментов в светлой теме */
[data-theme="light"] .djs-palette {
  border-color: #000000;
  /* ИЗМЕНЕНИЕ: Добавляем темный фон для панели в светлой теме */
  background: rgba(10, 14, 22, 0.747);
}

/* ИЗМЕНЕНИЕ: В светлой теме на темном фоне панели иконки должны быть светлыми */
[data-theme="light"] .djs-palette .entry[class*="bpmn-icon-"],
[data-theme="light"] .djs-palette .entry [class^="bpmn-icon-"],
[data-theme="light"] .djs-palette .entry [class*=" bpmn-icon-"],
[data-theme="light"] .djs-palette .djs-palette-toggle {
  color: #b6b6b6 !important;
  /* Светло-серый, как в темной теме */
}

/* ИЗМЕНЕНИЕ: В светлой теме при наведении иконки на панели инструментов становятся красными */
[data-theme="light"] .djs-palette .entry[class*="bpmn-icon-"]:hover,
[data-theme="light"] .djs-palette .entry[class*="bpmn-icon-"].djs-active,
[data-theme="light"] .djs-palette .entry:hover [class^="bpmn-icon-"],
[data-theme="light"] .djs-palette .entry:hover [class*=" bpmn-icon-"],
[data-theme="light"] .djs-palette .entry:active [class^="bpmn-icon-"],
[data-theme="light"] .djs-palette .entry.djs-active [class*=" bpmn-icon-"],
[data-theme="light"] .djs-palette .djs-palette-toggle:hover,
[data-theme="light"] .djs-palette .djs-palette-toggle.djs-active {
  color: #f44336 !important;
  /* Красный цвет */
}

/* ====== ИСПРАВЛЕНИЕ: Перекрашивание иконок выравнивания в темной теме ====== */
/*
  Принудительно задаем правильный цвет для иконок выравнивания,
  так как они не подхватывали общие стили для иконок в темной теме.
*/
[data-theme="dark"] .djs-popup .entry[class*="bpmn-icon-align-"] {
  color: var(--icon) !important;
  /* Используем переменную --icon для консистентности */
}

/* ====== СТИЛИ ДЛЯ "ЛИПКИХ" ЗАГОЛОВКОВ ДОРОЖЕК ====== */
/*
  Эти стили добавляют тексту заголовка обводку цвета фона холста.
  Это создает эффект "вырезания" и помогает тексту оставаться читаемым,
  когда он "плывет" над другими элементами диаграммы при прокрутке.
*/
/* .djs-shape .djs-label.sticky-lane-label text,
.djs-shape .djs-label.sticky-lane-label tspan {
  paint-order: stroke;
  stroke: var(--bg-canvas);
  stroke-width: 4px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
} */


/* .reag-detail-button {
  width: 22px;
  height: 22px;
  background: #6b7783;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  font-weight: bold;

  font-size: 11px; 

  transition: all 0.2s ease;
  z-index: 1000 !important;
  pointer-events: all !important;
  vertical-align: middle;
}

.reag-detail-button.has-details {
  background: #06b862;
}

.reag-detail-button:hover {
  transform: scale(1.2);
  filter: brightness(1.2);
} */


.djs-overlay-container {
  pointer-events: none !important;
}

.djs-overlay {
  pointer-events: auto !important;
}

/* ========================================================= */
/* 1. ПОЛНОЕ СКРЫТИЕ СТОКОВЫХ ЭЛЕМЕНТОВ BPMN.JS              */
/* ========================================================= */

.bjs-drilldown, 
.bjs-breadcrumbs {
  display: none !important;
}

/* ЖЕСТКОЕ СКРЫТИЕ СТОКОВОГО ПЛЮСИКА
   В bpmn-js этот маркер всегда рисуется как квадрат 14x14px или 15x15px.
   Используем точные размеры, чтобы браузер скрыл его гарантированно и навсегда. */
.djs-visual > rect[width="14"],
.djs-visual > rect[width="14"] + path,
.djs-visual > rect[width="15"],
.djs-visual > rect[width="15"] + path {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ========================================================= */
/* 2. НАСТРАИВАЕМ КАСТОМНУЮ КНОПКУ (ПРАВЫЙ ВЕРХНИЙ УГОЛ)     */
/* ========================================================= */

.reag-detail-button {
  width: 20px;
  height: 20px;
  background-color: #6b7783; 
  -webkit-mask-image: url(svg/from-square.svg);
  mask-image: url(svg/from-square.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1000 !important;
  pointer-events: all !important;
}

.reag-detail-button.has-details {
  background-color: rgb(255, 0, 0);
}

.reag-detail-button:hover {
  transform: scale(1.15);
}

/* ========================================================= */
/* 3. КНОПКИ И МЕНЮ ДЛЯ "УВЯЗКИ ПРОЦЕССА" (Call Activity)    */
/* ========================================================= */

/* Иконка пунктирного кружка со стрелкой (когда процесс уже привязан) */
.reag-linked-button {
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: 2px dashed var(--ui-border, #6b7783); /* Оставляем серый пунктир */
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.reag-linked-button::after {
  content: '';
  position: absolute;
  top: 3px; 
  left: 3px;
  width: 14px; 
  height: 14px;
  background-color: #f44336; /* Делаем саму иконку яркой красной */
  -webkit-mask-image: url('svg/from-square.svg');
  mask-image: url('svg/from-square.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: all 0.2s;
}

.reag-linked-button:hover {
  border-color: #f44336; /* При наведении кружок тоже становится красным */
}
.reag-linked-button:hover::after {
  background-color: #d32f2f; /* Сама иконка чуть темнеет */
}

/* Всплывающее меню (когда увязка еще пустая) */
.reag-unlinked-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--ui-bg-main, #151a20);
  border: 1px solid var(--ui-border, #4c637a);
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 100;
}

.reag-unlinked-btn {
  background: transparent;
  border: none;
  color: var(--ui-text, #cbcbcb);
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.2s;
}

.reag-unlinked-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #2196f3;
}

/* ========================================================= */
/* СТИЛИ ДЛЯ ВЕРТИКАЛЬНЫХ ЭТАПОВ (PHASES) v4.0               */
/* ========================================================= */
#phases-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 5 !important; /* <-- ОПУСКАЕМ ЭТАПЫ ПОД ХЛЕБНЫЕ КРОШКИ */
  /* overflow: hidden;  <-- УБИРАЕМ ИЛИ МЕНЯЕМ НА VISIBLE */
  overflow: visible;
}

.custom-phase-wrapper {
  position: absolute;
  top: 0; bottom: 0;
  width: 20px;
  transform: translateX(-10px);
  pointer-events: auto;
  cursor: ew-resize;
  display: flex;
}

.custom-phase-line {
  position: absolute;
  top: 0; bottom: 0; left: 10px;
  width: 0;
  border-left: 2px dashed var(--conn-stroke, #4c637a);
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s;
}

/* БАЗОВЫЙ СТИЛЬ (КАПСУЛА) - ДЛЯ ГЛОБАЛЬНЫХ ЭТАПОВ */
.custom-phase-wrapper.global-phase .custom-phase-label {
  position: absolute;
  top: 60px; right: 15px; 
  background: var(--panel-bg, #21272D);
  border: 1px solid var(--panel-border, #4c637a);
  color: var(--ui-text, #cbcbcb);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px; font-weight: bold; white-space: nowrap;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  cursor: pointer; user-select: none;
  transform: scale(var(--phase-zoom, 1));
  transform-origin: right center;
}

/* ПРЯМОУГОЛЬНЫЙ БЛОК - ТЕПЕРЬ НАД ПУЛОМ */
.custom-phase-wrapper.pool-phase .custom-phase-label {
  position: absolute;
  bottom: 100%; 
  top: auto; left: 10px; right: auto;
  margin-bottom: 2px; 
  border-radius: 4px 4px 0 0; 
  
  /* ИСПРАВЛЕНИЕ 3: Переменные темы для идеальной работы в светлом режиме */
  background: var(--panel-bg, #ffffff); 
  border: 1px solid var(--panel-border, #4c637a);
  color: var(--ui-text, #333333);
  
  min-height: 28px; height: auto;
  display: flex; align-items: center; justify-content: center;
  text-align: center; white-space: normal; word-break: break-word; 
  
  /* ИСПРАВЛЕНИЕ 2: Разрешаем элементам (кнопке) выходить за границы */
  overflow: visible; 
  
  font-size: 11px; font-weight: bold; 
  padding: 6px 8px; box-sizing: border-box;
  cursor: pointer; user-select: none;
  transform: scale(var(--phase-zoom, 1));
  transform-origin: left bottom;
}

.custom-phase-delete {
  position: absolute;
  top: -8px; left: -8px; 
  width: 18px; height: 18px;
  background: #f44336; color: white;
  border-radius: 50%; font-size: 10px;
  display: flex; justify-content: center; align-items: center;
  opacity: 0; transition: all 0.2s;
}

/* Кнопка удаления для пулов */
.custom-phase-wrapper.pool-phase .custom-phase-delete {
  left: -7px; top: -8px;
}

.custom-phase-wrapper:hover .custom-phase-line { opacity: 1; border-color: #2196f3; }
.custom-phase-label:hover .custom-phase-delete { opacity: 1; }

/* КНОПКА В КОНТЕКСТНОМ МЕНЮ ДЛЯ ЭТАПОВ */
.djs-context-pad .entry.add-phase-context-btn {
  width: 32px !important; height: 32px !important;
  background-image: url('png/3_slot/column-chart.png') !important;
  background-size: 16px !important; background-position: center 6px !important; background-repeat: no-repeat !important;
  position: relative; display: block !important;
}
.djs-context-pad .entry.add-phase-context-btn::after {
  content: '+'; position: absolute; bottom: 0px; right: 4px;
  font-size: 16px; font-weight: 900; color: #4caf50; line-height: 1; text-shadow: 0px 0px 3px rgba(0,0,0,0.8);
}

/* === РЕЖИМ ПРИЦЕЛИВАНИЯ И ПРИЗРАКИ === */
#phase-placement-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999; cursor: crosshair; background: rgba(0,0,0,0.05);
}
#phase-placement-cursor {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: repeating-linear-gradient(to bottom, #4caf50, #4caf50 8px, transparent 8px, transparent 16px);
  pointer-events: none;
}
.phase-ghost-element {
  position: absolute;
  border: 2px solid #2196f3;
  background: rgba(33, 150, 243, 0.1);
  border-radius: 6px; pointer-events: none; z-index: 9998;
}

/* ПЕРВЫЙ ЭТАП ПУЛА: Убираем линию и запрещаем драг, так как он привязан к левой границе пула */
.custom-phase-wrapper.first-pool-phase .custom-phase-line {
  display: none;
}
.custom-phase-wrapper.first-pool-phase {
  cursor: default;
}

/* ========================================================= */
/* ОБНОВЛЕНИЕ ЦВЕТА ОБВОДКИ (Для светлой темы)               */
/* ========================================================= */
.custom-phase-wrapper.pool-phase .custom-phase-label {
  /* Мы меняем var(--panel-border) на var(--conn-stroke), 
     так как цвет линий (stroke) всегда хорошо контрастирует с фоном */
  border: 1px solid var(--conn-stroke, #4c637a) !important;
}

/* ========================================================= */
/* БЕЗОПАСНАЯ ЗАЩИТА ИНТЕРФЕЙСА И ГРАНИЦ ОТ ПЕРЕКРЫТИЙ       */
/* ========================================================= */

/* 1. Блокируем вылет линий этапов за границы редактора */
.canvas-wrapper {
  overflow: hidden !important;
  position: relative; 
}

/* 2. Защищаем хлебные крошки НАД этапами и ЦЕНТРИРУЕМ ИХ */
#breadcrumbs {
  position: absolute !important;
  top: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important; /* Идеальное центрирование */
  z-index: 9999 !important;
  width: max-content !important; /* Позволяет блоку расти влево и вправо */
}

/* 3. Защищаем левую панель инструментов НАД этапами */
.djs-palette {
  position: relative !important; /* У панели был static, relative безопасно включает z-index */
  z-index: 9999 !important;
  left: 0 !important; /* <-- СМЕЩЕНИЕ ВЛЕВО. Можешь менять число (-5px, -15px), пока не станет идеально */
}

/* 4. Возвращаем темную обводку для ярлыков в светлой теме (чтобы лучше читалось) */
.custom-phase-wrapper.pool-phase .custom-phase-label {
  border: 1px solid var(--conn-stroke, #4c637a) !important;
}