/* Orders UI — перенос визуальной структуры из ftl_per (stats-bar, toolbar, tbl-wrap) */

.orders-page,
.shipments-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* main-panel из ftl: колонка на всю высоту контента */
.orders-main-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
}

.orders-view-head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.orders-view-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text);
}

.orders-view-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

.orders-mapping-summary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border-light);
}

.orders-mapping-summary__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.orders-mapping-summary__warn {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-amber, #f59e0b) 12%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-amber, #f59e0b) 35%, var(--color-border));
}

.orders-mapping-summary__wrap {
  overflow: auto;
  max-height: min(220px, 32vh);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.orders-mapping-summary__table {
  width: 100%;
  font-size: 11px;
  margin: 0;
  border-collapse: collapse;
}

.orders-mapping-summary__table th,
.orders-mapping-summary__table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: top;
}

.orders-mapping-summary__table th {
  font-weight: 600;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-bg-secondary) 55%, var(--color-bg));
  position: sticky;
  top: 0;
  z-index: 1;
}

.orders-mapping-summary__col {
  font-weight: 500;
  color: var(--color-text);
  max-width: 200px;
  word-break: break-word;
}

.orders-mapping-summary__fid {
  font-family: var(--pr-font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
}

/* stats-bar */
.orders-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg-secondary) 40%, var(--color-bg)) 100%);
}

@media (max-width: 900px) {
  .orders-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.orders-stat-card {
  background: color-mix(in srgb, var(--color-blue-light) 12%, var(--color-bg-secondary));
  border-radius: var(--radius-md);
  padding: 12px 14px;
  border: 1px solid var(--color-border);
}

.orders-stat-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.orders-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.1;
}

/* Темнее для лучшего контраста на светлом фоне карточек (подписи10–11px) */
.orders-stat-val--orange {
  color: #9a3412;
}

.orders-stat-val--green {
  color: var(--color-success-strong, #15803d);
}

.orders-stat-val--blue {
  color: var(--color-blue);
}

.orders-stat-delta {
  font-size: 10px;
  margin-top: 4px;
  color: var(--color-text-sub);
  line-height: 1.35;
}

/* toolbar */
.orders-toolbar--ftl {
  display: flex;
  align-items: center;
  gap: 8px;
  row-gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--color-bg-secondary) 35%, var(--color-bg));
}

.orders-toolbar--ftl .dd {
  min-width: 140px; /* parity with old .orders-fsel */
}

.orders-toolbar--ftl .dd__btn {
  min-height: var(--pr-btn-min-height);
}

.orders-toolbar--ftl .orders-fsearch {
  min-height: var(--pr-btn-min-height);
  padding: 8px 10px;
}

.orders-toolbar-spacer {
  flex: 1;
  min-width: 8px;
}

@media (max-width: 640px) {
  .orders-toolbar--ftl {
    gap: 10px;
  }

  .orders-toolbar--ftl .orders-fsearch {
    flex: 1 1 100%;
    min-width: 0;
  }

  .orders-toolbar--ftl .orders-toolbar-spacer {
    display: none;
  }
}

.orders-fsearch {
  flex: 1 1 220px;
  min-width: 180px;
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

.orders-fsearch:focus-visible {
  border-color: var(--color-blue);
}

.orders-fsel {
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  min-width: 140px;
}

.orders-fsel:focus-visible {
  border-color: var(--color-blue);
}

.orders-muted {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.shipments-page .shipments-toolbar-retry-carriers {
  padding-left: 10px;
  padding-right: 10px;
}

/* tbtn — тот же масштаб и типографика, что .tbtn в upload.css / .btn в app.css */
.orders-tbtn {
  font-family: inherit;
  font-size: var(--pr-btn-font-size);
  font-weight: var(--pr-btn-font-weight);
  line-height: var(--pr-btn-line-height);
  letter-spacing: var(--pr-letter-spacing-ui);
  min-height: var(--pr-btn-min-height);
  padding: var(--pr-btn-padding-y) var(--pr-btn-padding-x);
  border: 1px solid var(--color-border);
  border-radius: var(--pr-btn-radius);
  cursor: pointer;
  background: var(--color-bg);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pr-btn-gap);
  white-space: nowrap;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.orders-tbtn:hover:not(:disabled) {
  background: var(--color-bg-secondary);
  border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-blue));
}

