/* Экран «Спланировать технику» — стили прототипа редакции 7 (ТЗ 6, критерий 27).
 *
 * Файл собран из прототипа, согласованного с заказчиком: раскладка, отступы и
 * цвета перенесены как есть. Своей вёрстки здесь ровно столько, сколько
 * потребовали живые данные, — переписывать согласованный экран нельзя.
 *
 * Убрано против прототипа: полоса переключателей наброска (её роль играл
 * выдуманный набор данных), плашка «набросок», блок характеристик установки
 * (у него отдельная задача и отдельный источник) и подсветка выбранной строки
 * таблицы — строка больше ничего не переключает, а мёртвых элементов на экране
 * быть не должно (критерий 31).
 *
 * Ширина колонки — 1080 px при окне 1366 px: страница влезает без
 * горизонтальной прокрутки (критерий 30), таблица бортов прокручивается внутри
 * себя (.lof-scroll).
 */

/* ═══ токены темы консоли ═══════════════════════════════════════════════ */
:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #eef2f9;
  --border: #dde4ef;
  --border-2: #c3cfe2;
  --ink: #0f1b2d;
  --ink-2: #475569;
  --ink-3: #8494ab;
  --blue: #2563eb;
  --blue-deep: #1a49b8;
  --blue-wash: #e8effd;
  --ok: #15803d;
  --err: #b91c1c;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(15, 27, 45, .05);
  --warn: #b45309;
  --surface-3: #f7f9fc;
  --focus: #2563eb;
  --divider: #e7ecf5;
}

/* ═══ база документа ════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ═══ состояния экрана (states.css консоли) ═════════════════════════════ */
.state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  color: var(--ink-3);
  text-align: center;
  padding: 2rem;
}
.state.warn { color: var(--warn); }
.state .hint { font-size: .9rem; max-width: 60ch; }
.spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--surface-2);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty {
  padding: 2.2rem 1rem;
  text-align: center;
  color: var(--ink-3);
  font-size: .9rem;
  line-height: 1.6;
}
.state .retry {
  border: 1px solid var(--focus);
  background: var(--surface);
  color: var(--blue);
  border-radius: 6px;
  padding: .45rem 1rem;
  font-size: .9rem;
}
.state .retry:hover { background: var(--surface-3); }
.state .retry:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ═══ таблица (table.css консоли) ═══════════════════════════════════════ */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tbl th {
  text-align: left;
  color: var(--ink-3);
  border-bottom: 1px solid var(--border);
  padding: .5rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.tbl td {
  border-bottom: 1px solid var(--divider);
  padding: .5rem .7rem;
  vertical-align: top;
}

/* ═══ примитивы формы (form.css консоли) ════════════════════════════════ */
.cfg-input {
  font: 400 13px/1.4 var(--sans);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  width: 100%;
}
.cfg-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.cfg-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235a6b85' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
}
.cfg-select:hover { border-color: var(--border-2); }

/* ═══ страница ══════════════════════════════════════════════════════════ */
.lof {
  max-width: 1080px;
  margin: 0 auto;
  padding: .8rem 1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.lof-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.lof-title { font: 600 .92rem/1.3 var(--sans); color: var(--ink-2); }

.lof-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lof-panel-head {
  padding: .55rem .95rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap;
}
.lof-panel-title { font: 600 .95rem/1.3 var(--sans); color: var(--ink); }
.lof-panel-note { font-size: .78rem; color: var(--ink-3); }
.lof-panel-body { padding: .7rem .95rem .85rem; }

/* ── заказ: главный блок наверху ─────────────────────────────────────── */

.lof-order-title {
  font: 600 1.15rem/1.3 var(--sans);
  color: var(--ink);
}
.lof-order-sub {
  font-size: .85rem;
  color: var(--ink-2);
  margin-top: .1rem;
}

/* Компактная сетка «подпись сверху, значение снизу»: пары сами
   раскладываются в столько колонок, сколько влезает. */
.lof-order-grid {
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid var(--divider);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: .55rem .9rem;
}
.lof-cell dt {
  font-size: .72rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.lof-cell dd {
  margin: .05rem 0 0;
  font-size: .85rem;
  color: var(--ink);
  word-break: break-word;
}
.lof-cell dd .lof-aside {
  display: block;
  color: var(--ink-3);
  font-size: .74rem;
  line-height: 1.35;
}
.lof-cell dd b { font-weight: 600; }

/* ── блок уточнения: тип и параметры вместе, компактно ───────────────── */

.lof-form-rows { display: flex; flex-direction: column; gap: .7rem; }

/* Сегменты подтипа илососа — в один ряд, а не столбиком. */
.lof-seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .35rem;
  border: 0;
  margin: 0;
  padding: 0;
}
.lof-opt {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  padding: .4rem .55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}
.lof-opt:hover { background: var(--surface-3); }
.lof-opt input { margin: .2rem 0 0; flex: none; accent-color: var(--blue); }
.lof-opt.on { border-color: var(--blue); background: var(--blue-wash); }
.lof-opt-name { font-size: .84rem; font-weight: 500; }
.lof-opt-hint { display: block; font-size: .74rem; color: var(--ink-2); font-weight: 400; }

/* Тип техники из заказа, когда уточнять нечего. */

/* Три поля в ряд. */

.lof-chip {
  display: inline-flex;
  align-items: center;
  padding: .05rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: .74rem;
  font-weight: 500;
}
.lof-chip.shift { border-color: var(--blue); background: var(--blue-wash); color: var(--blue-deep); }
.lof-chip.tech { border-color: var(--ink-3); background: var(--surface); color: var(--ink); font-weight: 600; }
.lof-chip.gap { border-color: var(--err); color: var(--err); background: var(--surface); }
.lof-chip:empty { display: none; }

/* ── смежные заказы ──────────────────────────────────────────────────── */

.lof-multi { display: flex; flex-direction: column; gap: .4rem; }
.lof-check {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .84rem;
  cursor: pointer;
}
.lof-check input { margin: .25rem 0 0; flex: none; accent-color: var(--blue); }

.lof-linked {
  padding: .5rem .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-3);
}
.lof-linked-title { font-size: .78rem; color: var(--ink-2); margin-bottom: .35rem; }

