/* orders-tree.css — дерево проектов внутри строки заказа (Задача 10 + БЭК-11) */

/* ══════════════════════════════════════════════════════════════
   ПЕРЕМЕННЫЕ ФАЙЛА
   Локальные токены для дерева проектов. Используются только здесь.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Тумблер ▶/▼ ── */
  --order-tree-toggle-size: 24px;                    /* сторона кликабельной кнопки */
  --order-tree-toggle-radius: 8px;                   /* радиус кнопки-тумблера */
  --order-tree-toggle-gap: 10px;                     /* зазор между тумблером и номером заказа */

  /* ── Иконка-шеврон внутри тумблера ── */
  --order-tree-icon-size: 14px;                      /* сторона SVG-шеврона */

  /* ── Ячейка-ветка (первая колонка) ── */
  --order-tree-branch-width: 28px;                   /* ширина служебной колонки с линиями */
  --order-tree-line-color: var(--primary-border);    /* цвет линий ветки (сиреневый, мягкий) */

  /* ── Паддинги ячеек таблицы проектов ── */
  --order-tree-cell-padding-y: 8px;                  /* по вертикали */
  --order-tree-cell-gap-x: 12px;                     /* по горизонтали (справа от ячейки) */

  /* ── Ширины колонок дерева (в % от ширины таблицы).
     ★ v7.22: сумма = 94%. Остаток уходит на колонку-ветку (28px).
     Раньше сумма была 100% → таблица вылезала скроллом вправо.
     С table-layout: fixed — фиксируются на любом экране.
     Хочешь шире «Проект» — уменьшай «Приоритет» / «Срок». */
  --order-tree-col-status-width: 18%;                /* «Статус» */
  --order-tree-col-name-width: 28%;                  /* «Проект» */
  --order-tree-col-priority-width: 12%;              /* «Приоритет» */
  --order-tree-col-deadline-width: 14%;              /* «Срок» */
  --order-tree-col-actions-width: 22%;               /* «Действия» */

  /* ── Сдвиг шапки дерева вправо (компенсация колонки-ветки).
     Подобран вручную: ветка 28px минус padding .badge-status. ── */
  --order-tree-head-offset-x: 18px;

  /* ── Разделитель между проектами ── */
  --order-tree-separator-width: 70%;                 /* ширина зоны разделителя */
  --order-tree-separator-height: 1px;                /* толщина линии */

  /* ── Типографика таблицы проектов ── */
  --order-tree-font-size: 13px;                      /* шрифт ячеек */

  /* ★ v7.23: шапка тише и ниже. Не выбивается из дерева.
     uppercase убран — заголовки «прижимаются» к первому проекту.
     Если вернуть uppercase — поставь text-transform в th-блоке. */
  --order-tree-head-font-size: 11px;                 /* шрифт подписей в шапке */
  --order-tree-head-letter-spacing: 0.01em;          /* разрежение букв в шапке */
  --order-tree-head-font-weight: 500;                /* толщина букв в шапке */
  --order-tree-head-opacity: 0.55;                   /* приглушение шапки */
  --order-tree-head-padding-bottom: 2px;             /* отступ снизу до первого проекта */

  /* ── Оформление строки-контейнера дерева ── */
  --order-tree-row-bg: var(--surface-2);             /* фон раскрытой строки (светлая тема) */
  --order-tree-border: var(--border-color);          /* цвет разделителей */

  /* ── Кнопки действий в строке проекта ── */
  --order-project-btn-height: 28px;                  /* высота кнопки */
  --order-project-btn-padding-x: 12px;               /* горизонтальный паддинг */
  --order-project-btn-radius: 8px;                   /* радиус скругления */
  --order-project-btn-font-size: 12px;               /* размер шрифта */
  --order-project-btn-gap: 8px;                      /* зазор между кнопками в ячейке */
  --order-project-btn-icon-size: 14px;               /* размер иконки в icon-кнопке */

  /* ── Модалка приёмки ── */
  --order-accept-overlay-bg: rgba(30, 29, 43, 0.32); /* затемнение оверлея (светлая тема) */
  --order-accept-overlay-blur: 3px;                  /* размытие фона */
  --order-accept-card-max-width: 420px;              /* макс. ширина карточки */
  --order-accept-card-padding: 28px;                 /* паддинг карточки */
  --order-accept-card-radius: 22px;                  /* радиус карточки */
  --order-accept-icon-size: 64px;                    /* размер иконки-квадрата */
  --order-accept-icon-radius: 20px;                  /* радиус иконки-квадрата */

  /* ── Цвета служебных сообщений ── */
  --order-tree-empty-color: var(--text-secondary);   /* пустое состояние */
  --order-tree-error-color: var(--warning);          /* ошибка загрузки */

  /* ── Fallback-цвета бейджей новых статусов проекта ── */
  --order-badge-review-curator-bg: rgba(217, 119, 6, 0.14);    /* фон бейджа «проверка куратора» */
  --order-badge-review-curator-fg: #b45309;                    /* текст бейджа «проверка куратора» */
  --order-badge-review-customer-bg: rgba(120, 103, 230, 0.14); /* фон бейджа «проверка заказчика» */
  --order-badge-review-customer-fg: #5a4bcf;                   /* текст бейджа «проверка заказчика» */
}