.orders-tbtn:focus-visible {
  outline: var(--pr-focus-ring);
  outline-offset: var(--pr-focus-offset);
  border-color: var(--color-blue);
}

.orders-tbtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.orders-tbtn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-muted);
}

.orders-tbtn--ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-border) 25%, transparent);
}

.orders-tbtn--secondary {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

.orders-tbtn--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-bg-secondary) 88%, var(--color-border));
  border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-blue));
}

.orders-tbtn--primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-blue) 95%, #000) 0%, var(--color-blue) 100%);
  color: #fff;
  border-color: color-mix(in srgb, var(--color-blue) 80%, #000);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-blue) 35%, transparent);
}

/* Явно переопределяем фон: иначе .orders-tbtn:hover задаёт светлый --color-bg-secondary и кнопка «белеет». */
.orders-tbtn--primary:hover:not(:disabled) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-blue) 88%, #000) 0%,
    color-mix(in srgb, var(--color-blue) 96%, #000) 100%
  );
  color: #fff;
  border-color: color-mix(in srgb, var(--color-blue) 72%, #000);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-blue) 42%, transparent);
  filter: none;
}

.orders-tbtn--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-strong);
  border-color: var(--color-danger-border);
}

.orders-tbtn--danger:hover:not(:disabled) {
  background: var(--color-danger-hover-bg);
}

.orders-counter {
  font-size: 12px;
  color: var(--color-text-muted);
}

.orders-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text);
  user-select: none;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.orders-toggle input {
  width: 14px;
  height: 14px;
  accent-color: var(--color-blue);
}

/* bulk bar */
.orders-bulk-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--color-blue-light) 45%, var(--color-bg-secondary));
  border-bottom: 1px solid color-mix(in srgb, var(--color-blue) 25%, var(--color-border));
  flex-shrink: 0;
}

.orders-bulk-bar--show {
  display: flex;
}

.orders-bulk-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-blue);
}

.orders-bulk-divider {
  width: 1px;
  height: 16px;
  background: color-mix(in srgb, var(--color-blue) 30%, var(--color-border));
}

.orders-panel-error {
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger-strong);
  font-size: 13px;
}

.orders-page.is-loading {
  opacity: 0.92;
  transition: opacity 0.15s ease;
}

/* tbl-wrap + table */
.orders-tbl-wrap {
  flex: 1;
  /* Important: allow the flex item to shrink so the table scrolls internally. */
  min-height: 0;
  /*
    Safety net: if any parent in the chain isn't height-bounded (common inside the cabinet shell),
    force the list area to stay within the viewport so the table scrolls inside this container.
  */
  max-height: calc(100vh - 360px);
  overflow: auto;
  position: relative;
  /* When there are few rows, the remaining space shouldn't look like a blank sheet. */
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    color-mix(in srgb, var(--color-bg-secondary) 55%, var(--color-bg)) 100%
  );
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

@media (max-width: 720px) {
  .orders-tbl-wrap {
    max-height: calc(100vh - 300px);
  }
}

.orders-table-scroll-hint {
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 8px 12px;
  background: color-mix(in srgb, var(--color-bg-secondary) 90%, var(--color-bg));
  border-bottom: 1px solid var(--color-border);
}

.orders-data-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

/* Автоширина колонок: числа, даты, перевозка и т.д. без обрезки; горизонтальный скролл у .orders-tbl-wrap. */
.orders-page #ordersTable {
  table-layout: auto;
}

.orders-page #ordersTable thead th,
.orders-page #ordersTable tbody td {
  overflow: visible;
}

/* Только адрес слегка ужимаем (полный текст в title у ячейки в разметке). */
.orders-page #ordersTable thead th:nth-child(7),
.orders-page #ordersTable tbody td:nth-child(7) {
  max-width: 18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Получатель — полностью, перенос по словам при длинных названиях. */
