/* ================================================================
   Заказы клиентов: список + модалка документа.

   Размеры по стандарту, перенесённому из Финчика:
   документ с табличной частью → 1480px, высота calc(100vh - 48px),
   окно прижато к ВЕРХУ экрана, скроллится только середина.
   ================================================================ */

/* ─── Модалка заказа ──────────────────────────────────────────── */

#ordModal {
  align-items: flex-start;
  padding-top: 24px;
  padding-bottom: 24px;
  box-sizing: border-box;
}

#ordModal .modal-card {
  width: 1480px;
  max-width: 95vw;
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  padding: 0;                 /* отступы — внутри секций */
  overflow: hidden;
}

/* Не сжимаются: шапка, ошибка, футер. Растягивается только сетка. */
#ordModal .modal-title,
#ordModal .modal-error,
#ordModal .modal-ftr { flex-shrink: 0; }

#ordModal .modal-title {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border, #e5e5ea);
  background: linear-gradient(180deg, rgba(0, 122, 255, 0.04), transparent);
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

#ordModal .modal-error { margin: 12px 24px 0; }

.ord-title-badge { font-size: 11px; }

.ord-main-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);  /* minmax — иначе таблица распирает грид */
  gap: 0;
  min-height: 0;
  margin: 0;
}

.ord-side-left {
  padding: 16px 20px;
  border-right: 1px solid var(--border, #e5e5ea);
  background: var(--fill-subtle);
  overflow-y: auto;
  min-height: 0;
}

.ord-side-right {
  padding: 16px 14px 16px 20px;  /* 14px справа — под скроллбар */
  overflow-y: auto;
  min-height: 0;
}

#ordModal .modal-ftr {
  padding: 12px 24px;
  border-top: 1px solid var(--border, #e5e5ea);
  background: var(--fill-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#ordModal .modal-ftr-right { display: flex; align-items: center; gap: 8px; }

/* ─── Левая колонка: итоги ────────────────────────────────────── */

.ord-totals {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-sm, 8px);
  background: var(--card-bg);
}

.ord-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-secondary, #86868b);
}

.ord-total-row b {
  font-size: 14px;
  color: var(--text, #1d1d1f);
  font-variant-numeric: tabular-nums;
}

.ord-total-margin {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e5e5ea);
}

.ord-total-margin b { font-size: 16px; color: var(--success-fg); }
.ord-total-margin b.is-neg { color: var(--danger-fg); }
.ord-total-sub { font-size: 12px; }

.ord-cost-warn {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: var(--radius-sm, 8px);
  background: var(--warning-light);
  border: 1px solid var(--border);
  color: var(--warning-fg);
  font-size: 12px;
  line-height: 1.45;
}

.ord-closed-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--border, #e5e5ea);
  font-size: 13px;
}