/* Тёмная тема: подкручиваем цвета бейджей и оверлея */
body.dark-theme {
  --order-tree-row-bg: rgba(255, 255, 255, 0.02);
  --order-accept-overlay-bg: rgba(0, 0, 0, 0.55);
  --order-badge-review-curator-bg: rgba(251, 191, 36, 0.16);
  --order-badge-review-curator-fg: #fbbf24;
  --order-badge-review-customer-bg: rgba(167, 139, 250, 0.18);
  --order-badge-review-customer-fg: #a78bfa;
}

/* ══════════════════════════════════════════════════════════════
   ЯЧЕЙКА С ТУМБЛЕРОМ
   ══════════════════════════════════════════════════════════════ */
.order-tree-cell {
  white-space: nowrap;   /* номер не должен переноситься */
}

/* Кнопка ▶/▼ */
.order-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--order-tree-toggle-size);
  height: var(--order-tree-toggle-size);
  padding: 0;
  margin-right: var(--order-tree-toggle-gap);
  border: none;
  border-radius: var(--order-tree-toggle-radius);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s;
}

.order-tree-toggle:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.order-tree-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* SVG-шеврон внутри тумблера */
.order-tree-toggle .icon {
  width: var(--order-tree-icon-size);
  height: var(--order-tree-icon-size);
  transition: transform 0.18s ease;   /* плавный поворот ▶ → ▼ */
}

.order-tree-toggle[aria-expanded="true"] .icon {
  transform: rotate(90deg);
}

/* ══════════════════════════════════════════════════════════════
   СТРОКА-КОНТЕЙНЕР ДЕРЕВА
   ══════════════════════════════════════════════════════════════ */
.order-tree-row > td {
  padding: 0;
  background: var(--order-tree-row-bg);
  border-top: 1px solid var(--order-tree-border);
}

.order-tree-inner {
  /* ★ v7.24: убран вертикальный паддинг — иначе двойной с ячейками,
     и вертикальная линия ветки не доходит до строки заказа. */
  padding: 0 var(--order-tree-cell-gap-x);
}

/* ══════════════════════════════════════════════════════════════
   СЛУЖЕБНЫЕ СОСТОЯНИЯ
   ══════════════════════════════════════════════════════════════ */
.order-tree-empty,
.order-tree-error {
  padding: 4px 0;
  font-size: var(--order-tree-font-size);
  color: var(--order-tree-empty-color);
}

.order-tree-error {
  color: var(--order-tree-error-color);
}

/* ══════════════════════════════════════════════════════════════
   ТАБЛИЦА ПРОЕКТОВ
   border-collapse: separate — иначе background-image на <tr>
   рендерится по ячейкам, а не по строке.
   table-layout: fixed — фиксирует ширины колонок из шапки,
   чтобы пропорции сохранялись на любом экране.
   ══════════════════════════════════════════════════════════════ */
.order-projects-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;               /* ← ключ к стабильным ширинам колонок */
  font-size: var(--order-tree-font-size);
}

/* Единый сброс границ у таблицы/строк/ячеек.
   ★ v7.23: этот блок покрывает и thead — отдельный сброс для thead убран. */
.order-projects-table,
.order-projects-table tbody,
.order-projects-table tr,
.order-projects-table td,
.order-projects-table th {
  border: none !important;
  box-sizing: border-box;
}

.order-projects-table tbody td {
  background: transparent;
}

/* ─── Разделитель между проектами ───
   Короткие плавные плечи + длинная плотная середина. */
.order-projects-table tbody tr.order-projects-row {
  background-image: linear-gradient(
    to right,
    transparent 0%,
    var(--order-tree-border) 15%,
    var(--order-tree-border) 85%,
    transparent 100%
  ) !important;
  background-size: var(--order-tree-separator-width) var(--order-tree-separator-height) !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
}

