/* styles-prod-route-chain.css — колонка «Прогресс-ПЗ» (pages-prod-route-chain.js).
   Кружок на участок, подпись под кружком, соседние кружки соединены линией.

   Линия рисуется псевдоэлементом ВНУТРИ шага и тянется от центра предыдущего
   кружка к центру своего: шаги равной ширины (flex:1), поэтому `left:-50%` +
   `width:100%` попадают ровно в центры. Отдельным элементом между шагами линия
   выходила короткой и «обрывалась» на полпути — кружок стоит в центре своего
   шага, а элемент-линия начинался только за его краем (владелец, 2026-08-10).

   Цепочка занимает всю ширину колонки: чем шире колонка, тем длиннее отрезки и
   свободнее стоят кружки. */

/* Ячейка колонки: max-width:0 — приём для table-layout:auto, без него содержимое
   цепочки не давало сузить колонку мышью (ставишь 90px, а колонка остаётся 174px —
   владелец, 2026-08-10). Узкой колонке цепочка отдаёт прокрутку внутри ячейки. */
.route-chain-cell {
  max-width: 0;
  overflow: hidden;
}

/* Значок-подсказка «?» в заголовке колонки и всплывающее окно к нему.
   Своя реализация, а не общий `access-tip`: тот рисует окно псевдоэлементом из
   `attr(data-tip)` — плоский текст, без заголовков и без деления на блоки. Здесь
   окно нужно блоками («Прогресс участка» / «Брак на участке»), как в панели
   «Как считается оплата» (владелец, 2026-08-12). */
.route-chain-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;      /* значок стоит отдельно от заголовка, не липнет к тексту */
  vertical-align: middle;
}

/* Меньше общего `access-info-badge` (14px): в шапке таблицы он спорил по весу
   с самим заголовком. */
.route-chain-hint-badge {
  display: inline-flex;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  opacity: 0.85;
  text-transform: none;
}

/* `fixed`, а не `absolute`: на дашборде таблица лежит в `.dash-ord-wrap` с
   `overflow: hidden`, и абсолютное окно обрезалось нижним краем карточки. Из-под
   `overflow` выходит только фиксированное; координаты считает JS
   (`_routeChainTipShow` в pages-prod-route-chain.js) — он же переворачивает окно
   вверх, если внизу не помещается. Показ тоже на JS: правило `:hover` открыло бы
   окно раньше расчёта — в левом верхнем углу экрана. */
.route-chain-tip {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  display: none;
  width: 244px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(124, 164, 220, 0.4);
  border-radius: 8px;
  background: #0c2143;
  box-shadow: 0 10px 24px rgba(4, 14, 32, 0.45);
  color: #e7f1ff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  white-space: normal;
}

.route-chain-tip-block + .route-chain-tip-block {
  display: block;
  border-top: 1px solid rgba(124, 164, 220, 0.25);
  margin-top: 8px;
  padding-top: 8px;
}

.route-chain-tip-title {
  display: block;
  margin-bottom: 3px;
  color: #ffffff;
  font-weight: 700;
}

/* Пункт блока: маркер отдельным столбцом, чтобы вторая строка не залезала под точку. */
.route-chain-tip-item {
  display: block;
  padding-left: 10px;
  text-indent: -10px;
}

.route-chain-tip-item::before {
  content: "• ";
  color: #8fb4e6;
}

.route-chain {
  display: flex;
  align-items: flex-start;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  scrollbar-width: thin;
  vertical-align: middle;
}

.route-chain-step {
  position: relative;
  display: flex;
  flex: 1 1 34px;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 34px;
}

/* Линия к предыдущему участку. У первого шага её нет. */
.route-chain-step::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 11px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #ccd8e6;
}

.route-chain-step:first-child::before {
  display: none;
}

/* Предыдущий участок пройден — отрезок до него зелёный (путь пройден досюда). */
.route-chain-step.is-done + .route-chain-step::before {
  background: #8ecfb4;
}

.route-chain-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid #b8c7d8;
  border-radius: 50%;
  background: #fff;
  color: #6f8aa8;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

/* Пройден целиком — сплошная заливка; идёт — синий контур; ждёт — серый. */
.route-chain-step.is-done .route-chain-dot {
  border-color: #3da375;
  background: #3da375;
  color: #fff;
}

.route-chain-step.is-work .route-chain-dot {
  border-color: #3a82d8;
  color: #1f5fa3;
}

.route-chain-step.is-wait .route-chain-dot,
.route-chain-step.is-empty .route-chain-dot {
  border-color: #c2cedd;
  color: #90a3b8;
}

.route-chain-name {
  max-width: 100%;
  overflow: hidden;
  color: #6f8aa8;
  font-size: 9px;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-chain-step.is-done .route-chain-name {
  color: #1f7a52;
}

.route-chain-step.is-work .route-chain-name {
  color: #1f5fa3;
}

/* Метка брака — ТОЧКА без числа, ниже и сбоку от кружка (владелец, 2026-08-12).
   Раньше это был бейдж с количеством в правом верхнем углу: два числа вплотную
   (процент в кружке и штуки в бейдже) читались как одна величина. Теперь значок
   только сигналит «здесь был брак», разбор — в «Состав ПЗ». */
.route-chain-defect {
  position: absolute;
  z-index: 2;
  right: -8px;
  bottom: -2px;
  display: block;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #3a82d8;
  box-shadow: 0 0 0 1.5px #fff;
}

.route-chain-empty {
  color: #90a3b8;
  font-size: 11px;
}

/* Дашборд — карточка на тёмном фоне: кружки и подписи светлые. */
.dash-orders-card .route-chain-dot {
  border-color: #46618a;
  background: #143462;
  color: #cbd9eb;
}

.dash-orders-card .route-chain-step.is-done .route-chain-dot {
  border-color: #3da375;
  background: #3da375;
  color: #fff;
}

.dash-orders-card .route-chain-step.is-work .route-chain-dot {
  border-color: #4d9bef;
  color: #9ecbff;
}

.dash-orders-card .route-chain-name {
  color: #8fa6c4;
}

.dash-orders-card .route-chain-step.is-done .route-chain-name {
  color: #6fd3a4;
}

.dash-orders-card .route-chain-step.is-work .route-chain-name {
  color: #9ecbff;
}

.dash-orders-card .route-chain-step::before {
  background: #35507a;
}

.dash-orders-card .route-chain-step.is-done + .route-chain-step::before {
  background: #2f7d5c;
}

.dash-orders-card .route-chain-defect {
  background: #4d9bef;
  box-shadow: 0 0 0 1.5px #0d2242;
}

.dash-orders-card .route-chain-empty {
  color: #7d93b4;
}