.ord-closed-label { color: var(--text-secondary, #86868b); }
.ord-closed-value { font-weight: 600; }

/* Ссылка-кнопка «Создать контрагента» в подсказке под полем */
.ord-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent, #007AFF);
  cursor: pointer;
  text-decoration: underline;
}

/* ─── Правая колонка: счета ───────────────────────────────────── */

.ord-inv-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ord-inv-head-title { font-size: 15px; font-weight: 700; }

.ord-inv {
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 12px;
  background: var(--card-bg);
  overflow: hidden;
}

.ord-inv-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: var(--fill-subtle);
  border-bottom: 1px solid var(--border, #e5e5ea);
}

.ord-inv.is-collapsed .ord-inv-header { border-bottom: none; }
.ord-inv.is-collapsed .ord-inv-body { display: none; }

.ord-inv-toggle {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-secondary, #86868b);
  display: flex;
  transition: transform 0.15s ease;
}

.ord-inv.is-collapsed .ord-inv-toggle { transform: rotate(-90deg); }

.ord-inv-number { width: 150px; flex-shrink: 0; }
.ord-inv-date { width: 150px; flex-shrink: 0; }

.ord-inv-sums {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ord-inv-sum-label {
  font-size: 11px;
  color: var(--text-secondary, #86868b);
  margin-left: 8px;
}

.ord-inv-amount { font-weight: 600; }
.ord-inv-margin { font-weight: 600; color: var(--success-fg); }

.ord-inv-body { padding: 10px; }

.ord-inv-note {
  margin-bottom: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--warning-light);
  color: var(--warning-fg);
  font-size: 12px;
}

.ord-add-row { margin-top: 8px; }

.ord-empty {
  padding: 26px 16px;
  text-align: center;
  color: var(--text-secondary, #86868b);
  font-size: 13px;
  border: 1px dashed var(--border, #e5e5ea);
  border-radius: var(--radius-sm, 8px);
}

/* Компактный инпут для табличной части. В portal.css .form-control
   рассчитан на формы, в строке таблицы он слишком высокий. */
.form-control-sm {
  padding: 5px 8px;
  font-size: 13px;
  height: auto;
}

/* Таблица позиций.
   ⚠️ Селектор с элементом (.ord-items td = 0,0,1,1) бьёт class-only правила
   независимо от порядка загрузки — поэтому ширины задаём здесь же. */
.ord-items { width: 100%; margin: 0; }
.ord-items th { font-size: 11px; white-space: nowrap; }
.ord-items td { padding: 4px 6px; vertical-align: middle; }
.ord-items td.ord-c-sum,
.ord-items td.ord-c-qty,
.ord-items td.ord-c-price { font-variant-numeric: tabular-nums; }

.ord-items .ord-c-nom { width: auto; min-width: 220px; }
.ord-items .ord-c-qty { width: 100px; }
.ord-items .ord-c-price { width: 120px; }
.ord-items .ord-c-sum { width: 120px; }
.ord-items .ord-c-act { width: 40px; text-align: center; }

/* ─── Канбан заказов ──────────────────────────────────────────────
   Колонки — этапы воронки amoCRM. Перетаскивания нет: доска зеркалит
   amoCRM, этап меняют там (решение Дмитрия 2026-09-02). Поэтому карточка
   — кнопка открытия, а не draggable-элемент. */

/* Страница занимает высоту экрана: скроллятся колонки, а не документ.
   Иначе при шести колонках горизонтальная прокрутка уезжала бы вниз. */
.kb-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  min-height: 0;
}

.kb-board {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
  overflow-x: auto;   /* колонки не сжимаются, доска прокручивается вбок */
  padding-bottom: 8px;
}

.kb-col {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--fill-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Заголовок колонки — отдельная полоса, заметно отличающаяся и от тела
   колонки, и от карточек: иначе шесть-девять столбцов сливаются в сплошное
   поле и глазу не за что зацепиться. Заливка задана переменной, поэтому
   контраст сохраняется и в тёмной теме. */
.kb-col-head {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name count" "sums sums";
  gap: 4px 8px;
  padding: 11px 12px 10px;
  border-bottom: 2px solid var(--border-strong);
  background: var(--fill-strong);
}

.kb-col-name {
  grid-area: name;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-col-count {
  grid-area: count;
  font-size: 11px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 10px;
  padding: 1px 8px;
}

/* Три цифры по этапу: доход, себестоимость, маржа. Одной суммы было мало —
   по ней не видно, чего стоил этот этап. */
.kb-col-sums {
  grid-area: sums;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kb-col-sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

.kb-col-sum b {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kb-col-sum b.is-cost { font-weight: 600; color: var(--text-secondary); }
.kb-col-sum b.is-margin { color: var(--success-fg); }
.kb-col-sum b.is-margin.is-neg { color: var(--danger-fg); }

/* Итоговые этапы выделяем полосой сверху: успех и отказ читаются с одного
   взгляда, не вчитываясь в название колонки. */
.kb-col-head.is-won { box-shadow: inset 0 4px 0 var(--success); }
.kb-col-head.is-lost { box-shadow: inset 0 4px 0 var(--danger); }

.kb-col-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kb-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 11px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.kb-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.kb-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 2px;
  /* Названия сделок длинные («М-165 Ринат ул. Седина 280») — две строки
     и многоточие, иначе карточки разной высоты рвут ритм колонки. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-card-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-bottom: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.kb-card-amount { font-size: 13px; font-weight: 700; }
.kb-card-margin { font-size: 12px; font-weight: 600; }
.kb-card-margin.is-pos { color: var(--success-fg); }
.kb-card-margin.is-neg { color: var(--danger-fg); }
.kb-card-warn { margin-left: 4px; color: var(--warning); }

.kb-card-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-tertiary);
}

.kb-more {
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

/* Ссылка на сделку в amoCRM и пояснение в футере: этап меняют там, и из
   карточки должен быть прямой путь туда, иначе правило выглядит запретом
   без выхода. */
.ord-amo-link {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.ord-amo-link:hover { text-decoration: underline; }

.ord-amo-note {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-right: 6px;
}

/* ─── Фильтр колонок канбана ──────────────────────────────────────── */
/* Выпадашка узкая: в ней список этапов, а не сетка фильтров, как на
   списочных страницах. */
#kbFilterDropdown { width: 340px; }

.kb-filter-cols {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 340px;
  overflow-y: auto;
}

.kb-filter-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.kb-filter-row:hover { background: var(--fill-subtle); }

.kb-filter-name {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-filter-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--fill);
  border-radius: 9px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}

/* ─── Текст позиции из счёта и несопоставленные строки ─────────────── */
/* Под номенклатурой — как позиция названа в счёте amoCRM («Каррера»), если
   это отличается от названия номенклатуры («колормикс 40 мм»). */
.ord-row-desc {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}
.ord-row-desc:empty { display: none; }

.ord-row-unmapped td { background: var(--warning-light); }
.ord-row-unmapped .ord-row-desc { color: var(--warning-fg); }

/* ─── Ручная себестоимость позиции ────────────────────────────────── */
/* Себестоимость за единицу: либо расчётная из истории, либо введённая
   вручную. Вводится ЗА ЕДИНИЦУ, сумма по строке считается на лету. */
.ord-items .ord-c-cost { width: 150px; }

.ord-cost-auto,
.ord-cost-manual {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.ord-cost-manual .ord-mcost { width: 96px; }

/* Кнопка-переключатель мелкая и появляется ярче при наведении на строку:
   в табличной части она не должна соперничать с цифрами. */
.ord-cost-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.45;
}
.ord-items tr:hover .ord-cost-btn { opacity: 1; }
.ord-cost-btn:focus-visible { opacity: 1; }

/* Строка с ручной себестоимостью помечена: иначе через месяц непонятно,
   почему она не реагирует на правку истории себестоимости. */
.ord-row-manual td { background: var(--accent-light); }
.ord-row-manual .ord-mcost {
  border-color: var(--accent);
  font-weight: 600;
}

/* Несопоставленная строка важнее по смыслу — её фон перебивает ручной */
.ord-row-unmapped.ord-row-manual td { background: var(--warning-light); }