/* Плашка смежного заказа. Техника названа прямо на ней: от неё зависит и
   подбор, и то, какие данные заказ спросит следующим шагом. */
.lof-linked-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  margin-bottom: .35rem;
}
.lof-linked-item:last-child { margin-bottom: 0; }
.lof-linked-item.on { border-color: var(--blue); }

.lof-linked-head {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  padding: .4rem .55rem;
  cursor: pointer;
}
.lof-linked-item.on .lof-linked-head { background: var(--blue-wash); border-radius: 5px 5px 0 0; }
.lof-linked-head input { margin: .28rem 0 0; flex: none; accent-color: var(--blue); }
.lof-linked-text { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.lof-linked-name { font-size: .84rem; font-weight: 500; }
.lof-linked-chips { display: flex; flex-wrap: wrap; gap: .25rem; }

/* Уточнение по смежному заказу: состав полей задаётся его техникой. */
.lof-linked-detail {
  border-top: 1px solid var(--border);
  padding: .5rem .55rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.lof-linked-detail .lof-seg { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.lof-linked .lof-opt-hint { color: var(--ink-3); }

/* ── действия и ошибки ───────────────────────────────────────────────── */

.lof-actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid var(--divider);
}
.lof-btn {
  border: 1px solid var(--border-2);
  background: var(--surface);
  border-radius: 6px;
  padding: .4rem .8rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.lof-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.lof-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.lof-btn.primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.lof-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lof-btn.sm { padding: .25rem .55rem; font-size: .79rem; }

.lof-gap-note { font-size: .8rem; color: var(--err); }
.lof-gap-note:empty { display: none; }

/* ── данные заказа ───────────────────────────────────────────────────── */

.lof-data { display: flex; flex-direction: column; gap: .4rem; }

.lof-data-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .38rem .55rem;
  background: var(--surface);
}
.lof-data-row.known {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  background: var(--surface-2);
}

/* Незаполненное в заказе видно сразу: пока это не закрыто, расчёт не идёт. */
.lof-data-row.gap { border-color: var(--err); }
.lof-data-row.done { border-color: var(--ok); }

.lof-data-label { font: 500 12.5px/1.3 var(--sans); color: var(--ink-2); }
.lof-data-value { font-size: .85rem; color: var(--ink); }
.lof-data-value b { font-weight: 600; }
.lof-data-src { color: var(--ink-3); font-size: .74rem; margin-left: .4rem; }

.lof-data-head {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}
.lof-data-flag {
  font-size: .72rem;
  font-weight: 600;
  color: var(--err);
  border: 1px solid var(--err);
  border-radius: 999px;
  padding: .02rem .4rem;
}
.lof-data-row.done .lof-data-flag { color: var(--ok); border-color: var(--ok); }
.lof-data-note { font: 400 11.5px/1.4 var(--sans); color: var(--ink-3); margin-top: .25rem; }

/* ── доступная техника ───────────────────────────────────────────────── */

.lof-host { position: relative; min-height: 200px; }
.lof-lead { font-size: .83rem; color: var(--ink-2); margin-bottom: .5rem; }
.lof-scroll { overflow-x: auto; }

.lof-best {
  display: inline-block;
  margin-bottom: .15rem;
  padding: .02rem .4rem;
  border-radius: 3px;
  background: var(--blue-wash);
  border: 1px solid var(--border-2);
  color: var(--blue-deep);
  font-size: .7rem;
  font-weight: 600;
}
.lof-board { font-weight: 600; white-space: nowrap; }
.lof-why { font-size: .79rem; color: var(--ink-2); max-width: 44ch; }

/* ── заказ в подборе ─────────────────────────────────────────────────── */

/* Каждый заказ подбирается отдельно: техника у них разная, а один борт не
   может уехать на два объекта одновременно. */
.lof-job {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: .7rem;
  overflow: hidden;
}
.lof-job.done { border-color: var(--ok); }
.lof-job-head {
  padding: .5rem .7rem;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.lof-job-title { font: 600 .88rem/1.3 var(--sans); color: var(--ink); margin-right: .4rem; }
.lof-job-object { font-size: .8rem; color: var(--ink-2); margin-top: .05rem; }
.lof-job-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.lof-job-body { padding: .55rem .7rem .7rem; }
.lof-job-pick {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .85rem;
}
.lof-job-pick .lof-opt-hint { display: inline; }
.lof-job-note { font-size: .79rem; color: var(--ink-2); margin-top: .35rem; max-width: 68ch; }
.lof-job-empty { font-size: .83rem; color: var(--warn); }

.lof-total {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding-top: .65rem;
  border-top: 1px solid var(--divider);
}
.lof-total-note { font-size: .81rem; color: var(--ink-2); }
.lof-btn:disabled { opacity: .5; cursor: not-allowed; }
.lof-btn:disabled:hover { border-color: var(--border-2); color: var(--ink-2); }

/* ── исключённые борта ───────────────────────────────────────────────── */

.lof-out {
  margin-top: .9rem;
  padding-top: .7rem;
  border-top: 1px solid var(--divider);
  font-size: .81rem;
  color: var(--ink-2);
}
.lof-out ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.lof-out li { margin-bottom: .12rem; }

/* ── подтверждение, итог, блокировка ─────────────────────────────────── */

.lof-confirm {
  padding: .7rem .8rem;
  border: 1px solid var(--warn);
  border-radius: 8px;
  background: var(--surface-3);
}
.lof-confirm-title { font: 600 .9rem/1.35 var(--sans); margin-bottom: .3rem; }
.lof-confirm ul { margin: .3rem 0 .6rem; padding-left: 1.1rem; font-size: .82rem; color: var(--ink-2); }

.lof-done {
  padding: .8rem .85rem;
  border: 1px solid var(--ok);
  border-radius: 8px;
}
.lof-done-title { font: 600 .93rem/1.35 var(--sans); color: var(--ok); margin-bottom: .3rem; }
.lof-done-text { font-size: .84rem; color: var(--ink-2); }
.lof-done dl {
  margin: .5rem 0 .7rem;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .22rem .8rem;
  font-size: .83rem;
}
.lof-done dt { color: var(--ink-3); }
.lof-done dd { margin: 0; }

.lof-block {
  padding: .75rem .85rem;
  border: 1px solid var(--warn);
  border-radius: 8px;
  background: var(--surface-3);
}
.lof-block-title { font: 600 .9rem/1.35 var(--sans); color: var(--warn); margin-bottom: .25rem; }
.lof-block p { font-size: .83rem; color: var(--ink-2); }
.lof-block .lof-btn { margin-top: .55rem; }

@media (max-width: 700px) {
  .lof { padding: .7rem .8rem 1.2rem; }
}

/* ── добавленное к прототипу ─────────────────────────────────────────── */

/* Кто вошёл: личность подтвердил бэкенд по AUTH_ID, а не страница (IV2). */
.lof-who { margin-left: auto; flex: none; font-size: .78rem; color: var(--ink-3); }

/* Красная рамка — там, где дело не в занятости парка, а в самом заказе или в
   правах: вне пилота, пробелы в заказе, отказ бэкенда словами. */
.lof-block.stop { border-color: var(--err); }
.lof-block.stop .lof-block-title { color: var(--err); }
.lof-block ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .83rem; color: var(--ink-2); }
.lof-block li { margin-bottom: .12rem; }

/* Пересчёт при смене выбора борта (ТЗ 7.7): список на экране остаётся, но
   кнопки закрыты — иначе менеджер выберет борт из уже неактуального списка. */
.lof-busy {
  font-size: .81rem;
  color: var(--warn);
  margin-bottom: .5rem;
}

/* Что записано, что пропущено и что упало после назначения (IV6). */
.lof-done ul { margin: .3rem 0 .6rem; padding-left: 1.1rem; font-size: .83rem; color: var(--ink-2); }
.lof-done li { margin-bottom: .12rem; }
.lof-done .lof-done-sub { font: 600 .84rem/1.35 var(--sans); color: var(--ink); margin-top: .5rem; }
.lof-done.failed { border-color: var(--err); }
.lof-done.failed .lof-done-title { color: var(--err); }

/* Номер запроса к ядру: по нему отказ ищут в логах, поэтому он виден целиком. */
.lof-request-id { font: 400 11.5px/1.4 var(--mono); color: var(--ink-3); word-break: break-all; }