/* tele-works — стили модуля (клон mobile)
   Модуль «Работы» воркспейса «Техника» (OT-978: works_tabs). Базовые
   классы .tw-* / .ord-* лежат в css/app.css — здесь только то, что
   добавлено или уточнено по аудиту зоны. */

:root {
  /* AppColors.trackColor — трек машины на превью карты и внутренняя
     капля пина (app_colors.dart:174) */
  --trackColor: #83C72C;
}

/* --- Карточка «Затраченные материалы» -------------------------------------
   OtPillSegmentedSwitch с height 36, chipPadding 12/4, textStyle p3M,
   фон text800 5% (order_materials_card.dart) */
.pillsw-sm .pillsw { height: 36px; background: rgba(63, 70, 78, .05) }
.pillsw-sm .pillsw__chip { height: 28px; padding: 0 12px }
.pillsw-sm .pillsw__chip .p2m { font-size: 12px; line-height: 1.35 }

/* Квадратный аватар машины и миниатюры состава — во Flutter без рамки
   (белый фон на белой карточке) */
.ord-avatar { border: none }
.ord-thumb { border: none }

/* Заголовок колонок таба «Выработка» — p4M 11px */
.ord-vol-head { font-size: 11px }

/* Дельта-бейдж KPI-карточки — p3M 12px */
.ord-kpi__delta { font-size: 12px }

/* --- Полосы контроля таба «Карта» ----------------------------------------
   Пунктирная вертикаль «сейчас» живёт в контентной области карточки
   (Positioned.fill внутри padding 12): left = 12 + (W − 24) × доля.
   Пунктир 4/3, ширина 1px, primary400 (order_map_indicators_card). */
.ord-inds { --f: .5 }
.ord-ind-cursor {
  position: absolute; top: 12px; bottom: 12px; width: 1px; pointer-events: none;
  left: calc(12px + (100% - 24px) * var(--f));
  background-image: linear-gradient(180deg, var(--primary400) 0 4px, transparent 4px 7px);
  background-size: 1px 7px;
}

/* --- OtTimelineSelector (core/widgets/controls/ot_timeline_selector.dart) --
   Высота = thumbRadius×2 + verticalPadding×2 = 68. Дорожка 4px однотонная
   с отступами 10px под ползунок, ползунок — круг 20px с белой обводкой 3px
   и тенью, над ним — лейбл выбранного времени, снизу границы шкалы.
   Отступление от источника: цвета текста (в приложении white на светлом
   фоне) и дорожки (surfaceContainerHighest = white) заменены на text700 /
   text300 — иначе элементы невидимы. */
.tl-sel { --f: .5; --lw: 92px; position: relative; height: 68px }
.tl-sel__lbl {
  position: absolute; top: 0; box-sizing: border-box; width: var(--lw);
  left: clamp(0px, calc(10px + (100% - 20px) * var(--f) - var(--lw) / 2), calc(100% - var(--lw)));
  padding: 2px 4px; border-radius: 4px; text-align: center;
  font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--text700); white-space: nowrap;
}
.tl-sel input[type=range] {
  position: absolute; top: 24px; left: 0; width: 100%; height: 20px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; outline: none;
}
.tl-sel input[type=range]::-webkit-slider-runnable-track {
  height: 20px; border-radius: 2px;
  background: linear-gradient(var(--text300), var(--text300)) no-repeat center / calc(100% - 20px) 4px;
}
.tl-sel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary500); border: 3px solid #fff; box-sizing: border-box;
  box-shadow: 0 0 6px rgba(0, 0, 0, .25); cursor: pointer;
}
.tl-sel__edge {
  position: absolute; bottom: 0; font-size: 12px; font-weight: 500; line-height: 1.35;
  color: var(--text700); white-space: nowrap;
}
.tl-sel__edge--min { left: 0 }
.tl-sel__edge--max { right: 0 }