.orders-page #ordersTable thead th:nth-child(6),
.orders-page #ordersTable tbody td:nth-child(6) {
  white-space: normal;
  word-break: break-word;
  min-width: 7.5rem;
}

/* Компактные служебные колонки без переноса (чекбокс … дата / паллеты / перевозка). */
.orders-page #ordersTable thead th:nth-child(1),
.orders-page #ordersTable tbody td:nth-child(1),
.orders-page #ordersTable thead th:nth-child(2),
.orders-page #ordersTable tbody td:nth-child(2),
.orders-page #ordersTable thead th:nth-child(3),
.orders-page #ordersTable tbody td:nth-child(3),
.orders-page #ordersTable thead th:nth-child(4),
.orders-page #ordersTable tbody td:nth-child(4),
.orders-page #ordersTable thead th:nth-child(5),
.orders-page #ordersTable tbody td:nth-child(5),
.orders-page #ordersTable thead th:nth-child(8),
.orders-page #ordersTable tbody td:nth-child(8),
.orders-page #ordersTable thead th:nth-child(9),
.orders-page #ordersTable tbody td:nth-child(9),
.orders-page #ordersTable thead th:nth-child(10),
.orders-page #ordersTable tbody td:nth-child(10),
.orders-page #ordersTable thead th:nth-child(11),
.orders-page #ordersTable tbody td:nth-child(11) {
  white-space: nowrap;
}

.orders-page #ordersTable tbody td {
  vertical-align: middle;
}

.orders-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg-secondary) 55%, var(--color-bg)) 0%,
    var(--color-bg-secondary) 100%
  );
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

.orders-data-table tbody td {
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  padding: 8px 10px;
  background: var(--color-bg);
}

.orders-chk-col {
  width: 36px;
  text-align: center;
  vertical-align: middle;
}

.orders-chk-col input {
  width: 15px;
  height: 15px;
  accent-color: var(--color-blue);
}

.orders-col-carrier {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-state-empty {
  text-align: center;
  padding: 28px 16px !important;
  vertical-align: middle !important;
}

.orders-state-empty-inner {
  max-width: 420px;
  margin: 0 auto;
}

.orders-state-empty-text {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin-bottom: 14px;
}

.orders-state-empty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.orders-row {
  cursor: pointer;
}

.orders-row:hover td {
  background: color-mix(in srgb, var(--color-border) 14%, var(--color-bg));
}

.orders-row:focus-visible {
  /* On table rows, outline can render as per-cell borders in some browsers.
     Keep focus indication subtle and consistent with active-row styling. */
  outline: none;
}

.orders-row--active td {
  background: color-mix(in srgb, var(--color-blue) 14%, var(--color-bg)) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-blue) 65%, transparent);
}

.orders-split {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  --orders-split-dur: 0.34s;
  --orders-split-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.orders-split__list {
  min-width: 0;
}

/* Сброс переходов при смене маршрута / первом рендере (см. setDetailPanelOpen(..., { instant: true })). */
.orders-split.orders-split--no-split-anim {
  transition: none !important;
}

.orders-split.orders-split--no-split-anim .orders-split__detail,
.orders-split.orders-split--no-split-anim .orders-split__list {
  transition: none !important;
}

@media (min-width: 1100px) {
  .orders-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0fr;
    align-items: stretch;
    gap: 0;
    transition: grid-template-columns var(--orders-split-dur) var(--orders-split-ease);
  }

  .orders-split.orders-split--detail-open {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    border-top: 1px solid var(--color-border);
  }

  .orders-split.orders-split--detail-open .orders-split__list {
    border-right: 1px solid var(--color-border);
  }

  .orders-split.orders-split--detail-open .orders-tbl-wrap {
    max-height: none;
  }

  /*
   * Вторая колонка 0fr не убирает вклад контента в высоту строки грида — строка тянется по высоте
   * скрытой карточки и под таблицей остаётся пустая зона. Закрытое состояние: max-height: 0.
   */
  .orders-split .orders-split__detail {
    margin: 0;
    border-radius: 0;
    min-width: 0;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    transition:
      max-height var(--orders-split-dur) var(--orders-split-ease),
      opacity 0.22s var(--orders-split-ease),
      visibility 0s linear var(--orders-split-dur);
  }

  .orders-split.orders-split--detail-open .orders-split__detail {
    /* Достаточно для внутреннего overflow:auto; не «none» — чтобы анимировать max-height. */
    max-height: min(100dvh, 3200px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: auto;
    transition:
      max-height var(--orders-split-dur) var(--orders-split-ease),
      opacity 0.24s var(--orders-split-ease) 0.05s,
      visibility 0s linear 0s;
  }

  .orders-split.orders-split--detail-open .orders-split__detail .card-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }
}

