/* Общие */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  /* ИЗМЕНЕНИЕ 6: Используются переменные для поддержки тем */
  background: var(--main-bg-color);
  color: var(--main-text-color);
  display: flex;
  flex-direction: column;
}

/* Верхняя панель — все кнопки в ОДНУ строку */
header.appbar {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 10px 14px;
  position: sticky;
  top: 0;
  z-index: 20;
  /* ИЗМЕНЕНИЕ 6: Используются переменные для поддержки тем */
  background: var(--appbar-bg-color);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--appbar-border-color);
}

.logo {
  height: 24px;
  /* Высота логотипа */
  width: auto;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  height: 28px;
  width: 28px;
}

/* Группа кнопок */
.button-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  /* ИЗМЕНЕНИЕ 6: Используются переменные для поддержки тем */
  border: 1px solid var(--button-group-border-color);
  /* Тонкий серый контур */
  border-radius: 36px;
}

/* Левая и правая группы — тоже в ряд */
header.appbar .left,
header.appbar .right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* УДАЛЕН SPACER, ЕГО РОЛЬ ВЫПОЛНЯЮТ ХЛЕБНЫЕ КРОШКИ */

/* Кнопки */
header.appbar button {
  appearance: none;
  border: 1px solid transparent;
  /* Убрал рамку по умолчанию */
  background: transparent;
  /* Прозрачный фон */
  /* ИЗМЕНЕНИЕ 6: Используются переменные для поддержки тем */
  color: var(--main-text-color);
  /* padding: 6px; */
  border-radius: 18px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  /* width: 33px; */
  transition: background-color 0.25s;
}

[data-theme="dark"] header.appbar button:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ИЗМЕНЕНИЕ 2: Добавлен hover-эффект для кнопок в светлой теме */
[data-theme="light"] header.appbar button:hover {
  background: rgba(0, 0, 0, 0.08);
}

header.appbar button img {
  height: 24px;
  width: 24px;
}

/* Выпадающий список */
.dropdown {
  position: relative;
  display: inline-block;
  backdrop-filter: blur(5px);
}

.dropdown-content {
  /* display: none; */
  /* opacity: 0; */
  position: absolute;
  background-color: var(--panel-bg);
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 100;
  border-radius: 8px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  right: -30px;
  animation: fadeOutScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}


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

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

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

  to {
    opacity: 0;
    transform: scale(0.8);
    display: none;
  }

}

.dropdown-content button {
  color: white;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
  width: 100%;
  /* text-align: left; */
  border-radius: 6px !important;
  opacity: 0;
  animation: buttonAppear 0.2s ease-out forwards;
}

/* Задержка для каждой кнопки */
.dropdown-content button:nth-child(1) {
  animation-delay: 0.1s;
}

.dropdown-content button:nth-child(2) {
  animation-delay: 0.15s;
}

.dropdown-content button:nth-child(3) {
  animation-delay: 0.2s;
}

.dropdown-content button:nth-child(4) {
  animation-delay: 0.25s;
}

@keyframes buttonAppear {
  from {
    opacity: 0;
    transform: translateY(-10px) rotate(-5deg) scaleX(1.2);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0) scaleX(1);
    ;
  }
}

.dropdown-content button:hover {
  transition: background-color 0.2s ease-out;
  background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-content button:not(:hover) {
  transition: background-color 0.2s ease-out;
  background-color: rgba(255, 255, 255, 0.0);
}

.dropdown:hover .dropdown-content {
  display: block;
  animation: fadeInScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Стили для палитры цветов */
.color-picker-container {
  position: relative;
}

.color-palette {
  /* ИСПРАВЛЕНИЕ 5: По умолчанию палитра скрыта */
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background-color: #2d3748;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 30;
  width: 160px;
  /* Задаем ширину */
}

/* Класс для показа палитры */
.color-palette.visible {
  display: block;
}

.color-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid;
  transition: transform 0.15s ease;
  margin: auto;
  /* Центрируем */
}

.color-swatch:hover {
  transform: scale(1.1);
}

/* ИСПРАВЛЕНИЕ 4: Стили для кастомных кнопок выбора цвета */
.custom-color-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 8px;
}