.order-projects-table tbody tr.order-projects-row:last-child {
  background-image: none !important;
}

/* Общий паддинг ячеек данных */
.order-projects-cell {
  /* ★ v7.24: вертикальный паддинг теперь живёт только здесь
     (inner-bлок с вертикальным паддингом убран). */
  padding: var(--order-tree-cell-padding-y) var(--order-tree-cell-gap-x)
           var(--order-tree-cell-padding-y) 0;
  color: var(--text-primary);
  vertical-align: middle;
  text-align: left;
  line-height: 1.35;
}

/* Название проекта — жирное, с обрезкой длинных имён */
.order-projects-cell--name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-projects-cell--priority,
.order-projects-cell--deadline {
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

.order-projects-cell .badge-status {
  font-size: 11.5px;
}

/* ══════════════════════════════════════════════════════════════
   ТОНКАЯ ШАПКА ДЕРЕВА ПРОЕКТОВ
   ★ v7.23: единый блок для шапки. Мелкий серый текст без uppercase.
   Заголовки визуально «прижаты» к первому проекту — не выбиваются
   отдельной крупной строкой.
   ══════════════════════════════════════════════════════════════ */
.order-projects-table thead th {
  padding: 0 var(--order-tree-cell-gap-x) var(--order-tree-head-padding-bottom) var(--order-tree-head-offset-x);
  font-size: var(--order-tree-head-font-size);
  font-weight: var(--order-tree-head-font-weight);
  color: var(--text-soft);
  text-align: left;
  letter-spacing: var(--order-tree-head-letter-spacing);
  opacity: var(--order-tree-head-opacity);
  white-space: nowrap;
  vertical-align: bottom;
  background: transparent;
}

/* Пустая колонка шапки над веткой дерева */
.order-projects-head__branch {
  width: var(--order-tree-branch-width);
  padding: 0;
}

/* Ширины колонок — работают и для шапки, и для данных (fixed layout) */
.order-projects-head__col--status   { width: var(--order-tree-col-status-width); }
.order-projects-head__col--name     { width: var(--order-tree-col-name-width); }
.order-projects-head__col--priority { width: var(--order-tree-col-priority-width); }
.order-projects-head__col--deadline { width: var(--order-tree-col-deadline-width); }
.order-projects-head__col--actions  { width: var(--order-tree-col-actions-width); }

/* ══════════════════════════════════════════════════════════════
   БЕЙДЖИ НОВЫХ СТАТУСОВ ПРОЕКТОВ (БЭК-11, fallback)
   ══════════════════════════════════════════════════════════════ */
.order-projects-table .badge-status.awaiting_curator_review {
  background: var(--order-badge-review-curator-bg);
  color: var(--order-badge-review-curator-fg);
}

.order-projects-table .badge-status.awaiting_customer_review {
  background: var(--order-badge-review-customer-bg);
  color: var(--order-badge-review-customer-fg);
}

/* ══════════════════════════════════════════════════════════════
   ЯЧЕЙКА-ВЕТКА (первая колонка)
   position: relative — рисуем псевдоэлементы.
   ::before — вертикальная линия, ::after — «полочка» ├─.
   У последней строки вертикаль обрезается до середины → └─.
   ══════════════════════════════════════════════════════════════ */
.order-tree-branch {
  position: relative;
  width: var(--order-tree-branch-width);
  padding: 0;
  vertical-align: middle;
  border: none;
}

/* Вертикальная линия — на всю высоту строки */
.order-tree-branch::before {
  content: "";
  position: absolute;
  left: 50%;
  /* ★ v7.24: -1px — палка чуть заходит за верхнюю границу дерева,
     визуально «прилипает» к строке заказа сверху. */
  top: -20px;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: var(--order-tree-line-color);
}

/* Последняя строка: вертикаль идёт только до «полочки» → └ */
.order-projects-table tbody tr:last-child .order-tree-branch::before {
  bottom: 50%;
}

/* Горизонтальная «полочка» — от вертикали к содержимому. */
.order-tree-branch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 1px;
  background: var(--order-tree-line-color);
}

/* ══════════════════════════════════════════════════════════════
   КНОПКИ ДЕЙСТВИЙ В СТРОКЕ ПРОЕКТА
   --icon  — квадратная иконочная кнопка (для ✓/✕/📄)
   --primary — сиреневая (для «Принять»)
   --danger  — серо-жёлтая с hover-warning (для «Отклонить»)
   ══════════════════════════════════════════════════════════════ */
.order-projects-cell--actions {
  white-space: nowrap;
  text-align: left;
  padding-right: 0;
}