@media (max-width: 1099px) {
  .orders-split .orders-split__detail {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    margin: 0 16px;
    transition:
      max-height var(--orders-split-dur) var(--orders-split-ease),
      opacity 0.2s ease,
      margin var(--orders-split-dur) var(--orders-split-ease),
      visibility 0s linear var(--orders-split-dur);
  }

  .orders-split.orders-split--detail-open .orders-split__detail {
    opacity: 1;
    visibility: visible;
    max-height: min(85vh, 1600px);
    margin: 14px 16px 16px;
    pointer-events: auto;
    overflow: auto;
    transition:
      max-height var(--orders-split-dur) var(--orders-split-ease),
      opacity 0.22s ease 0.04s,
      margin var(--orders-split-dur) var(--orders-split-ease),
      visibility 0s linear 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orders-split {
    --orders-split-dur: 0.01ms;
  }
}

.orders-row-actions {
  cursor: default;
}

.orders-row-actions .btn {
  cursor: pointer;
}

.orders-details-panel {
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

.orders-details-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.orders-details-panel__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.orders-filter-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-blue) 12%, var(--color-border));
  background: color-mix(in srgb, var(--color-bg-secondary) 80%, var(--color-bg));
  flex-shrink: 0;
}

.orders-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.orders-fsel--wide {
  min-width: 200px;
  max-width: min(360px, 100%);
}

.orders-fsel--date {
  min-width: 140px;
}

.orders-file-link {
  font-weight: 700;
  color: var(--color-blue);
  text-decoration: none;
}

.orders-file-link:hover {
  text-decoration: underline;
}

.orders-file-cell {
  white-space: nowrap;
}

.orders-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.orders-detail-meta-table {
  margin-bottom: 16px;
}

.orders-detail-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px 14px;
  margin-bottom: 14px;
}

.orders-detail-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.orders-detail-field--full {
  grid-column: 1 / -1;
}

.orders-detail-field__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.orders-detail-input,
.orders-detail-textarea {
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  width: 100%;
  box-sizing: border-box;
}

.orders-detail-input--warn {
  border-color: color-mix(in srgb, var(--color-danger-border) 40%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger-bg) 25%, var(--color-bg));
}

.orders-detail-textarea {
  resize: vertical;
  min-height: 52px;
  font-family: inherit;
}

.orders-detail-form-actions {
  margin-bottom: 20px;
}

.orders-detail-readonly-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}

.orders-mapped-col {
  color: var(--color-text-muted);
  font-size: 12px;
  margin-left: 6px;
  white-space: nowrap;
}

.orders-detail-history-title {
  font-size: 13px;
  font-weight: 700;
  margin: 8px 0 10px;
  color: var(--color-text);
}

.orders-detail-history-wrap {
  overflow: auto;
  max-height: min(360px, 40vh);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Alerts & details (прежние блоки) */
.orders-alert {
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin: 0 0 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.orders-alert__title {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--color-text);
}

.orders-alert--danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger-strong);
}

.orders-alert--warn {
  border-color: color-mix(in srgb, var(--color-border) 65%, var(--color-bg));
  background: color-mix(in srgb, var(--color-bg-secondary) 70%, var(--color-bg));
}

.orders-validation-list {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text);
}