.custom-color-controls button {
  width: 100%;
  height: auto;
  /* Авто-высота */
  padding: 6px 10px;
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: none;
  border-radius: 6px;
  text-align: center;
  font-size: 12px;
}

.custom-color-controls button:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Скрытые input для выбора цвета */
.custom-color-controls input[type="color"] {
  display: none;
}


/* Основной контент и холст */
.main-content {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  /* Предотвращаем прокрутку body */
  /* Добавляем отступы здесь */
  padding: 10px 14px;
  gap: 14px;
  /* Расстояние между панелями и холстом */
}

/* ИЗМЕНЕНИЕ 2: Новая обертка для позиционирования хлебных крошек */
.canvas-wrapper {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  overflow: hidden; /* <-- ОБРЕЗАЕТ ЛИНИИ ПО КРАЯМ */
}

/* Холст — занимает всё доступное пространство */
#canvas {
  flex: 1 1 auto;
  /* Убираем старые отступы */
  margin: 0;
  border-radius: 12px;
  height: auto;
}

/* Правая вертикальная панель */
.sidebar-right {
  display: flex;
  flex-direction: column;
  /* ИЗМЕНЕНИЕ: Центрируем содержимое по вертикали */
  justify-content: center;
  align-items: center;
  padding: 0;
}

/* НАЧАЛО ИЗМЕНЕНИЙ: Стили для новой обертки */
.sidebar-right-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  /* Расстояние между кнопкой 'О' и группой */
}

/* КОНЕЦ ИЗМЕНЕНИЙ */

.button-group-vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--button-group-border-color);
  border-radius: 36px;
  margin-top: 0;
}

.button-group-vertical button {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  /* padding: 8px; */
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  transition: background-color 0.25s;
}

[data-theme="dark"] .button-group-vertical button:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ИЗМЕНЕНИЕ 2: Добавлен hover-эффект для кнопок в светлой теме */
[data-theme="light"] .button-group-vertical button:hover {
  background: rgba(0, 0, 0, 0.08);
}


.button-group-vertical button img {
  width: 24px;
  height: 24px;
}


svg:focus {
  outline: none;
}

/* ИЗМЕНЕНИЕ 2: Полностью новые стили для хлебных крошек */
#breadcrumbs {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10 !important;

  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  padding: 6px 15px;
  border-radius: 20px;

  display: flex;
  align-items: center;

  color: var(--main-text-color);
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#breadcrumbs .sep {
  font-size: 15px;
  margin: 0 4px;
  color: #ff0000;
}

#breadcrumbs a {
  color: var(--main-text-color);
  border-radius: 10px;
  padding: 5px;
  text-decoration: none;
}

[data-theme="dark"] #breadcrumbs a:hover {
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

[data-theme="light"] #breadcrumbs a:hover {
  background: rgba(0, 0, 0, 0.08);
  cursor: pointer;
}


/* Стили для новой кнопки "О" */
/* button#btn-open {
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--button-group-border-color);
  color: var(--main-text-color);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; */
/* ИЗМЕНЕНИЕ: Убираем старые отступы, так как теперь используется gap */
/* margin-top: 0;
  margin-bottom: 0;
  transition: background-color 0.2s;
} */

[data-theme="dark"] button#btn-open:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* ИЗМЕНЕНИЕ 2: Добавлен hover-эффект для кнопки в светлой теме */
[data-theme="light"] button#btn-open:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

/* ИЗМЕНЕНИЕ 5: Сохраняем стиль appbar в светлой теме таким же, как в тёмной */
[data-theme="light"] header.appbar {
  background: rgba(10, 14, 22, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] header.appbar .button-group {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="light"] header.appbar button,
[data-theme="light"] header.appbar .user-info span {
  color: #F4F4F4;
}

[data-theme="light"] header.appbar button:hover {
  background: rgba(255, 255, 255, 0.12);
}

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

[data-theme="light"] .button-group-vertical button:hover,
[data-theme="light"] button#btn-open:hover {
  background: rgba(10, 14, 22, 0.747);
}

