/* summaries — стили модуля (клон mobile).
   Подключён ПОСЛЕ css/app.css, поэтому здесь же лежат уточнения общих
   классов зоны сводок (.vio-*, .vop-*, .live-*, .pbar, .norms-*). */

/* ==========================================================================
   Нарушения: раскладка табов и погружений
   ========================================================================== */
/* violations_page.dart: Padding(all 12) → Column[шапка периода, 8, список].
   Шапка периода закреплена, скроллится только список. */
.viol-tab{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px}
/* violations_work_detail_page / violations_compare_page: Padding(24,20,12,0) */
.viol-scoped-head{flex:0 0 auto;padding:20px 12px 0 24px}

/* Prepend-пункт тулбара «Норма» (OtToolBarItem showLabel: true) —
   такой же вертикальный блок, как обычные пункты тулбара, но своим цветом. */
.sum-prepend{min-width:54px;max-width:120px;min-height:62px;padding:8px 4px 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:100px;cursor:pointer}
.sum-prepend:active{background:rgba(0,0,0,.05)}
.sum-prepend__lbl{font-size:10px;font-weight:500;line-height:1.4;color:var(--primary400);
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}

/* violations_quality_bar: пустой бар и сегмент unknown — default10Alpha */
.pbar{background:rgba(63,70,78,.1)}
/* Бейджи под баром: Wrap spacing 12 / runSpacing 4, отступ от бара 8 */
.vio-legend{gap:4px 12px;margin-top:8px}

/* Колонка кнопок в теле шита (Column(spacing: 8) внутри CustomBottomSheet.child):
   так собраны «Тип нарушения», «Сравнить», «Период» Live и «Выберите работу» —
   у них нет onPrimary/onSecondary, поэтому 24px уходят ПОД кнопки. */
.sum-btncol{display:flex;flex-direction:column;gap:8px}

/* Простои: маркер легенды хронологического вида
   (downtime_stats_legend._LegendItem → BoxConstraints(maxHeight: 8, maxWidth: 14)) */
.dtl-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 14px}
.dtl-mark>.ic{width:14px!important;height:8px!important}