.orders-validation-list li {
  margin: 4px 0;
}

.orders-json {
  margin: 0;
  max-width: 720px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  line-height: 1.35;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-border) 12%, var(--color-bg));
  color: var(--color-text);
}

.orders-events-details {
  max-width: 720px;
  vertical-align: top;
}

.orders-detail-meta--summary {
  margin-bottom: 14px;
}

.orders-detail-section {
  margin-bottom: 18px;
}

.orders-detail-section-title {
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.orders-detail-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px 14px;
  margin: 0 0 14px;
  background: color-mix(in srgb, var(--color-bg-secondary) 25%, var(--color-bg));
}

.orders-detail-fieldset legend {
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
  color: var(--color-text);
}

.orders-detail-form-lead {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 14px;
  line-height: 1.45;
}

.orders-req {
  color: var(--color-danger-strong, #b91c1c);
  font-weight: 800;
  text-decoration: none;
}

.orders-detail-readonly-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.orders-detail-tech {
  margin: 8px 0 18px;
  font-size: 12px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  background: color-mix(in srgb, var(--color-border) 8%, var(--color-bg));
}

.orders-detail-tech summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-muted);
}

.orders-detail-tech-hint {
  font-size: 11px;
  color: var(--color-text-sub);
  margin: 8px 0 6px;
}

.orders-detail-tech-table th {
  width: 42%;
  font-size: 11px;
}

.orders-pooling-link {
  font-weight: 600;
  color: var(--color-blue);
  text-decoration: none;
}

.orders-pooling-link:hover {
  text-decoration: underline;
}

.orders-event-detail-lines {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-text);
}

.orders-event-detail-lines li {
  margin: 2px 0;
}

.orders-history-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
  padding: 14px 10px;
}

/* ── Перевозки (группы по shipment_id) ─────────────────────────────────────── */

.shipments-page {
  --shipments-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --shipments-dur: 0.32s;
  --shipments-card-gap: 12px;
  --shipments-card-bg: color-mix(in srgb, var(--color-bg-secondary) 38%, var(--color-bg));
  --shipments-card-bg-hover: color-mix(in srgb, var(--color-bg-secondary) 52%, var(--color-bg));
  --shipments-card-radius: var(--radius-md);
}

.shipments-page .orders-view-head {
  padding: 18px 20px 14px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg-secondary) 22%, var(--color-bg)) 0%,
    var(--color-bg) 100%
  );
}

.shipments-page .orders-view-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px;
}

.shipments-page .orders-view-sub {
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 72ch;
  color: color-mix(in srgb, var(--color-text-muted) 88%, var(--color-text));
}

.shipments-page .orders-view-sub code {
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-border) 35%, var(--color-bg-secondary));
  border: 1px solid var(--color-border-light);
}

/* shipments toolbar: removed global draft shipping type control */

/* Карточные строки: отступ «ленты», скругления, hover без ломки expand-пары */

.shipments-page .orders-data-table {
  /* Use native table spacing instead of per-cell hacks (fixes “staircase” artifacts). */
  border-collapse: separate;
  border-spacing: 0 var(--shipments-card-gap);
}

.shipments-page .orders-data-table tbody tr[data-shipment-id] td {
  background: var(--shipments-card-bg);
  border-bottom: none;
  padding: 12px 14px;
  vertical-align: middle;
  transition:
    background var(--shipments-dur) var(--shipments-ease);
}

.shipments-page .orders-data-table tbody tr[data-shipment-id] td:first-child {
  border-top-left-radius: var(--shipments-card-radius);
  border-bottom-left-radius: var(--shipments-card-radius);
}

.shipments-page .orders-data-table tbody tr[data-shipment-id] td:last-child {
  border-top-right-radius: var(--shipments-card-radius);
  border-bottom-right-radius: var(--shipments-card-radius);
}

.shipments-page .orders-data-table tbody tr.shipments-row--expanded[data-shipment-id] td:first-child {
  border-bottom-left-radius: 0;
}

.shipments-page .orders-data-table tbody tr.shipments-row--expanded[data-shipment-id] td:last-child {
  border-bottom-right-radius: 0;
}