/* ИЗМЕНЕНИЕ: Добавляем темный фон и светлый текст для кнопки "О" в светлой теме */
/* [data-theme="light"] button#btn-open {
  background: rgba(10, 14, 22, 0.747); */
/* color: #a4a4a4; */
/* Светлый текст, чтобы был виден на темном фоне */
/* } */

/* ====== СТИЛИ ДЛЯ "ЛИПКИХ" ЗАГОЛОВКОВ ДОРОЖЕК (HTML OVERLAY) ====== */
#sticky-lane-labels-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* Убрали width: 30px, контейнер теперь резиновый */
  pointer-events: none; /* Позволяет кликать "сквозь" стикеры на саму схему */
  z-index: 15;
  overflow: visible; /* Разрешаем тексту выходить за рамки контейнера */
}

.sticky-lane-label {
  position: absolute;
  /* Ширина подстраивается под текст, но не больше 250px, чтобы не перекрывать пол-экрана */
  width: max-content;
  max-width: 250px; 
  
  /* Делаем текст по центру дорожки (по вертикали) */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  
  /* Внешний вид */
  background: var(--bg-canvas);
  color: var(--main-text-color);
  font-family: var(--font-main, sans-serif); /* Теперь шрифт берется из общих настроек BPMN */
  font-size: var(--font-size);
  font-weight: 400;
  text-align: left; /* Читаем слева направо */

  padding: 10px 15px;
  white-space: normal; /* Разрешаем тексту переноситься на новые строки */
  word-wrap: break-word;
  box-sizing: border-box;
  
  /* Добавляем тень и скругления, чтобы стикер визуально отрывался от холста */
  box-shadow: 4px 0 12px rgba(0,0,0,0.15);
  border-right: 2px solid var(--ui-border);
  border-top: 1px solid var(--ui-border);    /* <-- НОВАЯ ЛИНИЯ СВЕРХУ */
  border-bottom: 1px solid var(--ui-border); /* <-- НОВАЯ ЛИНИЯ СНИЗУ */
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.sticky-lane-label.visible {
  visibility: visible;
  opacity: 0.95; /* Делаем легкую полупрозрачность, чтобы схема чуть-чуть просвечивала */
}

/* --- ГЛОБАЛЬНЫЕ ЦВЕТА ДЛЯ СВЕТЛОЙ И ТЕМНОЙ ТЕМЫ --- */
:root[data-theme="dark"] {
  --ui-bg: #21272d;
  --ui-bg-main: #151a20;
  --ui-border: #4c637a;
  --ui-text: #cbcbcb;
  --ui-hover: #2a3342;
}

:root[data-theme="light"] {
  --ui-bg: #ffffff;
  --ui-bg-main: #f8f9fa;
  --ui-border: #ced4da;
  --ui-text: #212529;
  --ui-hover: #e9ecef;
}

/* Принудительно применяем переменные к панелям, включая палитру BPMN */
.appbar, .dropdown-content,
.djs-palette, .djs-context-pad, .djs-popup {
  background-color: var(--ui-bg) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

/* Принудительно применяем переменные к панелям, включая палитру BPMN */
.sidebar-right, .sidebar-right-content-wrapper {
  /* background-color: var(--ui-bg) !important; */
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.main-content, body {
  background-color: var(--ui-bg-main) !important;
}

/* УБРАЛИ обводку у кнопок, оставили только прозрачный фон и цвет */
.button-group button, .button-group-vertical button, .dropdown > button {
  background-color: transparent !important;
  border: none !important; 
  color: var(--ui-text) !important; 
}

.button-group button:hover, .button-group-vertical button:hover {
  background-color: var(--ui-hover) !important;
}

/* Перекрашиваем модальные окна */
#auth-modal > div, #processes-modal > div {
  background-color: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}
#auth-modal input, #processes-modal #process-list-container, .proc-name-edit {
  background-color: var(--ui-bg-main) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

/* Внутренние иконки BPMN-панелей тоже перекрашиваются под текст */
.djs-palette .entry, .djs-context-pad .entry, .djs-popup .entry {
  color: var(--ui-text) !important;
}
.djs-palette .entry:hover, .djs-context-pad .entry:hover, .djs-popup .entry:hover {
  background-color: var(--ui-hover) !important;
}

/* =================================================== */
/* ГЛОБАЛЬНЫЙ МАСШТАБ ИНТЕРФЕЙСА (85%)                 */
/* Применяем только к UI, чтобы не сломать координаты  */
/* мыши на самом холсте BPMN                           */
/* =================================================== */

header.appbar, 
.djs-palette, 
.color-palette,
#auth-modal > div,
#processes-modal > div {
  zoom: 0.85;
}

/* Для Firefox, который может игнорировать zoom на некоторых элементах */
@-moz-document url-prefix() {
  header.appbar, 
  .color-palette,
  #auth-modal > div,
  #processes-modal > div {
    transform: scale(0.85);
    transform-origin: top left;
  }
  .djs-palette {
    transform: scale(0.85);
    transform-origin: left center;
  }
}