.order-project-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--order-project-btn-height);
  padding: 0 var(--order-project-btn-padding-x);
  margin-right: var(--order-project-btn-gap);
  border: 1px solid var(--border-color);
  border-radius: var(--order-project-btn-radius);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--order-project-btn-font-size);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;   /* выравнивает <a> и <button> по одной линии */
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.order-project-btn:last-child {
  margin-right: 0;
}

.order-project-btn:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
}

.order-project-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Иконочная кнопка — квадрат без паддингов */
.order-project-btn--icon {
  width: var(--order-project-btn-height);
  padding: 0;
}

.order-project-btn--icon .icon {
  width: var(--order-project-btn-icon-size);
  height: var(--order-project-btn-icon-size);
}

/* Основная (сиреневая) */
.order-project-btn--primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.order-project-btn--primary:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  filter: brightness(1.08);
}

/* Предупреждающая (для «Отклонить», крестик) */
.order-project-btn--danger {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.order-project-btn--danger:hover {
  border-color: var(--warning);
  background: rgba(217, 119, 6, 0.10);
  color: var(--warning);
}

body.dark-theme .order-project-btn--danger:hover {
  background: rgba(251, 191, 36, 0.12);
}

/* ══════════════════════════════════════════════════════════════
   КНОПКА «ДЕТАЛИ» В СТРОКЕ ЗАКАЗА
   Яркая primary вместо старого btn-link-table.
   ══════════════════════════════════════════════════════════════ */
.order-row-actions {
  white-space: nowrap;
  text-align: left;
  padding-right: 0;
}

.order-row-details-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}

.order-row-details-btn:hover {
  filter: brightness(1.08);
}

.order-row-details-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   КНОПКА-ИКОНКА ЧАТА В СТРОКЕ ЗАКАЗА
   Рядом с «Детали». Открывает правый ChatDrawer по URL
   /orders/{oid}/messenger/chat/{tid}.
   ══════════════════════════════════════════════════════════════ */
.order-row-chat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  vertical-align: middle;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.order-row-chat-btn:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
}

.order-row-chat-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.order-row-chat-btn .icon {
  width: 14px;
  height: 14px;
}

/* ══════════════════════════════════════════════════════════════
   МОДАЛКА ПОДТВЕРЖДЕНИЯ ПРИЁМКИ
   ══════════════════════════════════════════════════════════════ */
.order-accept-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--order-accept-overlay-bg);
  backdrop-filter: blur(var(--order-accept-overlay-blur));
  z-index: var(--z-index-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.order-accept-modal-overlay.is-hidden {
  display: none;
}

.order-accept-modal {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--order-accept-card-radius);
  box-shadow: var(--shadow-lg);
  padding: var(--order-accept-card-padding);
  width: 100%;
  max-width: var(--order-accept-card-max-width);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  text-align: center;
}

.order-accept-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s;
}

.order-accept-modal__close:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

.order-accept-modal__icon {
  width: var(--order-accept-icon-size);
  height: var(--order-accept-icon-size);
  border-radius: var(--order-accept-icon-radius);
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}

.order-accept-modal__icon .icon {
  width: 30px;
  height: 30px;
}

/* Предупреждающий вариант иконки в модалке «Отклонить» */
.order-accept-modal__icon--warning {
  background: rgba(217, 119, 6, 0.14);
  color: var(--warning);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

body.dark-theme .order-accept-modal__icon--warning {
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
}

.order-accept-modal__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.order-accept-modal__desc {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.order-accept-modal__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
   АДАПТИВ: на мобиле приоритет скрыт — пересчитываем ширины.
   Сумма = 96% (остаток — на ветку 20px).
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .order-tree-inner {
    padding-left: 4px;
  }

  .order-projects-cell {
    padding: 6px 8px 6px 0;
  }

  /* Приоритет скрыт — скрываем и его заголовок, и его ячейки */
  .order-projects-cell--priority,
  .order-projects-head__col--priority {
    display: none;
  }

  /* Пересчёт ширин: status 24% + name 30% + deadline 16% + actions 26% = 96% */
  .order-projects-head__col--status   { width: 24%; }
  .order-projects-head__col--name     { width: 30%; }
  .order-projects-head__col--deadline { width: 16%; }
  .order-projects-head__col--actions  { width: 26%; }

  .order-tree-branch {
    width: 20px;
  }

  .order-project-btn {
    padding: 0 9px;
    font-size: 11.5px;
  }

  .order-project-btn--icon {
    padding: 0;
  }

  .order-accept-modal {
    padding: 24px 20px;
  }
}