.shipments-page .orders-data-table tbody tr[data-shipment-id]:hover td {
  background: var(--shipments-card-bg-hover);
}

.shipments-page .orders-data-table tbody tr[data-shipment-id]:active td {
  background: color-mix(in srgb, var(--color-border) 12%, var(--shipments-card-bg-hover));
}

/* Мягкая подсветка строки, выбранной по shipmentId в хеше (переход из «Заказы» и т.п.) */
.shipments-row--active > td {
  background: color-mix(in srgb, var(--color-blue-light) 14%, var(--shipments-card-bg)) !important;
}

/* Тонкая полоса слева — один раз на первой ячейке */
.shipments-row--active > td:first-child {
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--color-blue) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--color-border) 40%, transparent);
}

.shipments-page .orders-data-table tbody tr.shipments-row--active[data-shipment-id]:hover > td {
  background: color-mix(in srgb, var(--color-blue-light) 20%, var(--shipments-card-bg-hover)) !important;
}

.shipments-col-compact {
  max-width: 220px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.shipments-col-statuses {
  max-width: 240px;
}

.shipments-col-recipients {
  max-width: 190px;
}

.shipments-col-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.shipments-col-link {
  vertical-align: middle;
  text-align: right;
}

.shipments-row-link {
  font-size: 11px;
  padding: 5px 10px;
}

.shipments-page .shipments-col-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.shipments-page .shipments-col-link .orders-tbtn {
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease;
}

/* Ghost button in row looked too “sharp” on changing row background. */
.shipments-page .shipments-row-link.orders-tbtn--ghost {
  background: color-mix(in srgb, var(--color-bg) 60%, var(--color-bg-secondary));
  border-color: color-mix(in srgb, var(--color-border) 75%, transparent);
  color: var(--color-text);
}

.shipments-page .shipments-row-link.orders-tbtn--ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-bg-secondary) 85%, var(--color-border));
  border-color: color-mix(in srgb, var(--color-border) 65%, var(--color-blue));
}

.shipments-page .import-mapping-bottom-bar,
.shipments-page [data-el="bottomBar"] {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: auto;
  box-shadow: 0 -8px 22px rgba(18, 52, 122, 0.07);
  background: var(--color-bg);
}

.shipments-page .import-mapping-bottom-bar > .card-body.import-mapping-bottom-bar__body {
  padding: 8px 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.shipments-page .import-mapping-bottom-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.shipments-page .import-mapping-bottom-bar__row--actions {
  flex: 1 1 260px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.shipments-page .import-mapping-bottom-bar__status {
  flex: 1 1 220px;
  min-width: 0;
  margin-right: auto;
  text-align: left;
}

.shipments-page .import-mapping-bottom-bar__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.shipments-page .import-mapping-bottom-bar__buttons .tbtn {
  padding: 7px 12px;
  font-size: 12px;
}

.shipments-open-btn {
  padding: 6px 12px;
  font-size: 12px;
}

.shipments-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg) 70%, var(--color-bg-secondary));
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  color: var(--color-text-muted);
  line-height: 1;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-border) 25%, transparent);
  transition:
    background var(--shipments-dur) var(--shipments-ease),
    border-color var(--shipments-dur) var(--shipments-ease),
    color var(--shipments-dur) var(--shipments-ease),
    box-shadow var(--shipments-dur) var(--shipments-ease),
    transform 0.18s var(--shipments-ease);
}

.shipments-expand-btn:hover {
  background: color-mix(in srgb, var(--color-blue-light) 35%, var(--color-bg));
  border-color: color-mix(in srgb, var(--color-blue) 35%, var(--color-border));
  color: var(--color-text);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-blue) 18%, transparent);
}

.shipments-expand-btn:active {
  transform: scale(0.96);
}

.shipments-expand-btn:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--color-blue) 45%, var(--color-border));
}

