/* =========================================================================
   ПРОТОТИП №5 — паспорт техники.
   Панель-объяснение (общая для прототипов №2–№7) + стили экрана паспорта.

   ВАЖНО: собственные классы — с префиксом `mpass-`. Префикс `mp-` в клоне
   уже занят (`mp-avatar` превью машины, `mp-drp-*` пикера дат): в №7 такое
   пересечение однажды сломало вёрстку чужих шитов.
   ========================================================================= */

/* ------------------------ Панель-объяснение ------------------------------ */
.stage{gap:32px}
.proto-panel{
  width:360px;max-height:852px;overflow-y:auto;scrollbar-width:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:24px;color:#E7EAEE;flex:0 0 auto;
}
.proto-panel::-webkit-scrollbar{display:none}
.proto-panel__eyebrow{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:#8CABCD;margin-bottom:6px}
.proto-panel__title{font-size:22px;font-weight:600;line-height:1.25;color:#fff}
.proto-panel__lead{font-size:13px;font-weight:400;line-height:1.5;color:#B8BFC8;margin:8px 0 0}
.proto-panel__now{
  margin-top:16px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:500;
  background:rgba(74,134,199,.16);border:1px solid rgba(74,134,199,.45);color:#BBD6F2;
}
.proto-panel__now b{color:#fff;font-weight:600}
.proto-panel__section{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#7E8894;margin:20px 0 10px}
.proto-flow{
  display:flex;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5;border:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.proto-flow b{color:#fff;font-weight:600}
.proto-flow__num{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;margin-top:1px;
  background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#fff;
}
.proto-flow--active{background:rgba(74,134,199,.14);border-color:rgba(74,134,199,.5)}
.proto-flow--active .proto-flow__num{background:#4A86C7}
.proto-panel__list{margin:0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:8px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5}
.proto-panel__list b{color:#fff;font-weight:600}
.proto-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#4A86C7;
  box-shadow:0 0 6px rgba(74,134,199,.8);margin-right:4px;vertical-align:baseline}
@media (max-width:1150px){.proto-panel{display:none}}

/* ---- Состояния и варианты (методология прототипов, см. CLAUDE.md) -------
   Блок за блоком перечисляем ВСЕ состояния компонента; активное подсвечено,
   тап по чипу переключает прототип на демонстрирующие его данные. */
.proto-var{margin-bottom:12px}
.proto-var__t{font-size:12px;font-weight:600;color:#E7EAEE;margin-bottom:6px}
.proto-var__chips{display:flex;flex-wrap:wrap;gap:6px}
.proto-var__chip{
  padding:5px 10px;border-radius:8px;cursor:pointer;font-family:inherit;
  font-size:11.5px;font-weight:500;line-height:1.3;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#C7CDD5;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.proto-var__chip:hover{background:rgba(255,255,255,.12);color:#fff}
.proto-var__chip.is-on{background:rgba(74,134,199,.28);border-color:#4A86C7;color:#fff}
.proto-var__hint{margin-top:6px;font-size:11.5px;line-height:1.45;color:#8FA0B4}

/* =========================================================================
   Экран паспорта
   ========================================================================= */
/* Лента карточек — как .list клона, но с местом под тулбар */
.mpass-list{padding:12px 12px 110px;display:flex;flex-direction:column;gap:8px}

/* Шапка карточки: название блока + карандаш (роль moreBtn паспорта посева) */
.mpass-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.mpass-edit{
  width:28px;height:28px;flex:0 0 28px;border:0;background:transparent;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.mpass-edit:active{background:var(--default5);border-radius:8px}

/* Фото машины в шапке-идентификации */
.mpass-photo{
  width:96px;height:77px;border-radius:8px;flex:0 0 96px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--white);
}
.mpass-photo img{width:100%;height:100%;object-fit:contain}

/* Строка «подпись / значение» с пунктиром между строками */
.mpass-row{display:flex;align-items:baseline;gap:12px;padding:7px 0}
.mpass-row > :first-child{flex:1;min-width:0}
/* Незаполненный атрибут: не прячем, а зовём заполнить */
.mpass-empty{color:var(--primary500)}

/* Мини-карта: пропорция 16:9, как rp-map паспорта осмотра */
.mpass-map{position:relative;width:100%;height:150px;background:var(--bgLight)}
.mpass-map__gl{position:absolute;inset:0}
.mpass-map__gl .maplibregl-canvas{outline:none}
.mpass-loc{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  border:0;background:var(--white);cursor:pointer;text-align:left;
}
.mpass-loc:active{background:#F7F8F9}
/* Пин машины на мини-карте — тот же, что в телематике (белая капля) */
.mpass-pin-marker{position:relative;width:36px;height:43px;pointer-events:none}
.mpass-pin-marker img{
  position:absolute;left:6px;top:4px;width:24px;height:24px;border-radius:50%;
  object-fit:cover;background:#fff;
}
/* Машина без координат */
.mpass-nopos{display:flex;align-items:center;gap:12px}

/* Блок «Сейчас»: тревоги/их отсутствие кнопкой на всю ширину */
.mpass-alerts{display:block;width:100%;border:0;background:transparent;padding:0;cursor:pointer;text-align:left}
.mpass-ok{display:flex;align-items:center;gap:6px}

/* Прогресс — уровень бака и полнота паспорта */
.mpass-bar{height:6px;border-radius:3px;background:var(--default5);overflow:hidden}
.mpass-bar i{display:block;height:100%;border-radius:3px}
.mpass-fill{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
/* Чип незаполненного атрибута — тап открывает нужную форму */
.mpass-gap{
  height:26px;padding:0 10px;border-radius:6px;cursor:pointer;
  border:1px dashed var(--primary200);background:var(--primary50);
  color:var(--primary500);font-size:11px;font-weight:600;font-family:inherit;
}

/* Отображение на карте: метка + цвет */
.mpass-icon-row{display:flex;align-items:center;gap:12px}
.mpass-pin{
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--text300);
}
.mpass-swatch{width:20px;height:20px;border-radius:6px;border:1px solid var(--text300)}

/* Навеска */
.mpass-equip{display:flex;align-items:center;gap:12px}
.mpass-equip__sq{
  width:40px;height:40px;flex:0 0 40px;border-radius:8px;overflow:hidden;background:var(--default5);
  display:flex;align-items:center;justify-content:center;
}
.mpass-equip__sq img{width:100%;height:100%;object-fit:contain}

/* Таб «Обслуживание» — метка «скоро» у будущих разделов */
.mpass-soon{
  align-self:center;padding:2px 8px;border-radius:6px;background:var(--default5);
  color:var(--text600);font-size:10px;font-weight:600;white-space:nowrap;
}

/* Таб «Документы» — квадрат с иконкой файла */
.mpass-doc{
  width:40px;height:40px;flex:0 0 40px;border-radius:8px;background:var(--primary50);
  display:flex;align-items:center;justify-content:center;
}

/* Списки в шитах тулбара */
.mpass-slist{display:flex;flex-direction:column}
.mpass-srow{display:flex;align-items:flex-start;gap:10px;padding:10px 0}
.mpass-srow + .mpass-srow{border-top:1px solid var(--default5)}
.mpass-srow__ic{
  width:32px;height:32px;flex:0 0 32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}

/* Пикер иконки и цвета */
.mpass-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mpass-pick{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;
  border:1px solid var(--text300);border-radius:10px;background:#fff;cursor:pointer;
  font-family:inherit;min-width:0;
}
.mpass-pick.on{border-color:var(--primary400);background:var(--primary50)}
.mpass-pick .p3m{max-width:100%}
.mpass-colors{display:flex;gap:10px;flex-wrap:wrap}
.mpass-color{
  width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  box-shadow:0 0 0 1px var(--text300);
}
.mpass-color.on{border-color:#fff;box-shadow:0 0 0 2px var(--primary400)}

/* Бак в списке блока «Баки и топливо» */
.mpass-tank{display:flex;align-items:center;gap:10px;padding:6px 0}
.mpass-tank + .mpass-tank{border-top:1px solid var(--default5)}
.mpass-tank__ic{
  width:32px;height:32px;flex:0 0 32px;border-radius:8px;background:var(--default5);
  display:flex;align-items:center;justify-content:center;
}

/* =========================================================================
   Отображение заправок — КОПИЯ из прототипа №7 «Топливо без догадок»
   (prototypes/mobile/fuel-clarity/fuel-clarity.css). Пока №7 не принят
   в клон, эти стили живут в двух прототипах — правки синхронизировать.
   ========================================================================= */
.fx-chip{
  display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:4px;
  font-size:10px;font-weight:600;line-height:1;white-space:nowrap;
}
.fx-row{align-items:flex-start;padding:10px 0}
.fx-row + .fx-row{border-top:1px solid var(--default5)}
/* Строка участника: иконка называет сущность, подпись словом не нужна */
.fx-party{display:flex;align-items:center;gap:6px;min-width:0}
.fx-party .p3m{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Объяснение алерта словами прямо в строке */
.fx-alert{
  display:flex;align-items:flex-start;gap:6px;margin-top:6px;
  padding:6px 8px;border-radius:6px;background:var(--red10);
}
.fx-alert .p3m{color:var(--red);min-width:0}

/* Шит события: главная цифра, маршрут «Откуда → Куда», источники, вывод */
.fx-hero{
  border-radius:12px;overflow:hidden;
  background:color-mix(in srgb, var(--c) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.fx-hero__top{padding:14px 16px;text-align:center}
.fx-hero__lbl{color:var(--text700)}
.fx-hero__val{
  margin:2px 0 4px;font-family:Inter,sans-serif;font-size:30px;font-weight:600;
  line-height:1.15;color:var(--c);
}
.fx-hero__sub{color:var(--text600)}
.fx-route{background:#fff;border-top:1px solid color-mix(in srgb, var(--c) 20%, transparent)}
.fx-route__row{display:flex;align-items:flex-start;gap:8px;padding:10px 12px}
.fx-route__row + .fx-route__row{border-top:1px dashed var(--text300)}
.fx-route__lbl{width:52px;flex:0 0 52px;color:var(--text600);padding-top:1px}
.fx-route__row .ic{margin-top:1px}
.fx-sec{margin:18px 0 8px;color:var(--text700)}
.fx-src{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;
  background:var(--default5);margin-bottom:6px;
}
.fx-src__badge{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  font-size:10px;font-weight:600;line-height:1.5;
  background:var(--primary50);color:var(--primary500);
}
.fx-verdict{
  display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:8px;
  background:var(--default5);color:var(--text700);
}
.fx-verdict .p3m{min-width:0}
.fx-verdict--info .p3m{color:var(--text700)}
.fx-verdict--bad{background:var(--red10)}
.fx-verdict--bad .p3m{color:var(--red)}
.fx-verdict--ok{background:var(--green10)}
.fx-verdict--ok .p3m{color:var(--green)}
.fx-row2{display:flex;align-items:center;gap:8px;padding:7px 0}
.fx-row2 + .fx-row2{border-top:1px dashed var(--text300)}
.fx-note{margin-top:6px;color:var(--text600);text-align:center}

/* =========================================================================
   Сервисная книжка (service-book.js) — ТЗ бэкенда PROTOTYPE_TZ.md.
   Своих визуальных компонентов почти нет: карточки собраны из карточки
   осмотра (employee_field_crop_card), нижней панели карточки «Автопарка»,
   маленьких чипов (.chip--s) и кнопки-действия карточки (.btn-action).
   ========================================================================= */
/* Свитчер трёх лент: пиктограмма + подпись в чипе pillSwitch */
.mpass-sbhead{display:flex;justify-content:center;padding:2px 0 2px}
.mpass-sbhead .pillsw{width:100%}
.mpass-sbhead .pillsw__chip{flex:1;gap:6px;padding:0 6px}

/* Сводная строка: слева период, справа сумма затрат. Период меняется
   кнопкой тулбара, поэтому строка не кликабельна. */
.sb-sum{display:flex;align-items:baseline;gap:8px;padding:8px 12px 2px}

/* Карточка записи + плашка следующего ТО под ней */
.sb-rec{display:flex;flex-direction:column}
.sb-next{
  display:flex;align-items:center;gap:6px;margin:0 8px;padding:5px 10px;
  border-radius:0 0 10px 10px;background:var(--primary50);
}
.sb-next .p4m{color:var(--primary500)}
.sb-next--over{background:var(--red10)}
.sb-next--over .p4m{color:var(--red)}
/* Мини-иконки под датой (позиции, вложения) — как счётчики в карточке
   осмотра: MiniIconButton = svg 12px цвета onTertiary; у запчастей рядом
   с иконкой стоит их количество */
.sb-minis{display:flex;align-items:center;gap:8px}
.sb-mini{display:inline-flex;align-items:center;gap:3px}
/* Квадрат с иконкой запчасти в списке позиций */
.sb-partic{
  width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:var(--default5);
  display:flex;align-items:center;justify-content:center;
}
/* Поле с кнопкой каталога справа */
.sb-inputrow{display:flex;align-items:center;gap:8px}
.sb-catbtn{
  width:46px;height:46px;flex:0 0 46px;border-radius:8px;cursor:pointer;
  border:1px solid var(--bgGray30);background:var(--primary50);
  display:flex;align-items:center;justify-content:center;
}
/* Нижняя панель карточки — как строка телеметрии в «Автопарке» */
.sb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.sb-metaitem{display:inline-flex;align-items:center;gap:4px;min-width:0}
/* Что именно закрыла запись: заголовок и список дефектов строками,
   тап ведёт в ленту дефектов */
.sb-closed{
  display:block;padding:8px 10px;border-radius:8px;background:var(--green10);
  border:0;cursor:pointer;text-align:left;width:100%;
}
.sb-closed__row{display:flex;align-items:center;gap:6px;min-width:0}
.sb-closed__row + .sb-closed__row{margin-top:2px}
/* Сторонняя организация вместо аватара исполнителя */
.sb-org{
  width:24px;height:24px;flex:0 0 24px;border-radius:6px;background:var(--default5);
  display:flex;align-items:center;justify-content:center;
}
/* Мелкий бейдж вида расхода рядом с датой */
.sb-kind{
  padding:1px 6px;border-radius:4px;background:var(--default5);color:var(--text600);
  font-size:10px;font-weight:600;line-height:1.5;white-space:nowrap;
}
/* Сколько устранённых дефектов осталось за границами выбранного периода */
.sb-hidden{padding:2px 4px 4px;text-align:center}
/* Откуда списание: обслуживание, на котором израсходована позиция */
.sb-src{display:flex;align-items:center;gap:4px;min-width:0}
/* Ссылка на запись, закрывшую дефект */
.sb-fixed{display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;
  padding:0;cursor:pointer}
/* Лента не загрузилась */
.sb-error{display:flex;align-items:flex-start;gap:12px}

/* Форма дефекта: крупная кнопка камеры и лента кадров */
.sb-camera{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;height:120px;border-radius:12px;cursor:pointer;
  border:1.5px dashed var(--primary200);background:var(--primary50);
}
.sb-shots{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.sb-shots::-webkit-scrollbar{display:none}
.sb-shot{
  position:relative;width:96px;height:96px;flex:0 0 96px;border-radius:10px;overflow:hidden;
  background:var(--default5);display:flex;align-items:center;justify-content:center;
}
.sb-shot img{width:100%;height:100%;object-fit:cover}
.sb-shot--add{border:1.5px dashed var(--text400);background:transparent;cursor:pointer}
.sb-shot__del{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:6px;background:#FAF9FC;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}

/* Сегмент формы — на всю ширину контейнера */
.sb-seg .ot-seg__box{overflow:visible}
.sb-seg .ot-seg__chip{flex:1;justify-content:center;min-width:0;padding:0 8px}
.sb-seg .ot-seg__chip .lbl{overflow:hidden;text-overflow:ellipsis}
/* Шапка блока формы: подпись слева, «+» справа */
.sb-blockhead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
/* Контекст «эта запись закроет дефект» в форме, открытой из «Устранить» */
.sb-fixctx{
  display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:8px;
  background:var(--green10);
}

/* Автодополнение по справочнику ТМЦ */
.sb-ac{position:relative}
.sb-ac__list{display:flex;flex-direction:column;margin-top:4px}
.sb-ac__item{
  display:flex;align-items:center;gap:8px;padding:10px;border:0;border-radius:8px;
  background:var(--default5);margin-bottom:4px;cursor:pointer;
}
/* Свёрнутая строка «Уточнить» */
.sb-more{
  display:flex;align-items:center;gap:8px;width:100%;padding:10px 0;border:0;
  background:transparent;cursor:pointer;
}
.sb-more .p2m{flex:1;text-align:left;color:var(--primary500)}
.sb-more__ic{display:flex;transition:transform .2s ease}
.sb-more__ic.on{transform:rotate(180deg)}

/* Позиция в форме обслуживания */
.mpass-part{display:flex;align-items:center;gap:10px;padding:6px 0}
.mpass-part + .mpass-part{border-top:1px solid var(--default5)}

/* Тип заметки */
.mpass-kind{
  height:32px;padding:0 12px;border-radius:8px;cursor:pointer;font-family:inherit;
  border:1px solid var(--text300);background:#fff;color:var(--text700);
  font-size:12px;font-weight:500;
}
.mpass-kind.on{border-color:var(--primary400);background:var(--primary50);color:var(--primary500)}