/* culture_violations_card: OtButton.withPrependSm / OtButton.icon */
.vio-norms{gap:6px;padding:6px 12px;border-color:var(--text400);background:#fff}
.vio-norms--icon{padding:6px}

/* violation_order_card._MachineImage — бокс 100×100 БЕЗ рамки */
.vop-photo{border:0}

/* ==========================================================================
   Live режим качества работ
   ========================================================================== */
/* _TimeSlider: Padding(horizontal 24) */
.live-slider{padding:16px 24px 0}
.live-slider__bubble-row{margin:0 9px}
/* _Dropdown: minHeight 48, padding h8, текст p2M(text700), каретка 20 */
.live-dd{min-height:48px;padding:0 8px;max-width:190px}

/* ==========================================================================
   Состояния: скелетоны, спиннер, офлайн-баннер
   ========================================================================== */
/* Skeletonizer: кости поверх той же разметки */
.sum-bone{display:block;border-radius:4px;background:linear-gradient(90deg,
  rgba(63,70,78,.08) 25%, rgba(63,70,78,.16) 37%, rgba(63,70,78,.08) 63%);
  background-size:400% 100%;animation:sumbone 1.4s ease infinite}
.sum-bone--circ{width:51px;height:51px;flex:0 0 51px;border-radius:50%;background:var(--bgGray30);animation:none}
@keyframes sumbone{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* CircularProgressIndicator */
.sum-spin{width:36px;height:36px;border-radius:50%;border:3px solid rgba(63,70,78,.12);
  border-top-color:var(--primary500);animation:sumspin .9s linear infinite}
@keyframes sumspin{to{transform:rotate(360deg)}}

/* stale_banner.dart: title + subtitle */
.sum-stale{margin:12px 12px 0;padding:10px 12px;border-radius:8px;
  background:rgba(234,182,49,.16);border:1px solid rgba(234,182,49,.32);
  display:flex;align-items:flex-start;gap:8px;flex:0 0 auto}
.sum-stale__t{display:block;color:var(--statusWarning);font-weight:600}
.sum-stale__s{display:block;margin-top:2px;color:var(--statusWarning)}

/* ==========================================================================
   Форма норм: числовые поля (OtNumberField) и метео (OtRangeSelector)
   ========================================================================== */
.norms-field{margin-bottom:16px}
.norms-field__row{display:flex;align-items:center;gap:8px;height:40px;margin-top:10px}
/* Поле 40px; единица — суффикс ВНУТРИ поля справа (padding left 12) */
.norms-input-wrap{flex:1;min-width:0;height:40px;display:flex;align-items:center;
  padding:0 12px;border:1px solid var(--bgGray30);border-radius:8px;background:#fff}
.norms-input-wrap.is-err{border-color:var(--red)}
.norms-input-wrap .norms-input{flex:1;min-width:0;height:100%;padding:0;border:0;border-radius:0;
  background:transparent;font-size:14px;font-weight:500;line-height:1.35;color:var(--text700)}
.norms-input-wrap .norms-input:focus{outline:none}
.norms-input--c{text-align:center}
.norms-suffix{padding-left:12px;color:var(--text700);white-space:nowrap}
/* Степперы — только у «Оптимальная скорость во время работы, км/ч» */
.norms-step{width:56px;height:40px;flex:0 0 56px;border-radius:8px;background:var(--text300);
  color:var(--text900);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
.norms-step:active{background:var(--text400)}
.norms-err{padding:4px 0 0 4px;font-size:12px;line-height:1.35;color:var(--red)}
.norms-err:empty{display:none}

/* OtButton.withPrependMd: «Снять регламент» (error/onError) и «Добавить» */
.norms-clear{width:100%;padding:12px;border-radius:8px;background:var(--red);
  display:flex;align-items:center;justify-content:center;gap:8px}
.norms-clear:active{filter:brightness(.94)}
.norms-add{width:100%;padding:12px;border-radius:8px;background:var(--bgGray30);
  display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text900)}
.norms-add:active{background:var(--text400)}

/* Метео-индикатор: заголовок «{Название}, {единица}» + крестик + OtRangeSelector */
.norms-wi__del{width:36px;height:36px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:transparent}
.norms-wi__del:active{background:var(--default5)}
/* OtRangeSelector: трек 4px (active primary400 / inactive text300),
   два прямоугольных ползунка 20×20 белых с обводкой primary400,
   под ними — два поля 80×40 (border text400, текст по центру). */
.otrs{position:relative;height:24px;margin-top:8px}
.otrs__track{position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:var(--text300)}
.otrs__fill{position:absolute;top:0;bottom:0;background:var(--primary400);border-radius:2px}
.otrs__in{position:absolute;left:0;right:0;top:0;height:24px;width:100%;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none}
.otrs__in::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;
  border-radius:4px;background:#fff;border:2px solid var(--primary400);pointer-events:auto;cursor:pointer}
.otrs__in::-moz-range-thumb{width:20px;height:20px;border-radius:4px;background:#fff;
  border:2px solid var(--primary400);pointer-events:auto;cursor:pointer}
.otrs__fields{display:flex;align-items:center}
.otrs__num{width:80px;height:40px;flex:0 0 80px;text-align:center;background:#fff;
  border:1px solid var(--text400);border-radius:8px;color:var(--text900)}
.otrs__num:focus{outline:none;border-color:var(--primary400)}

/* ==========================================================================
   Шит периода: OtDateRangePicker
   ========================================================================== */
.drp-field{height:40px;display:flex;align-items:center;gap:8px;padding:0 12px;
  border-bottom:1px solid var(--bgGray30)}
.drp-field:active{background:var(--default5)}
/* Простои: тот же OtDateRangePicker, но withTime — обе даты живут ВНУТРИ
   одного поля 40px (autoPickQuickRange: false → ленты чипов нет) */
.drp-field .dtp-fields{flex:1;min-width:0}
.drp-field .dtp-input{height:100%;padding:0;border:0;border-radius:0;background:transparent;
  font-size:14px;font-weight:500;line-height:1.35;color:var(--text900)}
.drp-field .dtp-input:focus{border:0}
.drp-quick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:8px 4px}
.drp-quick::-webkit-scrollbar{display:none}
.drp-chip{height:34px;flex:0 0 auto;padding:8px 12px;border-radius:6px;background:var(--text300);
  color:var(--text900);font-size:12px;font-weight:500;line-height:1.35;white-space:nowrap}
.drp-chip.on{background:var(--primary500);color:#fff}

/* ==========================================================================
   Погружение в простой машины: «Сводки» и «Хронология»
   ========================================================================== */

/* Точка категории в строках разреза и состояния */
.dt-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 2px }

/* Метки событий поверх трека хронологии */
.dt-tl-track b { position: absolute; top: 0; bottom: 0; width: 2px; opacity: .9 }

/* Курсор времени: пунктирная вертикаль поверх всей полосы */
.dt-timeline--cursor { --f: .5 }
.dt-cursor {
  /* вертикаль тянется от плашки времени вниз через весь таймлайн */
  position: absolute; top: -16px; bottom: 0; width: 1px; pointer-events: none;
  left: calc(100% * var(--f));
  background-image: linear-gradient(180deg, var(--primary400) 0 4px, transparent 4px 7px);
  background-size: 1px 7px;
}

/* Плашка времени над таймлайном */
.dt-bubble-row { position: relative; height: 26px }
.dt-bubble {
  --f: .5; --w: 140px;
  position: absolute; top: 0; box-sizing: border-box; width: var(--w);
  left: clamp(0px, calc(100% * var(--f) - var(--w) / 2), calc(100% - var(--w)));
  padding: 3px 8px; border-radius: 6px; background: var(--bgGrey); text-align: center;
  font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--text700); white-space: nowrap;
}

/* Лента событий: время + иконка, цветная риска, название и длительность.
   Активная строка (последняя начавшаяся до курсора) подсвечена. */
.dt-ev {
  display: flex; align-items: stretch; gap: 8px;
  padding: 8px; border-radius: 8px; background: transparent;
}
.dt-ev.on { background: var(--default5) }
.dt-ev__time {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 40px; flex: 0 0 40px;
}
.dt-ev__bar { width: 3px; flex: 0 0 3px; border-radius: 2px }

/* Слайдер хронологии закреплён над тулбаром; лента событий уходит под него
   с мягким затуханием в цвет скаффолда, как в приложении. */
.dt-slider {
  position: absolute; left: 0; right: 0; bottom: 92px; padding: 12px 12px 0; z-index: 14;
  background: linear-gradient(180deg, rgba(228, 229, 236, 0) 0, var(--surface) 12px);
}
.tl-sel--nolbl { height: 44px }
.tl-sel--nolbl input[type=range] { top: 0 }