.shipments-expand-cell {
  padding: 0 !important;
  vertical-align: top;
  background: transparent !important;
  border-bottom-left-radius: var(--shipments-card-radius);
  border-bottom-right-radius: var(--shipments-card-radius);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-border) 55%, transparent);
  overflow: hidden;
}

.shipments-expand-inner {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  animation: shipments-panel-reveal var(--shipments-dur) var(--shipments-ease) forwards;
  will-change: opacity, transform;
}

@keyframes shipments-panel-reveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.shipments-expand-panel {
  padding: 14px 16px 16px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg-secondary) 55%, var(--color-bg)) 0%,
    color-mix(in srgb, var(--color-bg-secondary) 32%, var(--color-bg)) 100%
  );
  border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
}

.shipments-expand-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.shipments-expand-head strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

.shipments-expand-head--route {
  margin-top: 4px;
  padding-top: 12px;
  margin-bottom: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
}

.shipments-expand-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.shipments-route-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}

.shipments-route-save {
  flex-shrink: 0;
}

.shipments-route-msg {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
  min-height: 1.4em;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-secondary) 55%, var(--color-bg));
  border: 1px solid var(--color-border-light);
  transition:
    opacity 0.22s var(--shipments-ease),
    border-color 0.22s ease,
    background 0.22s ease;
}

.shipments-route-msg:not(:empty) {
  color: var(--color-text);
  animation: shipments-status-in 0.28s var(--shipments-ease);
}

@keyframes shipments-status-in {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.shipments-mini-wrap {
  overflow: auto;
  max-height: min(260px, 36vh);
  border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-bg-secondary) 50%, transparent);
}

.shipments-mini-wrap .shipments-mini-table {
  font-size: 10.5px;
  margin: 0;
}

.shipments-mini-wrap .shipments-mini-table th,
.shipments-mini-wrap .shipments-mini-table td {
  padding: 5px 8px;
}

.shipments-mini-wrap .shipments-mini-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--color-text-muted);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg-secondary) 70%, var(--color-bg)) 0%,
    var(--color-bg-secondary) 100%
  );
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 40%, transparent);
}

.shipments-mini-wrap .shipments-mini-table tbody tr:hover td {
  background: color-mix(in srgb, var(--color-border) 8%, var(--color-bg));
}

.shipments-mini-wrap .shipments-mini-table .orders-detail-input {
  padding: 5px 8px;
  font-size: 11px;
}

.shipments-mini-wrap .shipments-mini-table .orders-detail-input--warn {
  border-color: color-mix(in srgb, var(--color-amber, #f59e0b) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-amber, #f59e0b) 10%, var(--color-bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-amber, #f59e0b) 18%, transparent);
}

.shipments-mini-wrap .shipments-mini-table .orders-detail-input--warn:focus-visible {
  border-color: color-mix(in srgb, var(--color-amber, #f59e0b) 70%, var(--color-blue));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-amber, #f59e0b) 22%, transparent);
}

/* Loading: мягкое затемнение + лёгкий shimmer (только перевозки) */

.shipments-page.is-loading .orders-tbl-wrap {
  position: relative;
}

.shipments-page.is-loading .orders-data-table tbody {
  opacity: 0.52;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.shipments-page.is-loading .orders-tbl-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 36px;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in srgb, var(--color-bg-secondary) 55%, transparent) 45%,
    color-mix(in srgb, var(--color-blue-light) 40%, transparent) 50%,
    color-mix(in srgb, var(--color-bg-secondary) 55%, transparent) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shipments-shimmer 1.15s ease-in-out infinite;
  opacity: 0.35;
}

@keyframes shipments-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shipments-page .orders-data-table tbody tr[data-shipment-id] td,
  .shipments-expand-btn,
  .shipments-route-msg {
    transition: none;
  }

  .shipments-expand-inner {
    animation: none;
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .shipments-route-msg:not(:empty) {
    animation: none;
  }

  .shipments-page.is-loading .orders-data-table tbody {
    transition: none;
  }

  .shipments-page.is-loading .orders-tbl-wrap::after {
    animation: none;
    opacity: 0.12;
  }

  .shipments-expand-btn:active {
    transform: none;
  }
}