/* --- Маркеры превью карты наряда -----------------------------------------
   MachinePinMarker: 36×45 (голова 36 + клин), фото машины d = 36 − 10,28;
   стрелка направления — 24×24 arrow_track.svg, повёрнутая по азимуту
   последнего сегмента трека (machine_pin.dart / order_map_preview_card). */
.mpin { position: relative; width: 36px; height: 45px }
.mpin__drop { display: block }
.mpin__photo {
  position: absolute; left: 5.14px; top: 5.14px; width: 25.72px; height: 25.72px;
  border-radius: 50%; object-fit: cover;
}
.tarrow { width: 24px; height: 24px; line-height: 0 }

/* --- Формы зоны ----------------------------------------------------------
   OtFormControlFiller: подпись слева, значение — чип text300 (23/6, r8) */
.ot-filler { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; gap: 8px }
.ot-filler__val { padding: 6px 23px; border-radius: 8px; background: var(--text300); color: var(--text900) }
.ot-filler__val:active { background: var(--text400) }

/* Неактивная primary-кнопка формы (ElevatedButton с onPressed: null) */
.btn-primary[disabled] { background: rgba(29, 33, 38, .12); color: rgba(29, 33, 38, .38) }

/* isInProgress → CustomBottomSheet.isLoading: Positioned.fill + AbsorbPointer,
   плёнка surfaceContainerHighest (#fff) 70 % поверх ВСЕГО шита, кнопки
   остаются на месте (custom_bottom_sheet.dart) */
.tw-form-loader {
  position: absolute; inset: 0; z-index: 3; background: rgba(255, 255, 255, .7);
  display: flex; align-items: center; justify-content: center;
}
.tw-form-loader .spinner { width: 32px; height: 32px; border-width: 3px }

/* --- Кнопки поверх карты наряда (слои / развернуть / свернуть / подгон) ---
   Белая плитка 36×36, radius 8, тень как у плавающих элементов карты. */
.ord-map__btn {
  position: absolute; z-index: 3; width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px; background: #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.ord-map__btn--tl { left: 8px; top: 8px }
.ord-map__btn--br { right: 8px; bottom: 8px }

/* Кнопка «⋮» в шапке карточки показателей качества */
.ord-more {
  width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border: none;
  border-radius: 12px; background: var(--bgGrey); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* --- Полноэкранная карта наряда ------------------------------------------
   Экран без аппбара и тулбара: карта во весь экран, элементы управления
   поверх неё. Отступы сверху/снизу — под статус-бар и жест-бар. */
.omf { position: absolute; inset: 0; background: #394A2C; overflow: hidden }
.omf__map { position: absolute; inset: 0 }
.omf__map .ord-map__gl { position: absolute; inset: 0 }
.omf__tl { left: 12px; top: 44px }
.omf__tr { position: absolute; right: 12px; top: 44px; z-index: 3; display: flex; gap: 8px }
.omf__tr .ord-map__btn { position: static }
.omf__bottom { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; padding: 0 12px }

/* Ряд чипов со значениями метрик под курсором */
.omf__chips {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; border-radius: 24px; padding: 12px 16px; margin-bottom: 4px;
  box-shadow: 0 4px 18.1px rgba(0, 0, 0, .25);
}
.omf__chip { display: flex; align-items: center; gap: 4px; min-width: 0 }
.omf__chip .p3m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* Слайдер на тёмной подложке: подпись в белой плашке, границы белым */
.tl-sel--dark .tl-sel__lbl { background: #fff; color: var(--text900) }
.tl-sel--dark .tl-sel__edge { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6) }
.tl-sel--dark input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(#fff, #fff) no-repeat center / calc(100% - 20px) 4px;
}

/* Шит «Слой карты»: активный вариант — залитая primary-кнопка */
.omf__layers { display: flex; flex-direction: column; gap: 8px }
.omf__layer {
  height: 48px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--bgGrey); color: var(--text900);
  font-size: 14px; font-weight: 500; line-height: 1.4;
}
.omf__layer.on { background: var(--primary500); color: #fff; font-weight: 600 }