/* =================================================== */
/* СВЕТЛАЯ ТЕМА: Адаптация иконок, текста и рамок      */
/* =================================================== */

/* Добавляем плавный переход */
.djs-palette .entry img,
.user-info img,
.user-info span,
.djs-palette .entry,
.djs-palette,
header.appbar button img {
  transition: filter 0.3s ease, color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

/* 1. ВСЕ PNG-иконки (верхнее меню, левая палитра, аватарка) становятся темными */
[data-theme="light"] .djs-palette .entry img,
[data-theme="light"] .user-info img,
[data-theme="light"] header.appbar button img {
  filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(2676%) hue-rotate(70deg) brightness(87%) contrast(107%);
  opacity: 0.75;
}

/* 2. Делаем полностью черным текст учетной записи */
[data-theme="light"] .user-info span {
  color: #000000 !important;
  font-weight: 400;
}

/* 3. Перекрашиваем стандартные (векторные) иконки левой палитры BPMN */
[data-theme="light"] .djs-palette .entry,
[data-theme="light"] .djs-palette .entry::before,
[data-theme="light"] .djs-palette .entry [class^="bpmn-icon-"]::before,
[data-theme="light"] .djs-palette .entry [class*=" bpmn-icon-"]::before {
  color: rgb(91, 91, 91) !important;
}

/* 4. ИСПРАВЛЕННЫЕ ОБВОДКИ И ФОНЫ ДЛЯ СВЕТЛОЙ ТЕМЫ */

/* ИСПРАВЛЕНИЕ: Обводка применяется к ГРУППАМ, а не к отдельным кнопкам */
[data-theme="light"] .button-group,
[data-theme="light"] .button-group-vertical {
  border: 1px solid rgba(91, 91, 91, 0.6) !important;
}

/* Убираем ошибочные рамки у самих кнопок */
[data-theme="light"] .button-group button, 
[data-theme="light"] .button-group-vertical button, 
[data-theme="light"] .dropdown > button {
  border: none !important; 
}

/* Обводка самой панели инструментов слева */
[data-theme="light"] .djs-palette {
  border: 1px solid rgba(91, 91, 91, 0.642) !important;
  background: rgba(91, 91, 91, 0.101) !important;
}

/* Эффект при наведении на кнопки */
[data-theme="light"] .button-group button:hover, 
[data-theme="light"] .button-group-vertical button:hover,
[data-theme="light"] .dropdown > button:hover,
[data-theme="light"] .djs-palette .entry:hover {
  background-color: rgba(158, 158, 158, 0.093) !important;
}

/* Разделители внутри левой панели */
[data-theme="light"] .djs-palette .separator {
  border-bottom: 1px solid rgb(91, 91, 91) !important;
}