.ds-skeleton {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef0f3 25%, #e4e7ec 37%, #eef0f3 63%);
  background-size: 400% 100%;
  animation: ds-skeleton-shimmer 1.4s ease infinite;
}

@keyframes ds-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.ds-skeleton-row {
  height: 13px;
  margin-bottom: 8px;
}

.ds-skeleton-row:last-child {
  margin-bottom: 0;
}

.ds-skeleton-card {
  padding: 14px 16px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 10px;
  margin-bottom: 10px;
}

.ds-skeleton-card:last-child {
  margin-bottom: 0;
}

/* Orders table skeleton — shown while the very first loadOrders() request is
   still in flight (see ordersLoadedOnce), instead of a blank list + "Заказов
   пока нет" flashing before real data arrives. */
.ds-orders-skeleton__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ds-border, #e5e7eb);
}

.ds-orders-skeleton__row:last-child {
  border-bottom: none;
}

.ds-orders-skeleton__thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}

.ds-orders-skeleton__col {
  flex: 1 1 auto;
  min-width: 0;
}

.ds-orders-skeleton__title {
  width: 55%;
  height: 13px;
  margin-bottom: 8px;
}

.ds-orders-skeleton__sub {
  width: 30%;
  height: 10px;
}

.ds-orders-skeleton__pill {
  width: 96px;
  height: 24px;
  border-radius: 20px;
  flex-shrink: 0;
}

.ds-orders-skeleton__meta {
  width: 70px;
  height: 12px;
  flex-shrink: 0;
}

:root {
  --ds-sidebar: #1a233a;
  --ds-sidebar-hover: #243049;
  --ds-sidebar-active: #2d3a56;
  --ds-bg: #f0f2f5;
  /* Opaque twin of --ds-bg for sticky headers/toolbars that scroll content
     passes under — --ds-bg itself can carry alpha (see terra theme), and a
     see-through sticky background lets the scrolled rows show through it. */
  --ds-bg-solid: #f0f2f5;
  --ds-surface: #ffffff;
  --ds-border: #e5e7eb;
  --ds-text: #111827;
  --ds-muted: #6b7280;
  --ds-primary: #2563eb;
  --ds-primary-dark: #1d4ed8;
  --ds-highlight-bg: #eff6ff;
  --ds-highlight-bg-strong: #dbeafe;
  --ds-highlight-border: #bfdbfe;
  --ds-primary-alpha-08: rgba(37, 99, 235, 0.08);
  --ds-primary-alpha-12: rgba(37, 99, 235, 0.12);
  --ds-primary-alpha-18: rgba(37, 99, 235, 0.18);
  --ds-primary-alpha-22: rgba(37, 99, 235, 0.22);
  --ds-primary-alpha-25: rgba(37, 99, 235, 0.25);
  --ds-primary-alpha-35: rgba(37, 99, 235, 0.35);
  --ds-primary-alpha-45: rgba(37, 99, 235, 0.45);
  --ds-success: #059669;
  --ds-success-bg: #ecfdf5;
  --ds-warning: #d97706;
  --ds-warning-bg: #fffbeb;
  --ds-danger: #dc2626;
  --ds-danger-bg: #fef2f2;
  --ds-purple: #7c3aed;
  --ds-purple-bg: #f5f3ff;
  --ds-radius: 10px;
  --ds-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  --ds-sidebar-w: 240px;
  --ds-detail-w: 360px;

  /* Tokenized former hardcodes — themes override these instead of fighting
     the base rule's specificity (see .ds-order/.ds-orders-date-filter/
     .ds-partner-tab usages below). Values match the prior hardcoded defaults
     1:1, so the "default" theme (no [data-theme] block of its own) is
     visually unchanged. */
  --ds-order-hover-bg: #f3f4f6;
  --ds-order-open-bg: #f9fafb;
  --ds-order-border-subtle: #e5e7eb;
  --ds-order-total-color: #0f172a;
  --ds-filter-active-border: #93c5fd;
  --ds-filter-active-bg: #e5ecfd;
}

* {
  box-sizing: border-box;
}

.lucide {
  width: 1em;
  height: 1em;
  stroke-width: 2;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

.icon-spin {
  animation: ds-icon-spin 1s linear infinite;
}

@keyframes ds-icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--ds-text);
  background: var(--ds-bg);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

.ds-app {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.ds-sidebar {
  width: var(--ds-sidebar-w);
  flex-shrink: 0;
  background: var(--ds-sidebar);
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
}

.ds-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Логотип — широкая композиция (1407×333) со словом «Dropship CRM» внутри,
   а не квадратная иконка. Занимает всю ширину сайдбара за вычетом отступов;
   высота считается сама из пропорций, поэтому картинку можно менять, не
   трогая стили. Текстового заголовка рядом больше нет — он был бы дублем. */
.ds-brand__icon {
  width: 100%;
  height: auto;
  border-radius: 0;
  display: block;
  overflow: visible;
  flex-shrink: 1;
}

.ds-brand__icon img {
  width: 100%;
  height: auto;
  display: block;
}

.ds-brand__title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.ds-brand__sub {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

.ds-nav {
  flex: 1;
  padding: 12px 10px;
  overflow-y: auto;
}

.ds-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  color: #d1d5db;
  margin-bottom: 4px;
  transition: background 0.15s, color 0.15s;
}

.ds-nav__item[hidden],
#ds-nav-dropshippers,
#ds-nav-settlements {
  display: none !important;
}

#ds-nav-warehouse {
  display: none !important;
}

.ds-app.is-manager #ds-nav-dropshippers,
.ds-app.is-manager #ds-nav-settlements,
.ds-app.is-manager #ds-nav-warehouse,
.ds-app.can-view-warehouse #ds-nav-warehouse,
.ds-app.is-dropshipper #ds-nav-settlements {
  display: flex !important;
}

.ds-nav__item:hover {
  background: var(--ds-sidebar-hover);
  color: #fff;
}

.ds-nav__item.is-active {
  background: var(--ds-sidebar-active);
  color: #fff;
}

.ds-nav__item .lucide {
  width: 18px;
  text-align: center;
  opacity: 0.9;
}

.ds-nav__badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ds-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Sidebar dropdown: "Мои заказы" reveals its order-status submenu based on
   its OWN .is-submenu-open state (toggled by the chevron), independent of
   .is-active — otherwise the toggle only worked while already on the
   orders page, since .is-active only applies there. Starts open (see
   front_index.html's initial markup) so the statuses are visible by default. */
.ds-nav__item-chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.7;
  border-radius: 4px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.ds-nav__item-chevron:hover {
  background: rgba(255, 255, 255, 0.12);
}

#ds-nav-orders.is-submenu-open .ds-nav__item-chevron {
  transform: rotate(180deg);
}

.ds-nav__submenu {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 8px 26px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

#ds-nav-orders.is-submenu-open + .ds-nav__submenu {
  display: flex;
}

.ds-nav__submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #9ca3af;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ds-nav__submenu-item:hover {
  background: var(--ds-sidebar-hover);
  color: #fff;
}

.ds-nav__submenu-item.is-active {
  background: var(--ds-sidebar-active);
  color: #fff;
  font-weight: 600;
}

.ds-nav__submenu-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94a3b8;
}

.ds-nav__submenu-dot--all {
  background: transparent;
  border: 1.5px solid currentColor;
  opacity: 0.55;
}

/* Место точки у «Возвраты» занимает иконка стрелки — той же ширины (7px
   исходная точка сильно меньше 14px иконки, поэтому ширину строки задаёт
   сама иконка, а не дот-плейсхолдер, как в других пунктах). */
.ds-nav__submenu-icon--returns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}

.ds-nav__submenu-icon--returns svg {
  width: 13px;
  height: 13px;
}

.ds-nav__submenu-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-nav__submenu-count {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 18px;
}

.ds-sidebar__help {
  margin: 12px;
  padding: 14px;
  border-radius: var(--ds-radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ds-sidebar__help p {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #d1d5db;
}

.ds-sidebar__help button {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: transparent;
  color: #e5e7eb;
}

.ds-sidebar__help button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ds-app.is-manager .ds-sidebar__help {
  display: none;
}

/* Main shell */
.ds-main {
  flex: 1;
  margin-left: var(--ds-sidebar-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-main.is-detail-open {
  margin-right: var(--ds-detail-w);
}

.ds-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 18px;
}

.ds-menu-btn:hover {
  background: var(--ds-bg);
  border-color: #cbd5e1;
}

.ds-sidebar-backdrop {
  display: none;
}

.ds-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.ds-topbar__left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

.ds-topbar h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}

.ds-topbar__create-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--ds-primary);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.ds-topbar__create-order[hidden] {
  display: none;
}

.ds-topbar__create-order:hover {
  background: var(--ds-primary-dark);
}

.ds-topbar__create-order:active {
  transform: scale(0.96);
}

.ds-topbar__create-order[hidden] {
  display: none !important;
}

.ds-topbar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 380px;
  flex: 1;
  padding: 0 12px;
  height: 38px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ds-muted);
}

.ds-topbar__search[hidden] {
  display: none;
}

.ds-topbar__search:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
  background: var(--ds-surface);
}

.ds-topbar__search .lucide-search {
  font-size: 14px;
  flex-shrink: 0;
}

.ds-topbar__search input {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ds-text);
  font-size: 14px;
  outline: none;
}

.ds-topbar__search input::-webkit-search-cancel-button {
  display: none;
}

.ds-topbar__search input::placeholder {
  color: var(--ds-muted);
}

.ds-topbar__search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ds-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.ds-topbar__search-clear:hover {
  background: #e2e8f0;
  color: var(--ds-text);
}

.ds-topbar__right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.ds-icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-muted);
  font-size: 16px;
}

#ds-notifications-bell {
  position: relative;
}

.ds-notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  border: 2px solid var(--ds-surface);
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.ds-notif-badge[hidden] {
  display: none;
}

.ds-notif-panel {
  width: 320px;
  max-width: calc(100vw - 16px);
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-notif-panel[hidden] {
  display: none !important;
}

.ds-notif-panel__empty {
  padding: 16px 10px;
  text-align: center;
  color: var(--ds-muted);
  font-size: 13px;
}

.ds-notif-panel__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.ds-notif-panel__item:hover {
  background: var(--ds-highlight-bg);
}

.ds-notif-panel__item--storage {
  border-left-color: #d97706;
}

.ds-notif-panel__item--refusal {
  border-left-color: #dc2626;
}

.ds-notif-panel__item-number {
  font-weight: 600;
  font-size: 13px;
}

.ds-notif-panel__item-text {
  font-size: 12px;
  color: var(--ds-muted);
}

.ds-icon-btn:hover {
  background: var(--ds-bg);
  color: var(--ds-text);
}

.ds-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ds-user__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.ds-user__avatar.has-logo {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
}

.ds-user__avatar.has-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-user__name {
  font-weight: 600;
  font-size: 13px;
}

.ds-user__role {
  font-size: 11px;
  color: var(--ds-muted);
}

/* Content */
.ds-content {
  padding: 20px 28px 32px;
  flex: 1;
}

.ds-partner-bar {
  margin-bottom: 16px;
}

.ds-partner-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid var(--ds-border);
}

.ds-partner-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -2px;
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ds-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.ds-partner-tab:hover {
  color: var(--ds-text);
  background: var(--ds-highlight-bg);
}

.ds-partner-tab.is-active {
  color: #4338ca;
  border-bottom-color: #4f46e5;
  background: var(--ds-highlight-bg);
}

.ds-partner-tab__name {
  font-weight: 500;
  color: inherit;
}

#ds-settlements-tabs {
  margin-bottom: 16px;
}

.ds-partner-tab__logo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
}

.ds-partner-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.1);
  font-size: 11px;
  font-weight: 700;
}

.ds-partner-tab.is-active .ds-partner-tab__count {
  background: var(--ds-partner-count-active-bg, rgba(79, 70, 229, 0.18));
  color: var(--ds-partner-count-active-color, #4338ca);
}

.ds-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.ds-partner-badge:hover {
  border-color: #cbd5e1;
}

.ds-partner-badge.is-active {
  border-color: #4f46e5;
  background: var(--ds-highlight-bg);
  color: #4338ca;
}

.ds-partner-badge__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.12);
  font-size: 11px;
  font-weight: 700;
  color: #4338ca;
}

.ds-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.ds-toolbar[hidden] {
  display: none !important;
}

/* ---- Массовые действия над выделенными заказами (по аналогии с Prom) ----- */
/* Панель выделения. Раньше счётчик «Выбрано: N» и «Снять выделение» жили в
   пагинаторе внизу списка, а кнопка действий — над списком: выделив заказы в
   середине длинной страницы, пользователь видел либо одно, либо другое.
   Теперь всё в одной панели, и она липкая. */
.ds-orders-bulkbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--ds-highlight-border, var(--ds-border));
  border-radius: 10px;
  background: var(--ds-highlight-bg);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.ds-orders-bulkbar__spacer {
  flex: 1 1 auto;
}

.ds-orders-selected-info {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ds-text);
  white-space: nowrap;
}

.ds-orders-selected-info[hidden] {
  display: none;
}

.ds-orders-bulkbar__clear {
  padding: 4px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}

.ds-orders-bulkbar__clear:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

.ds-orders-bulkbar__clear[hidden] {
  display: none;
}

/* Счётчик активных фильтров на кнопке «Фильтры» — скрытые панелью наличие,
   дата и «мои фильтры». Один компактный индикатор, привязанный к тому самому
   элементу управления, который эти фильтры и прячет. */
.ds-mgr-filter-block__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ds-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.ds-mgr-filter-block__count[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .ds-orders-bulkbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .ds-orders-bulkbar__spacer {
    display: none;
  }
}

.ds-orders-bulkbar[hidden] {
  display: none !important;
}

.ds-orders-bulkbar__dropdown {
  position: relative;
  display: inline-block;
}

.ds-orders-bulkbar__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--ds-primary, #7c3aed);
  border-radius: 10px;
  background: var(--ds-highlight-bg, #f5f3ff);
  color: var(--ds-primary, #7c3aed);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.ds-orders-bulkbar__trigger:hover {
  background: var(--ds-primary-alpha-18, rgba(124, 58, 237, 0.14));
}

.ds-orders-bulkbar__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--ds-primary, #7c3aed);
  color: #fff;
  flex-shrink: 0;
}

.ds-orders-bulkbar__check svg {
  width: 11px;
  height: 11px;
}

.ds-orders-bulkbar__chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}

.ds-orders-bulkbar__dropdown.is-open .ds-orders-bulkbar__chevron {
  transform: rotate(180deg);
}

.ds-orders-bulkbar__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 12px;
  background: var(--ds-surface, #fff);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
}

.ds-orders-bulkbar__menu[hidden] {
  display: none !important;
}

.ds-orders-bulkbar__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-text, #111);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.ds-orders-bulkbar__item:hover {
  background: var(--ds-highlight-bg, #f3f4f6);
}

.ds-orders-bulkbar__item .lucide {
  width: 15px;
  height: 15px;
  color: var(--ds-muted, #6b7280);
  flex-shrink: 0;
}

/* ---- Модалка выбора целевого заказа при массовом объединении ------------- */
.ds-bulk-merge-modal__list {
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 6px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 10px;
}

.ds-bulk-merge-modal__choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--ds-border, #e5e7eb);
}

.ds-bulk-merge-modal__choice:last-child {
  border-bottom: none;
}

.ds-bulk-merge-modal__choice:hover {
  background: var(--ds-highlight-bg, #f9fafb);
}

.ds-bulk-merge-modal__choice-main {
  font-weight: 700;
  flex-shrink: 0;
}

.ds-bulk-merge-modal__choice-meta {
  color: var(--ds-muted, #6b7280);
  font-size: 12px;
}

.ds-orders-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: var(--ds-surface);
}

.ds-orders-pager[hidden] {
  display: none !important;
}

.ds-orders-pager__info {
  font-size: 14px;
  color: #64748b;
}

.ds-orders-pager__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ds-orders-pager__size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #334155;
}

.ds-orders-pager__size select {
  min-width: 72px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: var(--ds-surface);
  font: inherit;
  font-size: 14px;
  color: #0f172a;
}

.ds-orders-pager__label {
  min-width: 88px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.ds-orders-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
}

.ds-orders-controls__create {
  width: 100%;
  justify-content: center;
}

.ds-orders-controls__create[hidden] {
  display: none !important;
}

.ds-orders-date-filter__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.ds-orders-date-filter__field {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--ds-muted);
}

/* Быстрые диапазоны. Лежат внутри .ds-mgr-filter-group__items (а не рядом с
   ним): группа фильтра — flex-строка ровно из двух детей, подпись + поля, и
   третий ребёнок уезжал за правый край. Внутри items стоит flex-wrap, так что
   пресеты просто становятся в строку после полей. */
.ds-date-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 4px;
}

.ds-date-preset {
  padding: 4px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
}

.ds-date-preset:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

.ds-date-preset.is-active {
  border-color: var(--ds-primary);
  background: var(--ds-highlight-bg);
  color: var(--ds-primary);
  font-weight: 600;
}

/* На мобильном items превращается в grid 1fr/1fr/auto — там пресетам нужна
   отдельная строка во всю ширину. */
@media (max-width: 900px) {
  .ds-mgr-filter-group--date .ds-date-presets {
    grid-column: 1 / -1;
    margin-left: 0;
    margin-top: 2px;
  }
}

.ds-orders-date-filter__field span {
  flex-shrink: 0;
}

.ds-orders-date-filter__field input[type="date"],
.ds-orders-date-filter__field input.form-control {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ds-text);
  font: inherit;
  font-size: 14px;
}

.ds-orders-date-filter__field input[type="date"]:focus,
.ds-orders-date-filter__field input.form-control:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
  background: var(--ds-surface);
}

.ds-orders-date-filter__reset {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .ds-mgr-filter-block {
    padding-left: 14px;
    padding-right: 14px;
    overflow: visible;
  }

  .ds-mgr-filter-group {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 0;
  }

  .ds-mgr-filter-group__head {
    flex: none;
    width: 100%;
    padding-top: 0;
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .ds-mgr-filter-group__items {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin: 0;
    padding: 0 0 2px;
  }

  .ds-mgr-filter-group__items::-webkit-scrollbar {
    display: none;
  }

  .ds-mgr-filter-group__items > button {
    flex: 0 0 auto;
  }

  .ds-mgr-filter-group--date {
    align-items: stretch;
  }

  .ds-mgr-filter-group--date .ds-mgr-filter-group__items {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  .ds-mgr-filter-group--date .ds-orders-date-filter__field {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    font-size: 11px;
  }

  .ds-mgr-filter-group--date .ds-orders-date-filter__field input[type="date"] {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 8px 8px;
    border-radius: 8px;
    font-size: 13px;
  }

  .ds-mgr-filter-group--date .ds-orders-date-filter__reset {
    grid-column: auto;
    justify-self: end;
    width: 26px;
    height: 26px;
    margin-top: 0;
  }

  .ds-warehouse-mode-bar {
    padding: 12px 14px;
  }

  .ds-warehouse-mode-bar__title {
    font-size: 14px;
  }

  .ds-warehouse-mode-bar__hint {
    font-size: 12px;
  }

  .ds-orders-header {
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .ds-orders-viewbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
  }

  .ds-orders-viewbar__actions {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
  }

  .ds-orders-viewbar__actions .ds-btn {
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  .ds-orders-viewbar__layout {
    flex-shrink: 0;
    align-self: center;
  }
}

@media (max-width: 600px) {
  .ds-mgr-filter-group--date .ds-orders-date-filter__field span {
    width: 22px;
  }
}

@media (min-width: 1024px) {
  .ds-orders-controls {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
  }

  .ds-orders-controls__create {
    width: auto;
    flex: 0 0 auto;
  }
}

.ds-orders-header {
  margin-bottom: 16px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  overflow: hidden;
}

.ds-orders-header[hidden] {
  display: none !important;
}

.ds-orders-header > :not([hidden]) + :not([hidden]) {
  border-top: 1px solid var(--ds-border);
}

.ds-warehouse-mode-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 18px;
  margin-bottom: 0;
  padding: 16px 20px;
  border: none;
  border-radius: 0;
  background: var(--ds-surface);
}

.ds-warehouse-mode-bar[hidden] {
  display: none !important;
}

.ds-warehouse-mode-bar__copy {
  flex: 1 1 200px;
  min-width: 0;
}

.ds-warehouse-mode-bar__title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.ds-warehouse-mode-bar__hint {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
}

.ds-warehouse-mode-bar__switch {
  display: inline-flex;
  flex-shrink: 0;
  gap: 8px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.ds-warehouse-mode-bar__option {
  padding: 8px 16px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: #475569;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.ds-warehouse-mode-bar__option:hover {
  border-color: #cbd5e1;
}

.ds-warehouse-mode-bar__option.is-active {
  border-color: var(--ds-filter-active-border, #93c5fd);
  background: var(--ds-filter-active-bg, #e5ecfd);
  color: var(--ds-primary);
  box-shadow: none;
}

.ds-order__warehouse-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid #93c5fd;
  border-radius: 999px;
  background: var(--ds-highlight-bg);
  color: var(--ds-primary-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
}

.ds-order__warehouse-submit:hover {
  background: var(--ds-highlight-bg-strong);
  border-color: #60a5fa;
}

.ds-order__warehouse-submit.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.ds-detail__warehouse-submit {
  margin-top: 14px;
}

.ds-drop-filter-block {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--ds-highlight-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--ds-highlight-bg-strong) 0%, var(--ds-highlight-bg) 100%);
}

.ds-drop-filter-block__head {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-primary-dark);
}

.ds-drop-filter-block__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ds-drop-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #93c5fd;
  border-radius: 12px;
  background: var(--ds-surface);
  color: #1e40af;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.ds-drop-filter:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.12);
}

.ds-drop-filter.is-active {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: #fff;
  box-shadow: 0 8px 20px var(--ds-primary-alpha-22);
}

.ds-drop-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ds-primary-alpha-12);
  font-size: 12px;
  font-weight: 700;
  color: inherit;
}

.ds-drop-filter.is-active .ds-drop-filter__count {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.ds-mgr-filter-block {
  margin-bottom: 0;
  padding: 0 20px;
  border: none;
  border-radius: 0;
  background: var(--ds-surface);
}

.ds-mgr-filter-block[hidden] {
  display: none !important;
}

.ds-mgr-filter-block__head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 12px 0;
  border: none;
  background: transparent;
  color: var(--ds-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ds-mgr-filter-block__icon {
  display: none;
}

.ds-mgr-filter-block__title {
  flex: 1 1 auto;
}

.ds-mgr-filter-block__chevron {
  width: 16px;
  height: 16px;
  color: var(--ds-muted);
  transition: transform 0.15s ease;
}

.ds-mgr-filter-block.is-collapsed .ds-mgr-filter-block__chevron {
  transform: rotate(180deg);
}

/* grid-template-rows 1fr↔0fr animates to the content's *actual* height
   smoothly in both directions — unlike a fixed max-height, which always
   transitions across the same large distance regardless of real content
   size, making open/close feel asymmetric (snappy one way, sluggish the
   other). The row wrapper does the height animation; .ds-mgr-filter-groups
   is the single grid item inside it and needs min-height:0 to actually
   shrink instead of being clipped by the grid.  */
.ds-mgr-filter-groups-wrap {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}

.ds-mgr-filter-block.is-collapsed .ds-mgr-filter-groups-wrap {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.ds-mgr-filter-groups {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ds-mgr-filter-group {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--ds-border);
}

.ds-mgr-filter-group:last-child {
  border-bottom: none;
}

.ds-mgr-filter-group--date {
  align-items: center;
}

.ds-mgr-filter-group__head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 148px;
  margin-bottom: 0;
  padding-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-muted);
}

.ds-mgr-filter-group--date .ds-mgr-filter-group__head {
  padding-top: 0;
}

.ds-mgr-filter-group__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.ds-mgr-filter-block .ds-mgr-order-filter,
.ds-mgr-filter-block .ds-mgr-availability-filter,
.ds-mgr-filter-block .ds-drop-order-filter {
  padding: 7px 14px;
  font-size: 13px;
  gap: 6px;
}

.ds-mgr-filter-block .ds-mgr-filter__count {
  min-width: auto;
  height: auto;
  padding: 0;
  margin-left: 4px;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.ds-drop-filter-block__extras {
  margin-top: 0;
}

.ds-mgr-order-filter,
.ds-mgr-availability-filter,
.ds-drop-order-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: #334155;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ds-mgr-order-filter:hover,
.ds-mgr-availability-filter:hover,
.ds-drop-order-filter:hover {
  border-color: #cbd5e1;
}

.ds-mgr-order-filter.is-active,
.ds-mgr-availability-filter.is-active,
.ds-drop-order-filter.is-active {
  border-color: #93c5fd;
  background: #e5ecfd;
  color: var(--ds-primary);
  font-weight: 600;
}

.ds-mgr-availability-filter__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.ds-mgr-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-muted);
}

.ds-mgr-order-filter.is-active .ds-mgr-filter__count,
.ds-mgr-availability-filter.is-active .ds-mgr-filter__count,
.ds-drop-order-filter.is-active .ds-mgr-filter__count {
  background: none;
  color: var(--ds-primary);
}

.ds-order-label-manage-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ds-muted);
  font-size: 12px;
  cursor: pointer;
}

.ds-order-label-manage-toggle:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.ds-user-order-label-filter__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.ds-user-order-label-filter.is-active {
  border-color: var(--ds-filter-active-border, #93c5fd);
  background: var(--ds-filter-active-bg, #e5ecfd);
  color: var(--ds-primary);
}

/* #ds-order-label-manage теперь просто .ds-modal (разметка/базовые стили —
   общие для всех модалок в приложении, см. .ds-modal/.ds-modal__dialog и
   т.д.) — здесь только то, что специфично для формы фильтров. */

.ds-order-label-manage__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ds-order-label-manage__form input[type="text"] {
  flex: 1 1 180px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  font: inherit;
}

.ds-order-label-color-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--ds-muted);
  cursor: pointer;
}

.ds-order-label-color-field input[type="color"],
.ds-order-label-manage__color-input {
  width: 30px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  cursor: pointer;
  background: none;
}

/* Убираем нативную рамку/паддинг вокруг заливки цвета в разных браузерах,
   чтобы квадратик был чисто цветом без белой каёмки внутри. */
.ds-order-label-color-field input[type="color"]::-webkit-color-swatch-wrapper,
.ds-order-label-manage__color-input::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.ds-order-label-color-field input[type="color"]::-webkit-color-swatch,
.ds-order-label-manage__color-input::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.ds-order-label-manage__preview {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-order-label-manage__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-order-label-manage__empty {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.ds-order-label-manage__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-order-label-manage__name {
  flex: 1 1 140px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  font: inherit;
}

.ds-order-label-manage__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-muted);
  cursor: pointer;
}

.ds-order-label-manage__delete:hover {
  background: #fee2e2;
  color: #b91c1c;
}

.ds-order-user-labels {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.ds-order-user-label {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  /* Фон/цвет текста теперь произвольные (см. ds-order-label-manage) и
     приходят инлайн-стилем из label.color/label.text_color — эти значения
     тут просто безопасный дефолт на случай отсутствия инлайн-стиля. */
  background: color-mix(in srgb, var(--order-label-color, #fbbf24) 18%, white);
  color: #0f172a;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.ds-order-user-label-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: #64748b;
  cursor: pointer;
}

.ds-order-user-label-picker:hover {
  border-color: #cbd5e1;
  color: var(--ds-primary);
}

.ds-order-user-label-menu-wrap {
  min-width: 180px;
  transform-origin: top left;
  animation: ds-popover-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes ds-popover-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-order-user-label-menu-wrap,
  .ds-order-ctx-menu {
    animation-duration: 0.01ms !important;
  }
}

.ds-order-user-label-menu {
  padding: 8px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

.ds-order-user-label-menu__empty {
  margin: 0;
  padding: 6px 8px;
  font-size: 12px;
  color: #64748b;
}

.ds-order-user-label-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.ds-order-user-label-menu__item:hover,
.ds-order-user-label-menu__item.is-active {
  background: var(--ds-highlight-bg);
}

.ds-order-user-label-menu__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.ds-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  font-size: 13px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ds-filter:hover {
  border-color: #cbd5e1;
}

.ds-filter.is-active {
  border-color: var(--ds-primary);
  background: var(--ds-highlight-bg);
  color: var(--ds-primary);
  font-weight: 600;
}

.ds-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-muted);
}

.ds-filter.is-active .ds-filter__count {
  background: var(--ds-primary);
  color: #fff;
}

.ds-toolbar__spacer {
  flex: 1;
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
}

.ds-btn[hidden] {
  display: none;
}

.ds-btn--primary {
  background: var(--ds-primary);
  color: #fff;
  box-shadow: 0 2px 8px var(--ds-primary-alpha-25);
}

.ds-btn--primary:hover {
  background: var(--ds-primary-dark);
}

.ds-btn--success {
  background: var(--ds-success);
  color: #fff;
}

.ds-btn--outline-primary {
  background: transparent;
  border: 1px solid var(--ds-primary);
  color: var(--ds-primary);
}

.ds-btn--outline-primary:hover {
  background: var(--ds-primary-alpha-12, rgba(234, 88, 12, .08));
}

.ds-btn--success:hover {
  background: #047857;
}

.ds-btn--danger {
  background: #dc2626;
  color: #fff;
}

.ds-btn--danger:hover {
  background: #b91c1c;
}

.ds-btn--danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Order cards */
.ds-orders-viewbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: 12px 20px;
  background: var(--ds-surface);
}

.ds-orders-viewbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ds-orders-viewbar__actions .ds-btn--ghost {
  border-radius: 8px;
  font-weight: 500;
}

.ds-orders-toggle-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ds-orders-settlement-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ds-orders-settlement-sort[hidden] {
  display: none !important;
}

.ds-orders-settlement-sort.is-active {
  color: var(--ds-primary);
  background: var(--ds-filter-active-bg, #e5ecfd);
}

.ds-orders-settlement-sort__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.8;
}

.ds-orders-toggle-all__icon {
  font-size: 12px;
  line-height: 1;
  opacity: 0.8;
}

.ds-orders-toggle-all:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ds-orders-viewbar[hidden] {
  display: none !important;
}

.ds-orders-viewbar__layout {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
}

.ds-view-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ds-muted);
  font-size: 14px;
  cursor: pointer;
}

.ds-view-toggle:hover {
  color: var(--ds-primary);
  background: #f8fafc;
}

.ds-view-toggle.is-active {
  color: var(--ds-primary);
  background: var(--ds-filter-active-bg, #e5ecfd);
}

.ds-orders-status-tabs-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ds-orders-status-tabs-row .ds-orders-viewbar {
  flex: 0 0 auto;
  padding: 0 0 8px;
  background: transparent;
}

.ds-orders-status-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
  margin: 0 0 -1px;
  padding: 0;
  border-bottom: 1px solid #e5e7eb;
  flex: 1 1 auto;
  min-width: 0;
}

.ds-orders-status-tabs[hidden] {
  display: none !important;
}

.ds-order-status-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 18px 10px 12px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: #6b7280;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.ds-order-status-tab::after {
  content: '';
  position: absolute;
  top: 0;
  right: -7px;
  bottom: 0;
  width: 14px;
  transform: skewX(16deg);
  border-radius: 0 6px 0 0;
  background: inherit;
  border-top: 0 solid transparent;
  border-right: 1px solid transparent;
  pointer-events: none;
}

.ds-order-status-tab:hover {
  color: #374151;
  background: rgba(255, 255, 255, 0.72);
}

.ds-order-status-tab[draggable="true"] {
  cursor: grab;
}

.ds-order-status-tab[draggable="true"]:active {
  cursor: grabbing;
}

.ds-order-status-tab.is-dragging {
  opacity: 0.4;
}

.ds-order-status-tab.is-active {
  z-index: 1;
  border-color: var(--ds-order-border-subtle, #e5e7eb);
  background: var(--ds-surface);
  color: var(--ds-primary);
  font-weight: 600;
}

.ds-order-status-tab.is-active::after {
  border-color: var(--ds-order-border-subtle, #e5e7eb);
  background: var(--ds-surface);
}

.ds-order-status-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
  font-size: 14px;
  color: inherit;
}

.ds-order-status-tab__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ds-order-status-tab__label {
  min-width: 0;
}

.ds-order-status-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e5e7eb;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}

.ds-order-status-tab.is-active .ds-order-status-tab__count {
  background: var(--ds-primary-alpha-12);
  color: var(--ds-primary);
}

/* Подфильтр «С ТТН» / «Без ТТН» внутри карточки статуса «Готов к отправке» —
   иконка + число, в одной строке со счётчиком общего количества, а не
   отдельной строкой текста: так карточка не растягивается по высоте. Span с
   role="button", не <button>: настоящую кнопку нельзя вложить в button,
   которым уже является вся карточка. */
.ds-order-status-tab__count-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.ds-order-status-tab__ttn-split {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.ds-order-status-tab__ttn-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease;
}

.ds-order-status-tab__ttn-btn:hover {
  transform: scale(1.05);
}

.ds-order-status-tab__ttn-btn svg,
.ds-order-status-tab__ttn-btn i {
  width: 13px;
  height: 13px;
}

.ds-order-status-tab__ttn-btn b {
  font-variant-numeric: tabular-nums;
}

.ds-order-status-tab__ttn-btn--with {
  border-color: color-mix(in srgb, #16a34a 35%, var(--ds-border));
  color: #16a34a;
}

.ds-order-status-tab__ttn-btn--with:hover,
.ds-order-status-tab__ttn-btn--with.is-active {
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 12%, var(--ds-surface));
  color: #16a34a;
}

.ds-order-status-tab__ttn-btn--without {
  border-color: color-mix(in srgb, #dc2626 30%, var(--ds-border));
  color: #dc2626;
}

.ds-order-status-tab__ttn-btn--without:hover,
.ds-order-status-tab__ttn-btn--without.is-active {
  border-color: #dc2626;
  background: color-mix(in srgb, #dc2626 12%, var(--ds-surface));
  color: #dc2626;
}

#ds-orders-view.is-table-layout .ds-orders-table-head {
  margin-top: 0;
  border: 1px solid #e5e7eb;
  border-top-left-radius: 0;
}

.ds-orders {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Колонки: [✓] Заказ · Клиент · Статус(+наличие) · Сумма · Доставка(бывш. ТТН) ·
   Оплата · Дата · ⋮. «Оплата»/«Клиент»/«Сумма» — не у всех ролей (см.
   renderOrdersTableHeadHtml/renderOrderHeadHtml): отсутствующая ячейка
   просто не попадает в DOM, а не прячется через display:none. «Наличие» и
   «Трекинг» не отдельные колонки. */
.ds-orders.is-table {
  /* Ширина «Меток» — по самой широкой строке чипов; считает JS
     (syncMarksColumnWidth), как и у «Клиента». На max-content положиться
     нельзя: шапка и строки — две сетки с разным содержимым. */
  --ds-order-marks-col: 240px;
  /* [✓]-Заказ и Дата-[⋮] должны быть прижаты друг к другу (это утилитарная
     пара, не самостоятельные колонки), а весь остаток свободной ширины —
     поровну между «настоящими» колонками. justify-content:space-between
     на всей строке такое не умеет (растягивает вообще все промежутки,
     включая крайние — см. предыдущую попытку). Вместо этого между каждой
     парой «настоящих» колонок стоит свой invisible-трек на 1fr: раз у них
     у всех одинаковый fr, каждый получает ровно одинаковую долю остатка, а
     крайние промежутки ([✓]↔Заказ, Дата↔[⋮]) вообще без такого трека —
     значит остаются на минимальном gap. Ячейки расставлены по этим тректам
     явно через grid-column ниже (по имени класса, а не по DOM-порядку) —
     так это работает независимо от того, какие колонки есть у роли. */
  --ds-order-cols:
    34px
    /* Единственный растягивающийся трек в строке. Раньше свободную ширину
       делили между собой пять невидимых распорок 1fr, и «Заказ» оставался
       узким, хотя именно ему нужно место (номер, метки-значки, миниатюра,
       подпись «N товаров»). Теперь распорки нулевые, остальные колонки
       упакованы вправо по своей ширине, а весь остаток достаётся «Заказу». */
    minmax(160px, 1fr)
    /* Распорки между колонками обнулены: расстояние между соседями задаёт
       column-gap сетки (16px с каждой стороны нулевого трека). Сами треки
       убрать нельзя — ячейки расставлены по НОМЕРАМ треков (grid-column
       ниже), и сдвиг нумерации развалил бы всю раскладку. */
    0px
    /* «Метки». Ширина ОБЯЗАНА быть независимой от содержимого: шапка и
       строки — две отдельные сетки с одним шаблоном, и любой зависящий от
       содержимого трек (fit-content, max-content, auto) считается в каждой
       по-своему. В шапке это слово «Метки», в строках — плашки; треки
       получались разной ширины, и все колонки правее разъезжались между
       заголовком и данными.

       У менеджера колонки нет в разметке — трек схлопывается переменной,
       а не типом трека. */
    var(--ds-order-marks-col)
    0px
    /* «Клиент» подстраивается под самое длинное имя. Ширину считает JS
       (syncClientColumnWidth) и кладёт в эту переменную — на max-content
       положиться нельзя: шапка и строки это ДВЕ сетки, и содержимое у них
       разное («КЛИЕНТ» против имён), поэтому треки вышли бы разной ширины
       и колонки разъехались бы. Переменная же одна на обе сетки. */
    /* Порядок колонок: Статус — Сумма — Клиент. Ширины переставлены вместе
       с ними, иначе колонка получила бы чужой размер. */
    160px
    0px
    /* Ширина по самому длинному значению суммы — считает JS
       (syncTotalColumnWidth), как у «Клиента» и «Меток». */
    var(--ds-order-total-col, 130px)
    0px
    var(--ds-order-client-col, 250px)
    0px
    /* Адрес отделения из ячейки убран — колонке больше не нужен запас на
       длинную строку; освободившееся место ушло в «Заказ», «Метки»,
       «Клиент» и «Оплата». */
    /* 190px — по замеру в браузере: самому широкому содержимому (номер ТТН
       с кнопками печати и внесения в расчёты) нужно 184px. Прежние 240px
       давали 56px пустоты справа. */
    190px
    /* Тот же фиксированный зазор, что между «Оплатой» и «Датой»: три
       колонки справа читаются как одна группа, распорка 1fr растаскивала их
       по ширине наравне с остальными. */
    0px
    /* Ширина по самой длинной подписи («При получении» / «НЕ ОПЛАЧЕНО»), а не
       с запасом: содержимое ячейки прижато влево, и лишняя ширина колонки
       читалась как пустой провал перед «Датой» — распорка тут ни при чём. */
    118px
    /* Между «Оплатой» и «Датой» — фиксированный зазор вместо распорки 1fr:
       остальные распорки делят свободную ширину поровну, и эта пара
       расходилась так же далеко, как все прочие. Освободившееся место
       автоматически уходит остальным распоркам. */
    0px
    124px
    34px;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Все ячейки — в первом ряду. Без этого авторазмещение сетки идёт по
   DOM-порядку и не возвращается назад: «Клиент» стоит в разметке раньше
   «Статуса», но занимает трек 10 — курсор уходит за него, и «Статус»
   (трек 6) уже не помещается в первый ряд, уезжая на второй. */
.ds-orders.is-table .ds-order__cell,
.ds-orders-table-head__cell {
  grid-row: 1;
}

.ds-orders.is-table .ds-order__cell--check,
.ds-orders-table-head__cell--check { grid-column: 1; }

.ds-orders.is-table .ds-order__cell--order,
.ds-orders-table-head__cell--order { grid-column: 2; }

.ds-orders.is-table .ds-order__cell--marks,
.ds-orders-table-head__cell--marks { grid-column: 4; }

.ds-orders.is-table .ds-order__cell--status,
.ds-orders-table-head__cell--status { grid-column: 6; }

.ds-orders.is-table .ds-order__cell--total,
.ds-orders-table-head__cell--total { grid-column: 8; }

.ds-orders.is-table .ds-order__cell--client,
.ds-orders-table-head__cell--client { grid-column: 10; }

.ds-orders.is-table .ds-order__cell--ttn,
.ds-orders-table-head__cell--ttn { grid-column: 12; }

.ds-orders.is-table .ds-order__cell--payment,
.ds-orders-table-head__cell--payment { grid-column: 14; }

.ds-orders.is-table .ds-order__cell--date,
.ds-orders-table-head__cell--date { grid-column: 16; }

.ds-orders.is-table .ds-order__cell--details,
.ds-orders-table-head__cell--details { grid-column: 17; }

.ds-order__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 2px;
}

.ds-order__items-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
  font-size: 12px;
  color: var(--ds-caption, var(--ds-muted));
  line-height: 1.3;
}

.ds-order__items-thumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ds-order__main-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  overflow: hidden;
  cursor: pointer;
}

.ds-order__main-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}

.ds-order__main-thumb--empty {
  color: var(--ds-muted);
  cursor: default;
}

.ds-order__main-thumb--empty i {
  width: 15px;
  height: 15px;
}

.ds-order__items-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  overflow: hidden;
  cursor: pointer;
}

.ds-order__items-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-order__items-thumb--empty {
  color: var(--ds-muted);
  cursor: default;
}

.ds-order__items-thumb--empty i {
  width: 14px;
  height: 14px;
}

.ds-order__items-caption-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ds-order__items-caption-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  min-width: 0;
  color: var(--ds-primary);
}

.ds-order__items-caption-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  white-space: nowrap;
}

.ds-order__items-caption-count i {
  width: 12px;
  height: 12px;
}

.ds-order__items-caption-sep {
  color: var(--ds-border);
  font-weight: 400;
}

.ds-orders-table-head,
.ds-orders.is-table .ds-order__head {
  display: grid;
  grid-template-columns: var(--ds-order-cols);
  align-items: center;
  justify-items: center;
  gap: 12px 8px;
}

.ds-orders-table-head {
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 10px;
}

.ds-orders-table-head__cell {
  width: 100%;
}

.ds-orders-table-head__cell--order {
  justify-self: start;
  text-align: left;
}

.ds-orders-table-head__cell:not(.ds-orders-table-head__cell--order):not(.ds-orders-table-head__cell--details) {
  text-align: center;
}

.ds-orders-table-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.ds-orders.is-table .ds-order__head {
  padding: 10px 14px;
  transition: background 0.2s ease;
}

.ds-orders.is-table .ds-order__head:hover,
.ds-orders.is-table .ds-order.is-status-new .ds-order__head:hover {
  background: var(--ds-order-hover-bg, #f3f4f6);
}

.ds-orders.is-table .ds-order__cell {
  min-width: 0;
  width: 100%;
}

.ds-orders.is-table .ds-order__cell--order {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  text-align: left;
}

.ds-orders.is-table .ds-orders-table-body > .ds-order {
  transition: margin 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.ds-orders.is-table .ds-orders-table-body > .ds-order.is-open {
  margin: 12px 0;
  border-radius: 10px;
}

.ds-orders.is-table .ds-order__cell--order .ds-order__chevron {
  flex: 0 0 14px;
  width: 14px;
  margin-left: 0;
  text-align: center;
}

/* Mobile-card-only cells (--total / --flags / --product) deliberately do NOT
   carry the .ds-order__cell class, so this rule never matches them and they
   stay out of the desktop grid. Excluding them via extra :not() arguments
   instead would raise this selector's specificity and start overriding the
   per-cell mobile rules (it silently re-centred the date once already). */
.ds-orders.is-table .ds-order__cell:not(.ds-order__cell--order):not(.ds-order__cell--details) {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  text-align: center;
}

.ds-orders.is-table .ds-order__cell--order .ds-order__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.ds-orders.is-table .ds-order__cell--status,
.ds-orders.is-table .ds-order__cell--avail,
.ds-orders.is-table .ds-order__cell--ttn {
  flex-wrap: wrap;
  gap: 6px;
}

.ds-orders.is-table .ds-order__avail-dots {
  justify-content: center;
}

/* Left-align (not center) so the carrier icon / TTN number / print icon /
   settlement badge slots line up vertically between order rows — centering
   a variable-width block shifts each sub-element by a different amount
   depending on which optional pieces (carrier icon, settlement badge) are
   present on that particular row. */
.ds-orders.is-table .ds-order__ttn-head,
.ds-orders.is-table .ds-order__ttn-head-actions {
  justify-content: flex-start;
}

.ds-orders.is-table .ds-line-availability-picker {
  margin: 0 auto;
}

.ds-orders.is-table .ds-line-availability-trigger {
  min-width: 0;
}

.ds-orders.is-table .ds-order__avail-dots-label {
  display: none;
}

/* Was an inline style attribute — moved here so the mobile card can hide this
   copy of the warning (it shows the --flags cell version instead). */
.ds-order__dup-mark {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
}

/* Desktop shows the kebab icon only; the mobile card swaps to the text label. */
.ds-order__details-btn-label {
  display: none;
}

/* Desktop keeps the sum inside the order cell's caption line, and the duplicate
   warning inside the title, so both dedicated cells stay hidden here.
   display:none also keeps them out of the grid entirely, so --ds-order-cols
   stays a 7-column (6 for managers) track list. */
.ds-orders.is-table .ds-order__cell--total,
.ds-orders.is-table .ds-order__cell--flags,
.ds-orders.is-table .ds-order__cell--product {
  display: none;
  font-variant-numeric: tabular-nums;
}

.ds-orders.is-table .ds-order__cell--total .ds-order__total {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ds-order-total-color, #0f172a);
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
}

.ds-orders.is-table .ds-order__cell--date .ds-order__meta {
  white-space: nowrap;
}

.ds-orders.is-table .ds-order__cell--details,
.ds-orders-table-head__cell--details {
  text-align: right;
}

.ds-orders-th-sort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.ds-orders-th-sort:hover {
  color: var(--ds-text);
}

.ds-orders-th-sort.is-active {
  color: var(--ds-primary);
}

.ds-orders-th-sort__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.ds-orders.is-table .ds-order__cell--details .ds-order__details-btn {
  float: right;
}

.ds-orders.is-table .ds-order__body {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  overflow: hidden;
  min-height: 0;
  /* Ширина 0, а не «прозрачный 1px»: у свёрнутой строки эта полоса всё равно
     занимала 1px ПОД шапкой, из-за чего расстояние снизу было на пиксель
     больше, чем сверху. Линию возвращаем только раскрытой строке. */
  border-top: 0 solid transparent;
  background: transparent;
  pointer-events: none;
  transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.ds-orders.is-table .ds-order.is-open .ds-order__body {
  grid-template-rows: 1fr;
  border-top-width: 1px;
  border-top-color: var(--ds-order-border-subtle, #e5e7eb);
  background: transparent;
  pointer-events: auto;
}

.ds-orders.is-table .ds-order__body-inner {
  overflow: hidden;
  min-height: 0;
  background: var(--ds-order-open-bg, #f9fafb);
}

.ds-orders.is-table .ds-order.is-open.is-detail-active .ds-order__head {
  background: var(--ds-order-open-bg, #f9fafb);
}

@media (prefers-reduced-motion: reduce) {
  .ds-orders.is-table .ds-order__body,
  .ds-orders.is-table .ds-order__head,
  .ds-order__chevron {
    transition: none;
  }
}

/* ==========================================================================
   Mobile order card system (≤900px, applies to every theme)
   Header (order id + price) → date → status → meta (avail / items / ttn)
   → single full-width primary action. 8pt spacing, fixed type scale.
   ========================================================================== */
@media (max-width: 900px) {
  .ds-orders.is-table {
    gap: 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .ds-orders-table-head {
    display: none;
  }

  .ds-orders-table-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  /* Status rail: a 3px left edge tinted with the shipment-status colour
     (--ds-order-rail is set per card in JS). Encoding the status in the card's
     own edge makes it readable peripherally while scrolling, so the header row
     stays dedicated to the order number and the sum. Done as a border rather
     than a pseudo-element because ::before/::after on .ds-order__head are
     already load-bearing flex line-breaks, and a border keeps every row —
     including the full-width CTA — symmetrically inset with no extra padding. */
  .ds-orders.is-table .ds-order {
    border: 1px solid var(--ds-border);
    border-left: 3px solid var(--ds-order-rail, var(--ds-border));
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
  }

  .ds-orders.is-table .ds-order:last-child {
    border-bottom: 1px solid var(--ds-border);
  }

  .ds-orders.is-table .ds-order__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 16px;
  }

  /* --- Row 1 (header, primary focus): order id ............ price --- */
  .ds-orders.is-table .ds-order__cell--order {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .ds-orders.is-table .ds-order__cell--order .ds-order__title {
    font-size: 18px;
    font-weight: 680;
    letter-spacing: -0.01em;
    color: var(--ds-text);
  }

  .ds-orders.is-table .ds-order__cell--order .ds-order__chevron {
    display: none;
  }

  /* The sum lives in its own header cell on mobile — hide the duplicate that
     the caption line carries for desktop. */
  .ds-orders.is-table .ds-order__items-caption-sep,
  .ds-orders.is-table .ds-order__items-caption-sum {
    display: none;
  }

  .ds-orders.is-table .ds-order__cell--total {
    display: flex;
    order: 2;
    margin-left: auto;
    flex: 0 0 auto;
    width: auto;
    align-items: baseline;
    justify-content: flex-end;
  }

  .ds-orders.is-table .ds-order__cell--total .ds-order__total {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ds-text);
    white-space: nowrap;
  }

  /* --- Row 2 (secondary): date/time, below the header --- */
  .ds-orders.is-table .ds-order__head::before {
    content: '';
    order: 3;
    flex-basis: 100%;
    width: 0;
    height: 0;
  }

  .ds-orders.is-table .ds-order__cell--date {
    order: 4;
    flex: 0 0 auto;
    width: auto;
  }

  .ds-orders.is-table .ds-order__cell--date .ds-order__meta {
    font-size: 13px;
    color: var(--ds-caption, var(--ds-muted));
  }

  /* --- Row 3 (status line): 1-2 status pills, low-key --- */
  .ds-orders.is-table .ds-order__head::after {
    content: '';
    order: 5;
    flex-basis: 100%;
    width: 0;
    height: 0;
  }

  .ds-orders.is-table .ds-order__cell--status {
    order: 6;
    flex: 0 0 auto;
    width: auto;
  }

  /* --- Row 4 (meta): availability + TTN, wrapped together --- */
  .ds-orders.is-table .ds-order__cell--avail,
  .ds-orders.is-table .ds-order__cell--ttn {
    order: 7;
    flex: 0 0 auto;
    width: auto;
    font-size: 13px;
    color: var(--ds-caption, var(--ds-muted));
  }

  .ds-orders.is-table .ds-order__avail-dots-label {
    display: none;
  }

  .ds-orders.is-table .ds-order__items-caption-name {
    max-width: 140px;
  }

  /* One geometry for every pill in the card — the old mix of 22/24/26px heights
     and weights read as several different kinds of object. */
  .ds-orders.is-table .ds-order__head .ds-pill {
    min-height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    font-size: 12.5px;
    font-weight: 560;
    line-height: 1;
  }

  /* "Возможный дубль" is an exception, not a state — it must stay noticeable
     without competing with the shipment status pill next to it. */
  .ds-orders.is-table .ds-order__dup-mark .ds-pill {
    min-height: 22px;
    padding: 0 8px;
    font-size: 11.5px;
    font-weight: 520;
  }

  .ds-orders.is-table .ds-order__dup-mark .ds-pill__dot {
    display: none;
  }

  /* Long product names used to run to 3-4 lines and made every card a
     different height, which destroyed the rhythm of the list while scrolling. */
  .ds-orders.is-table .ds-line-product__name,
  .ds-orders.is-table .ds-order__items-caption-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: none;
    line-height: 1.35;
  }

  /* --- Row 5 (footer): single full-width primary action.
     flex-basis: 100% on the cell itself forces it onto a new line —
     no extra break element needed. --- */
  .ds-orders.is-table .ds-order__cell--details {
    order: 9;
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }

  .ds-orders.is-table .ds-order__details-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 44px — the minimum comfortable touch target; it was 40. */
    height: 44px;
    border-radius: var(--ds-radius-sm, 10px);
    background: var(--ds-primary);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    float: none;
  }
}

.ds-orders.is-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.ds-orders.is-grid .ds-order {
  position: relative;
}

.ds-orders.is-grid .ds-order.is-open {
  grid-column: 1 / -1;
}

.ds-orders.is-grid .ds-order__head {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding-right: 38px;
}

.ds-orders.is-grid .ds-order__title,
.ds-orders.is-grid .ds-order__title-wrap {
  width: 100%;
}

.ds-orders.is-grid .ds-order__items-caption-name {
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
}

.ds-orders.is-grid .ds-order__status-group {
  margin-left: 0;
}

.ds-orders.is-grid .ds-order__meta-group {
  margin-left: 0;
  width: 100%;
  justify-content: space-between;
}

.ds-orders.is-grid .ds-order__chevron {
  position: absolute;
  top: 16px;
  right: 14px;
}

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

@media (max-width: 768px) {
  .ds-orders.is-grid {
    grid-template-columns: 1fr;
  }
}

/* Уход строки при смене статуса, из-за которой она выпадает из текущего
   фильтра (вспышка → полёт к табу статуса → схлопывание) целиком делается
   через el.style.* в scheduleFilterExit (app.js) — инлайновый style
   гарантированно выигрывает у любого правила из таблицы стилей, что бы там
   ни было прописано для .ds-order. Здесь остаётся только статичный
   safety-net на случай, если рендер-цикл пересоздаст строку прямо в
   процессе анимации (тогда она хотя бы появится уже в конечном состоянии,
   а не мигнёт полностью видимой). */
.ds-order.is-filter-exiting {
  opacity: 0;
  pointer-events: none;
}

/* Короткий пульс на табе статуса, куда «улетела» строка — отвечает на
   вопрос «куда делся заказ», не заставляя искать его глазами по вкладкам. */
.ds-order-status-tab.is-status-pulse,
.ds-mgr-order-filter.is-status-pulse,
.ds-drop-order-filter.is-status-pulse {
  animation: ds-status-tab-pulse 0.65s ease;
}

@keyframes ds-status-tab-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tab-color, #94a3b8) 55%, transparent); }
  40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--tab-color, #94a3b8) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.ds-order--live-updated {
  animation: ds-live-highlight 1.2s ease;
}

.ds-live-enter {
  animation: ds-live-fade-in 0.42s ease;
}

.ds-live-exit {
  animation: ds-live-fade-out 0.32s ease forwards;
}

.ds-live-flash {
  animation: ds-live-flash 1.1s ease;
}

@keyframes ds-live-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ds-live-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes ds-live-highlight {
  0% {
    box-shadow: 0 0 0 0 var(--ds-primary-alpha-35);
  }

  45% {
    box-shadow: 0 0 0 6px var(--ds-primary-alpha-12);
  }

  100% {
    box-shadow: var(--ds-shadow);
  }
}

@keyframes ds-live-flash {
  0% {
    background-color: rgba(219, 234, 254, 0.9);
  }

  100% {
    background-color: transparent;
  }
}

.ds-order {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  border-radius: 0;
  box-shadow: var(--ds-shadow);
  overflow: hidden;
}

.ds-order__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}

.ds-order__head:hover {
  background: var(--ds-order-hover-bg, #f3f4f6);
}

.ds-order__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ds-text);
}

.ds-order__status-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 2px;
}

.ds-order__avail-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ds-order__avail-dots-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  line-height: 1;
}

.ds-order__avail-dots-list {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ds-order__avail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--avail-dot-color, #6b7280);
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  cursor: default;
}

.ds-order__avail-dot-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: #eef0f3;
  color: var(--ds-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  cursor: default;
}

.ds-order__avail-progress {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.ds-order__avail-progress-track {
  width: 100px;
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  flex-shrink: 0;
}

.ds-order__avail-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ds-primary);
  transition: width 0.2s ease;
}

.ds-order__avail-progress-label {
  min-width: 28px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ds-order__ttn-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ds-order__ttn-head-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff00;
  border: 0;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.ds-order__ttn-head-label .lucide-check-circle {
  font-size: 12px;
  color: #16a34a;
}

.ds-order__ttn-carrier-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.ds-order__ttn-carrier-icon svg {
  width: 100%;
  height: 100%;
}

.ds-order__ttn-carrier-icon--placeholder {
  visibility: hidden;
}

/* Rozetka's artwork is a circle drawn edge-to-edge in its 24x24 viewBox, while
   Nova Poshta's diamond has generous transparent margin around it — at 13px
   both render in an identically-sized box, but Rozetka's shape visually fills
   it while NP's doesn't, making rows with a Rozetka TTN look like the number
   starts further right even though the box position is the same. Shrinking
   it slightly (and centering) makes the visual weight match. */
.ds-order__ttn-carrier-icon--rozetka svg {
  width: 78%;
  height: 78%;
}

.ds-tracking-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-tracking-badge--pending {
  background: transparent;
  color: #b0b6c0;
}

.ds-tracking-badge--transit {
  background: #eff6ff;
  color: #2563eb;
}

.ds-tracking-badge--arrived {
  background: #fff7ed;
  color: #ea580c;
}

.ds-tracking-badge--success {
  background: #f0fdf4;
  color: #16a34a;
}

.ds-tracking-badge--danger {
  background: #fef2f2;
  color: #dc2626;
}

.ds-tracking-badge--locked {
  cursor: pointer;
  background: #f3f4f6;
  color: #9ca3af;
}

.ds-tracking-badge--storage-alert {
  margin-left: 6px;
  background: #fef2f2;
  color: #dc2626;
}

.ds-tracking-badge--storage-alert i {
  width: 12px;
  height: 12px;
  margin-right: 3px;
}

.ds-tracking-badge--locked:hover {
  background: #e5e7eb;
  color: #6b7280;
}

.ds-subscription-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.ds-subscription-badge[hidden] {
  display: none;
}

.ds-subscription-badge.is-active {
  background: #f0fdf4;
  color: #16a34a;
}

.ds-subscription-badge.is-inactive {
  background: #fef2f2;
  color: #dc2626;
}

.ds-billing-request__card {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 8px 0;
}

.ds-billing-request__code {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-primary, #2563eb);
  background: #eff6ff;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  margin: 4px 0 12px;
}

.ds-order__ttn-copy {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.ds-order__ttn-copy:hover {
  color: #15803d;
}

.ds-order__ttn-copy:focus {
  outline: 2px solid #86efac;
  outline-offset: 1px;
  border-radius: 2px;
}

.ds-sticker__ttn-num {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #166534;
}

.ds-order__ttn-head-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  background: var(--ds-surface);
  color: #64748b;
  font-size: 11px;
  text-decoration: none;
  flex-shrink: 0;
}

.ds-order__ttn-head-open:hover {
  border-color: var(--ds-highlight-border);
  background: var(--ds-highlight-bg);
  color: var(--ds-primary);
}

.ds-order__ttn-head-open--placeholder {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}

.ds-order__ttn-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ds-order__ttn-head-settlement--placeholder {
  display: inline-block;
  width: 28px;
  height: 24px;
  flex-shrink: 0;
}

.ds-order__ttn-head-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--ds-success, #16a34a);
  border-radius: 6px;
  background: transparent;
  color: var(--ds-success, #16a34a);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.ds-order__ttn-head-add:hover {
  background: rgba(22, 163, 74, 0.1);
}

.ds-np-summary [data-np-open-modal] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 4px;
  width: auto;
  padding: 4px 8px;
  border: 1px solid var(--ds-success, #16a34a);
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--ds-success, #16a34a);
  font-size: 12px;
  font-weight: 600;
}

.ds-np-summary [data-np-open-modal]:hover {
  background: rgba(22, 163, 74, 0.1);
}

.ds-order__settlement-import {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--ds-highlight-border);
  border-radius: 6px;
  background: var(--ds-highlight-bg);
  color: #4338ca;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
}

.ds-order__settlement-import--head {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
}

.ds-order__settlement-import:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}

.ds-order__settlement-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  background: #f0fdf4;
  color: #166534;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}

.ds-order__settlement-done--head {
  width: auto;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0 6px;
  gap: 3px;
}

.ds-order__settlement-done .lucide {
  color: #16a34a;
  font-size: 11px;
}

.ds-order__partner-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 50px !important;
  background: var(--partner-mark-bg, #eef2ff);
  color: var(--partner-mark-fg, #4338ca);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.ds-order__partner-mark--logo {
  min-width: 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50% !important;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  overflow: hidden;
}

.ds-order__partner-mark--logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ds-order__source-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 0;
}

.ds-order__source-mark .crmd-source-icon__svg {
  display: block;
}

/* В строке «Источник» иконка стоит ПЕРЕД названием (а не после номера
   заказа, как в списке) — тот же класс, поэтому просто гасим унаследованный
   margin-left и разводим отступ через gap на обёртке. */
.ds-detail__source-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ds-detail__source-value .ds-order__source-mark {
  margin-left: 0;
}

.ds-order__meta-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ds-order__meta {
  font-size: 12px;
  color: var(--ds-muted);
}

.ds-order__details-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-primary);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.ds-order__details-btn i {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}

.ds-order__details-btn:hover {
  border-color: var(--ds-highlight-border);
  background: var(--ds-highlight-bg);
}

.ds-order.is-detail-active .ds-order__head {
  background: var(--ds-highlight-bg);
}

.ds-order.is-detail-active .ds-order__details-btn {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: #fff;
}

.ds-order.is-status-new {
  background: var(--ds-surface);
  border-color: var(--ds-border);
  box-shadow: var(--ds-shadow);
}

.ds-order.is-status-new .ds-order__head {
  background: var(--ds-surface);
}

.ds-order.is-status-new .ds-order__head:hover {
  background: var(--ds-order-hover-bg, #f3f4f6);
}

.ds-order.is-archived {
  opacity: 0.92;
}

.ds-order.is-archived .ds-order__head {
  background: var(--ds-highlight-bg);
}

.ds-archive-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  font-size: 14px;
}

.ds-archive-hint[hidden] {
  display: none !important;
}

.ds-archive-hint .lucide {
  color: #64748b;
}

.ds-returns-subtabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  border-radius: 12px;
  background: #f1f5f9;
}

.ds-returns-subtabs[hidden] {
  display: none !important;
}

.ds-returns-subtab {
  margin: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ds-returns-subtab:hover {
  color: #334155;
}

.ds-returns-subtab.is-active {
  background: #fff;
  color: var(--ds-text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.ds-order__archive-btn,
.ds-order__restore-btn {
  margin-left: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.ds-order__archive-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #dc2626;
  font-size: 16px;
  line-height: 1;
}

.ds-order__archive-btn:hover {
  color: #b91c1c;
  background: #fef2f2;
}

.ds-order__restore-btn {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  color: #047857;
  border-color: #6ee7b7;
  background: #ecfdf5;
}

.ds-order__restore-btn:hover {
  background: #d1fae5;
}

.ds-detail__archive-actions .ds-order__archive-btn {
  width: auto;
  height: auto;
  padding: 8px 14px;
  font-size: 14px;
  color: #b45309;
  border: 1px solid #fcd34d;
  background: #fffbeb;
}

.ds-detail__archive-actions .ds-order__archive-btn:hover {
  color: #b45309;
  background: #fef3c7;
}

.ds-detail__archive-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-border);
}

.ds-detail__merge {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-border);
}

.ds-detail__return-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.ds-detail__return-confirmed-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0e8a5f;
  font-size: 13px;
  font-weight: 600;
}

.ds-detail__return-confirmed-note .lucide {
  width: 15px;
  height: 15px;
}

.ds-merge-form {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}

.ds-merge-form[hidden] {
  display: none !important;
}

.ds-merge-form__combo {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.ds-merge-form__input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: inherit;
  font: inherit;
  font-size: 13px;
}

.ds-merge-form__input:focus {
  outline: none;
  border-color: var(--ds-highlight-border);
}

.ds-merge-form__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.ds-merge-form__menu[hidden] {
  display: none !important;
}

.ds-merge-form__empty {
  padding: 10px;
  text-align: center;
  color: var(--ds-muted);
  font-size: 12px;
}

.ds-merge-form__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.ds-merge-form__option:hover {
  background: var(--ds-highlight-bg);
}

.ds-merge-form__option-number {
  font-weight: 600;
}

.ds-merge-form__option-total {
  color: var(--ds-muted);
  font-size: 12px;
}

.ds-order--new {
  animation: ds-order-new 2.5s ease;
}

@keyframes ds-order-new {
  0% {
    box-shadow: 0 0 0 0 var(--ds-primary-alpha-45);
  }

  30% {
    box-shadow: 0 0 0 6px var(--ds-primary-alpha-18);
  }

  100% {
    box-shadow: var(--ds-shadow);
  }
}

.ds-order__chevron {
  color: var(--ds-muted);
  transition: transform 0.2s;
}

.ds-order.is-open .ds-order__chevron {
  transform: rotate(180deg);
}

.ds-order__body {
  display: none;
  border-top: 1px solid var(--ds-border);
}

/* Mobile-only "Детали заказа" button lives inside the expanded row; hidden on
   desktop (the head's kebab button opens the panel there instead). Shown only
   under the ≤900px terra rules. */
.ds-order__body-details-btn {
  display: none;
}

.ds-order.is-open .ds-order__body {
  display: block;
  background: var(--ds-order-open-bg, #f9fafb);
}

.ds-orders.is-table .ds-order__body,
.ds-orders.is-table .ds-order.is-open .ds-order__body {
  display: grid;
}

.ds-order.is-open,
.ds-order.is-open .ds-order__head,
.ds-order.is-open .ds-order__head:hover,
.ds-order.is-open.is-status-new,
.ds-order.is-open.is-status-new .ds-order__head,
.ds-order.is-open.is-status-new .ds-order__head:hover {
  background: var(--ds-order-open-bg, #f9fafb);
}

.ds-order-private-note {
  padding: 10px 14px;
  border-top: 1px solid var(--ds-border);
  background: #f9fafb;
}

.ds-order-private-note--detail {
  margin: 28px 0 16px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
}

.ds-order-private-note__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ds-order-private-note__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
}

.ds-order-private-note__label .lucide {
  font-size: 11px;
}

.ds-order-private-note__hint {
  font-size: 11px;
  color: var(--ds-muted);
  white-space: nowrap;
}

.ds-order-private-note__input {
  display: block;
  width: 100%;
  min-height: 54px;
  max-height: 140px;
  padding: 8px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ds-text);
  resize: vertical;
  box-sizing: border-box;
}

.ds-order-private-note__input::placeholder {
  color: var(--ds-muted);
}

.ds-order-private-note__input:focus {
  outline: none;
  border-color: #cbd5e1;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
  background: var(--ds-surface);
}

.ds-order-private-note__input.is-saving {
  opacity: 0.65;
}

.ds-order-private-note-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 3px;
  color: var(--ds-muted);
  font-size: 12px;
  vertical-align: middle;
  cursor: default;
}

/* У иконки Lucide fill:none — наведение засчитывается только над тонкой
   линией обводки, курсор «проваливается» между штрихами. Отключаем события
   мыши у самого SVG, чтобы их всегда ловила span-обёртка целиком (плюс
   небольшой padding выше — сама точка попадания стала шире иконки). */
.ds-order-private-note-mark svg,
.ds-order-private-note-mark i {
  pointer-events: none;
}

/* Текст примечания раньше уходил в нативный title="" — браузерная подсказка
   без задержки и оформления. Своя версия сначала жила в ::after/::before на
   самой иконке, но строка заказа (.ds-order) держит overflow:hidden — попап,
   выходящий за верхний край строки, обрезался вместе с ней (z-index тут не
   помогает, это clipping, а не порядок наложения). Поэтому подсказка теперь
   собирается в JS и переносится в body с position:fixed — см. функцию
   initNotePreviewTooltip в app.js. */
.ds-note-preview-tooltip {
  position: fixed;
  z-index: 5000;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  white-space: pre-wrap;
  text-align: left;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px) scale(0.96);
  transform-origin: bottom center;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.15s;
}

.ds-note-preview-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--ds-note-tooltip-arrow-x, 50%);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  background: #1e293b;
  transform: rotate(45deg);
}

.ds-note-preview-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .ds-note-preview-tooltip {
    transition: none;
  }
}

.ds-detail__external-id {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ds-highlight-bg);
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

/* Prom orders link straight into the my.prom.ua cabinet; other sources keep
   the same pill as plain text, so only the link form gets an affordance. */
a.ds-detail__external-id {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

a.ds-detail__external-id:hover {
  background: var(--ds-primary, #465fff);
  color: #fff;
}

.ds-table__price {
  white-space: nowrap;
  text-align: left;
  color: #334155;
  font-variant-numeric: tabular-nums;
}

.ds-table__sum {
  white-space: nowrap;
  text-align: left;
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.ds-order__total {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ds-order__lines-total {
  display: none;
}

.ds-order__lines-total strong {
  color: #0f172a;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.ds-create-order-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-highlight-bg);
}

.ds-create-order-total__label {
  font-size: 13px;
  color: var(--ds-muted);
}

.ds-create-order-total__value {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.ds-line-row__sum {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ds-table-wrap {
  overflow-x: auto;
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ds-table th {
  text-align: left;
  padding: 10px 14px;
  background: #f9fafb;
  color: var(--ds-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--ds-border);
  white-space: nowrap;
}

.ds-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.ds-line-product {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ds-line-product__thumb {
  display: block;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: zoom-in;
  overflow: hidden;
}

.ds-line-product__thumb:hover .ds-line-product__img {
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}

.ds-line-product__img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  pointer-events: none;
}

.ds-line-product__name {
  min-width: 0;
}

.ds-table tr:last-child td {
  border-bottom: none;
}

.ds-order__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--ds-success-bg);
  border-top: 1px solid #a7f3d0;
}

.ds-order__footer p {
  margin: 0;
  font-size: 13px;
  color: #065f46;
}

.ds-order__footer p .lucide {
  margin-right: 6px;
}

/* Pills */
.ds-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: none;
}

.ds-pill--purple {
  background: var(--ds-purple-bg);
  color: var(--ds-purple);
}

.ds-pill--green {
  background: var(--ds-success-bg);
  color: var(--ds-success);
}

.ds-pill--orange {
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.ds-pill--red {
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}

.ds-pill--gray {
  background: #f3f4f6;
  color: var(--ds-muted);
}

.ds-pill--blue {
  background: var(--ds-highlight-bg);
  color: var(--ds-primary-dark);
}

/* Detail panel */
.ds-detail {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--ds-detail-w);
  height: 100vh;
  background: var(--ds-surface);
  border-left: 1px solid var(--ds-border);
  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.08);
  z-index: 30;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.ds-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 29;
  display: none;
  cursor: pointer;
}

.ds-detail-backdrop.is-visible {
  display: block;
}

.ds-detail.is-open {
  transform: translateX(0);
}

.ds-detail__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-detail__head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.ds-detail__head-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* .ds-pill sets display:inline-flex, which (being an author rule) wins over
   the `hidden` attribute's UA-stylesheet `display:none` — an empty hidden
   pill was still rendering as an invisible-but-padded box, showing up as a
   stray gap before the label-tag icon next to it. */
.ds-pill[hidden] {
  display: none !important;
}

.ds-detail__close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-muted);
  font-size: 18px;
}

.ds-detail__close:hover {
  background: var(--ds-bg);
}

/* «Действия с заказом» — кнопка-триггер в шапке карточки, под номером заказа
   (flex-basis:100% на .ds-detail-actions отправляет её на отдельную строку
   внутри flex-wrap .ds-detail__head-main). Раскрывается панелью с Печать /
   Архив / Объединить: наведением — чисто через CSS :hover, и кликом — через
   JS-класс .is-open (нужен, чтобы панель не закрывалась, пока курсор ушёл с
   триггера на саму панель или в поле ввода формы «Объединить»). */
.ds-detail-actions {
  flex: 0 0 100%;
  display: flex;
  justify-content: flex-start;
}

.ds-detail-actions__wrap {
  position: relative;
}

/* Невидимый мостик над панелью: без него курсор при движении от триггера
   вниз к панели проходит через пустой зазор (top: calc(100% + 8px) у панели)
   и hover успевает слететь с .ds-detail-actions__wrap раньше, чем долетит
   до самой панели. */
.ds-detail-actions__wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 8px;
}

.ds-detail-actions__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ds-detail-actions__trigger .lucide {
  width: 14px;
  height: 14px;
}

.ds-detail-actions__chevron {
  transition: transform 0.2s ease;
}

.ds-detail-actions__wrap:hover .ds-detail-actions__trigger,
.ds-detail-actions__wrap.is-open .ds-detail-actions__trigger {
  background: var(--ds-bg);
  color: var(--ds-text);
  border-color: var(--ds-primary, #2563eb);
}

.ds-detail-actions__wrap.is-open .ds-detail-actions__chevron {
  transform: rotate(180deg);
}

.ds-detail-actions__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 270px;
  padding: 10px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  transform-origin: top left;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92) translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.ds-detail-actions__wrap:hover .ds-detail-actions__panel,
.ds-detail-actions__wrap.is-open .ds-detail-actions__panel {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Пункты внутри панели по умолчанию сдвинуты и прозрачны — animation ниже
   проигрывает их по очереди при каждом открытии (переключение :hover/.is-open
   меняет animation-name с none на функцию заново, поэтому анимация всегда
   стартует с нуля, а не «доигрывает» с прошлого раза). */
.ds-detail-actions__item {
  opacity: 0;
  transform: translateX(10px);
}

.ds-detail-actions__wrap:hover .ds-detail-actions__item,
.ds-detail-actions__wrap.is-open .ds-detail-actions__item {
  animation: ds-detail-actions-item-in 0.22s ease forwards;
}

.ds-detail-actions__item:nth-child(1) { animation-delay: 0.02s; }
.ds-detail-actions__item:nth-child(2) { animation-delay: 0.06s; }
.ds-detail-actions__item:nth-child(3) { animation-delay: 0.1s; }

@keyframes ds-detail-actions-item-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Единый вид всех трёх пунктов — они больше не самостоятельные секции со
   своим смыслом (у архива, например, была отдельная янтарная «предупреждающая»
   раскраска и увеличенный шрифт 14px против 13px у остальных, из-за чего
   иконка внутри неё казалась крупнее соседних), а строки одного меню. Даю
   печати/архиву/объединению общие правила высоты, отступов и размера иконки —
   через специфичность (те же 2 класса в селекторе, но объявлено позже
   исходных правил) без !important. */
.ds-detail-actions__item .ds-btn {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
  height: auto;
  min-height: 38px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-sizing: border-box;
}

.ds-detail-actions__item .ds-btn:hover {
  border-color: var(--ds-primary, #2563eb);
  color: var(--ds-primary, #2563eb);
  background: var(--ds-surface);
}

.ds-detail-actions__item .ds-btn .lucide {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* .ds-order__archive-btn carries a margin-left:8px meant for its other home
   (inline next to sibling buttons in the order row) — inside this panel it's
   the only item nudged right, breaking the shared left edge. */
.ds-detail-actions__item .ds-order__archive-btn,
.ds-detail-actions__item .ds-order__restore-btn {
  margin-left: 0;
}

/* Архив и «Объединить» были верхнеуровневыми секциями тела карточки со своим
   отступом/разделителем сверху — внутри панели это просто пункты списка. */
.ds-detail-actions__item .ds-detail__archive-actions,
.ds-detail-actions__item .ds-detail__merge {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Панель уже 270px, но с полем ввода + кнопкой «Объединить» в один ряд это
   впритык — пусть кнопка переносится на свою строку, а не обрезается. */
.ds-detail-actions__item .ds-merge-form {
  flex-wrap: wrap;
}

.ds-detail-actions__item .ds-merge-form__combo {
  flex-basis: 100%;
}

.ds-detail__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px 24px;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

.ds-detail__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-detail-info-panel .ds-detail__meta:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.ds-detail-info-panel .ds-section-title:first-child {
  margin-top: 0;
}

.ds-detail__meta-row {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: start;
  column-gap: 12px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ds-text);
}

.ds-detail__meta-row .lucide {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: #c2c7d0;
}

.ds-detail__meta-row strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ds-detail__meta-row a {
  color: var(--ds-primary);
  text-decoration: none;
}

.ds-detail__meta-row a:hover {
  text-decoration: underline;
}

.ds-detail__carrier-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ds-detail__carrier-select {
  padding: 6px 8px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 8px;
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #111);
  font-size: 13px;
  cursor: pointer;
}

.ds-order__ttn-head-label--pickup {
  font-weight: 500;
  color: var(--ds-muted, #6b7280);
}

.ds-carrier-badge__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ds-carrier-badge__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ds-payment-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: none;
  color: var(--ds-text);
}

.ds-payment-received-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-muted);
  cursor: pointer;
}

.ds-messenger-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  vertical-align: middle;
}

.ds-messenger-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1;
}

.ds-messenger-link svg {
  display: block;
}

.ds-messenger-link--viber {
  background: #7360f2;
}

.ds-messenger-link--telegram {
  background: #229ed9;
}

.ds-messenger-link:hover {
  opacity: 0.85;
}

.ds-messenger-template-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text);
  cursor: pointer;
  line-height: 1.4;
}

.ds-messenger-template-btn:hover {
  background: #f9fafb;
}

.ds-messenger-template-btn .lucide {
  width: 13px;
  height: 13px;
}

.ds-template-send-hint {
  margin: 18px 0 10px;
  font-size: 12px;
  color: var(--ds-muted);
  text-align: center;
}

.ds-template-send-messengers {
  display: flex;
  gap: 12px;
}

.ds-template-send-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ds-template-send-btn svg {
  display: block;
}

.ds-template-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.ds-template-send-btn--viber {
  background: linear-gradient(135deg, #8a5cf6, #665cac);
}

.ds-template-send-btn--telegram {
  background: linear-gradient(135deg, #34aadf, #229ed9);
}

.ds-detail__hint,
.ds-detail__empty {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ds-muted);
  line-height: 1.45;
}

.ds-detail__empty {
  padding: 12px;
  border: 1px dashed var(--ds-border);
  border-radius: 8px;
  text-align: center;
}

.ds-section-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
}

.ds-order__footer--info {
  background: var(--ds-highlight-bg);
}

.ds-order__footer--info p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-order__ttn-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ds-highlight-border);
  border-radius: 6px;
  background: var(--ds-highlight-bg);
  color: var(--ds-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.ds-order__ttn-open:hover {
  background: var(--ds-highlight-bg-strong);
  border-color: #93c5fd;
}

.ds-ttn-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-ttn-status--missing {
  color: var(--ds-muted);
}

.ds-ttn-status--added {
  color: var(--ds-success);
}

.ds-ttn-add {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  box-sizing: border-box;
  overflow: hidden;
}

.ds-ttn-add__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-caption, var(--ds-muted));
  display: flex;
  align-items: center;
  gap: 6px;
}

.ds-ttn-add__divider--top {
  display: none;
}

.ds-ttn-add__title i {
  width: 14px;
  height: 14px;
}

.ds-np-recipient {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface-2, rgba(59, 130, 246, 0.04));
  max-width: 100%;
  box-sizing: border-box;
}

.ds-np-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface-2, rgba(59, 130, 246, 0.04));
  box-sizing: border-box;
  overflow: hidden;
}

.ds-np-summary__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-text);
}

.ds-np-summary__text {
  margin: 0;
  font-size: 13px;
  color: var(--ds-muted);
}

.ds-np-modal__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-np-modal__section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.ds-np-modal__section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text);
}

.ds-np-modal__field-label {
  margin: 4px 0 -4px;
  font-size: 12px;
  color: var(--ds-muted);
}

.ds-np-modal__hint {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ds-muted);
}

.ds-np-modal__hint--warn {
  padding: 8px 10px;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
}

.ds-np-modal__hint i {
  flex-shrink: 0;
  margin-top: 1px;
  width: 15px;
  height: 15px;
}

.ds-np-recipient__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.ds-np-recipient__row[hidden] {
  display: none;
}

.ds-np-recipient__field {
  position: relative;
  width: 100%;
}

.ds-np-recipient__field[hidden] {
  display: none;
}

.ds-np-recipient .ds-sku-autocomplete {
  width: 100%;
}

.ds-np-recipient__toggle {
  display: flex;
  gap: 6px;
}

.ds-np-toggle-btn {
  padding: 5px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ds-np-toggle-btn.is-active {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: #fff;
}

.ds-np-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  box-sizing: border-box;
  background: var(--ds-surface);
}

.ds-np-input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-12);
}

.ds-np-input--sm {
  flex: 0 0 70px;
}

.ds-np-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.ds-np-field--sm {
  flex: 0 0 90px;
}

.ds-np-field__label {
  font-size: 11px;
  color: var(--ds-muted);
}


.ds-ttn-number-form {
  display: grid;
  gap: 8px;
}

.ds-ttn-number-form.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

.ds-ttn-number-form__label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.ds-ttn-number-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 100%;
}

.ds-ttn-number-form__row .ds-btn {
  flex: 1 1 auto;
  min-width: 0;
}

.ds-ttn-number-form__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  font: inherit;
  font-size: 14px;
}

.ds-ttn-number-form__input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

.ds-ttn-add__divider {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--ds-muted);
}

.ds-sticker__thumb--number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #475569;
  font-size: 22px;
}

.ds-upload {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  border: 2px dashed #cbd5e1;
  border-radius: var(--ds-radius);
  padding: 28px 16px;
  text-align: center;
  color: var(--ds-muted);
  margin-bottom: 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.ds-upload:hover {
  border-color: var(--ds-primary);
  background: var(--ds-highlight-bg);
}

.ds-upload.is-dragover {
  border-color: var(--ds-primary);
  background: var(--ds-highlight-bg);
}

.ds-upload.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.ds-upload .lucide {
  font-size: 28px;
  color: var(--ds-muted);
  margin-bottom: 8px;
}

.ds-upload p {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--ds-text);
}

.ds-upload small {
  font-size: 11px;
}

.ds-sticker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.ds-sticker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
}

/* Во всю ширину сайдбара — так на мини-картинке видно хотя бы цифры номера,
   и пользователь может на глаз сверить, что загрузил тот стикер. */
.ds-sticker__thumb {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--ds-border);
  overflow: hidden;
  display: block;
  background: var(--ds-surface);
  text-decoration: none;
}

.ds-sticker__thumb:hover {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-12);
}

.ds-sticker__thumb-preview {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  overflow: hidden;
  position: relative;
  background: var(--ds-surface);
}

.ds-sticker__thumb-preview iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  background: var(--ds-surface);
}

.ds-sticker__thumb--number {
  aspect-ratio: 1 / 1.05;
}

.ds-sticker__info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.ds-sticker__info span {
  font-size: 11px;
  color: var(--ds-muted);
}

.ds-sticker__actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.ds-sticker__actions button,
.ds-sticker__actions a {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  cursor: pointer;
  text-decoration: none;
}

.ds-sticker__actions button:hover,
.ds-sticker__actions a:hover {
  color: var(--ds-primary);
  border-color: var(--ds-highlight-border);
  background: var(--ds-highlight-bg);
}

.ds-sticker__actions .is-danger:hover {
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
  border-color: #fecaca;
}

/* Timeline */
.ds-timeline-section {
  margin-top: 4px;
}

.ds-timeline-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ds-timeline-toggle:hover .ds-timeline-toggle__title {
  color: var(--ds-primary);
}

.ds-timeline-toggle__title {
  font-size: 14px;
  font-weight: 500;
}

/* Иконка-бейдж перед заголовком «Информация» — часть только terra-редизайна
   этой карточки (см. ниже), в остальных темах заголовок остаётся текстовым. */
.ds-timeline-toggle__icon {
  display: none;
}

.ds-timeline-toggle__count {
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-muted);
}

.ds-timeline-toggle__chevron {
  margin-left: auto;
  font-size: 12px;
  color: var(--ds-muted);
  transition: transform 0.2s ease;
}

.ds-timeline-section.is-expanded .ds-timeline-toggle__chevron {
  transform: rotate(180deg);
}

.ds-timeline-panel {
  display: none;
  margin-top: 12px;
}

.ds-timeline-section.is-expanded .ds-timeline-panel {
  display: block;
}

.ds-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  border-left: none;
}

.ds-timeline li {
  position: relative;
  padding: 0 0 18px 18px;
}

.ds-timeline li:last-child {
  padding-bottom: 0;
}

.ds-timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d1d5db;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #e5e7eb;
}

.ds-timeline li.is-done::before {
  background: var(--ds-success);
  box-shadow: 0 0 0 2px #a7f3d0;
}

.ds-timeline li.is-current::before {
  background: var(--ds-primary);
  box-shadow: 0 0 0 2px var(--ds-highlight-border);
}

.ds-timeline li.is-manager::before {
  background: var(--ds-primary);
  box-shadow: 0 0 0 2px var(--ds-highlight-border);
}

.ds-timeline li.is-dropshipper::before {
  background: var(--ds-success);
  box-shadow: 0 0 0 2px #a7f3d0;
}

.ds-timeline li.is-system::before {
  background: #9ca3af;
  box-shadow: 0 0 0 2px #e5e7eb;
}

.ds-timeline strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}

.ds-timeline span {
  font-size: 11px;
  color: var(--ds-muted);
}

.ds-timeline__actor {
  font-weight: 600;
  color: #4b5563;
}

.ds-footer {
  padding: 14px 28px;
  text-align: center;
  font-size: 11px;
  color: var(--ds-muted);
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface);
}

.ds-mock-badge {
  display: none;
}

/* Empty state */
.ds-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--ds-surface);
  border: 1px dashed var(--ds-border);
  border-radius: var(--ds-radius);
  color: var(--ds-muted);
}

.ds-empty .lucide {
  font-size: 36px;
  margin-bottom: 12px;
  color: #cbd5e1;
}

.ds-empty p {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-text);
}

.ds-empty span {
  font-size: 13px;
}

/* Modal */
.ds-detail[hidden] {
  display: none !important;
}

/* Every .ds-modal toggles via the native [hidden] attribute from plain JS
   (modal.hidden = true/false) at ~15 call sites across app.js/chat.js/
   nova_poshta.js/settlements.js — rather than touch every one of them,
   `transition-behavior: allow-discrete` + `@starting-style` animates the
   hidden -> shown flip (and back) in pure CSS: the display:none swap is
   deferred until the opacity/transform transition finishes, so the modal
   stays paintable for the whole close animation instead of vanishing
   instantly the moment JS sets hidden = true. Needs Chrome 117+ / Safari
   17.4+ / Firefox 129+ — fine for this internal, evergreen-browser tool. */
.ds-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}

.ds-modal[hidden] {
  display: none;
  opacity: 0;
}

@starting-style {
  .ds-modal:not([hidden]) {
    opacity: 0;
  }
}

.ds-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.ds-modal__dialog,
.ds-chat-image-modal__content {
  transform: scale(0.97) translateY(10px);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  opacity: 1;
}

/* Именно `none`, а не `scale(1) translateY(0)`.
   Визуально это одно и то же, но элемент с ЛЮБЫМ ненулевым transform
   становится containing block для потомков с position:fixed. Список подсказок
   артикула позиционируется через position:fixed по координатам окна браузера
   (positionCreateLineSuggestList) — с transform на диалоге он начинал
   отсчитываться от самой модалки, уезжал за её границы и обрезался overflow.
   Со стороны это выглядело как «автодополнение перестало работать».
   Переход между `scale(...)` и `none` браузер интерполирует через единичную
   матрицу, поэтому анимация открытия сохраняется. */
.ds-modal:not([hidden]) .ds-modal__dialog,
.ds-modal:not([hidden]) .ds-chat-image-modal__content {
  transform: none;
}

@starting-style {
  .ds-modal:not([hidden]) .ds-modal__dialog,
  .ds-modal:not([hidden]) .ds-chat-image-modal__content {
    transform: scale(0.97) translateY(10px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-modal,
  .ds-modal__dialog,
  .ds-chat-image-modal__content {
    transition-duration: 0.01ms !important;
  }
}

.ds-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--ds-surface);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

.ds-modal__dialog--wide {
  max-width: 860px;
}

.ds-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-modal__head h2 {
  margin: 0;
  font-size: 18px;
}

.ds-modal__close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-muted);
  font-size: 18px;
  cursor: pointer;
}

.ds-modal__close:hover {
  background: var(--ds-bg);
}

.ds-modal__body {
  padding: 18px 20px 20px;
}

.ds-modal__hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ds-muted);
  line-height: 1.45;
}

.ds-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  padding-bottom: 10px;
  padding-right: 10px;
  border-top: 1px solid var(--ds-border);
}

.ds-line-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ds-line-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(68px, 0.4fr) minmax(84px, 0.5fr) minmax(92px, 0.55fr) auto;
  gap: 10px;
  align-items: start;
}

.ds-line-row__field {
  position: relative;
}

.ds-line-row__field .ds-sku-autocomplete {
  position: relative;
  width: 100%;
}

.ds-sku-autocomplete__option--with-thumb {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}

.ds-sku-autocomplete__thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f4f6;
}

.ds-sku-autocomplete__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

.ds-sku-autocomplete__thumb--empty .lucide {
  width: 22px;
  height: 22px;
}

.ds-sku-autocomplete__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ds-sku-autocomplete__option--with-thumb .ds-sku-autocomplete__name {
  overflow: visible;
  text-overflow: initial;
  white-space: normal;
  max-width: 100%;
  font-size: 13.5px;
  line-height: 1.35;
  color: #1f2937;
}

.ds-sku-autocomplete__option--with-thumb .ds-sku-autocomplete__sku {
  font-size: 12.5px;
}

.ds-sku-autocomplete__list:has(.ds-sku-autocomplete__option--with-thumb) {
  max-height: 360px;
  width: max(100%, 340px);
  right: auto;
}

.ds-line-row label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ds-line-row input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  font: inherit;
  box-sizing: border-box;
}

.ds-line-row input[type="number"] {
  -moz-appearance: textfield;
}

.ds-line-row input[type="number"]::-webkit-outer-spin-button,
.ds-line-row input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.ds-line-row input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

.ds-line-row__remove {
  width: 38px;
  height: 38px;
  margin-top: 22px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  cursor: pointer;
}

.ds-line-row__remove:hover:not(:disabled) {
  color: var(--ds-danger);
  border-color: #fecaca;
  background: var(--ds-danger-bg);
}

.ds-line-row__remove:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ds-btn--ghost {
  background: var(--ds-surface);
  color: var(--ds-text);
  border: 1px solid var(--ds-border);
}

.ds-btn--ghost:hover {
  background: var(--ds-bg);
}

/* Действие необратимое (отвязка заказа от маркетплейса), но не разрушительное
   само по себе — не даём ему кислотно-красный вид основной .ds-btn--danger,
   только красноватый текст поверх обычного ghost-фона как предупреждение. */
.ds-btn--danger-ghost {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.35);
}

.ds-btn--danger-ghost:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: #dc2626;
  color: #b91c1c;
}

.ds-btn--danger-ghost:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ds-btn--compact {
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.2;
}

.ds-add-line-btn {
  margin-top: 12px;
  width: 100%;
  justify-content: center;
}

.ds-form-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
  font-size: 13px;
}

.ds-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.ds-line-comment-input {
  width: 100%;
  min-width: 120px;
  padding: 6px 8px;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  box-sizing: border-box;
  background: var(--ds-surface);
}

.ds-line-comment-input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-12);
}

.ds-line-comment-input.is-saving {
  opacity: 0.6;
}

.ds-line-comment-input.is-saved {
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.12);
}

.ds-line-comment-static {
  color: var(--ds-text);
}

.ds-line-editable {
  display: inline-block;
  min-width: 2rem;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 4px;
  cursor: text;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.ds-line-editable:hover {
  background: var(--ds-highlight-bg);
}

.ds-line-editable.is-saving {
  opacity: 0.6;
}

.ds-line-editable.is-saved {
  box-shadow: inset 0 0 0 1px #059669;
  background: #ecfdf5;
}

.ds-line-inline-input {
  width: 100%;
  min-width: 4rem;
  padding: 4px 6px;
  border: 1px solid #7c3aed;
  border-radius: 4px;
  font: inherit;
  color: var(--ds-text);
  background: var(--ds-surface);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.ds-line-warehouse-input {
  border-color: #e5e7eb;
  background: #ffffff;
}

.ds-line-warehouse-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.ds-settings {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
}

.ds-settings[hidden] {
  display: none;
}

.ds-settings-section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ds-text-strong, #0f172a);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-settings > div:not(.ds-settings-section-tabs) {
  min-width: 0;
}

.ds-settings-card {
  /* Раньше растягивалась на всю ширину контентной колонки (1fr) — на
     широком экране поля ввода превращались в полосы через весь монитор.
     Ограничиваем разумной шириной; на узких экранах max-width просто не
     достигается, и карточка остаётся адаптивной. */
  max-width: 760px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 24px;
  box-shadow: var(--ds-shadow);
}

.ds-settings-card + .ds-settings-card,
.ds-settings-card + .ds-settings-cards-grid {
  margin-top: 16px;
}

.ds-notify-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ds-notify-card__content h2 {
  margin: 0 0 8px;
}

.ds-notify-card__art {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .ds-notify-card {
    flex-wrap: wrap;
  }

  .ds-notify-card__art {
    display: none;
  }
}

.ds-field-password {
  position: relative;
}

.ds-field-password input {
  width: 100%;
  padding-right: 38px;
}

.ds-field-password__toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ds-muted, #94a3b8);
  cursor: pointer;
  border-radius: 6px;
}

.ds-field-password__toggle:hover {
  color: var(--ds-text, #111);
  background: var(--ds-bg, #f1f5f9);
}

.ds-field-password__toggle svg {
  width: 16px;
  height: 16px;
}

.ds-settings-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ds-settings-actions .ds-field-hint {
  margin: 0;
}

/* Несколько карточек в разделе — на широком экране раскладываем сеткой
   (auto-fit сам схлопывает до одной колонки, когда ширины не хватает, так
   что отдельная media-query для узких экранов не нужна). Внутри сетки
   карточка занимает свою ячейку целиком, поэтому её собственный max-width
   (нужен только вне сетки, чтобы не тянуться на весь монитор) тут снят —
   ширину уже ограничивает сама ячейка. */
.ds-settings-cards-grid[hidden] {
  display: none;
}

/* flex, а не grid: repeat(auto-fit, minmax(...,1fr)) ненадёжно схлопывает
   пустые колонки и растягивает карточки на всю ширину строки — на практике
   в части браузеров вместо этого остаётся пустой хвост справа. flex-grow
   на каждой карточке распределяет остаток ширины строки без этих сюрпризов. */
.ds-settings-cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: start;
}

.ds-settings-cards-grid > .ds-settings-card {
  flex: 1 1 320px;
  max-width: none;
  margin-top: 0;
}

/* «Способы оплаты» — самая содержательная карточка (свой список + форма),
   ей тесно в половине строки — занимает её целиком. */
.ds-settings-cards-grid > .ds-payment-methods-card {
  flex-basis: 100%;
}

.ds-profile-logo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-profile-logo__preview {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-highlight-bg);
  color: #4338ca;
  font-size: 20px;
  font-weight: 800;
  overflow: hidden;
  border: 1px solid var(--ds-border);
}

.ds-profile-logo__preview.has-logo {
  background: var(--ds-surface);
}

.ds-profile-logo__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-profile-logo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ds-profile-logo__input {
  display: none;
}

.ds-dropshipper-card__logo-toggle {
  margin-top: 10px;
}

.ds-settings-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.ds-settings-lead {
  margin: 0 0 20px;
  color: var(--ds-muted);
  font-size: 14px;
  line-height: 1.45;
}

.ds-template-body-preview {
  white-space: pre-line;
}

.ds-dropshippers__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
  color: var(--ds-muted);
  font-size: 14px;
}

.ds-dropshippers__loading[hidden],
.ds-dropshippers__empty[hidden] {
  display: none !important;
}

.ds-dropshippers__loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #e5e7eb;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: ds-chat-spin 0.8s linear infinite;
}

.ds-dropshippers__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 16px;
  color: var(--ds-muted);
  text-align: center;
}

.ds-dropshippers__empty .lucide {
  font-size: 28px;
  opacity: 0.55;
}

.ds-dropshippers__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.ds-join-requests {
  margin-bottom: 20px;
}

.ds-join-requests__code-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
  padding: 16px 20px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ds-join-requests__code-label {
  font-size: 13px;
  color: var(--ds-muted);
  margin-bottom: 6px;
}

.ds-join-requests__code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
  color: #4338ca;
  letter-spacing: 0.5px;
}

.ds-join-requests__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.ds-join-requests__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--ds-radius);
  padding: 12px 16px;
  flex-wrap: wrap;
}

.ds-join-requests__item-info {
  font-size: 13px;
}

.ds-join-requests__item-name {
  font-weight: 700;
}

.ds-join-requests__item-meta {
  color: var(--ds-muted);
}

.ds-join-requests__item-actions {
  display: flex;
  gap: 8px;
}

.ds-join-requests__item-actions button {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}

.ds-join-requests__approve {
  background: #ecfdf5;
  color: #047857;
}

.ds-join-requests__approve:hover {
  background: #d1fae5;
}

.ds-join-requests__reject {
  background: #fef2f2;
  color: #dc2626;
}

.ds-join-requests__reject:hover {
  background: #fee2e2;
}

.ds-dropshipper-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
  padding: 18px 20px;
}

.ds-dropshipper-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ds-dropshipper-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.ds-dropshipper-card__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: var(--ds-muted);
  white-space: nowrap;
}

.ds-dropshipper-card__stats strong {
  color: var(--ds-text);
}

.ds-dropshipper-card__stats-new {
  color: #b45309;
}

.ds-dropshipper-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.ds-dropshipper-card__field {
  min-width: 0;
}

.ds-dropshipper-card__label {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ds-muted);
}

.ds-dropshipper-card__value {
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

.ds-dropshipper-card__value.is-empty {
  color: var(--ds-muted);
  font-style: italic;
}

.ds-dropshipper-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-border);
}

.ds-dropshipper-card__color {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-border);
}

.ds-dropshipper-card__warehouse {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-border);
  cursor: pointer;
}

.ds-dropshipper-card__warehouse input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--ds-primary);
}

.ds-dropshipper-card__warehouse-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ds-dropshipper-card__warehouse-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
}

.ds-dropshipper-card__warehouse-hint {
  font-size: 12px;
  color: var(--ds-muted);
  line-height: 1.35;
}

.ds-dropshipper-card__color-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.ds-dropshipper-card__color-preview {
  margin-left: 0;
}

.ds-dropshipper-card__color-input {
  width: 42px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  cursor: pointer;
}

.ds-settings-subtitle {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.ds-settings-panel + .ds-settings-panel {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--ds-border);
}

.ds-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ds-field--wide {
  grid-column: 1 / -1;
}

.ds-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.ds-field input,
.ds-field textarea,
.ds-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  font: inherit;
  box-sizing: border-box;
  background: #fff;
}

.ds-field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}

.ds-textarea-with-emoji {
  position: relative;
}

.ds-textarea-with-emoji textarea {
  padding-right: 40px;
}

.ds-emoji-picker-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  background: var(--ds-surface);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.ds-emoji-picker-btn:hover {
  border-color: var(--ds-highlight-border);
  background: var(--ds-highlight-bg);
}

.ds-emoji-picker-menu {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  width: 280px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.ds-emoji-picker-menu[hidden] {
  display: none !important;
}

.ds-emoji-picker-menu__option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ds-emoji-picker-menu__option:hover {
  background: var(--ds-highlight-bg);
}

.ds-template-hint {
  line-height: 1.7;
  margin-bottom: 16px;
}

.ds-template-token {
  color: #dc2626;
  font-weight: 400;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
}

.ds-field input:focus,
.ds-field textarea:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

.ds-field input[readonly] {
  background: #f9fafb;
  color: var(--ds-muted);
}

.ds-settings-actions {
  margin-top: 18px;
}

.ds-settings-danger {
  border-color: #fecaca;
  background: #fff5f5;
}

.ds-settings-danger h2 {
  color: #b91c1c;
}

.ds-form-success {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ds-success-bg);
  color: var(--ds-success);
  font-size: 13px;
}

.ds-form-success[hidden] {
  display: none !important;
}

.ds-company-join-pending {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
}

.ds-company-join-pending[hidden] {
  display: none !important;
}

.ds-field-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ds-muted);
}

.ds-settings-notifications__toggle {
  margin-top: 4px;
}

.ds-field-hint.is-warning {
  color: #b45309;
}

.ds-integration-blocks-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

@media (max-width: 900px) {
  .ds-integration-blocks-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ds-integration-block__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.ds-integration-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.ds-integration-icon svg {
  width: 100%;
  height: 100%;
}

.ds-integration-blocks-row .ds-integration-block {
  margin-top: 0;
}

.ds-integration-block {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: #fafbfc;
}

.ds-integration-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.ds-integration-status-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ds-integration-status-toggle__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  background: #fff;
  color: var(--ds-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.ds-integration-status-toggle__pill svg {
  width: 14px;
  height: 14px;
}

.ds-integration-status-toggle__icon-on,
.ds-integration-status-toggle__text-on {
  display: none;
}

.ds-integration-status-toggle input:checked + .ds-integration-status-toggle__pill {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #16a34a;
}

.ds-integration-status-toggle input:checked + .ds-integration-status-toggle__pill .ds-integration-status-toggle__icon-on,
.ds-integration-status-toggle input:checked + .ds-integration-status-toggle__pill .ds-integration-status-toggle__text-on {
  display: inline-flex;
}

.ds-integration-status-toggle input:checked + .ds-integration-status-toggle__pill .ds-integration-status-toggle__icon-off,
.ds-integration-status-toggle input:checked + .ds-integration-status-toggle__pill .ds-integration-status-toggle__text-off {
  display: none;
}

.ds-integration-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}

.ds-integration-top-grid__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ds-integration-top-grid__col .ds-field-hint {
  margin-top: 0;
}

.ds-prom-no-ttn-toggle {
  font-weight: 500;
}

@media (max-width: 720px) {
  .ds-integration-top-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

.ds-integration-block__body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-border);
}

.ds-integration-block__body[hidden] {
  display: none !important;
}

.ds-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.ds-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ds-primary);
}

.ds-field-label {
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 8px;
}

.ds-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}

.ds-radio input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ds-primary);
}

.ds-invoice-calc-type {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-invoice-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
  padding: 12px 14px;
  background: #f0fdf4;
  border-radius: 10px;
  font-size: 14px;
}

.ds-invoice-result strong {
  font-size: 18px;
  color: #16a34a;
}

.ds-invoice-history {
  margin-top: 22px;
  border-top: 1px solid var(--ds-border);
  padding-top: 14px;
}

.ds-settlement-group-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--ds-border);
}

.ds-settlement-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: #f0fdf4;
  color: #16a34a;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.ds-settlement-group-toggle:hover {
  background: #dcfce7;
}

.ds-settlement-group-toggle .lucide {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ds-settlement-group-toggle__icon {
  flex-shrink: 0;
}

.ds-settlement-group-toggle__label {
  min-width: 0;
}

.ds-invoice-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  border-radius: 8px;
  font-size: 13px;
}

.ds-invoice-history-row:last-child {
  border-bottom: 0;
}

.ds-invoice-history-row.is-paid {
  background: #f0fdf4;
}

.ds-invoice-history-row__meta {
  color: var(--ds-muted);
}

.ds-invoice-history-row__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ds-invoice-paid-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ds-invoice-paid-btn.is-paid {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
  cursor: pointer;
}

.ds-invoice-paid-btn.is-paid .lucide {
  width: 13px;
  height: 13px;
}

.ds-invoice-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ds-border);
  border-radius: 50%;
  background: #fff;
  color: #dc2626;
  cursor: pointer;
  flex-shrink: 0;
}

.ds-invoice-delete-btn:hover {
  background: #fef2f2;
}

.ds-invoice-delete-btn .lucide {
  width: 14px;
  height: 14px;
}

.ds-user-delete-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.ds-user-delete-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.ds-user-delete-option strong {
  font-size: 14px;
}

.ds-user-delete-option span {
  font-size: 12px;
  color: var(--ds-muted);
}

.ds-user-delete-option:hover {
  border-color: var(--ds-primary);
}

.ds-user-delete-option.is-danger:hover {
  border-color: #dc2626;
  background: #fef2f2;
}

.ds-btn.is-danger {
  color: #dc2626;
}

.ds-integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.ds-integration-advanced {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  font-size: 13px;
  color: #64748b;
}

.ds-integration-advanced summary {
  cursor: pointer;
  font-weight: 600;
  color: #475569;
  margin-bottom: 10px;
}

.ds-integration-advanced[open] summary {
  margin-bottom: 12px;
}

.ds-integration-advanced .ds-field {
  margin-top: 10px;
}

.ds-prom-import-controls {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: var(--ds-surface);
}

.ds-prom-import-controls__head {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.ds-prom-import-controls__grid {
  gap: 12px;
}

.ds-prom-import-controls .ds-field-hint {
  margin-top: 10px;
}

.ds-prom-import-statuses {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: var(--ds-surface);
}

.ds-prom-import-statuses__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.ds-prom-import-statuses__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 10px;
}

.ds-prom-import-statuses__list:empty {
  display: none;
}

.ds-prom-sync-status {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--ds-highlight-bg-strong);
  background: var(--ds-highlight-bg);
  color: #1e3a8a;
}

.ds-prom-sync-status[hidden] {
  display: none !important;
}

.ds-prom-sync-status__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ds-highlight-bg-strong);
  color: var(--ds-primary);
  flex: 0 0 auto;
}

.ds-prom-sync-status__icon .lucide {
  font-size: 14px;
}

.ds-prom-sync-status strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.ds-prom-sync-status .ds-field-hint {
  margin: 0;
  color: var(--ds-primary-dark);
}

.ds-prom-sync-status.is-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.ds-prom-sync-status.is-success .ds-prom-sync-status__icon {
  background: #dcfce7;
  color: #16a34a;
}

.ds-prom-sync-status.is-success .ds-field-hint {
  color: #15803d;
}

.ds-prom-sync-status.is-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.ds-prom-sync-status.is-error .ds-prom-sync-status__icon {
  background: #fee2e2;
  color: #dc2626;
}

.ds-prom-sync-status.is-error .ds-field-hint {
  color: #b91c1c;
}

#ds-prom-sync-error,
#ds-prom-sync-success {
  margin-top: 10px;
}

.ds-prom-import-status-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--ds-surface);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.ds-prom-import-status-check:has(input:checked) {
  background: var(--ds-highlight-bg);
  border-color: var(--ds-highlight-border);
  color: var(--ds-primary);
}

.ds-prom-import-status-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--ds-primary);
}

.ds-prom-import-status-check__label {
  line-height: 1.3;
}

.ds-prom-import-status-check.is-custom {
  background: var(--ds-surface);
}

@media (max-width: 720px) {
  .ds-prom-import-statuses__list {
    grid-template-columns: 1fr;
  }
}

.ds-integration-meta {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ds-muted);
}

.ds-integration-meta[hidden] {
  display: none !important;
}

.ds-prom-auto-sync-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--ds-highlight-bg-strong);
  background: var(--ds-highlight-bg);
  color: #1e3a8a;
}

.ds-prom-auto-sync-note[hidden] {
  display: none !important;
}

.ds-prom-auto-sync-note .lucide {
  margin-top: 2px;
  font-size: 16px;
  color: var(--ds-primary);
}

.ds-prom-auto-sync-note strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.ds-prom-auto-sync-note .ds-field-hint {
  margin: 0 0 8px;
  color: var(--ds-primary-dark);
}

.ds-prom-auto-sync-note .ds-copy-field {
  margin-top: 4px;
}

.ds-copy-field {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ds-copy-field input {
  flex: 1;
  min-width: 0;
}

.ds-code-sample {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #111827;
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.ds-table__actions {
  white-space: nowrap;
  width: 1%;
}

/* Три кнопки-действия над позицией заказа выглядят одинаково: «удалить»
   (обычные заказы), «исключить из комплектации» и «вернуть» (заказы с Prom,
   где строку нельзя удалить физически). Раньше оформлена была только
   .ds-line-delete, а две остальные оставались браузерными кнопками по
   умолчанию — у Prom-заказов на их месте была серая системная коробка. */
.ds-line-delete,
.ds-line-exclude,
.ds-line-restore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  cursor: pointer;
}

.ds-line-delete:hover,
.ds-line-exclude:hover {
  color: var(--ds-danger);
  border-color: #fecaca;
  background: var(--ds-danger-bg);
}

/* «Вернуть в комплектацию» — действие созидательное, красным его
   подсвечивать неверно. */
.ds-line-restore:hover {
  color: var(--ds-primary-dark, #9a3412);
  border-color: var(--ds-primary, #ea580c);
}

.ds-order.has-line-add-suggest {
  position: relative;
  z-index: 45;
  overflow: visible;
}

.ds-order.has-line-add-suggest .ds-table-wrap {
  overflow: visible;
}

.ds-order-lines-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid #f3f4f6;
  background: #fafbfc;
  position: relative;
  z-index: 2;
}

.ds-order-line-add-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  background: var(--ds-surface);
  color: var(--ds-primary);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
}

.ds-order-line-add-btn:hover {
  background: var(--ds-highlight-bg);
  border-color: var(--ds-highlight-border);
}

.ds-order-line-add-btn__label {
  display: none;
}

.ds-order-line-add-panel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  max-width: calc(100% - 40px);
}

.ds-order-line-add-panel[hidden] {
  display: none !important;
}

.ds-sku-autocomplete {
  position: relative;
  width: 240px;
  max-width: 100%;
  flex: 0 0 auto;
}

.ds-order-line-add-sku {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  box-sizing: border-box;
  background: var(--ds-surface);
}

.ds-order-line-add-sku:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-12);
}

.ds-sku-autocomplete__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 80;
  max-height: 280px;
  overflow: auto;
  /* Прокрутка внутри списка не должна перекидываться на модалку: докрутив
     список до конца, пользователь иначе начинал листать саму форму заказа. */
  overscroll-behavior: contain;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}


.ds-sku-autocomplete__list[hidden] {
  display: none !important;
}

.ds-sku-autocomplete__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid #f1f5f9;
  background: var(--ds-surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.ds-sku-autocomplete__option:last-child {
  border-bottom: 0;
}

.ds-sku-autocomplete__option:hover,
.ds-sku-autocomplete__option.is-active {
  background: var(--ds-highlight-bg);
}

.ds-sku-autocomplete__empty {
  padding: 10px 12px;
  font-size: 13px;
  color: #64748b;
}

.ds-sku-autocomplete__sku {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.ds-sku-autocomplete__name {
  font-size: 12px;
  color: #64748b;
}

.ds-order-line-add-submit {
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.ds-settings-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--ds-border);
  padding-bottom: 12px;
}

.ds-settings-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.ds-settings-tab.is-active {
  color: var(--ds-primary);
  background: var(--ds-highlight-bg);
  border-color: var(--ds-highlight-border);
}

.ds-integration-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  flex-shrink: 0;
}

.ds-integration-tab-icon svg,
.ds-integration-tab-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.ds-integration-tab-dot {
  display: none;
}

.ds-integration-tab-dot.is-connected {
  background: #22c55e;
}

.ds-settings-panel[hidden] {
  display: none;
}

.ds-availability-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ds-availability-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-availability-item {
  display: grid;
  /* preview · название · чекбоксы-маппинг · фон · текст · рамка · удалить —
     третий 44px-токен под новый .ds-availability-item__border-color. */
  grid-template-columns: auto 1fr auto 44px 44px 44px 36px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: #fafafa;
  transition: opacity 0.15s ease;
}

.ds-availability-item.is-saving {
  opacity: 0.65;
}

#ds-shipment-list .ds-availability-item {
  /* Тут маппинга «в наличии/ожидается» нет — на одну колонку меньше, чем
     у availability, но тот же третий 44px под цвет рамки. */
  grid-template-columns: auto 1fr 44px 44px 44px 36px;
}

#ds-shipment-list .ds-availability-item--with-hint {
  grid-template-columns: auto 1fr 44px 44px 44px 36px;
}

.ds-shipment-status-hint {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}

#ds-availability-list .ds-availability-item--reserved {
  grid-template-columns: auto 1fr 44px 44px 44px 36px;
}

.ds-shipment-reserved {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #9ca3af;
  font-size: 16px;
}

.ds-product-category-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-product-category-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-product-category-item {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 140px 100px auto 36px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: #fafafa;
  transition: opacity 0.15s ease;
}

.ds-product-category-item.is-saving {
  opacity: 0.65;
}

.ds-product-category-item__name {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--ds-surface);
  font: inherit;
  font-size: 14px;
}

.ds-product-category-item__name:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-12);
}

.ds-product-category-item__mode,
.ds-product-category-item__percent {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--ds-surface);
  font: inherit;
  font-size: 14px;
}

.ds-product-category-item__mode:focus,
.ds-product-category-item__percent:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-12);
}

.ds-product-category-item__percent {
  text-align: right;
}

.ds-product-category-item__formula-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.ds-product-category-item__preview {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ds-highlight-bg);
  color: #4338ca;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .ds-product-category-item {
    grid-template-columns: 1fr;
  }

  .ds-product-category-item__formula-label {
    display: none;
  }
}

.ds-availability-item--reserved {
  border-color: var(--ds-highlight-bg-strong);
  background: var(--ds-highlight-bg-strong);
}

.ds-availability-item__preview {
  min-width: 88px;
}

.ds-availability-item__label {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  font: inherit;
  background: var(--ds-surface);
}

.ds-availability-item__label:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

.ds-availability-item__color,
.ds-availability-item__text-color,
.ds-availability-item__border-color {
  width: 44px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  cursor: pointer;
}

.ds-availability-item__mapping {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.ds-availability-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4b5563;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.ds-availability-map input {
  margin: 0;
  cursor: pointer;
}

.ds-availability-delete {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  cursor: pointer;
}

.ds-availability-delete:hover {
  color: var(--ds-danger);
  border-color: #fecaca;
  background: var(--ds-danger-bg);
}

.ds-availability-add {
  align-self: flex-start;
  width: 44px;
  height: 44px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: var(--ds-surface);
  color: var(--ds-primary);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ds-availability-add:hover {
  background: var(--ds-highlight-bg);
  border-color: #93c5fd;
}

.ds-availability-add:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ds-availability-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  padding: 10px 14px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.ds-availability-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ds-pill--custom {
  border-radius: 999px;
}

.ds-order.has-availability-menu {
  position: relative;
  z-index: 40;
  overflow: visible;
}

.ds-order.has-availability-menu .ds-table-wrap {
  overflow: visible;
}

.ds-line-availability-picker {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.ds-line-availability-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 132px;
  padding: 4px 10px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ds-line-availability-trigger__label {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.ds-line-availability-trigger.has-calendar {
  min-width: 148px;
}

.ds-line-availability-calendar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.92;
  cursor: pointer;
  flex-shrink: 0;
}

.ds-line-availability-calendar .lucide {
  font-size: 11px;
}

.ds-line-availability-calendar__date {
  font-size: 11px;
  font-weight: 600;
}

.ds-pill--with-calendar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Прозрачный слой ровно по значку календаря: тап попадает в само поле,
   поэтому родной календарь открывается и на телефоне, где showPicker()
   по скрытому полю не работает. */
.ds-line-availability-date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ds-line-availability-trigger:hover {
  filter: brightness(0.97);
}

.ds-line-availability-trigger .lucide {
  font-size: 10px;
  opacity: 0.75;
  flex-shrink: 0;
}

.ds-line-availability-picker.is-open .ds-line-availability-trigger {
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.16);
}

.ds-line-availability-picker.is-saving {
  opacity: 0.6;
  pointer-events: none;
}

.ds-line-availability-menu {
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-line-availability-menu[hidden] {
  display: none !important;
}

.ds-line-availability-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.ds-line-availability-option:hover {
  background: var(--ds-highlight-bg);
}

.ds-line-availability-option .ds-pill {
  width: 100%;
  justify-content: center;
}

.ds-line-availability-pill {
  display: inline-block;
}

/* Остаток склада в строке позиции заказа. Цвет несёт смысл (хватает / мало /
   нет / нечего сопоставлять), но продублирован подсказкой в title — на цвет
   одного только полагаться нельзя. */
.ds-line-stock {
  display: inline-block;
  min-width: 30px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: help;
  white-space: nowrap;
}

.ds-line-stock--ok {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
}

.ds-line-stock--low {
  border-color: rgba(217, 119, 6, 0.4);
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.ds-line-stock--empty {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

/* Артикула нет в каталоге — это не «ноль», а отсутствие сопоставления;
   поэтому нейтральный серый, а не красный, и текстом, а не числом. */
.ds-line-stock--unknown {
  border-style: dashed;
  background: transparent;
  color: var(--ds-muted);
  font-weight: 500;
  font-size: 11.5px;
}

.ds-line-availability-select {
  min-width: 140px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid #ddd6fe;
  border-radius: 6px;
  font: inherit;
  background: #faf5ff;
}

.ds-line-availability-select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.ds-line-availability-select.is-saving {
  opacity: 0.6;
}

@media (max-width: 600px) {
  .ds-availability-item {
    grid-template-columns: 1fr;
  }

  .ds-availability-item__preview {
    min-width: 0;
  }

  .ds-settings-grid {
    grid-template-columns: 1fr;
  }

  .ds-line-row {
    grid-template-columns: 1fr;
  }

  .ds-line-row__remove {
    margin-top: 0;
    width: 100%;
  }

  .ds-orders-pager {
    flex-direction: column;
    align-items: stretch;
  }

  .ds-orders-pager__controls {
    justify-content: space-between;
  }

  .ds-settlement-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .ds-partner-tab {
    padding: 8px 12px;
    font-size: 12px;
  }
}


@media (max-width: 1200px) {
  .ds-detail {
    width: 100%;
    max-width: 400px;
  }
}

@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
  }

  body.ds-body--sidebar-open {
    overflow: hidden;
  }

  .ds-menu-btn {
    display: inline-flex;
    width: 44px;
    height: 44px;
  }

  .ds-sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .ds-app.is-sidebar-open .ds-sidebar {
    transform: translateX(0);
  }

  .ds-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .ds-sidebar-backdrop[hidden] {
    display: none !important;
  }

  .ds-app.is-sidebar-open .ds-sidebar-backdrop:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
  }

  .ds-main {
    margin-left: 0;
    max-width: 100vw;
  }

  .ds-main.is-detail-open {
    margin-right: 0;
  }

  .ds-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "menu title create actions"
      "search search search search";
    gap: 10px;
    align-items: center;
    padding: 12px 16px;
  }

  .ds-topbar__left {
    display: contents;
  }

  .ds-menu-btn {
    grid-area: menu;
  }

  .ds-topbar h1 {
    grid-area: title;
    font-size: 17px;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ds-topbar__create-order {
    grid-area: create;
  }

  .ds-topbar:not(:has(.ds-topbar__create-order:not([hidden]))) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "menu title actions"
      "search search search";
  }

  .ds-topbar__search {
    grid-area: search;
    max-width: none;
    width: 100%;
    flex: none;
  }

  .ds-topbar__right {
    grid-area: actions;
    gap: 4px;
    min-width: 0;
  }

  .ds-icon-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .ds-user__avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .ds-content {
    padding: 14px 16px 24px;
    min-width: 0;
    overflow-x: clip;
  }

  #ds-orders-view {
    min-width: 0;
  }

  .ds-warehouse-mode-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ds-warehouse-mode-bar__switch {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .ds-warehouse-mode-bar__option {
    flex: 1 1 50%;
    text-align: center;
    padding: 10px 12px;
  }

  .ds-partner-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px;
    padding: 0 12px;
  }

  .ds-partner-tabs::-webkit-scrollbar {
    display: none;
  }

  .ds-partner-tab {
    flex-shrink: 0;
  }

  .ds-orders-status-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px 10px;
    padding: 0 12px;
    border-bottom: 1px solid #e5e7eb;
  }

  .ds-orders-status-tabs::-webkit-scrollbar {
    display: none;
  }

  .ds-order-status-tab {
    flex-shrink: 0;
  }

  .ds-order__head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
    padding: 12px 14px;
  }

  .ds-order__title {
    flex: 1 1 100%;
    min-width: 0;
  }

  .ds-order__status-group {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ds-order__meta-group {
    margin-left: 0;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .ds-order__chevron {
    margin-left: auto;
  }

  .ds-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .ds-detail {
    width: 100%;
    max-width: none;
  }

  .ds-line-availability-trigger {
    min-width: 0;
    max-width: 100%;
  }

  .ds-archive-hint {
    flex-wrap: wrap;
    font-size: 13px;
  }

  .ds-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .ds-modal__dialog {
    max-height: calc(100vh - 24px);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .ds-modal__dialog--wide {
    max-width: none;
  }

  .ds-mock-badge {
    left: 12px;
  }

  .ds-user__text {
    display: none;
  }
}

/* Chat */
.ds-chat {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - 170px);
  max-height: calc(100vh - 170px);
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ds-surface);
}

.ds-chat__threads {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--ds-border);
  background: var(--ds-highlight-bg);
}

.ds-chat__threads-head {
  padding: 16px 18px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-muted);
}

.ds-chat__threads-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px 12px;
  overflow: auto;
}

.ds-chat-thread {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: start;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.ds-chat-thread:hover {
  background: var(--ds-surface);
  border-color: var(--ds-border);
}

.ds-chat-thread.is-active {
  background: var(--ds-surface);
  border-color: var(--ds-highlight-border);
  box-shadow: 0 4px 14px var(--ds-primary-alpha-08);
}

.ds-chat-thread__avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-highlight-bg);
  color: #4338ca;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  flex-shrink: 0;
}

.ds-chat-thread__avatar.has-logo {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
}

.ds-chat-thread__avatar.has-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-chat-thread__body strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.ds-chat-thread__body span {
  display: block;
  font-size: 12px;
  color: var(--ds-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-chat-thread__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 42px;
}

.ds-chat-thread__time {
  font-size: 10px;
  color: var(--ds-muted);
}

.ds-chat-thread__badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ds-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ds-chat__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ds-chat__loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ds-muted);
  font-size: 13px;
}

.ds-chat__loading[hidden] {
  display: none !important;
}

.ds-chat__loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--ds-highlight-bg-strong);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: ds-chat-spin 0.8s linear infinite;
}

@keyframes ds-chat-spin {
  to {
    transform: rotate(360deg);
  }
}

.ds-chat-image-modal {
  z-index: 130;
}

.ds-chat-image-modal__content {
  position: relative;
  z-index: 1;
  width: min(92vw, 960px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ds-chat-image-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.ds-chat-image-modal__close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.ds-chat-image-modal__content img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
  background: var(--ds-surface);
}

.ds-chat-image-modal__caption {
  max-width: 100%;
  padding: 0 8px;
  color: #e2e8f0;
  font-size: 13px;
  text-align: center;
  word-break: break-word;
}

.ds-chat-image-modal__caption[hidden] {
  display: none !important;
}

.ds-chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-surface);
}

.ds-chat__head-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-highlight-bg);
  color: #4338ca;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  flex-shrink: 0;
}

.ds-chat__head-avatar.has-logo {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
}

.ds-chat__head-avatar.has-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-chat__head-title {
  font-size: 16px;
  font-weight: 700;
}

.ds-chat__head-sub {
  font-size: 12px;
  color: var(--ds-muted);
}

.ds-chat__head-typing {
  font-size: 12px;
  color: #4f46e5;
  font-style: italic;
}

.ds-chat__head-typing[hidden] {
  display: none !important;
}

.ds-chat-bubble__receipt {
  display: inline-flex;
  gap: 1px;
  margin-left: 4px;
  vertical-align: middle;
}

.ds-chat-bubble__receipt .lucide {
  font-size: 11px;
  color: var(--ds-muted);
}

.ds-chat-bubble__receipt.is-read .lucide {
  color: #2563eb;
}

.ds-chat-bubble__receipt .lucide + .lucide {
  margin-left: -7px;
}

.ds-chat__messages {
  flex: 1;
  overflow: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.ds-chat__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ds-muted);
  text-align: center;
  padding: 24px;
}

.ds-chat__empty .lucide {
  font-size: 36px;
  opacity: 0.45;
}

.ds-chat__empty[hidden],
.ds-chat__head-avatar[hidden] {
  display: none !important;
}

.ds-chat__pinned {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
}

.ds-chat__pinned[hidden] {
  display: none !important;
}

.ds-chat__pinned .lucide-pin {
  margin-top: 2px;
}

.ds-chat__pinned-body {
  flex: 1;
  min-width: 0;
}

.ds-chat__pinned-author {
  font-size: 11px;
  font-weight: 700;
}

.ds-chat__pinned-text {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-chat__pinned-close {
  border: none;
  background: transparent;
  color: #92400e;
  cursor: pointer;
  padding: 2px 4px;
}

.ds-chat__reply {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  border-radius: 6px;
}

.ds-chat__reply[hidden] {
  display: none !important;
}

.ds-chat__reply-body {
  flex: 1;
  min-width: 0;
}

.ds-chat__reply-author {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
}

.ds-chat__reply-text {
  font-size: 12px;
  color: var(--ds-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-chat__reply-close {
  border: none;
  background: transparent;
  color: var(--ds-muted);
  cursor: pointer;
}

.ds-chat-bubble {
  max-width: min(72%, 640px);
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.ds-chat-bubble__quote {
  padding: 4px 8px;
  margin-bottom: 6px;
  background: rgba(37, 99, 235, 0.08);
  border-left: 3px solid #2563eb;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.ds-chat-bubble__quote-author {
  font-weight: 700;
  color: #2563eb;
}

.ds-chat-bubble__quote-text {
  color: var(--ds-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-chat-bubble.is-deleted .ds-chat-bubble__text {
  color: var(--ds-muted);
  font-style: italic;
}

.ds-chat-ctx {
  position: fixed;
  z-index: 1200;
  min-width: 180px;
  padding: 6px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-chat-ctx[hidden] {
  display: none !important;
}

.ds-chat-ctx__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  color: var(--ds-text);
}

.ds-chat-ctx__item:hover {
  background: var(--ds-highlight-bg);
}

.ds-chat-ctx__item.is-danger {
  color: #dc2626;
}

.ds-chat-ctx__item.is-danger:hover {
  background: #fef2f2;
}

.ds-chat-ctx__item[hidden] {
  display: none !important;
}

.ds-chat-bubble.is-own {
  align-self: flex-end;
  background: var(--ds-highlight-bg);
  border-color: var(--ds-highlight-border);
}

.ds-chat-bubble__author {
  font-size: 11px;
  font-weight: 700;
  color: #4338ca;
  margin-bottom: 4px;
}

.ds-chat-bubble__text {
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.ds-chat-bubble__time {
  margin-top: 6px;
  font-size: 10px;
  color: var(--ds-muted);
  text-align: right;
}

.ds-chat__composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 14px 16px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface);
}

.ds-chat__composer-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ds-chat__composer-actions {
  display: flex;
  align-items: end;
  gap: 8px;
}

.ds-chat__pending {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-chat-pending__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-highlight-bg);
  font-size: 12px;
}

.ds-chat-pending__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-chat-pending__size {
  color: var(--ds-muted);
  white-space: nowrap;
}

.ds-chat-pending__remove {
  border: none;
  background: transparent;
  color: var(--ds-muted);
  cursor: pointer;
  padding: 0;
}

.ds-chat__attach {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  cursor: pointer;
}

.ds-chat__attach:hover {
  color: var(--ds-primary);
  border-color: var(--ds-primary-alpha-35);
}

.ds-chat__attach-input {
  display: none;
}

.ds-chat-bubble__attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.ds-chat-bubble__text + .ds-chat-bubble__attachments {
  margin-top: 6px;
}

.ds-chat-attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  text-decoration: none;
  font-size: 13px;
}

.ds-chat-bubble.is-own .ds-chat-attach {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.ds-chat-attach__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.ds-chat-attach__size {
  color: var(--ds-muted);
  font-size: 11px;
  white-space: nowrap;
}

.ds-chat-bubble.is-own .ds-chat-attach__size {
  color: rgba(255, 255, 255, 0.78);
}

.ds-chat-attach--image {
  display: block;
  padding: 0;
  overflow: hidden;
  max-width: 240px;
  border: none;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
}

.ds-chat-attach--image img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 10px;
}

.ds-chat__composer textarea {
  width: 100%;
  min-height: 44px;
  max-height: 140px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
}

.ds-chat__composer textarea:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

.ds-chat__send {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ds-app.is-manager .ds-chat__send {
  background: #4f46e5;
}

.ds-nav__badge[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .ds-chat {
    grid-template-columns: 1fr;
  }

  .ds-chat__threads {
    max-height: 220px;
    border-right: none;
    border-bottom: 1px solid var(--ds-border);
  }
}

/* Notes sandbox */
.ds-notes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100vh - 140px);
}

.ds-notes__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ds-notes__toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ds-notes__privacy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--ds-highlight-bg);
  color: var(--ds-primary-dark);
  font-size: 12px;
  font-weight: 600;
}

.ds-notes__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  min-height: 0;
  flex: 1;
}

.ds-notes__layout:has(.ds-notes__labels[hidden]) {
  grid-template-columns: 1fr;
}

.ds-notes__labels {
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 210px);
  overflow: auto;
}

.ds-notes__labels[hidden] {
  display: none !important;
}

.ds-notes__labels-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ds-notes__labels-close {
  border: none;
  background: transparent;
  color: var(--ds-muted);
  cursor: pointer;
}

.ds-notes__label-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-notes__label-form input[type="text"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  font: inherit;
}

.ds-notes__label-colors,
.ds-notes__label-item-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ds-notes__color {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--note-color, #fbbf24);
  cursor: pointer;
  padding: 0;
}

.ds-notes__color--sm {
  width: 18px;
  height: 18px;
}

.ds-notes__color.is-active {
  border-color: #0f172a;
  box-shadow: 0 0 0 2px #fff inset;
}

.ds-btn--sm {
  padding: 6px 10px;
  font-size: 12px;
}

.ds-notes__labels-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-notes__labels-empty {
  margin: 0;
  font-size: 12px;
  color: var(--ds-muted);
}

.ds-notes__label-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-highlight-bg);
}

.ds-notes__label-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.ds-notes__label-edit-name {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
}

.ds-notes__label-item-colors {
  grid-column: 1 / -1;
}

.ds-notes__label-delete {
  border: none;
  background: transparent;
  color: var(--ds-muted);
  cursor: pointer;
}

.ds-notes__board-wrap {
  position: relative;
  min-height: 640px;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  overflow: auto;
  background:
    radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.35) 1px, transparent 0) 0 0 / 20px 20px,
    linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.ds-notes__loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ds-muted);
  font-size: 13px;
}

.ds-notes__loading[hidden] {
  display: none !important;
}

.ds-notes__loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--ds-highlight-bg-strong);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: ds-chat-spin 0.8s linear infinite;
}

.ds-notes__board {
  position: relative;
  min-width: 1200px;
  min-height: 900px;
}

.ds-notes__board-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ds-muted);
  text-align: center;
}

.ds-notes__board-empty svg {
  width: 40px;
  height: 40px;
  opacity: 0.45;
}

.ds-note-card {
  position: absolute;
  width: 280px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-note-card.is-dragging {
  opacity: 0.92;
  cursor: grabbing;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);
}

.ds-note-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0;
  cursor: grab;
}

.ds-note-card__title {
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #92400e;
}

.ds-note-card__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ds-note-card__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  color: #92400e;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ds-note-card__icon-btn:hover {
  background: #fff;
}

.ds-note-card__icon-btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.ds-note-card__icon-btn.is-danger {
  color: #dc2626;
}

.ds-note-card__icon-btn.is-danger:hover {
  background: #fee2e2;
}

.ds-notes__label-delete svg {
  width: 15px;
  height: 15px;
}

.ds-note-card__menu-wrap {
  position: relative;
}

.ds-note-card__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 180px;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.ds-note-card__menu[hidden] {
  display: none !important;
}

.ds-note-card__label-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.ds-note-card__label-option:hover,
.ds-note-card__label-option.is-active {
  background: #f1f5f9;
}

.ds-note-card__label-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.ds-note-card__labels-empty {
  display: block;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--ds-muted);
}

.ds-note-card__meta {
  font-size: 11px;
  color: #a16207;
}

.ds-note-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ds-note-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--note-color) 18%, white);
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--note-color) 40%, white);
}

.ds-note-card__body {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: #78350f;
}

.ds-note-card__body:focus,
.ds-note-card__title:focus,
.ds-notes__label-edit-name:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-18);
}

@media (max-width: 900px) {
  .ds-notes__layout {
    grid-template-columns: 1fr;
  }

  .ds-notes__board-wrap {
    min-height: 420px;
  }
}

.ds-app.is-dropshipper #ds-settlements-add {
  display: none !important;
}

.ds-settlements__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
}

.ds-settlements__toolbar .ds-settings-lead {
  margin: 0;
  flex: 1 1 320px;
}

.ds-settlements__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.ds-settlements__loading,
.ds-settlements__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 20px;
  color: var(--ds-muted);
  text-align: center;
}

.ds-settlements__loading[hidden],
.ds-settlements__empty[hidden] {
  display: none !important;
}

.ds-settlements__loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e5e7eb;
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: ds-chat-spin 0.8s linear infinite;
}

.ds-settlements__empty .lucide {
  font-size: 28px;
  opacity: 0.45;
}

.ds-settlement-table-wrap {
  overflow: auto;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-surface);
}

.ds-settlement-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 13px;
}

.ds-settlement-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 8px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  background: var(--ds-surface);
  color: #111827;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.ds-settlement-table thead th:last-child {
  border-right: none;
}

.ds-settlement-table thead th[data-column-key] {
  cursor: default;
}

.ds-app.is-manager .ds-settlement-table thead th[data-column-key] {
  cursor: text;
}

.ds-settlement-column-edit {
  width: 100%;
  min-width: 72px;
  padding: 4px 6px;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  background: var(--ds-surface);
  color: #111827;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.ds-settlement-table td {
  padding: 4px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  vertical-align: middle;
}

.ds-settlement-table td:last-child {
  border-right: none;
}

.ds-settlement-table tbody tr:last-child td {
  border-bottom: none;
}

.ds-settlement-table tbody tr:hover td {
  background: rgba(59, 130, 246, 0.05);
}

.ds-settlement-table tbody tr.is-debt-selected-row td {
  background: rgba(59, 130, 246, 0.05);
}

.ds-settlement-table__num {
  width: 72px;
  min-width: 72px;
  color: #64748b;
  text-align: center;
  white-space: nowrap;
}

.ds-settlement-input--order-number {
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}

.ds-settlement-order-number__open {
  display: inline;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ds-settlement-order-number__open:hover {
  color: var(--ds-primary-dark);
}

.ds-settlement-table__num[data-edit-order-number] {
  cursor: pointer;
}

.ds-detail-lines-wrap {
  margin-bottom: 8px;
}

.ds-detail-lines-table {
  font-size: 12px;
}

.ds-detail-lines-table .ds-line-product__name {
  font-size: 12px;
}

.ds-detail-lines-wrap .ds-order__lines-total {
  display: none;
}

.ds-settlement-table__actions {
  width: 44px;
  text-align: center;
}

.ds-settlement-input,
.ds-settlement-select {
  width: 100%;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-text);
  font: inherit;
  font-size: 13px;
}

.ds-settlement-input:focus,
.ds-settlement-select:focus {
  outline: none;
  border-color: #93c5fd;
  background: var(--ds-surface);
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-12);
}

.ds-settlement-input--date {
  min-width: 0;
}

.ds-settlement-date-cell {
  min-width: 148px;
}

.ds-settlement-date-field {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.ds-settlement-date-field .ds-settlement-input--date {
  flex: 1;
  min-width: 88px;
}

.ds-settlement-date-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}

.ds-settlement-date-picker:hover {
  background: #f1f5f9;
  color: var(--ds-primary);
}

.ds-settlement-date-picker .lucide {
  font-size: 13px;
}

.ds-settlement-date-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.ds-settlement-input--amount {
  min-width: 88px;
  text-align: right;
}

.ds-settlement-input--note {
  min-width: 220px;
}

.ds-settlement-row.is-saving {
  opacity: 0.72;
}

.ds-settlement-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-muted);
  cursor: pointer;
}

.ds-settlement-delete:hover {
  background: #fee2e2;
  color: #dc2626;
}

.ds-settlement-table.is-readonly-mode .ds-settlement-table__actions-head {
  display: none;
}

.ds-settlement-row.is-readonly td {
  padding: 8px 10px;
}

.ds-settlement-table__readonly-amount {
  text-align: right;
  white-space: nowrap;
}

.ds-settlement-table__debt {
  min-width: 92px;
  padding: 8px 10px !important;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.ds-settlement-table__debt--selectable {
  cursor: pointer;
  user-select: none;
}

.ds-settlement-table__debt.is-debt-empty {
  cursor: default;
}

.ds-settlement-table__debt.is-debt-selected {
  background: rgba(59, 130, 246, 0.12);
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.ds-settlement-table__debt-head {
  cursor: pointer;
  text-align: right !important;
}

.ds-settlement-table__debt-head.is-debt-all-selected {
  background: rgba(59, 130, 246, 0.08);
}

.ds-settlement-table__total-row td {
  border-top: 2px solid #e5e7eb;
  background: #f9fafb;
  font-weight: 700;
}

.ds-settlement-table__total-label {
  text-align: right;
  color: #6b7280;
  font-size: 12px;
}

.ds-settlement-table__total-value {
  color: #111827;
  font-size: 13px;
}

.ds-settlements-debt-selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.06);
  font-size: 13px;
}

.ds-settlements-debt-selection[hidden] {
  display: none !important;
}

.ds-settlements-debt-selection__meta {
  color: #374151;
}

.ds-settlements-debt-selection__value {
  color: #111827;
  font-size: 14px;
}

.ds-settlement-univer-wrap {
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 6px;
  height: min(72vh, 720px);
  min-height: 420px;
}

.ds-settlement-univer-wrap #ds-settlements-univer {
  width: 100%;
  height: 100%;
}

.ds-settlement-paid-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.ds-settlement-paid-bar[hidden] {
  display: none !important;
}

.ds-permission-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: #fafafa;
}

.ds-permission-bar[hidden] {
  display: none !important;
}

.ds-permission-bar__label {
  font-size: 12px;
  color: var(--ds-muted);
  margin-right: 4px;
}

.ds-permission-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ds-muted);
  font-size: 12px;
  cursor: pointer;
}

.ds-permission-chip .lucide {
  width: 13px;
  height: 13px;
}

.ds-permission-chip.is-allowed {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #16a34a;
  font-weight: 600;
}

.ds-settlement-paid-bar .ds-settlement-group-toggle {
  border-radius: 10px;
}

.ds-settlements-debt-total {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: #f9fafb;
  font-size: 13px;
  color: #374151;
}

.ds-settlements-debt-total strong {
  color: #111827;
  font-size: 14px;
}

.ds-settlements-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  padding: 10px 14px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.ds-settlements-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ds-settlement-import-table-wrap {
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.ds-settlement-import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ds-settlement-import-table th,
.ds-settlement-import-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

.ds-settlement-import-table thead th {
  background: var(--ds-highlight-bg);
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-align: left;
  white-space: nowrap;
}

.ds-settlement-import-table tfoot td {
  border-bottom: none;
  background: var(--ds-highlight-bg);
  font-weight: 600;
}

.ds-settlement-import-table__product {
  min-width: 180px;
}

.ds-settlement-import-table__sku {
  min-width: 88px;
  white-space: nowrap;
  color: #475569;
  font-size: 12px;
}

.ds-settlement-import-table__product .ds-line-product__name {
  font-size: 13px;
  line-height: 1.35;
}

.ds-settlement-import-table__qty {
  text-align: center;
  white-space: nowrap;
}

.ds-settlement-import-table__percent,
.ds-settlement-import-table__amount,
.ds-settlement-import-table__total-value {
  text-align: right;
  white-space: nowrap;
}

/* Manual +/- % control shown in place of the plain formula text when a line
   has no matching warehouse — lets the manager still apply a markup/discount
   on top of a hand-typed supplier price. */
.ds-settlement-manual-percent {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.ds-settlement-manual-percent__mode {
  width: 40px;
  padding: 4px 2px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: var(--ds-surface);
  font: inherit;
  font-size: 13px;
  text-align: center;
}

.ds-settlement-manual-percent__value {
  width: 52px;
  padding: 4px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: var(--ds-surface);
  font: inherit;
  font-size: 13px;
  text-align: right;
}

/* Единица наценки: процент или фиксированная сумма. Появилась вместе с типом
   расчёта «Ручной»: раньше наценку можно было задать только в процентах. */
.ds-settlement-manual-percent__unit {
  width: 54px;
  padding: 4px 2px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: var(--ds-surface);
  font: inherit;
  font-size: 13px;
  text-align: center;
}

.ds-settlement-manual-percent__mode:focus,
.ds-settlement-manual-percent__value:focus,
.ds-settlement-manual-percent__unit:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-12);
}

.ds-settlement-import-table__total-label {
  text-align: right;
}

.ds-settlement-import-table__empty {
  text-align: center;
  color: var(--ds-muted);
}

.ds-settlement-import-table .ds-settlement-select,
.ds-settlement-import-table .ds-settlement-input {
  width: 100%;
  min-width: 120px;
}

.ds-settlement-import-packaging {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.ds-settlement-import-packaging label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

.ds-settlement-import-packaging .ds-settlement-input {
  max-width: 160px;
}

/* Settings section tabs */
/* Settings sidebar nav */
.ds-settings-section-tabs {
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
}

.ds-settings-section-tabs__divider {
  height: 1px;
  background: var(--ds-border);
  margin: 4px 2px;
}

.ds-settings-section-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ds-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ds-settings-section-tab[hidden] {
  display: none;
}

.ds-settings-section-tab i {
  width: 14px;
  text-align: center;
  font-size: 12px;
  flex-shrink: 0;
}

.ds-settings-section-tab:hover {
  background: var(--ds-bg);
  color: var(--ds-text);
}

.ds-settings-section-tab.is-active {
  background: var(--ds-highlight-bg);
  color: var(--ds-primary);
  font-weight: 600;
}

.ds-settings-section-tab.is-danger {
  color: var(--ds-danger);
}

.ds-settings-section-tab.is-danger:hover,
.ds-settings-section-tab.is-danger.is-active {
  background: rgba(239, 68, 68, 0.08);
  color: var(--ds-danger);
}

/* Theme picker */
.ds-settings-themes {
}

.ds-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.ds-theme-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px;
  border: 2px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) + 4px);
  background: var(--ds-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.ds-theme-option:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.ds-theme-option.is-active {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

.ds-theme-option__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-text);
}

.ds-theme-option__desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ds-muted);
}

.ds-avail-display-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.ds-avail-display-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) + 4px);
  background: var(--ds-surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ds-avail-display-option:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.ds-avail-display-option.is-active {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

.ds-avail-display-option__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
}

.ds-avail-display-option__bar-track {
  width: 80px;
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.ds-avail-display-option__bar-fill {
  display: block;
  width: 66%;
  height: 100%;
  background: var(--ds-primary);
}

.ds-avail-display-option__bar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
}

.ds-avail-display-option__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.ds-avail-display-option__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
}

.ds-theme-preview {
  display: flex;
  gap: 8px;
  height: 88px;
  padding: 8px;
  border-radius: 12px;
  background: #f3f4f6;
  overflow: hidden;
}

.ds-theme-preview__sidebar {
  width: 28%;
  border-radius: 8px;
  flex-shrink: 0;
}

.ds-theme-preview__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ds-theme-preview__bar {
  height: 14px;
  border-radius: 6px;
  background: var(--ds-surface);
}

.ds-theme-preview__card {
  flex: 1;
  border-radius: 6px;
  background: var(--ds-surface);
  border: 1px solid #e5e7eb;
}

.ds-theme-preview--default .ds-theme-preview__sidebar {
  background: #1a233a;
}

.ds-theme-preview--tailwind {
  background: #f9fafb;
}

.ds-theme-preview--tailwind .ds-theme-preview__sidebar {
  background: #ffffff;
  border: 1px solid #e4e7ec;
}

.ds-theme-preview--tailwind .ds-theme-preview__card {
  border-color: #e4e7ec;
}

.ds-dashboard__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
  color: var(--ds-muted);
  font-size: 14px;
}

.ds-dashboard__loading[hidden] {
  display: none !important;
}

.ds-dashboard__chart-wrap {
  position: relative;
  height: 260px;
}

/* ==========================================================================
   Dashboard — drag-and-drop widget grid.
   Layout: toolbar (quick ranges + dates) → outer tabs → widget grid.
   Every widget is one .ds-dash-widget card; its body is rendered by JS per
   widget_key (see DASHBOARD_WIDGET_RENDERERS in app.js).
   ========================================================================== */

/* --- toolbar --- */
.ds-dash-toolbar {
  margin-bottom: 18px;
}

.ds-dash-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.ds-dash-toolbar__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

/* .ds-field has no base display rule (it relies on its container being a
   flex row); pinning it here keeps the label sitting above its control. */
.ds-field--compact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-field--compact > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-muted);
}

.ds-field--compact input,
.ds-field--compact select {
  padding: 8px 11px;
  font-size: 13px;
}

.ds-dash-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: var(--ds-bg-solid, #f1f2f4);
}

.ds-dash-chip {
  padding: 7px 13px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ds-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.ds-dash-chip:hover {
  color: var(--ds-text);
  transform: translateY(-1px);
}

.ds-dash-chip.is-active {
  background: var(--ds-surface);
  color: var(--ds-primary);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.ds-dash-period {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--ds-muted);
  font-size: 12.5px;
}

.ds-dash-period .lucide {
  width: 14px;
  height: 14px;
}

.ds-dash-period em {
  font-style: normal;
  opacity: 0.75;
}

.ds-dash-period em::before {
  content: '·';
  margin: 0 7px;
}

/* --- outer tabs --- */
.ds-dash-tabs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ds-dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--ds-bg-solid, #f1f2f4);
}

.ds-dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ds-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.ds-dash-tab .lucide {
  width: 15px;
  height: 15px;
}

.ds-dash-tab:hover {
  color: var(--ds-text);
}

.ds-dash-tab.is-active {
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
}

.ds-dash-tab__count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.ds-dash-tab.is-active .ds-dash-tab__count {
  background: var(--ds-primary);
  color: #fff;
}

.ds-dash-add-btn {
  flex-shrink: 0;
}

/* --- grid --- */
.ds-dashboard__widgets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* Default widget = half width; --wide spans the full row. metric_card is the
   exception: it's a single number, so it takes one quarter. */
.ds-dash-widget {
  grid-column: span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  border: 1px solid var(--ds-border);
  border-radius: 18px;
  background: var(--ds-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: grab;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: ds-dash-widget-in 0.32s ease backwards;
}

.ds-dash-widget[data-widget-key="metric_card"] {
  grid-column: span 1;
}

.ds-dash-widget--wide {
  grid-column: 1 / -1;
}

.ds-dash-widget[data-widget-key="metric_card"].ds-dash-widget--wide {
  grid-column: span 2;
}

@keyframes ds-dash-widget-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.ds-dash-widget:nth-child(1) { animation-delay: 0.02s; }
.ds-dash-widget:nth-child(2) { animation-delay: 0.05s; }
.ds-dash-widget:nth-child(3) { animation-delay: 0.08s; }
.ds-dash-widget:nth-child(4) { animation-delay: 0.11s; }
.ds-dash-widget:nth-child(5) { animation-delay: 0.14s; }
.ds-dash-widget:nth-child(6) { animation-delay: 0.17s; }

.ds-dash-widget:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
}

.ds-dash-widget.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: none;
}

/* --- widget head --- */
.ds-dash-widget__head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
}

.ds-dash-widget__titles {
  flex: 1;
  min-width: 0;
}

.ds-dash-widget__head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ds-text);
}

.ds-dash-widget__hint {
  margin: 3px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ds-muted);
}

.ds-dash-widget__grip {
  display: flex;
  margin-top: 2px;
  color: rgba(148, 163, 184, 0.55);
  cursor: grab;
  flex-shrink: 0;
  transition: color 0.16s ease;
}

.ds-dash-widget:hover .ds-dash-widget__grip {
  color: var(--ds-muted);
}

.ds-dash-widget__grip .lucide {
  width: 15px;
  height: 15px;
}

/* Action buttons stay hidden until hover so the card reads as content, not
   as a control panel — they fade in with the card's hover state. */
.ds-dash-widget__actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.ds-dash-widget:hover .ds-dash-widget__actions,
.ds-dash-widget:focus-within .ds-dash-widget__actions {
  opacity: 1;
  transform: translateY(0);
}

.ds-dash-widget__act {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--ds-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ds-dash-widget__act:hover {
  background: var(--ds-bg-solid, #f1f2f4);
  color: var(--ds-text);
}

.ds-dash-widget__act--danger:hover {
  background: #fee2e2;
  color: #dc2626;
}

.ds-dash-widget__act .lucide {
  width: 15px;
  height: 15px;
}

/* --- inner tabs --- */
.ds-dash-widget__tabs {
  display: inline-flex;
  gap: 2px;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 3px;
  border-radius: 10px;
  background: var(--ds-bg-solid, #f1f2f4);
}

.ds-dash-widget__tab {
  padding: 5px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ds-muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ds-dash-widget__tab:hover {
  color: var(--ds-text);
}

.ds-dash-widget__tab.is-active {
  background: var(--ds-surface);
  color: var(--ds-primary);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

.ds-dash-widget__body {
  flex: 1;
  min-width: 0;
}

.ds-dash-widget__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  color: var(--ds-muted);
  font-size: 12.5px;
}

.ds-dash-widget__empty .lucide {
  width: 26px;
  height: 26px;
  opacity: 0.45;
}

/* --- stat tiles (finance summary) --- */
.ds-dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
}

.ds-dash-tile {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 15px;
  border: 1px solid var(--ds-border);
  border-radius: 13px;
  background: var(--ds-bg-solid, #fafafa);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.ds-dash-tile:hover {
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}

.ds-dash-tile--accent {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.09), rgba(99, 102, 241, 0.02));
  border-color: rgba(99, 102, 241, 0.25);
}

.ds-dash-tile__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-muted);
}

.ds-dash-tile__value {
  font-size: 19px;
  font-weight: 700;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* --- growth / delta badge --- */
.ds-dash-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ds-dash-delta .lucide {
  width: 13px;
  height: 13px;
}

.ds-dash-delta.is-up { color: #16a34a; }
.ds-dash-delta.is-down { color: #dc2626; }
.ds-dash-delta.is-flat { color: var(--ds-muted); }

.ds-dash-delta__abs {
  color: var(--ds-muted);
  font-weight: 500;
}

.ds-dash-delta__abs::before {
  content: '·';
  margin-right: 5px;
}

/* --- metric card --- */
.ds-dash-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-dash-metric__value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}

.ds-dash-metric.is-negative .ds-dash-metric__value {
  color: #dc2626;
}

.ds-dash-spark {
  width: 100%;
  height: 30px;
  margin-top: 2px;
  overflow: visible;
}

/* --- horizontal bar lists (top products, carriers) --- */
.ds-dash-bars {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ds-dash-bar__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 12.5px;
}

.ds-dash-bar__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-text);
}

.ds-dash-bar__sku {
  font-style: normal;
  color: var(--ds-muted);
  font-size: 11px;
}

.ds-dash-bar__top b {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
}

.ds-dash-bar__top b i {
  font-style: normal;
  font-weight: 500;
  color: var(--ds-muted);
}

.ds-dash-bar__track {
  height: 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}

.ds-dash-bar__track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  animation: ds-dash-bar-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes ds-dash-bar-grow {
  from { width: 0 !important; }
}

/* --- problem list --- */
.ds-dash-problems {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-dash-problem {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 13px;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

a.ds-dash-problem:hover {
  transform: translateX(3px);
  border-color: rgba(99, 102, 241, 0.4);
  background: var(--ds-bg-solid, #fafafa);
}

.ds-dash-problem__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
}

.ds-dash-problem__icon .lucide {
  width: 15px;
  height: 15px;
}

.ds-dash-problem--danger .ds-dash-problem__icon {
  background: #fee2e2;
  color: #dc2626;
}

.ds-dash-problem--warn .ds-dash-problem__icon {
  background: #fef3c7;
  color: #b45309;
}

.ds-dash-problem.is-zero {
  opacity: 0.55;
}

.ds-dash-problem.is-zero .ds-dash-problem__icon {
  background: rgba(148, 163, 184, 0.16);
  color: var(--ds-muted);
}

.ds-dash-problem__label {
  flex: 1;
  min-width: 0;
}

.ds-dash-problem__count {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ds-dash-problems__clear {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 26px 12px;
  color: #16a34a;
  font-size: 13px;
  font-weight: 600;
}

.ds-dash-problems__clear .lucide {
  width: 30px;
  height: 30px;
}

/* --- empty tab / skeleton --- */
.ds-dash-empty-tab {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 54px 20px;
  border: 1px dashed var(--ds-border);
  border-radius: 18px;
  color: var(--ds-muted);
  text-align: center;
}

.ds-dash-empty-tab .lucide {
  width: 34px;
  height: 34px;
  opacity: 0.4;
}

.ds-dash-empty-tab p {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-text);
}

.ds-dash-empty-tab span {
  font-size: 12.5px;
}

.ds-dash-skeleton-card {
  grid-column: span 2;
  padding: 18px 20px;
  border: 1px solid var(--ds-border);
  border-radius: 18px;
  background: var(--ds-surface);
}

.ds-dash-skeleton-card__title {
  display: block;
  width: 42%;
  height: 13px;
  margin-bottom: 14px;
  border-radius: 6px;
}

.ds-dash-skeleton-card__body {
  display: block;
  width: 100%;
  height: 132px;
  border-radius: 12px;
}

/* --- choice picker (add widget / pick metric) --- */
.ds-choice-list {
  max-height: 52vh;
  overflow-y: auto;
  margin: 4px -4px 0;
  padding: 0 4px;
}

.ds-choice-hint {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ds-muted, #6b7280);
}

/* --- responsive --- */
@media (max-width: 1200px) {
  .ds-dashboard__widgets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-dash-widget,
  .ds-dash-skeleton-card {
    grid-column: span 2;
  }

  .ds-dash-widget[data-widget-key="metric_card"] {
    grid-column: span 1;
  }
}

@media (max-width: 720px) {
  .ds-dashboard__widgets {
    grid-template-columns: 1fr;
  }

  .ds-dash-widget,
  .ds-dash-widget--wide,
  .ds-dash-widget[data-widget-key="metric_card"],
  .ds-dash-skeleton-card {
    grid-column: 1 / -1;
  }

  .ds-dash-toolbar__row {
    flex-direction: column;
    align-items: stretch;
  }

  /* Touch has no hover, so the per-widget actions would be unreachable if
     they stayed hover-gated. */
  .ds-dash-widget__actions {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-dash-widget,
  .ds-dash-bar__track span {
    animation: none !important;
  }
}

.ds-finance__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
  color: var(--ds-muted);
  font-size: 14px;
}

.ds-finance__loading[hidden] {
  display: none !important;
}

/* "Tailwind" theme — real TailAdmin design tokens (MIT-licensed, pulled
   from their src/css/style.css @theme block + partials), not a guess. Two
   corrections from the first pass: TailAdmin's sidebar is actually WHITE
   with a light-blue active pill (not a dark navy sidebar), and its table
   headers have no fill — just a top/bottom border and plain-case gray text.
   Same mechanism as glass: override the tokens once at the root and
   most components restyle themselves via existing var(--ds-*) references. */
[data-theme="tailwind"] {
  --ds-bg: #f9fafb;
  --ds-bg-solid: #f9fafb;
  --ds-surface: #ffffff;
  --ds-border: #e4e7ec;
  --ds-text: #1d2939;
  --ds-muted: #667085;

  --ds-primary: #465fff;
  --ds-primary-dark: #3641f5;
  --ds-highlight-bg: #ecf3ff;
  --ds-highlight-bg-strong: #dde9ff;
  --ds-highlight-border: #c2d6ff;
  --ds-primary-alpha-08: rgba(70, 95, 255, 0.08);
  --ds-primary-alpha-12: rgba(70, 95, 255, 0.12);
  --ds-primary-alpha-18: rgba(70, 95, 255, 0.18);
  --ds-primary-alpha-22: rgba(70, 95, 255, 0.22);
  --ds-primary-alpha-25: rgba(70, 95, 255, 0.25);
  --ds-primary-alpha-35: rgba(70, 95, 255, 0.35);
  --ds-primary-alpha-45: rgba(70, 95, 255, 0.45);

  --ds-success: #039855;
  --ds-success-bg: #ecfdf3;
  --ds-warning: #dc6803;
  --ds-warning-bg: #fffaeb;
  --ds-danger: #d92d20;
  --ds-danger-bg: #fef3f2;
  --ds-purple: #7a5af8;
  --ds-purple-bg: #f4f2ff;

  --ds-radius: 16px;
  --ds-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

/* Cards/table container: TailAdmin's card shell is rounded-2xl (16px,
   matches --ds-radius above) border + white bg, already mostly covered by
   the token overrides — this just drops the default theme's per-row shadow
   in favor of one border around the whole table body. */
[data-theme="tailwind"] .ds-order {
  border-radius: 0;
  border-bottom: 1px solid #f2f4f7;
  box-shadow: none;
}

[data-theme="tailwind"] .ds-order__head:hover {
  background: #f9fafb;
}

[data-theme="tailwind"] .ds-orders-table-head {
  background: #f9fafb;
}

[data-theme="tailwind"] #ds-orders-view.is-table-layout .ds-orders-table-head {
  background: #ffffff;
  border: 1px solid var(--ds-border);
  border-bottom: 1px solid #f2f4f7;
  border-radius: 16px 16px 0 0;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #667085;
  margin-bottom: 0;
}

[data-theme="tailwind"] .ds-orders.is-table .ds-orders-table-body {
  border: 1px solid var(--ds-border);
  border-top: none;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  background: var(--ds-surface);
}

[data-theme="tailwind"] .ds-orders.is-table .ds-orders-table-body > .ds-order:last-child {
  border-bottom: none;
}

[data-theme="tailwind"] .ds-btn {
  border-radius: 8px;
}

[data-theme="tailwind"] .ds-btn--primary {
  box-shadow: var(--ds-shadow);
}

[data-theme="tailwind"] .ds-btn--ghost {
  border: 1px solid #d0d5dd;
  box-shadow: var(--ds-shadow);
}

/* Badges: TailAdmin badges are always fully rounded pills with a soft-50
   tint background and a 600-weight text color (never a filled solid bg for
   status chips) — rounded-full px-2.5 py-0.5 text-sm font-medium. */
[data-theme="tailwind"] .ds-pill,
[data-theme="tailwind"] .ds-tracking-badge {
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 500;
}

[data-theme="tailwind"] .ds-topbar {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  box-shadow: none;
}

[data-theme="tailwind"] .ds-orders-status-tabs .ds-order-filter,
[data-theme="tailwind"] .ds-mgr-order-filter,
[data-theme="tailwind"] .ds-drop-order-filter {
  border-radius: 999px;
}

[data-theme="tailwind"] .ds-orders-pager__controls button,
[data-theme="tailwind"] .ds-orders-pager__size select {
  border-radius: 8px;
}

/* Sidebar — real TailAdmin: white bg with a right border, not a dark panel.
   Active item = light-blue pill (bg-brand-50/text-brand-500), inactive =
   gray-700, hover = bg-gray-100. Values are verbatim from their
   `menu-item`/`menu-item-active`/`menu-item-inactive` utilities. */
/* Sidebar — dark panel (TailAdmin dark-mode gray-900) inside the light
   theme: bg gray-900 #101828, light links, brand-400 active. Menu icons
   enlarged to ~reference size (24px svgs) with a lighter 1.75 stroke. */
[data-theme="tailwind"] .ds-sidebar {
  background: #101828;
  color: #d0d5dd;
  border-right: 1px solid #1d2939;
}

[data-theme="tailwind"] .ds-brand {
  padding: 24px 20px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="tailwind"] .ds-brand__title {
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.01em;
}

[data-theme="tailwind"] .ds-nav {
  padding: 12px 16px;
}

[data-theme="tailwind"] .ds-nav__item {
  border-radius: 8px;
  padding: 10px 12px;
  color: #d0d5dd;
  font-size: 14px;
  font-weight: 500;
  gap: 12px;
  margin-bottom: 4px;
}

[data-theme="tailwind"] .ds-nav__item .lucide {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
  color: #98a2b3;
  opacity: 1;
}

[data-theme="tailwind"] .ds-nav__item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f2f4f7;
}

[data-theme="tailwind"] .ds-nav__item:hover .lucide {
  color: #d0d5dd;
}

[data-theme="tailwind"] .ds-nav__item.is-active {
  background: rgba(70, 95, 255, 0.15);
  color: #7592ff;
  font-weight: 500;
}

[data-theme="tailwind"] .ds-nav__item.is-active .lucide {
  color: #7592ff;
  opacity: 1;
}

[data-theme="tailwind"] .ds-nav__badge {
  background: #465fff;
  color: #fff;
}

[data-theme="tailwind"] .ds-nav__item-chevron {
  width: 16px;
  height: 16px;
  color: #98a2b3;
}

[data-theme="tailwind"] .ds-nav__submenu {
  margin: 2px 0 8px 30px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="tailwind"] .ds-nav__submenu-item {
  color: #98a2b3;
}

[data-theme="tailwind"] .ds-nav__submenu-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f2f4f7;
}

[data-theme="tailwind"] .ds-nav__submenu-item.is-active {
  background: rgba(70, 95, 255, 0.15);
  color: #7592ff;
  font-weight: 500;
}

[data-theme="tailwind"] .ds-nav__submenu-count {
  background: rgba(255, 255, 255, 0.06);
  color: #98a2b3;
}

[data-theme="tailwind"] .ds-nav__submenu-item.is-active .ds-nav__submenu-count {
  background: rgba(70, 95, 255, 0.22);
  color: #7592ff;
}

[data-theme="tailwind"] .ds-sidebar__help {
  margin: 16px;
  padding: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="tailwind"] .ds-sidebar__help p {
  color: #98a2b3;
}

[data-theme="tailwind"] .ds-sidebar__help button {
  border-radius: 8px;
  background: #465fff;
  border: 1px solid #465fff;
  color: #fff;
  font-weight: 500;
  transition: background 0.15s ease;
}

[data-theme="tailwind"] .ds-sidebar__help button:hover {
  background: #3641f5;
  border-color: #3641f5;
}

/* ====================================================================
   TailAdmin theme — orders screen completion
   Design tokens verbatim from the TailAdmin repo (@theme in style.css):
   brand-500 #465fff / 600 #3641f5 / 50 #ecf3ff / 300 #9cb9ff / 25 #f2f7ff
   gray 50 #f9fafb / 100 #f2f4f7 / 200 #e4e7ec / 300 #d0d5dd / 400 #98a2b3
        / 500 #667085 / 700 #344054 / 800 #1d2939
   shadow-theme-xs 0px 1px 2px 0px rgba(16,24,40,.05)
   focus ring    border brand-300 + 0 0 0 3px rgba(70,95,255,.10)
   Font: Outfit (loaded in index.html for this theme).
   ==================================================================== */

/* --- Typography: TailAdmin ships everything in Outfit -------------- */
[data-theme="tailwind"] body,
[data-theme="tailwind"] button,
[data-theme="tailwind"] input,
[data-theme="tailwind"] textarea,
[data-theme="tailwind"] select {
  font-family: "Outfit", "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
}

[data-theme="tailwind"] #ds-page-title {
  font-weight: 600;
  color: #1d2939;
  letter-spacing: -0.01em;
}

/* --- Topbar: white bar, brand controls ---------------------------- */
[data-theme="tailwind"] .ds-topbar__search {
  height: 44px;
  border-radius: 8px;
  border: 1px solid #e4e7ec;
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="tailwind"] .ds-topbar__search:focus-within {
  border-color: #9cb9ff;
  box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.10);
}

[data-theme="tailwind"] .ds-topbar__search .lucide {
  color: #98a2b3;
}

[data-theme="tailwind"] .ds-topbar__search input {
  color: #1d2939;
}

[data-theme="tailwind"] .ds-topbar__search input::placeholder {
  color: #98a2b3;
}

/* Round "+" new-order button — brand pill */
[data-theme="tailwind"] .ds-topbar__create-order {
  background: #465fff;
  border: none;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: background 0.15s ease;
}

[data-theme="tailwind"] .ds-topbar__create-order:hover {
  background: #3641f5;
}

/* Bell / help — bordered circular icon buttons like TailAdmin header */
[data-theme="tailwind"] .ds-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #e4e7ec;
  background: #fff;
  color: #667085;
  transition: background 0.15s ease, color 0.15s ease;
}

[data-theme="tailwind"] .ds-icon-btn:hover {
  background: #f2f4f7;
  color: #344054;
}

[data-theme="tailwind"] .ds-notif-badge,
[data-theme="tailwind"] .ds-notif-badge:not([hidden]) {
  background: #fd853a;
  color: #fff;
}

[data-theme="tailwind"] .ds-user__avatar {
  background: #ecf3ff;
  color: #465fff;
  font-weight: 600;
  border: 1px solid #dde9ff;
}

[data-theme="tailwind"] .ds-user__name {
  color: #1d2939;
  font-weight: 500;
}

[data-theme="tailwind"] .ds-user__role {
  color: #667085;
}

/* --- "Передача заказов на склад" card ----------------------------- */
/* No divider line between the warehouse-mode bar and the filter block
   below it — the reference keeps them as one continuous white surface,
   separated only by spacing. */
[data-theme="tailwind"] .ds-orders-header > :not([hidden]) + :not([hidden]) {
  border-top: none;
}

[data-theme="tailwind"] .ds-mgr-filter-block {
  padding: 0 20px 16px;
}

[data-theme="tailwind"] .ds-warehouse-mode-bar__title {
  color: #1d2939;
  font-weight: 600;
}

[data-theme="tailwind"] .ds-warehouse-mode-bar__hint {
  color: #667085;
}

[data-theme="tailwind"] .ds-warehouse-mode-bar__option {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font-weight: 500;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

[data-theme="tailwind"] .ds-warehouse-mode-bar__option:hover {
  border-color: #d0d5dd;
  background: #f9fafb;
}

[data-theme="tailwind"] .ds-warehouse-mode-bar__option.is-active {
  border-color: #c2d6ff;
  background: #ecf3ff;
  color: #465fff;
  box-shadow: none;
}

/* --- Filters block: TailAdmin "Filter" pill button ----------------- */
[data-theme="tailwind"] .ds-mgr-filter-block__head {
  display: inline-flex;
  width: auto;
  align-self: flex-start;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease;
}

[data-theme="tailwind"] .ds-mgr-filter-block__head:hover {
  background: #f9fafb;
  border-color: #98a2b3;
}

[data-theme="tailwind"] .ds-mgr-filter-block__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: #344054;
  flex-shrink: 0;
}

[data-theme="tailwind"] .ds-mgr-filter-block__title {
  color: #344054;
  font-weight: 500;
  font-size: 14px;
}

[data-theme="tailwind"] .ds-mgr-filter-block__chevron {
  width: 14px;
  height: 14px;
  color: #667085;
}

[data-theme="tailwind"] .ds-mgr-filter-group__head {
  color: #667085;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  font-size: 11px;
}

[data-theme="tailwind"] .ds-orders-date-filter__field span {
  color: #667085;
}

[data-theme="tailwind"] .ds-orders-date-filter__field input[type="date"],
[data-theme="tailwind"] .ds-orders-date-filter__field input.form-control {
  height: 40px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  color: #1d2939;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

[data-theme="tailwind"] .ds-orders-date-filter__field input[type="date"]:focus,
[data-theme="tailwind"] .ds-orders-date-filter__field input.form-control:focus {
  border-color: #9cb9ff;
  box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.10);
}

/* --- Filter chips (Наличие / Мои фильтры) ------------------------- */
[data-theme="tailwind"] .ds-mgr-order-filter,
[data-theme="tailwind"] .ds-mgr-availability-filter,
[data-theme="tailwind"] .ds-drop-order-filter {
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-weight: 500;
}

[data-theme="tailwind"] .ds-mgr-order-filter:hover,
[data-theme="tailwind"] .ds-mgr-availability-filter:hover,
[data-theme="tailwind"] .ds-drop-order-filter:hover {
  border-color: #d0d5dd;
  background: #f9fafb;
}

[data-theme="tailwind"] .ds-mgr-order-filter.is-active,
[data-theme="tailwind"] .ds-mgr-availability-filter.is-active,
[data-theme="tailwind"] .ds-drop-order-filter.is-active {
  border-color: #c2d6ff;
  background: #ecf3ff;
  color: #465fff;
  font-weight: 500;
}

/* --- Status tabs: TailAdmin segmented control -----------------------
   Reference is a light-gray pill housing individual white pill tabs —
   not the base theme's folder/skew shape, so this reshapes the tab
   itself (border-radius, no skewed ::after) rather than just recoloring. */
[data-theme="tailwind"] .ds-orders-status-tabs {
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: none;
  border-radius: 12px;
  background: #f9fafb;
}

[data-theme="tailwind"] .ds-order-status-tab {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  color: #667085;
  font-weight: 500;
}

[data-theme="tailwind"] .ds-order-status-tab::after {
  content: none;
}

[data-theme="tailwind"] .ds-order-status-tab:hover {
  color: #344054;
  background: rgba(255, 255, 255, 0.6);
}

[data-theme="tailwind"] .ds-order-status-tab.is-active {
  border: none;
  background: #fff;
  color: #1d2939;
  font-weight: 600;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
}

[data-theme="tailwind"] .ds-order-status-tab__count {
  background: #f2f4f7;
  color: #667085;
  font-weight: 600;
}

[data-theme="tailwind"] .ds-order-status-tab.is-active .ds-order-status-tab__count {
  background: #ecf3ff;
  color: #465fff;
}

/* --- Partner tabs — brand underline ------------------------------- */
[data-theme="tailwind"] .ds-partner-tab.is-active {
  color: #465fff;
  border-bottom-color: #465fff;
  background: transparent;
}

[data-theme="tailwind"] .ds-partner-tab:hover {
  color: #1d2939;
  background: #f9fafb;
}

[data-theme="tailwind"] .ds-partner-tab__count {
  background: #f2f4f7;
  color: #667085;
}

[data-theme="tailwind"] .ds-partner-tab.is-active .ds-partner-tab__count {
  background: #ecf3ff;
  color: #465fff;
}

/* --- View toggle + collapse-all ----------------------------------- */
[data-theme="tailwind"] .ds-view-toggle {
  border-radius: 8px;
  color: #667085;
}

[data-theme="tailwind"] .ds-view-toggle:hover {
  background: #f2f4f7;
  color: #344054;
}

[data-theme="tailwind"] .ds-view-toggle.is-active {
  background: #ecf3ff;
  color: #465fff;
}

/* --- Order rows / cells ------------------------------------------- */
[data-theme="tailwind"] .ds-order__title {
  color: #1d2939;
  font-weight: 600;
}

[data-theme="tailwind"] .ds-order__meta,
[data-theme="tailwind"] .ds-order__meta-group {
  color: #667085;
}

[data-theme="tailwind"] .ds-order__total {
  color: #1d2939;
  font-weight: 600;
}

[data-theme="tailwind"] .ds-order__cell {
  color: #344054;
}

/* Availability progress track — brand fill on gray-100 rail */
[data-theme="tailwind"] .ds-order__avail-progress-track {
  background: #f2f4f7;
}

[data-theme="tailwind"] .ds-order__avail-progress-fill {
  background: #465fff;
}

[data-theme="tailwind"] .ds-order__avail-progress-label {
  color: #667085;
}

/* --- Order lines table (expanded order) --------------------------- */
[data-theme="tailwind"] .ds-order__body-inner {
  background: #fff;
}

[data-theme="tailwind"] .ds-detail-lines-table th,
[data-theme="tailwind"] .ds-order__body-inner table th {
  color: #667085;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-size: 12px;
}

/* --- Order detail panel ------------------------------------------- */
[data-theme="tailwind"] .ds-detail {
  border-left: 1px solid #e4e7ec;
  background: #fff;
}

[data-theme="tailwind"] .ds-detail__head {
  border-bottom: 1px solid #f2f4f7;
}

[data-theme="tailwind"] .ds-detail__meta-row {
  color: #344054;
}

[data-theme="tailwind"] .ds-detail__hint {
  color: #667085;
}

/* --- Pager -------------------------------------------------------- */
[data-theme="tailwind"] .ds-orders-pager__info,
[data-theme="tailwind"] .ds-orders-pager__label,
[data-theme="tailwind"] .ds-orders-pager__size {
  color: #667085;
}

[data-theme="tailwind"] .ds-orders-pager__size select {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  color: #1d2939;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

/* --- Buttons: ghost/outline uses gray-300 border like TailAdmin --- */
[data-theme="tailwind"] .ds-btn--ghost {
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

[data-theme="tailwind"] .ds-btn--ghost:hover {
  background: #f9fafb;
  color: #1d2939;
  border-color: #d0d5dd;
}

[data-theme="tailwind"] .ds-btn--primary {
  background: #465fff;
  border-color: #465fff;
}

[data-theme="tailwind"] .ds-btn--primary:hover {
  background: #3641f5;
  border-color: #3641f5;
}

/* The "Сгенерировать ТТН и передать Prom" button is a success-outline
   variant in the base theme (green text/border, transparent bg) via
   .ds-np-summary [data-np-open-modal] — same specificity as .ds-btn--primary
   above, so its green color survives even after our blue background wins.
   Override it directly so it reads as a normal solid brand button here. */
[data-theme="tailwind"] .ds-np-summary [data-np-open-modal] {
  border-color: #465fff;
  background: #465fff;
  color: #fff;
}

[data-theme="tailwind"] .ds-np-summary [data-np-open-modal]:hover {
  background: #3641f5;
  border-color: #3641f5;
}

/* Both cards share identical border/padding/radius in the base theme, but
   .ds-ttn-add's background is plain var(--ds-surface) — same white as the
   panel itself — so its border reads as invisible next to the tinted NP
   card above it. With no visible boundary, the button/dropzone inside look
   like they're floating loose rather than contained. Give it a visible
   gray-50 card treatment to match. */
[data-theme="tailwind"] .ds-np-summary {
  border-color: #e4e7ec;
  border-radius: 12px;
  background: #f5f8ff;
}

[data-theme="tailwind"] .ds-ttn-add {
  border-color: #e4e7ec;
  border-radius: 12px;
  background: #f9fafb;
}

[data-theme="tailwind"] .ds-ttn-add__title {
  color: #344054;
}

[data-theme="tailwind"] .ds-ttn-number-form__label {
  color: #667085;
}

[data-theme="tailwind"] .ds-ttn-number-form__input {
  border-color: #e4e7ec;
  border-radius: 8px;
  background: #fff;
}

[data-theme="tailwind"] .ds-ttn-number-form__input:focus {
  border-color: #9cb9ff;
  box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.10);
}

[data-theme="tailwind"] .ds-ttn-add__divider {
  color: #98a2b3;
}

[data-theme="tailwind"] .ds-upload {
  border-color: #d0d5dd;
  border-radius: 10px;
  background: #fff;
}

[data-theme="tailwind"] .ds-upload:hover,
[data-theme="tailwind"] .ds-upload.is-dragover {
  border-color: #465fff;
  background: #ecf3ff;
}

[data-theme="tailwind"] .ds-upload p {
  color: #344054;
}

[data-theme="tailwind"] .ds-upload small {
  color: #98a2b3;
}

/* --- Generic inputs / textarea / select in this theme ------------- */
[data-theme="tailwind"] .ds-field input,
[data-theme="tailwind"] .ds-field select,
[data-theme="tailwind"] .ds-select,
[data-theme="tailwind"] .ds-order__cell input[type="text"],
[data-theme="tailwind"] textarea.ds-order__line-comment {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  color: #1d2939;
}

[data-theme="tailwind"] .ds-field input:focus,
[data-theme="tailwind"] .ds-field select:focus,
[data-theme="tailwind"] .ds-select:focus,
[data-theme="tailwind"] textarea.ds-order__line-comment:focus {
  outline: none;
  border-color: #9cb9ff;
  box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.10);
}

/* --- flatpickr calendar: brand selected day ----------------------- */
[data-theme="tailwind"] .flatpickr-day.selected,
[data-theme="tailwind"] .flatpickr-day.selected:hover,
[data-theme="tailwind"] .flatpickr-day.startRange,
[data-theme="tailwind"] .flatpickr-day.endRange {
  background: #465fff;
  border-color: #465fff;
  color: #fff;
}

[data-theme="tailwind"] .flatpickr-day:hover {
  background: #ecf3ff;
  border-color: #ecf3ff;
}

/* --- Order preview thumbnails: 50x50 -------------------------------- */
[data-theme="tailwind"] .ds-order__main-thumb {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border-color: #e4e7ec;
}

[data-theme="tailwind"] .ds-order__main-thumb--empty i {
  width: 20px;
  height: 20px;
}

[data-theme="tailwind"] .ds-order__items-thumb {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  border-color: #e4e7ec;
}

[data-theme="tailwind"] .ds-order__items-thumb--empty i {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------
   Tailwind theme — Chat page, matched to demo.tailadmin.com/chat
   -------------------------------------------------------------------- */
[data-theme="tailwind"] .ds-chat {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  min-height: calc(100vh - 170px);
  border: none;
  border-radius: 0;
  background: transparent;
}

[data-theme="tailwind"] .ds-chat__threads {
  border-right: none;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  background: #ffffff;
}

[data-theme="tailwind"] .ds-chat__threads-head {
  padding: 20px 20px 12px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: #1d2939;
}

[data-theme="tailwind"] .ds-chat__panel {
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}

[data-theme="tailwind"] .ds-chat-thread {
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border-color: transparent;
}

[data-theme="tailwind"] .ds-chat-thread:hover {
  background: #f2f4f7;
  border-color: transparent;
}

[data-theme="tailwind"] .ds-chat-thread.is-active {
  background: #f2f4f7;
  border-color: transparent;
  box-shadow: none;
}

[data-theme="tailwind"] .ds-chat-thread__avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #ecf3ff;
  color: #465fff;
}

[data-theme="tailwind"] .ds-chat-thread__avatar.has-logo {
  border-color: #e4e7ec;
}

[data-theme="tailwind"] .ds-chat-thread__body strong {
  font-size: 14px;
  font-weight: 500;
  color: #1d2939;
}

[data-theme="tailwind"] .ds-chat-thread__body span {
  font-size: 12px;
  color: #667085;
}

[data-theme="tailwind"] .ds-chat-thread__time {
  font-size: 12px;
  color: #98a2b3;
}

[data-theme="tailwind"] .ds-chat-thread__badge {
  background: #465fff;
}

[data-theme="tailwind"] .ds-chat__head {
  padding: 16px 20px;
  border-bottom-color: #e4e7ec;
  background: #ffffff;
}

[data-theme="tailwind"] .ds-chat__head-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #ecf3ff;
  color: #465fff;
}

[data-theme="tailwind"] .ds-chat__head-title {
  font-size: 14px;
  font-weight: 500;
  color: #667085;
}

[data-theme="tailwind"] .ds-chat__head-sub {
  color: #667085;
}

[data-theme="tailwind"] .ds-chat__head-typing {
  color: #465fff;
}

[data-theme="tailwind"] .ds-chat__messages {
  padding: 20px 24px;
  gap: 24px;
  background: #ffffff;
}

[data-theme="tailwind"] .ds-chat-bubble {
  max-width: 350px;
  padding: 8px 12px;
  border-radius: 8px 8px 8px 2px;
  background: #f2f4f7;
  border: none;
  box-shadow: none;
  color: #1d2939;
}

[data-theme="tailwind"] .ds-chat-bubble.is-own {
  align-self: flex-end;
  background: #465fff;
  border-color: transparent;
  border-radius: 8px 8px 2px 8px;
  color: #ffffff;
}

[data-theme="tailwind"] .ds-chat-bubble.is-own .ds-chat-bubble__text {
  color: #ffffff;
}

[data-theme="tailwind"] .ds-chat-bubble.is-own .ds-chat-bubble__time {
  color: #e4e7ec;
  text-align: right;
}

[data-theme="tailwind"] .ds-chat-bubble__author {
  color: #465fff;
}

[data-theme="tailwind"] .ds-chat-bubble__text {
  font-size: 14px;
  color: #1d2939;
}

[data-theme="tailwind"] .ds-chat-bubble__time {
  color: #667085;
  font-size: 12px;
}

[data-theme="tailwind"] .ds-chat__composer {
  padding: 12px 16px;
  border-top-color: #e4e7ec;
  background: #ffffff;
}

[data-theme="tailwind"] .ds-chat__composer textarea {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 8px 0;
  font-size: 14px;
}

[data-theme="tailwind"] .ds-chat__composer textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

[data-theme="tailwind"] .ds-chat__attach {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #667085;
}

[data-theme="tailwind"] .ds-chat__attach:hover {
  color: #465fff;
  border-color: transparent;
  background: #f2f4f7;
}

[data-theme="tailwind"] .ds-chat__send {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #465fff;
  color: #fff;
}

[data-theme="tailwind"] .ds-chat__send:hover {
  background: #3641f5;
}

[data-theme="tailwind"] .ds-chat__pinned {
  background: #fffaeb;
  border-bottom-color: #fde68a;
  color: #b54708;
}

[data-theme="tailwind"] .ds-chat__reply {
  background: #ecf3ff;
  border-left-color: #465fff;
  border-radius: 8px;
}

[data-theme="tailwind"] .ds-chat__reply-author {
  color: #465fff;
}

@media (max-width: 900px) {
  [data-theme="tailwind"] .ds-chat {
    gap: 12px;
  }
}

/* Warehouse catalog */
.ds-warehouse__toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ds-warehouse__toolbar .ds-settings-lead {
  margin: 0;
  max-width: 640px;
}

.ds-warehouse__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ds-warehouse__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.ds-warehouse-stat {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 16px 18px;
  box-shadow: var(--ds-shadow);
}

.ds-warehouse-stat__value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ds-text);
}

.ds-warehouse-stat__label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ds-muted);
}

.ds-warehouse-stat--success .ds-warehouse-stat__value {
  color: var(--ds-success);
}

.ds-warehouse-stat--muted .ds-warehouse-stat__value {
  color: var(--ds-muted);
}

.ds-warehouse-stat--warning .ds-warehouse-stat__value {
  color: var(--ds-warning);
}

.ds-warehouse__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ds-warehouse__search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(100%, 320px);
  flex: 1;
  max-width: 420px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  color: var(--ds-muted);
}

.ds-warehouse__search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--ds-text);
}

.ds-warehouse__search input:focus {
  outline: none;
}

.ds-warehouse__search input:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.ds-warehouse__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ds-warehouse-filter {
  padding: 8px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.ds-warehouse-filter.is-active {
  color: var(--ds-primary);
  background: var(--ds-highlight-bg);
  border-color: var(--ds-highlight-border);
}

.ds-warehouse-filter:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

.ds-warehouse-table-wrap {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
  overflow: auto;
}

.ds-warehouse-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ds-warehouse-table th,
.ds-warehouse-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ds-border);
  text-align: left;
  vertical-align: middle;
}

.ds-warehouse-table th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ds-muted);
  background: var(--ds-highlight-bg);
}

.ds-warehouse__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
  color: var(--ds-muted);
}

.ds-warehouse__loading[hidden] {
  display: none !important;
}

.ds-warehouse-table__photo {
  width: 72px;
}

.ds-warehouse-table__thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f4f6;
  display: block;
  cursor: pointer;
}

.ds-warehouse-table__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-muted);
  font-size: 16px;
}

.ds-warehouse-table tbody:empty {
  display: none;
}

.ds-warehouse-table-wrap[hidden] {
  display: none !important;
}

.ds-warehouse-pager {
  margin-top: 16px;
}

.ds-warehouse-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.ds-warehouse-sort:hover,
.ds-warehouse-sort.is-active {
  color: var(--ds-primary);
}

.ds-warehouse-sort__icon {
  font-size: 11px;
  opacity: 0.55;
}

.ds-warehouse-sort.is-active .ds-warehouse-sort__icon {
  opacity: 1;
}

.ds-warehouse__empty[hidden] {
  display: none !important;
}

.ds-warehouse__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 48px 20px;
  text-align: center;
  background: var(--ds-surface);
  border: 1px dashed var(--ds-border);
  border-radius: var(--ds-radius);
}

.ds-warehouse__empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-purple-bg);
  color: var(--ds-purple);
  font-size: 28px;
}

.ds-warehouse__empty h3 {
  margin: 0;
  font-size: 20px;
}

.ds-warehouse__empty p {
  margin: 0;
  max-width: 420px;
  color: var(--ds-muted);
  line-height: 1.5;
}

/* Product import settings */
.ds-product-import-settings {
  max-width: 760px;
}

.ds-product-import-settings__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ds-product-import-settings__head h2 {
  margin: 0;
}

.ds-product-import-name-input {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ds-text-strong, #0f172a);
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  padding: 4px 8px;
  margin: -4px -8px;
}

.ds-product-import-name-input:hover,
.ds-product-import-name-input:focus {
  border-color: var(--ds-border);
  background: var(--ds-surface);
  outline: none;
}

.ds-product-import-settings__head .ds-btn--icon {
  margin-left: auto;
}

.ds-btn--icon {
  padding: 8px;
  line-height: 0;
}

.ds-settings-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ds-settings-section-title-row .ds-settings-section-title {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}

#ds-product-import-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ds-warehouse__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 4px;
}

.ds-warehouse-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.ds-warehouse-tab:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

.ds-warehouse-tab.is-active {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
}

.ds-product-import-type {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.ds-product-import-type__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-muted);
}

.ds-product-import-type__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ds-highlight-bg);
  border: 1px solid var(--ds-highlight-border);
  color: var(--ds-primary);
  font-size: 13px;
  font-weight: 700;
}

.ds-product-import-fieldset {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-highlight-bg);
}

.ds-product-import-fieldset legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-text);
}

.ds-product-import-radios,
.ds-product-import-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.ds-product-import-radio,
.ds-product-import-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ds-text);
  cursor: pointer;
}

.ds-product-import-radio input,
.ds-product-import-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}

.ds-product-import-preview {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: var(--ds-radius);
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.ds-product-import-preview__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef3c7;
  color: #d97706;
  font-size: 18px;
  flex-shrink: 0;
}

.ds-product-import-preview strong {
  display: block;
  margin-bottom: 4px;
}

.ds-product-import-preview.is-running {
  background: var(--ds-highlight-bg);
  border-color: #93c5fd;
}

.ds-product-import-preview.is-running .ds-product-import-preview__icon {
  background: var(--ds-highlight-bg-strong);
  color: var(--ds-primary);
}

.ds-product-import-preview.is-success {
  background: #ecfdf5;
  border-color: #6ee7b7;
}

.ds-product-import-preview.is-success .ds-product-import-preview__icon {
  background: #d1fae5;
  color: #059669;
}

.ds-product-import-preview.is-error {
  background: #fef2f2;
  border-color: #fca5a5;
}

.ds-product-import-preview.is-error .ds-product-import-preview__icon {
  background: #fee2e2;
  color: #dc2626;
}

.ds-toast-host {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 40px));
  pointer-events: none;
}

.ds-toast {
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
  font-size: 14px;
  line-height: 1.45;
  color: #0f172a;
  background: var(--ds-surface);
  border: 1px solid #e2e8f0;
  animation: ds-toast-in 0.22s ease;
}

.ds-toast--success {
  border-color: #6ee7b7;
  background: #ecfdf5;
  color: #065f46;
}

.ds-toast--error {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

.ds-toast--info {
  border-color: #93c5fd;
  background: var(--ds-highlight-bg);
  color: #1e40af;
}

@keyframes ds-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media (max-width: 600px) {
  .ds-warehouse__stats {
    grid-template-columns: 1fr;
  }

  .ds-warehouse__controls {
    align-items: stretch;
    flex-direction: column;
  }

  .ds-warehouse__search {
    max-width: none;
  }
}

/* =================================================================
   MOBILE UNIFICATION — touch targets, spacing, element sizing
   ================================================================= */

@media (max-width: 900px) {
  /* ---------------------------------------------------------------
     LAYOUT FIXES: prevent flex-basis turning into unwanted height
     in column-direction flex containers on mobile
     --------------------------------------------------------------- */

  /* Warehouse mode bar: copy had flex: 1 1 200px → 200px min-height in column → huge space */
  .ds-warehouse-mode-bar__copy {
    flex: 0 0 auto;
  }

  /* Filter groups: switch to column at 900px (same as sidebar collapse) */
  .ds-mgr-filter-group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 0;
  }

  /* Head had flex: 0 0 148px → 148px min-height in column → huge space under label */
  .ds-mgr-filter-group__head {
    flex: 0 0 auto;
    width: 100%;
    padding-top: 0;
  }

  /* Items had flex: 1 → could grow in column context */
  .ds-mgr-filter-group__items {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Date filter: grid layout for date fields */
  .ds-mgr-filter-group--date .ds-mgr-filter-group__items {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    overflow: visible;
  }

  .ds-mgr-filter-group--date .ds-orders-date-filter__field {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    font-size: 11px;
  }

  .ds-mgr-filter-group--date .ds-orders-date-filter__field input[type="date"] {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 8px;
    border-radius: 8px;
    font-size: 13px;
  }

  .ds-mgr-filter-group--date .ds-orders-date-filter__reset {
    grid-column: auto;
    justify-self: end;
    width: 26px;
    height: 26px;
  }

  /* ---------------------------------------------------------------
     Touch targets: minimum 44px
     --------------------------------------------------------------- */

  /* Sidebar nav items */
  .ds-nav__item {
    min-height: 44px;
    padding: 12px 14px;
  }

  /* Sidebar help button */
  .ds-sidebar__help button {
    min-height: 44px;
  }

  /* Topbar new-order button */
  .ds-topbar__create-order {
    width: 40px;
    height: 40px;
  }

  /* Detail panel close button */
  .ds-detail__close {
    width: 44px;
    height: 44px;
  }

  /* Order status tabs */
  .ds-order-status-tab {
    min-height: 44px;
    padding: 10px 16px 10px 10px;
  }

  /* --- Filter chips — 40px height --- */
  .ds-mgr-order-filter,
  .ds-mgr-availability-filter,
  .ds-drop-order-filter,
  .ds-user-order-label-filter,
  .ds-warehouse-filter,
  .ds-partner-tab,
  .ds-partner-badge {
    min-height: 40px;
  }

  /* --- Settings: stack sidebar above content on mobile --- */
  .ds-settings {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ds-settings-section-tabs {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
  }

  .ds-settings-section-tabs__divider {
    display: none;
  }

  .ds-settings-section-tab {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
  }

  .ds-settings-section-title {
    font-size: 15px;
  }

  .ds-settings-tab {
    min-height: 40px;
  }

  /* --- Spacing: settings cards tighter on mobile --- */
  .ds-settings-card {
    padding: 16px;
  }

  /* --- Btn: ensure primary/ghost buttons are comfortably tappable --- */
  .ds-btn {
    min-height: 42px;
  }

  /* --- Скрыть переключатель вид-сетка на мобильном --- */
  .ds-orders-viewbar__layout {
    display: none !important;
  }

  /* --- На мобильном всегда показывать списком (игнорировать is-grid) --- */
  .ds-orders.is-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    gap: 14px;
  }

  .ds-orders.is-grid .ds-order {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
    overflow: hidden;
  }

  .ds-orders.is-grid .ds-order__head {
    position: static;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
    padding: 12px 14px;
    padding-right: 14px;
  }

  .ds-orders.is-grid .ds-order__chevron {
    position: static;
    top: unset;
    right: unset;
    margin-left: auto;
  }

  .ds-orders.is-grid .ds-order__title {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .ds-orders.is-grid .ds-order__status-group {
    flex: 1 1 auto;
    margin-left: 0;
    min-width: 0;
  }

  .ds-orders.is-grid .ds-order__meta-group {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ds-orders.is-grid .ds-order.is-open {
    grid-column: unset;
  }

  /* --- Chat composer actions area --- */
  .ds-chat__composer-actions {
    align-items: center;
  }

  /* --- Partner tabs scroll area aligned with content --- */
  .ds-partner-tabs {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* --- Orders status tabs aligned with content --- */
  .ds-orders-status-tabs {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* --- Modal: slightly more horizontal padding --- */
  .ds-modal {
    padding: 16px;
  }
}

/* --- Extra compaction on very small phones (<= 480px) --- */
@media (max-width: 480px) {
  .ds-settings-card {
    padding: 12px;
  }

  .ds-btn--sm {
    min-height: 36px;
    padding: 8px 10px;
  }

  .ds-orders-pager {
    padding: 10px 12px;
  }

  .ds-topbar h1 {
    font-size: 16px;
  }

  /* Orders header: flush to edges */
  .ds-orders-header {
    border-radius: 8px;
  }
}

/* ==========================================================================
   Terra theme — тёплый светлый интерфейс с тёмным сайдбаром и оранжевым
   акцентом. Референс: reference/Dropship CRM Redesign.dc.html.
   Механизм тот же, что у tailwind/glass: переопределяем токены один раз,
   плюс точечная доводка компонентов. Сайдбар остаётся тёмным — базовый
   .ds-sidebar уже читает var(--ds-sidebar). Акцентный шрифт Unbounded из
   макета заменён на подключённый Outfit.
   ========================================================================== */
[data-theme="terra"] {
  --ds-sidebar: #15161c;
  --ds-sidebar-hover: #1e1f27;
  --ds-sidebar-active: rgba(232, 89, 12, 0.16);

  --ds-bg: #f6f4f029;
  --ds-bg-solid: #f6f4f0;
  --ds-surface: #ffffff;
  --ds-border: #e7e3dc;
  --ds-text: #1d1b17;
  --ds-muted: #9a968c;

  --ds-primary: #e8590c;
  --ds-primary-dark: #cf4d08;
  /* Подсветка выделенного/активного — нейтральная. Раньше здесь была
     персиковая заливка (#fdeee2), и на 80+ местах она давала ощущение, что
     половина интерфейса залита цветом. Смысл «активно» несут оранжевый текст
     и рамка, фону достаточно быть чуть темнее белого. Оттенки взяты из той же
     тёплой нейтральной гаммы, что --ds-bg-solid и --ds-border. */
  --ds-highlight-bg: #f3f1ec;
  --ds-highlight-bg-strong: #e8e4dc;
  --ds-highlight-border: #ded9d1;
  --ds-primary-alpha-08: rgba(232, 89, 12, 0.08);
  --ds-primary-alpha-12: rgba(232, 89, 12, 0.12);
  --ds-primary-alpha-18: rgba(232, 89, 12, 0.18);
  --ds-primary-alpha-22: rgba(232, 89, 12, 0.22);
  --ds-primary-alpha-25: rgba(232, 89, 12, 0.25);
  --ds-primary-alpha-35: rgba(232, 89, 12, 0.35);
  --ds-primary-alpha-45: rgba(232, 89, 12, 0.45);

  --ds-success: #0e8a5f;
  --ds-success-bg: #e3f5ec;
  --ds-warning: #b45309;
  --ds-warning-bg: #fdf3e3;
  --ds-danger: #d64545;
  --ds-danger-bg: #fdebeb;
  --ds-purple: #7c5cd6;
  --ds-purple-bg: #f3edfc;

  --ds-radius: 14px;
  --ds-shadow: 0 1px 2px rgba(28, 25, 18, 0.04);
  --ds-detail-w: 480px;

  /* Tokenized base conflict points (see :root comment) — terra values */
  --ds-order-hover-bg: #faf8f4;
  --ds-order-open-bg: transparent;
  --ds-order-border-subtle: #e7e3dc;
  --ds-order-total-color: #1d1b17;
  --ds-filter-active-border: var(--ds-highlight-border);
  --ds-filter-active-bg: var(--ds-highlight-bg);
  --ds-partner-count-active-bg: var(--ds-primary-alpha-18);
  --ds-partner-count-active-color: var(--ds-primary-dark);
}

/* --- Base typography: Onest 1:1 as in the reference (body uses Segoe UI
   by default — terra never opted in) --- */
[data-theme="terra"] body,
[data-theme="terra"] button,
[data-theme="terra"] input,
[data-theme="terra"] textarea,
[data-theme="terra"] select {
  font-family: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --- Sidebar: тёмный, скруглённые пункты, оранжевый активный --- */
[data-theme="terra"] .ds-brand__icon {
  border-radius: 11px;
  background: none;
}

[data-theme="terra"] .ds-nav__item {
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}

[data-theme="terra"] .ds-nav__item.is-active {
  background: var(--ds-sidebar-active);
  color: #ff7a33;
}

[data-theme="terra"] .ds-nav__item.is-active .lucide {
  color: #ff7a33;
}

[data-theme="terra"] .ds-nav__badge {
  background: var(--ds-primary);
  color: #fff;
  border-radius: 20px;
}

[data-theme="terra"] .ds-sidebar__help {
  background: linear-gradient(140deg, #1e1f27, #23242e);
  border: 1px solid #2b2c37;
  border-radius: 14px;
}

[data-theme="terra"] .ds-sidebar__help button {
  background: var(--ds-primary);
  color: #fff;
  border-radius: 9px;
}

[data-theme="terra"] .ds-sidebar__help button:hover {
  background: var(--ds-primary-dark);
}

/* --- Topbar: тёплый, полупрозрачный с блюром --- */
[data-theme="terra"] .ds-topbar {
  background: #f6f4f029;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ds-border);
}

[data-theme="terra"] #ds-page-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

[data-theme="terra"] .ds-topbar__search {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

[data-theme="terra"] .ds-topbar__search:focus-within {
  border-color: var(--ds-primary-alpha-35);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

[data-theme="terra"] .ds-topbar__create-order {
  background: var(--ds-primary);
  color: #fff;
  border-radius: 9px;
  box-shadow: 0 4px 12px var(--ds-primary-alpha-25);
}

[data-theme="terra"] .ds-topbar__create-order:hover {
  background: var(--ds-primary-dark);
}

[data-theme="terra"] .ds-icon-btn {
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  border-radius: 50%;
}

[data-theme="terra"] .ds-icon-btn:hover {
  border-color: #d4cfc5;
}

[data-theme="terra"] .ds-user__avatar {
  background: linear-gradient(135deg, #15161c, #3a3c48);
  color: #fff;
}

/* --- Cards / orders table --- */
[data-theme="terra"] .ds-order,
[data-theme="terra"] .ds-orders-header,
[data-theme="terra"] .ds-detail,
[data-theme="terra"] .ds-settings-card,
[data-theme="terra"] .ds-dropshipper-card {
  border-color: var(--ds-border);
}

[data-theme="terra"] .ds-order__head:hover {
  background: transparent;
}

[data-theme="terra"] .ds-orders-table-head {
  background: transparent;
  border-bottom: 1px solid #efece6;
  color: var(--ds-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 11px 20px;
}

[data-theme="terra"] .ds-order__total {
  font-family: "Unbounded", "Onest", sans-serif;
  font-weight: 600;
}

/* --- Buttons --- */
[data-theme="terra"] .ds-btn {
  border-radius: 9px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

[data-theme="terra"] .ds-btn:active {
  transform: scale(0.97);
}

[data-theme="terra"] .ds-btn--primary {
  background: var(--ds-primary);
  border-color: transparent;
  color: #fff;
}

[data-theme="terra"] .ds-btn--primary:hover {
  background: var(--ds-primary-dark);
}

[data-theme="terra"] .ds-btn--ghost {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
}

[data-theme="terra"] .ds-btn--ghost:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

[data-theme="terra"] .ds-btn--danger-ghost {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.35);
}

[data-theme="terra"] .ds-btn--danger-ghost:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: #dc2626;
  color: #b91c1c;
}

/* --- Status tabs / filter chips: rounded pill chips --- */
[data-theme="terra"] .ds-order-status-tab,
[data-theme="terra"] .ds-mgr-order-filter,
[data-theme="terra"] .ds-drop-order-filter {
  border-radius: 24px;
  border: 1px solid var(--ds-border);
  transition: all 0.18s;
}

[data-theme="terra"] .ds-order-status-tab.is-active,
[data-theme="terra"] .ds-mgr-order-filter.is-active,
[data-theme="terra"] .ds-drop-order-filter.is-active {
  background: #15161c;
  border-color: #15161c;
  color: #fff;
}

[data-theme="terra"] .ds-mgr-order-filter.is-active .ds-mgr-filter__count,
[data-theme="terra"] .ds-mgr-availability-filter.is-active .ds-mgr-filter__count,
[data-theme="terra"] .ds-drop-order-filter.is-active .ds-mgr-filter__count {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: 10px;
  padding: 2px 6px;
}

[data-theme="terra"] .ds-view-toggle.is-active {
  background: #15161c;
  color: #fff;
}

/* --- Status/tracking pills keep rounded shape (colors stay user-defined) --- */
[data-theme="terra"] .ds-pill,
[data-theme="terra"] .ds-tracking-badge {
  border-radius: 999px;
}

/* --- Pagination --- */
[data-theme="terra"] .ds-orders-pager {
  padding: 14px 20px;
}

[data-theme="terra"] .ds-orders-pager__controls button,
[data-theme="terra"] .ds-orders-pager__size select {
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
}

/* --- Forms --- */
[data-theme="terra"] .ds-field input,
[data-theme="terra"] .ds-field select,
[data-theme="terra"] .ds-select {
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: #fbfaf7;
}

[data-theme="terra"] .ds-field input:focus,
[data-theme="terra"] .ds-field select:focus,
[data-theme="terra"] .ds-select:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

/* --- Chat (Terra palette) --- */
[data-theme="terra"] .ds-chat__threads,
[data-theme="terra"] .ds-chat__panel {
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-surface);
}

[data-theme="terra"] .ds-chat-thread {
  border-radius: 11px;
}

[data-theme="terra"] .ds-chat-thread.is-active,
[data-theme="terra"] .ds-chat-thread:hover {
  background: #faf8f4;
  border-color: transparent;
  box-shadow: none;
}

[data-theme="terra"] .ds-chat-thread__avatar,
[data-theme="terra"] .ds-chat__head-avatar {
  border-radius: 999px;
  background: var(--ds-highlight-bg);
  color: var(--ds-primary);
}

[data-theme="terra"] .ds-chat__messages {
  background: #fbfaf7;
}

[data-theme="terra"] .ds-chat-bubble {
  background: var(--ds-surface);
  border: none;
  box-shadow: 0 1px 2px rgba(28, 25, 18, 0.05);
  border-radius: 14px 14px 14px 4px;
  color: var(--ds-text);
}

[data-theme="terra"] .ds-chat-bubble.is-own {
  background: var(--ds-primary);
  border-radius: 14px 14px 4px 14px;
  color: #fff;
}

[data-theme="terra"] .ds-chat-bubble.is-own .ds-chat-bubble__text {
  color: #fff;
}

[data-theme="terra"] .ds-chat-bubble.is-own .ds-chat-bubble__time {
  color: #f3e3d6;
}

[data-theme="terra"] .ds-chat__send {
  background: var(--ds-primary);
  border-radius: 11px;
  color: #fff;
}

[data-theme="terra"] .ds-chat__send:hover {
  background: var(--ds-primary-dark);
}

/* --- Theme picker preview swatch --- */
.ds-theme-preview--terra {
  background: #f6f4f0;
}

.ds-theme-preview--terra .ds-theme-preview__sidebar {
  background: #15161c;
}

.ds-theme-preview--terra .ds-theme-preview__card {
  border-color: #e7e3dc;
}

/* --- Terra: animations (референс: fadeUp/fadeIn/slideInRight/popIn) --- */
@keyframes ds-terra-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ds-terra-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ds-terra-pop-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Появление вью при переключении разделов (hidden снимается — анимация
   перезапускается). Плавный подъём как в макете. */
[data-theme="terra"] #ds-orders-view:not([hidden]),
[data-theme="terra"] #ds-dashboard-view:not([hidden]),
[data-theme="terra"] #ds-messages-view:not([hidden]),
[data-theme="terra"] #ds-notes-view:not([hidden]),
[data-theme="terra"] #ds-dropshippers-view:not([hidden]),
[data-theme="terra"] #ds-warehouse-view:not([hidden]),
[data-theme="terra"] #ds-settlements-view:not([hidden]) {
  animation: ds-terra-fade-up 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Раскрытие строки заказа — animate the INNER card, not .ds-order__body
   itself: the outer element already animates grid-template-rows (base
   theme's height-collapse trick, layout-heavy every frame). Stacking a
   second animation on that same element compounds the cost and janks;
   the inner card doesn't participate in the height transition, so it
   gets the fade-up basically for free. */
[data-theme="terra"] .ds-order.is-open .ds-order__body-inner {
  animation: ds-terra-fade-up 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Высоту не анимируем: переход по grid-template-rows заставляет браузер
   пересчитывать раскладку всей таблицы товаров на каждом кадре, и на
   длинных заказах это заметно лагает. Раскрытие — мгновенный show + fadeUp
   содержимого, закрытие — обратный fade (класс is-closing навешивает JS,
   см. bindOrderToggles): opacity и transform композитятся видеокартой. */
[data-theme="terra"] .ds-orders.is-table .ds-order__body {
  transition: none;
}

@keyframes ds-terra-fade-down {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

[data-theme="terra"] .ds-order.is-closing .ds-order__body-inner {
  animation: ds-terra-fade-down 0.15s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Шеврон строки — чуть живее базового */
[data-theme="terra"] .ds-order__chevron {
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1.3);
}

/* Выезд панели деталей — базовый transform-транзишн уже есть,
   добавляем пружинистый изинг и мягкую тень из макета */
[data-theme="terra"] .ds-detail {
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  box-shadow: -16px 0 40px rgba(28, 25, 18, 0.12);
}

[data-theme="terra"] .ds-detail.is-open {
  opacity: 1;
}

/* Сообщения чата — popIn */
[data-theme="terra"] .ds-chat-bubble {
  animation: ds-terra-pop-in 0.25s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

/* Треды чата и строки таблиц — мягкий ховер-транзишн */
[data-theme="terra"] .ds-chat-thread,
[data-theme="terra"] .ds-order__head,
[data-theme="terra"] .ds-nav__item,
[data-theme="terra"] .ds-order-status-tab,
[data-theme="terra"] .ds-icon-btn,
[data-theme="terra"] .ds-theme-option {
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* Виджеты дашборда — подъём при ховере, как в макете */
[data-theme="terra"] .ds-dash-widget {
  transition: transform 0.18s, box-shadow 0.18s;
}

[data-theme="terra"] .ds-dash-widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(28, 25, 18, 0.07);
}

/* Кнопки — прижатие при клике (дополняет .ds-btn:active выше) */
[data-theme="terra"] .ds-topbar__create-order:active,
[data-theme="terra"] .ds-chat__send:active,
[data-theme="terra"] .ds-sidebar__help button:active {
  transform: scale(0.95);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="terra"] * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Terra v2: полное покрытие компонентов страницы «Мои заказы»
   по референсу (сегмент-контрол склада, статус-чипы, подменю статусов,
   таблица, прогресс наличия, ТТН-кнопка, кебаб, пагинация, топбар) --- */

/* Топбар: заголовок + оранжевая кнопка + поиск в ряд */
[data-theme="terra"] .ds-topbar {
  gap: 14px;
}

[data-theme="terra"] .ds-topbar__search .lucide {
  color: #9a968c;
}

[data-theme="terra"] .ds-topbar__search input {
  color: var(--ds-text);
}

[data-theme="terra"] .ds-topbar__search input::placeholder {
  color: #9a968c;
}

[data-theme="terra"] .ds-notif-badge,
[data-theme="terra"] .ds-notif-badge:not([hidden]) {
  background: var(--ds-primary);
  border: 2px solid #fff;
}

[data-theme="terra"] .ds-user__name {
  font-weight: 600;
  color: var(--ds-text);
}

[data-theme="terra"] .ds-user__role {
  color: var(--ds-muted);
}

/* Сайдбар: подменю статусов с точками и счётчиками */
[data-theme="terra"] .ds-nav__submenu {
  padding-left: 14px;
}

[data-theme="terra"] .ds-nav__submenu-item {
  border-radius: 8px;
  color: #8b8d99;
  transition: background 0.15s, color 0.15s;
}

[data-theme="terra"] .ds-nav__submenu-item:hover {
  background: #1e1f27;
  color: #fff;
}

[data-theme="terra"] .ds-nav__submenu-item.is-active {
  background: #1e1f27;
  color: #fff;
  font-weight: 700;
}

[data-theme="terra"] .ds-nav__submenu-count {
  color: #6c6e7a;
  background: transparent;
}

[data-theme="terra"] .ds-nav__submenu-item.is-active .ds-nav__submenu-count {
  color: #fff;
}

[data-theme="terra"] .ds-nav__item-chevron {
  color: #6c6e7a;
}

/* Бар «Передача заказов на склад»: белая карточка + сегмент-контрол */
[data-theme="terra"] .ds-warehouse-mode-bar {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 24px;
  box-shadow: var(--ds-shadow);
  padding: 16px 20px;
}

[data-theme="terra"] .ds-warehouse-mode-bar__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text);
}

[data-theme="terra"] .ds-warehouse-mode-bar__hint {
  color: var(--ds-muted);
  font-size: 12.5px;
}

[data-theme="terra"] .ds-warehouse-mode-bar__switch {
  background: #f2efe9;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  border: none;
}

[data-theme="terra"] .ds-warehouse-mode-bar__option {
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-weight: 600;
  color: #7a766c;
  background: transparent;
  transition: all 0.2s;
}

[data-theme="terra"] .ds-warehouse-mode-bar__option:hover {
  color: var(--ds-text);
  background: transparent;
}

[data-theme="terra"] .ds-warehouse-mode-bar__option.is-active {
  background: #fff;
  color: var(--ds-primary);
  box-shadow: 0 1px 4px rgba(28, 25, 18, 0.12);
}

/* Хедер над заказами (фильтры) без лишних рамок */
[data-theme="terra"] .ds-orders-header {
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-theme="terra"] .ds-orders-header > :not([hidden]) + :not([hidden]) {
  border-top: none;
}

[data-theme="terra"] .ds-mgr-filter-block {
  background: transparent;
}

/* Статус-чипы: белые пилюли с цветной точкой, активная — чёрная */
[data-theme="terra"] .ds-orders-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 16px 0 12px;
}

/* Карточка-статистика вместо узкой таблетки: заголовок+точка сверху,
   крупное число снизу по левому краю — как на референсе. Ширина по
   содержимому, без иконки-бейджа. */
[data-theme="terra"] .ds-order-status-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 10px;
  border: 1px solid var(--ds-border);
  background: #fff;
  color: #5d5a52;
  border-radius: 14px;
  padding: 14px 20px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(20, 18, 12, 0.04);
  transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}

[data-theme="terra"] .ds-order-status-tab::after {
  display: none;
}

[data-theme="terra"] .ds-order-status-tab:hover {
  border-color: #c9c4b9;
  background: #fff;
  color: var(--ds-text);
  box-shadow: 0 4px 14px rgba(20, 18, 12, 0.08);
}

[data-theme="terra"] .ds-order-status-tab:active {
  transform: scale(0.98);
}

[data-theme="terra"] .ds-order-status-tab.is-active {
  background: #fff;
  color: #5d5a52;
  border-color: var(--tab-color, #15161c);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tab-color, #15161c) 20%, transparent);
}

[data-theme="terra"] .ds-order-status-tab__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #858074;
  white-space: nowrap;
}

[data-theme="terra"] .ds-order-status-tab__label::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tab-color, #94a3b8);
  flex: 0 0 auto;
}

[data-theme="terra"] .ds-order-status-tab__icon {
  display: none;
}

[data-theme="terra"] .ds-order-status-tab__count {
  align-self: flex-start;
  font-size: 26px;
  font-weight: 400;
  background: none;
  color: #15161c;
  border-radius: 0;
  padding: 0;
  line-height: 1;
}

[data-theme="terra"] .ds-order-status-tab.is-active .ds-order-status-tab__count {
  background: none;
  color: #15161c;
}

[data-theme="terra"] .ds-order-status-tab__count-row {
  align-self: stretch;
}

[data-theme="terra"] .ds-order-status-tab__ttn-btn {
  background: #fff;
}

/* Переключатель вида (таблица/карточки) — сегмент как в референсе */
[data-theme="terra"] .ds-view-toggle {
  border: 1px solid var(--ds-border);
  background: #fff;
  border-radius: 9px;
  color: #9a968c;
}

[data-theme="terra"] .ds-view-toggle:hover {
  color: var(--ds-text);
}

[data-theme="terra"] .ds-view-toggle.is-active {
  background: #15161c;
  border-color: #15161c;
  color: #fff;
}

[data-theme="terra"] .ds-orders-settlement-sort.is-active {
  background: #15161c;
  border-color: #15161c;
  color: #fff;
}

/* Таблица заказов: карточка со скруглением, шапка-капс */
/* Base theme has a global (non-scoped) #ds-orders-view.is-table-layout
   .ds-orders-table-head { border-top-left-radius: 0 } rule (from a fix
   for a different theme) that otherwise squares off this corner here too. */
[data-theme="terra"] #ds-orders-view.is-table-layout .ds-orders-table-head {
  background: var(--ds-surface);
  border: 1px solid #e7e3dc00;
  border-bottom: 1px solid #efece6;
  border-radius: 24px 24px 0 0;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0;
}

[data-theme="terra"] .ds-orders-th-sort {
  color: var(--ds-muted);
}

[data-theme="terra"] .ds-orders-th-sort.is-active,
[data-theme="terra"] .ds-orders-th-sort:hover {
  color: var(--ds-text);
}

[data-theme="terra"] .ds-orders.is-table .ds-orders-table-body {
  border: 1px solid var(--ds-border);
  border-top: none;
  border-radius: 0 0 24px 24px;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
  overflow: hidden;
}

[data-theme="terra"] .ds-orders.is-table .ds-order,
[data-theme="terra"] .ds-orders.is-table .ds-orders-table-body > .ds-order {
  border: none !important;
  border-radius: 0;
  background: var(--ds-surface);
}

/* В референсе раскрытие строки не отделяет её от соседних margin'ом —
   база же добавляет анимированный margin:12px 0 на .is-open, отчего
   строка визуально "уезжает" вниз. Убираем это для terra. */
[data-theme="terra"] .ds-orders.is-table .ds-orders-table-body > .ds-order.is-open {
  margin: 0;
  transition: none;
}

[data-theme="terra"] .ds-orders.is-table .ds-order:last-child {
  border-bottom: none;
}

[data-theme="terra"] .ds-order__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ds-text);
}

[data-theme="terra"] .ds-order__meta,
[data-theme="terra"] .ds-order__items-caption,
[data-theme="terra"] .ds-order__items-caption-count,
[data-theme="terra"] .ds-order__items-caption-sep {
  color: #9a968c;
  font-size: 12.5px;
}

/* Icon is lucide's chevron-down (points down natively) — reference wants
   it sideways when collapsed and rotated down on expand, the opposite of
   the base theme's 0deg-closed/180deg-open pairing, so both states are
   pinned explicitly here rather than relying on a relative rotation. */
[data-theme="terra"] .ds-order__chevron {
  color: #9a968c;
  transform: rotate(-90deg);
}

[data-theme="terra"] .ds-order.is-open .ds-order__chevron {
  transform: rotate(0deg);
}

[data-theme="terra"] .ds-order__head:hover .ds-order__chevron {
  color: var(--ds-text);
}

/* Миниатюра товара */
[data-theme="terra"] .ds-order__main-thumb {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  border-color: #efece6;
}

/* Прогресс наличия: тёплый трек, зелёный филл */
[data-theme="terra"] .ds-order__avail-progress-track {
  background: #efece6;
  height: 5px;
}

[data-theme="terra"] .ds-order__avail-progress-fill {
  background: #0e8a5f;
  transition: width 0.4s;
}

[data-theme="terra"] .ds-order__avail-progress-label {
  color: #7a766c;
  font-weight: 600;
  font-size: 12px;
}

/* ТТН: пунктирная зелёная кнопка добавления, номер оранжевой ссылкой */
[data-theme="terra"] .ds-order__ttn-head-add {
  border: 1px dashed #0e8a5f;
  color: #0e8a5f;
  background: #fff;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s;
}

[data-theme="terra"] .ds-order__ttn-head-add:hover {
  background: #e3f5ec;
}

[data-theme="terra"] .ds-order__ttn-copy,
[data-theme="terra"] .ds-order__ttn-head-label a {
  color: var(--ds-primary);
  font-weight: 600;
}

/* Кебаб-кнопка деталей: без рамки, серые точки */
[data-theme="terra"] .ds-order__details-btn {
  border: none;
  background: none;
  color: #9a968c;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  transition: background 0.15s, color 0.15s;
}

[data-theme="terra"] .ds-order__details-btn:hover {
  background: #f2efe9;
  color: var(--ds-text);
}

/* Раскрытая строка: вложенная карточка */
/* Base rules for the open row use compound selectors more specific than a
   flat [data-theme="terra"] override, so both need matching specificity to
   actually win: the border between head/body, and the head's own tint. */
[data-theme="terra"] .ds-order__body,
[data-theme="terra"] .ds-orders.is-table .ds-order.is-open .ds-order__body {
  border-top: none;
}

[data-theme="terra"] .ds-order.is-open .ds-order__head,
[data-theme="terra"] .ds-order.is-open .ds-order__head:hover,
[data-theme="terra"] .ds-order.is-open.is-status-new .ds-order__head,
[data-theme="terra"] .ds-order.is-open.is-status-new .ds-order__head:hover {
  background: #fff;
}

[data-theme="terra"] .ds-order__body-inner {
  background: #fcfbf8;
  border: 1px solid #f0ede7;
  border-radius: 12px;
  margin: 2px 20px 16px 56px;
}

[data-theme="terra"] .ds-detail-lines-table th,
[data-theme="terra"] .ds-order__body-inner table th {
  background: #f6f3ee;
  color: var(--ds-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #f0ede7;
}

/* Пагинация */
[data-theme="terra"] .ds-orders-pager__info,
[data-theme="terra"] .ds-orders-pager__label,
[data-theme="terra"] .ds-orders-pager__size {
  color: #7a766c;
  font-size: 13px;
}

[data-theme="terra"] .ds-orders-pager__controls button {
  color: #7a766c;
  font-weight: 600;
}

[data-theme="terra"] .ds-orders-pager__controls button:hover:not(:disabled) {
  border-color: #c9c4b9;
  color: var(--ds-text);
}

/* Фильтры менеджера/дропшиппера в стиле terra */
[data-theme="terra"] .ds-mgr-order-filter,
[data-theme="terra"] .ds-mgr-availability-filter {
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: 24px;
  color: #5d5a52;
}

[data-theme="terra"] .ds-mgr-order-filter:hover,
[data-theme="terra"] .ds-mgr-availability-filter:hover {
  border-color: #c9c4b9;
}

[data-theme="terra"] .ds-mgr-order-filter.is-active,
[data-theme="terra"] .ds-mgr-availability-filter.is-active {
  background: #15161c;
  border-color: #15161c;
  color: #fff;
}

[data-theme="terra"] .ds-partner-tab.is-active {
  color: var(--ds-primary);
  border-bottom-color: var(--ds-primary);
  background: var(--ds-highlight-bg);
}

[data-theme="terra"] .ds-partner-tab__count {
  background: var(--ds-primary-alpha-12);
  color: var(--ds-primary);
}

/* Панель деталей заказа — перенесено из макета Redesign, блок "Карточка заказа" */
[data-theme="terra"] .ds-detail {
  width: var(--ds-detail-w);
}

/* Затемняющая подложка за выезжающей панелью деталей. Базовая тема этот
   элемент не рисует вовсе (display:none без .is-visible) — он нужен ещё и как
   область клика «закрыть», поэтому остаётся на месте.

   Размытие (backdrop-filter) убрано намеренно: под панелью лежит таблица
   заказов, и по ней продолжают читать — размытый текст рядом с открытой
   карточкой мешает, а не помогает. */
[data-theme="terra"] .ds-detail-backdrop.is-visible {
  background: rgba(21, 22, 28, 0.25);
  animation: ds-terra-fade-in 0.2s ease;
}

[data-theme="terra"] .ds-detail__head {
  padding: 18px 22px;
  border-bottom: 1px solid #efece6;
  gap: 12px;
}

/* Тег и статус переехали в одну строку с номером заказа (были отдельной
   строкой ниже) — по просьбе. */
[data-theme="terra"] .ds-detail__head-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

[data-theme="terra"] #ds-detail-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

[data-theme="terra"] #ds-detail-status,
[data-theme="terra"] #ds-detail-shipment-status .ds-line-availability-trigger,
[data-theme="terra"] #ds-detail-shipment-status .ds-order-shipment-pill .ds-pill {
  font-size: 12px;
  border-radius: 20px;
  padding: 4px 11px;
}

[data-theme="terra"] .ds-detail__close {
  width: 34px;
  height: 34px;
  border: 1px solid #e7e3dc;
  border-radius: 9px;
  background: #fff;
  color: #7a766c;
  transition: background 0.15s, color 0.15s;
}

[data-theme="terra"] .ds-detail__close:hover {
  background: #f2efe9;
  color: #1d1b17;
}

/* Base .ds-detail__body has no display:flex — gap alone is a no-op there.
   Reference spec: body wrapper is display:flex/column with 18px gap between
   top-level sections (Информация / Примечания / ТТН block). */
/* NOT display:flex here on purpose — .ds-ttn-add is itself display:grid and
   turning its parent into a flex container broke its sizing (content got
   clipped by its own overflow:hidden). Plain block flow + margin between
   top-level siblings achieves the same 18px rhythm without touching how any
   child lays out its own content. */
[data-theme="terra"] .ds-detail__body {
  padding: 20px 22px;
}

[data-theme="terra"] .ds-detail__body > * {
  margin-top: 0;
  margin-bottom: 0;
}

[data-theme="terra"] .ds-detail__body > * + * {
  margin-top: 18px;
}

/* Sub-section headers nested inside "Информация" (e.g. "Клиент (Prom)",
   "Доставка (Prom)") need extra breathing room above them — the panel's
   uniform 9px row-gap alone reads as cramped against the block above. */
[data-theme="terra"] .ds-detail-info-panel .ds-section-title {
  margin: 10px 0 0;
}

/* "Информация": реference — плоский список ключ/значение без иконок.
   Существующая разметка (.ds-detail__meta-row = иконка + <strong>label</strong>value)
   богаче референса (перевозчик, получатель, ТТН и т.д.) — сохраняем это, но
   визуально приводим к тому же языку: иконка скрыта, строка = flex
   space-between, подпись слева приглушённая, значение справа с весом 600. */
[data-theme="terra"] .ds-detail-info-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 13.5px;
}

[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta {
  display: contents;
}

[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--ds-border);
}

[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row:last-child {
  border-bottom: none;
}

/* ── Заказ отвязан от автообновления с маркетплейса ──
   Пояснение плюс кнопка возврата к данным Прома. Строка намеренно не кричит
   цветом: это не ошибка, а состояние, о котором просто надо знать. */
[data-theme="terra"] .ds-manual-override__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
  max-width: 62%;
}

[data-theme="terra"] .ds-manual-override__text {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ds-text-muted, #6b7280);
}

[data-theme="terra"] .ds-manual-override__btn {
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

[data-theme="terra"] .ds-manual-override__btn:hover:not(:disabled) {
  border-color: var(--ds-primary-dark);
  color: var(--ds-primary-dark);
}

[data-theme="terra"] .ds-manual-override__btn:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 640px) {
  [data-theme="terra"] .ds-manual-override__body {
    max-width: 100%;
  }
}

/* После строки «Сумма» — разделитель потяжелее: отделяет факты заказа
   от оплаты/доставки. */
[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row--sum {
  padding-bottom: 14px;
  margin-bottom: 2px;
}

[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row > .lucide {
  display: none;
}

/* Значение часто голый текстовый узел после <strong> (не элемент), так что
   стилизуем значения через сам контейнер (font-weight:600 наследуется текстом),
   а strong-подпись перебиваем обратно в приглушённый обычный текст. Подпись
   прижата влево (margin-right:auto), всё остальное содержимое — включая
   мультиэлементные значения вроде телефона с иконками мессенджеров — пакуется
   вправо и переносится без разваливания в столбик. */
[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  width: 100%;
  gap: 3px 8px;
  font-weight: 600;
  color: var(--ds-text);
  text-align: right;
}

[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row strong {
  flex-shrink: 0;
  display: inline;
  margin: 0 auto 0 0;
  color: #9a968c;
  font-weight: 400;
  font-size: 13.5px;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}

[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row--sum > div {
  font-family: "Unbounded", "Onest", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ds-primary-dark);
}

[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row--sum strong {
  font-family: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Строки с карточками (адрес/оплата/контакт): подпись сверху, карточка
   на всю ширину под ней — иначе flex прижал бы карточку вправо. */
[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row:has(.ds-address-card),
[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row:has(.ds-payment-card),
[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row:has(.ds-contact-card) {
  flex-direction: column;
  align-items: stretch;
}

[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row:has(.ds-address-card) > div,
[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row:has(.ds-payment-card) > div,
[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row:has(.ds-contact-card) > div {
  justify-content: flex-start;
  margin-top: 8px;
}

[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row:has(.ds-address-card) strong,
[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row:has(.ds-payment-card) strong,
[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row:has(.ds-contact-card) strong {
  margin: 0;
}

/* ── Карточка адреса доставки ── */
[data-theme="terra"] .ds-address-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--ds-highlight-border);
  background: linear-gradient(160deg, var(--ds-highlight-bg), var(--ds-surface) 130%);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03);
  transition: box-shadow 0.18s, border-color 0.18s;
  text-align: left;
}

[data-theme="terra"] .ds-address-card:hover {
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.07);
  border-color: var(--ds-primary-alpha-22);
}

[data-theme="terra"] .ds-address-card__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-primary);
  color: #fff;
  box-shadow: 0 3px 8px var(--ds-primary-alpha-35);
}

[data-theme="terra"] .ds-address-card__icon .lucide { width: 15px; height: 15px; }

[data-theme="terra"] .ds-address-card__text { flex: 1; min-width: 0; padding-top: 1px; }

[data-theme="terra"] .ds-address-card__city {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-primary-dark);
  margin-bottom: 3px;
}

[data-theme="terra"] .ds-address-card__primary {
  display: block;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--ds-text);
  line-height: 1.4;
}

[data-theme="terra"] .ds-address-card__secondary {
  display: block;
  margin-top: 3px;
  color: var(--ds-muted);
  font-weight: 400;
  line-height: 1.45;
}

[data-theme="terra"] .ds-address-card__copy {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: var(--ds-surface);
  border-radius: 8px;
  color: var(--ds-muted);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.15s, transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}

[data-theme="terra"] .ds-address-card:hover .ds-address-card__copy,
[data-theme="terra"] .ds-address-card__copy:focus-visible {
  opacity: 1;
  transform: none;
}

[data-theme="terra"] .ds-address-card__copy:hover { background: var(--ds-primary); color: #fff; }
[data-theme="terra"] .ds-address-card__copy .lucide { width: 14px; height: 14px; }

[data-theme="terra"] .ds-address-card__copy.is-copied {
  opacity: 1;
  transform: none;
  background: var(--ds-success);
  color: #fff;
}

/* ── Карточка статуса оплаты ── */
[data-theme="terra"] .ds-payment-card {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  border-radius: 12px;
  /* Кликается не вся карточка, а только переключатель справа (внутри неё
     живёт <select> способа оплаты, из-за которого обёртка не может быть
     <label>) — поэтому обычный курсор, чтобы не обещать лишнего. */
  cursor: default;
  transition: border-color 0.2s, background 0.2s;
}

[data-theme="terra"] .ds-payment-card.is-paid {
  border-color: #a4d9c1;
  background: #eef8f2;
}

[data-theme="terra"] .ds-payment-card__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-highlight-bg);
  color: var(--ds-primary-dark);
  transition: background 0.2s, color 0.2s;
}

[data-theme="terra"] .ds-payment-card.is-paid .ds-payment-card__icon {
  background: var(--ds-success);
  color: #fff;
}

[data-theme="terra"] .ds-payment-card__icon .lucide { width: 15px; height: 15px; }

[data-theme="terra"] .ds-payment-card__text { flex: 1; min-width: 0; }

[data-theme="terra"] .ds-payment-card__method {
  display: block;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ds-text);
}

[data-theme="terra"] .ds-payment-card__status {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-warning);
  transition: color 0.2s;
}

[data-theme="terra"] .ds-payment-card.is-paid .ds-payment-card__status { color: var(--ds-success); }

/* Prom reported the payment did NOT go through — must read as an alarm, not
   as a neutral "waiting" state, since it's money that never arrived. */
[data-theme="terra"] .ds-payment-card.is-unpaid {
  border-color: #f0b4b4;
  background: #fdeeee;
}

[data-theme="terra"] .ds-payment-card.is-unpaid .ds-payment-card__icon {
  background: var(--ds-danger, #dc2626);
  color: #fff;
}

[data-theme="terra"] .ds-payment-card.is-unpaid .ds-payment-card__status {
  color: var(--ds-danger, #dc2626);
  font-weight: 700;
}

.ds-payment-badge--prom_unpaid {
  color: var(--ds-danger, #dc2626);
  font-weight: 700;
}

[data-theme="terra"] .ds-payment-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

[data-theme="terra"] .ds-payment-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

[data-theme="terra"] .ds-payment-switch__track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #d8d4cc;
  transition: background 0.2s;
}

[data-theme="terra"] .ds-payment-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: left 0.2s cubic-bezier(0.2, 0.7, 0.3, 1.3);
}

[data-theme="terra"] .ds-payment-switch input:checked + .ds-payment-switch__track {
  background: var(--ds-success);
}

[data-theme="terra"] .ds-payment-switch input:checked + .ds-payment-switch__track::after { left: 18px; }

/* ── Карточка контакта (телефон + мессенджеры) ── */
[data-theme="terra"] .ds-contact-card {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  border-radius: 12px;
}

[data-theme="terra"] .ds-contact-card__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-highlight-bg);
  color: var(--ds-primary-dark);
}

[data-theme="terra"] .ds-contact-card__icon .lucide { width: 15px; height: 15px; }

[data-theme="terra"] .ds-contact-card__number {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--ds-text);
  text-decoration: none;
}

[data-theme="terra"] .ds-contact-card__number:hover { color: var(--ds-primary); text-decoration: none; }

[data-theme="terra"] .ds-contact-card__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-theme="terra"] .ds-contact-card__action {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.12s, filter 0.12s;
}

[data-theme="terra"] .ds-contact-card__action:hover { filter: brightness(1.08); transform: translateY(-1px); }
[data-theme="terra"] .ds-contact-card__action svg { width: 17px; height: 17px; }
[data-theme="terra"] .ds-contact-card__action--viber { background: #7360f2; }
[data-theme="terra"] .ds-contact-card__action--telegram { background: #229ed9; }

[data-theme="terra"] .ds-contact-card__action--template {
  background: none;
  border: 1px solid var(--ds-border);
  color: var(--ds-muted);
}

[data-theme="terra"] .ds-contact-card__action--template .lucide { width: 17px; height: 17px; }

[data-theme="terra"] .ds-contact-card__action--template:hover {
  color: var(--ds-primary);
  border-color: var(--ds-primary-alpha-25);
  background: var(--ds-highlight-bg);
  filter: none;
}


[data-theme="terra"] .ds-order-user-label-picker {
  width: 30px;
  height: 30px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
}

[data-theme="terra"] .ds-order-user-label-picker:hover { background: var(--ds-highlight-bg); }

[data-theme="terra"] #ds-detail-shipment-status {
  padding-left: 8px;
  border-left: 1px solid var(--ds-border);
}

/* ── Подвал — «Действия с заказом» ── */
[data-theme="terra"] .ds-footer-actions .ds-detail__merge,
[data-theme="terra"] .ds-footer-actions .ds-detail__archive-actions {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

[data-theme="terra"] .ds-footer-actions {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-border);
}

[data-theme="terra"] .ds-footer-actions__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-muted);
  margin-bottom: 10px;
}

[data-theme="terra"] .ds-footer-actions__row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

[data-theme="terra"] .ds-footer-actions__row .ds-detail__merge,
[data-theme="terra"] .ds-footer-actions__row .ds-detail__archive-actions {
  flex: 0 1 auto;
  min-width: 0;
}

[data-theme="terra"] .ds-footer-actions__row .ds-detail__merge.is-expanded { flex: 1 1 100%; }

[data-theme="terra"] .ds-footer-actions__row .ds-merge-form { margin-top: 8px; }

[data-theme="terra"] .ds-footer-actions__row .ds-btn {
  width: auto;
  height: auto;
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  box-sizing: border-box;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Карточка «Общая информация» — по референсу пользователя: отдельный
   скруглённый блок с рамкой, иконка-бейдж + жирный заголовок вместо мелкой
   капс-подписи, значения строк уже были справа жирным (см. .ds-detail__meta-row
   выше) — трогать не пришлось, только сама рамка карточки и шапка. */
[data-theme="terra"] .ds-timeline-section.ds-detail-card {
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--ds-surface);
}

/* «Связь с клиентом» — одна строка без обычной шапки карточки, по
   референсу: подпись слева от телефона, а не заголовок сверху. */
[data-theme="terra"] .ds-timeline-section.ds-detail-card.ds-contact-row-card {
  padding: 12px 16px;
}

[data-theme="terra"] .ds-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

[data-theme="terra"] .ds-contact-row__label {
  flex: 0 0 auto;
  color: var(--ds-muted);
  font-size: 13.5px;
  margin-right: 4px;
}

[data-theme="terra"] .ds-contact-row__number {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--ds-text);
  text-decoration: none;
  white-space: nowrap;
  /* Подстраховка на случай нехватки места: обрезаем многоточием, а не даём
     тексту вылезать поверх кнопок мессенджеров (панель теперь и так шире —
     см. --ds-detail-w, но экран может быть у'же). */
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="terra"] .ds-contact-row__number:hover {
  color: var(--ds-primary);
}

[data-theme="terra"] .ds-contact-row__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-theme="terra"] .ds-contact-row__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  transition: transform 0.12s, filter 0.12s;
}

[data-theme="terra"] .ds-contact-row__action:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

[data-theme="terra"] .ds-contact-row__action--viber {
  background: #7360f2;
}

[data-theme="terra"] .ds-contact-row__action--telegram {
  background: #229ed9;
}

[data-theme="terra"] .ds-timeline-section.ds-detail-card > .ds-timeline-toggle {
  padding: 0 0 8px;
  gap: 10px;
  cursor: default;
}

/* «Доставка» — точная копия референса: своя шапка вместо обычного
   иконка-бейдж + заголовок (см. renderDetailDeliveryCardHtml). */
[data-theme="terra"] .ds-delivery-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--ds-border);
}

[data-theme="terra"] .ds-delivery-card__carrier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ds-text);
}

[data-theme="terra"] .ds-delivery-card__carrier .ds-carrier-badge__icon {
  width: 20px;
  height: 20px;
}

[data-theme="terra"] .ds-delivery-card__ttn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-primary-dark);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

/* Кнопка копирования — отдельный скруглённый квадрат с рамкой, а не просто
   иконка вплотную к тексту (как было раньше), по референсу. */
[data-theme="terra"] .ds-delivery-card__ttn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

[data-theme="terra"] .ds-delivery-card__ttn-copy:hover {
  background: var(--ds-highlight-bg);
  border-color: var(--ds-highlight-border);
  color: var(--ds-primary-dark);
}

[data-theme="terra"] .ds-delivery-card__ttn-copy .lucide {
  width: 14px;
  height: 14px;
}

[data-theme="terra"] .ds-timeline-section.ds-detail-card .ds-timeline-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex: 0 0 auto;
  background: var(--ds-highlight-bg);
  color: var(--ds-primary-dark);
}

[data-theme="terra"] .ds-timeline-section.ds-detail-card .ds-timeline-toggle__icon .lucide {
  width: 16px;
  height: 16px;
}

[data-theme="terra"] .ds-timeline-section.ds-detail-card .ds-timeline-toggle__title {
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ds-text);
}

[data-theme="terra"] .ds-timeline-section.ds-detail-card > .ds-timeline-toggle:hover .ds-timeline-toggle__title {
  color: var(--ds-text);
}

[data-theme="terra"] .ds-timeline-section.ds-detail-card .ds-timeline-toggle__chevron {
  display: none;
}

/* ── Стадия обработки: степпер 1→2→3→4 ── */
.ds-stage-stepper {
  display: flex;
  align-items: flex-start;
}

.ds-stage-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: 54px;
}

.ds-stage-step__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.ds-stage-step.is-active .ds-stage-step__dot {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: #fff;
}

.ds-stage-step.is-done .ds-stage-step__dot {
  border-color: var(--ds-primary);
  background: var(--ds-highlight-bg);
  color: var(--ds-primary-dark);
}

.ds-stage-step__label {
  font-size: 11.5px;
  color: var(--ds-muted);
  text-align: center;
  line-height: 1.25;
}

.ds-stage-step.is-active .ds-stage-step__label {
  color: var(--ds-primary-dark);
  font-weight: 700;
}

.ds-stage-step.is-done .ds-stage-step__label {
  color: var(--ds-text);
}

.ds-stage-step__connector {
  flex: 1 1 auto;
  height: 2px;
  margin-top: 14px;
  background: var(--ds-border);
}

.ds-stage-step__connector.is-done {
  background: var(--ds-primary);
}

.ds-stage-stepper__date {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ds-muted);
}

.ds-stage-cancelled {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dc2626;
  font-size: 13.5px;
  font-weight: 600;
}

.ds-stage-cancelled .lucide {
  width: 16px;
  height: 16px;
}

/* ── Модификаторы строк общей карточки ── */
[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row--note > div {
  color: #b45309;
}

[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row--note .lucide {
  display: inline-block;
  color: #d97706;
}

[data-theme="terra"] .ds-detail-info-panel .ds-detail__meta-row--contact {
  padding: 2px 0;
  border-bottom: none;
}

/* Заголовки секций панели (ТТН и т.п.) — капс-метка как в референсе */
[data-theme="terra"] .ds-detail__body .ds-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9a968c;
  margin: 0 0 10px;
}

[data-theme="terra"] .ds-detail__hint {
  color: var(--ds-muted);
}

/* "Примечания": textarea в тёплом оттенке фона, как в макете */
[data-theme="terra"] .ds-order-private-note--detail {
  margin: 0;
  margin-top: 20px;
  padding: 0;
  border: none;
  background: transparent;
}

[data-theme="terra"] .ds-order-private-note--detail .ds-order-private-note__label {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #9a968c;
}

[data-theme="terra"] .ds-order-private-note--detail .ds-order-private-note__label .lucide {
  display: none;
}

[data-theme="terra"] .ds-order-private-note--detail .ds-order-private-note__hint {
  color: #c9c4b9;
}

[data-theme="terra"] .ds-order-private-note--detail .ds-order-private-note__input {
  min-height: 74px;
  border: 1px solid #e7e3dc;
  border-radius: 11px;
  padding: 11px 13px;
  font-size: 13px;
  background: #fbfaf7;
  color: #1d1b17;
}

[data-theme="terra"] .ds-order-private-note--detail .ds-order-private-note__input:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

/* Дата-фильтры и селекты */
[data-theme="terra"] .ds-orders-date-filter__field input[type="date"],
[data-theme="terra"] .ds-orders-date-filter__field input.form-control {
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: #fff;
}

[data-theme="terra"] .ds-orders-date-filter__field input[type="date"]:focus,
[data-theme="terra"] .ds-orders-date-filter__field input.form-control:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

[data-theme="terra"] .flatpickr-day.selected,
[data-theme="terra"] .flatpickr-day.selected:hover,
[data-theme="terra"] .flatpickr-day.startRange,
[data-theme="terra"] .flatpickr-day.endRange {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
}

[data-theme="terra"] .flatpickr-day:hover {
  background: var(--ds-highlight-bg);
  border-color: var(--ds-highlight-bg);
}

/* NP summary и ТТН-блок в карточке заказа: два DOM-элемента визуально
   объединены в одну карточку — та же градиентная подложка, стык без шва
   (np-summary без нижнего бордера/радиуса снизу, ttn-add без верхнего). */
[data-theme="terra"] .ds-np-summary {
  background: linear-gradient(140deg, #fdf5ef, #fdeee2);
  border: 1px solid #f6d9c4;
  border-bottom: none;
  border-radius: 13px 13px 0 0;
  padding: 16px 16px 4px;
  gap: 0;
}

[data-theme="terra"] .ds-np-summary__title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ds-text);
}

[data-theme="terra"] .ds-np-summary__title .lucide {
  color: var(--ds-primary);
}

[data-theme="terra"] .ds-np-summary__text {
  margin: 6px 0 12px;
  font-size: 12.5px;
  color: #a0663a;
}

[data-theme="terra"] .ds-np-summary [data-np-open-modal] {
  width: 100%;
  border-radius: 10px;
  padding: 11px;
  font-size: 13.5px;
  font-weight: 700;
  margin: 0;
}

[data-theme="terra"] .ds-ttn-add {
  background: linear-gradient(140deg, #fdf5ef, #fdeee2);
  border: 1px solid #f6d9c4;
  border-top: none;
  border-radius: 0 0 13px 13px;
  margin-top: 0;
  padding: 0 16px 16px;
  gap: 0;
}

[data-theme="terra"] .ds-ttn-number-form {
  margin: 0;
}

[data-theme="terra"] .ds-ttn-add > .ds-upload {
  margin-top: 4px;
}

[data-theme="terra"] .ds-ttn-add__title {
  display: none;
}

[data-theme="terra"] .ds-ttn-add__divider,
[data-theme="terra"] .ds-ttn-add__divider--top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #c19a76;
}

[data-theme="terra"] .ds-ttn-add__divider.ds-ttn-add__divider--top {
  margin: 10px 0;
}

[data-theme="terra"] .ds-ttn-add__divider {
  margin: 16px 0 10px;
}

[data-theme="terra"] .ds-ttn-add__divider::before,
[data-theme="terra"] .ds-ttn-add__divider::after,
[data-theme="terra"] .ds-ttn-add__divider--top::before,
[data-theme="terra"] .ds-ttn-add__divider--top::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #f0d7c2;
}

[data-theme="terra"] .ds-ttn-number-form__label {
  display: none;
}

[data-theme="terra"] .ds-ttn-number-form__input {
  border: 1px solid #f0d7c2;
  border-radius: 9px;
  background: #fff;
  font-size: 13px;
  padding: 9px 12px;
}

[data-theme="terra"] .ds-ttn-number-form__input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

[data-theme="terra"] .ds-ttn-number-form .ds-btn--ghost {
  border: 1px solid var(--ds-primary);
  background: #fff;
  color: var(--ds-primary);
  border-radius: 9px;
}

[data-theme="terra"] .ds-ttn-number-form .ds-btn--ghost:hover {
  background: var(--ds-highlight-bg);
}

[data-theme="terra"] .ds-upload:hover,
[data-theme="terra"] .ds-upload.is-dragover {
  border-color: var(--ds-primary);
  background: var(--ds-highlight-bg);
}

/* --- Terra: акцентная типографика — Unbounded 1:1 как в референсе --- */
[data-theme="terra"] .ds-brand__title,
[data-theme="terra"] #ds-page-title,
[data-theme="terra"] .ds-brand__icon,
[data-theme="terra"] #ds-detail-title,
[data-theme="terra"] .ds-dash-tile__value,
[data-theme="terra"] .ds-dash-metric__value,
[data-theme="terra"] .ds-settlements-debt-total strong {
  font-family: "Unbounded", "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 600;
}

[data-theme="terra"] .ds-brand__title {
  letter-spacing: 0.02em;
}

[data-theme="terra"] #ds-page-title {
  letter-spacing: -0.01em;
}

/* --- Terra fix pass: раскрытая строка заказа рендерится в table-layout
   режиме (.ds-orders.is-table), и его встроенные правила специфичнее
   (3 класса), чем плоские правила terra выше — из-за этого фон/радиус
   вложенной карточки, ховер строки и таблица товаров не перекрашивались.
   Здесь те же свойства продублированы с достаточной специфичностью. --- */

[data-theme="terra"] .ds-orders.is-table .ds-order__head:hover,
[data-theme="terra"] .ds-orders.is-table .ds-order.is-status-new .ds-order__head:hover {
  background: transparent;
}

[data-theme="terra"] .ds-orders.is-table .ds-order__head {
  padding: 14px 20px;
  transition: padding 0.15s ease;
}

/* Плотность списка (просторно/компактно), как в референсе: переключатель
   в панели фильтров — data-orders-density на кнопках, класс .is-compact
   на #ds-orders-view. */
[data-theme="terra"] .ds-orders.is-table.is-compact .ds-order__head {
  padding: 4px 20px;
}

[data-theme="terra"] .ds-orders.is-compact .ds-order__main-thumb {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

[data-theme="terra"] .ds-orders.is-table .ds-order__body-inner {
  background: #fcfbf8;
  border: 1px solid #f0ede7;
  border-radius: 12px;
  margin: 2px 20px 16px 56px;
}

[data-theme="terra"] .ds-orders.is-table .ds-order.is-open.is-detail-active .ds-order__head {
  background: #faf8f4;
}

[data-theme="terra"] .ds-orders.is-table .ds-order__cell--total .ds-order__total {
  color: var(--ds-text);
}

/* Таблица товаров внутри раскрытой строки */
[data-theme="terra"] .ds-order__body-inner .ds-table {
  font-size: 12.5px;
}

[data-theme="terra"] .ds-order__body-inner .ds-table th {
  background: #f6f3ee;
  color: var(--ds-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #f0ede7;
  padding: 9px 16px;
}

[data-theme="terra"] .ds-order__body-inner .ds-table td {
  border-bottom: 1px solid #f3f0ea;
  padding: 11px 16px;
}

[data-theme="terra"] .ds-order__body-inner .ds-table tr:last-child td {
  border-bottom: none;
}

/* Product thumbnail in the expanded line table — base theme's 44px/gray
   border reads noticeably larger/heavier than the reference's compact
   30px swatch. */
[data-theme="terra"] .ds-order__body-inner .ds-line-product__thumb {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

[data-theme="terra"] .ds-order__body-inner .ds-line-product__img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border-color: #f0ede7;
}

[data-theme="terra"] .ds-order__body-inner .ds-table tr:hover td {
  background: #faf8f4;
}

[data-theme="terra"] .ds-line-comment-input {
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  padding: 7px 10px;
}

[data-theme="terra"] .ds-line-comment-input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

[data-theme="terra"] .ds-line-comment-static {
  color: var(--ds-muted);
}

/* Удаление позиции — красный ховер как в референсе */
[data-theme="terra"] .ds-line-delete,
[data-theme="terra"] .ds-line-exclude,
[data-theme="terra"] .ds-line-restore {
  border: 1px solid #f0ede7;
  border-radius: 8px;
  background: #fff;
  color: #9a968c;
  transition: all 0.15s;
}

[data-theme="terra"] .ds-line-delete:hover,
[data-theme="terra"] .ds-line-exclude:hover {
  background: #fdebeb;
  color: #d64545;
  border-color: #f5cfcf;
}

[data-theme="terra"] .ds-line-restore:hover {
  background: #fdf3ec;
  color: #9a3412;
  border-color: #f6d9c4;
}

/* Добавление позиции — оранжевая пунктирная иконка-кнопка */
[data-theme="terra"] .ds-order-lines-toolbar {
  background: transparent;
  border-top: none;
  padding: 12px 16px;
}

[data-theme="terra"] .ds-order-line-add-btn {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px dashed #c9c4b9;
  border-radius: 9px;
  background: #fff;
  color: #7a766c;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
}

[data-theme="terra"] .ds-order-line-add-btn:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
  background: var(--ds-highlight-bg);
}

[data-theme="terra"] .ds-order-line-add-btn__label {
  display: inline;
}

/* Colored dot on the left of availability/status pills, per reference
   (<span style="width:6px;height:6px;border-radius:50%;background:currentColor">).
   The .ds-pill__dot markup is added unconditionally in app.js (renderPillHtml /
   renderAvailabilityPillHtml / renderAvailabilityTriggerButton) — with no CSS it
   collapses to nothing in other themes, so this is the only place it gets a size. */
[data-theme="terra"] .ds-pill__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  flex-shrink: 0;
}

[data-theme="terra"] .ds-line-availability-trigger .ds-pill__dot {
  margin-right: 0;
}

/* Status/availability pills+triggers: reference uses 700 weight, 20px radius,
   5px/11px padding (vs base theme's 600/999px-round/4px-10px) — colors stay
   whatever the user configured (pillInlineStyle inline style), untouched. */
[data-theme="terra"] .ds-pill,
[data-theme="terra"] .ds-line-availability-trigger,
[data-theme="terra"] .ds-line-availability-option .ds-pill {
  font-weight: 700;
  border-radius: 20px;
  padding: 5px 11px;
}

/* Date column reference uses a slightly darker gray (#7a766c) than the
   lighter #9a968c shared by uppercase table-head labels/order meta text. */
[data-theme="terra"] .ds-order__cell--date .ds-order__meta {
  color: #7a766c;
}

/* Loading skeleton (view-switch placeholder) already exists site-wide as
   .ds-skeleton — same shimmer animation as the reference's "Скелетон
   загрузки при переключении вью", just re-tinted onto the warm palette. */
[data-theme="terra"] .ds-skeleton {
  background: linear-gradient(90deg, #eeebe5 25%, #f7f5f1 50%, #eeebe5 75%);
  background-size: 800px 100%;
}

[data-theme="terra"] .ds-detail__body .ds-section-title {
  display: none;
}

/* ==========================================================================
   Terra — мобильная версия (≤900px). Референс: Dropship CRM Mobile.dc.html.
   Сайдбар остаётся прежним (гамбургер + выезд), нижняя таб-навигация не
   вводится. Панель деталей уже full-width и наследует terra-карточки, чат
   terra не завязан на ширину — оба подхватывают десктопный вид. Здесь —
   мобильная полировка списка заказов и плавающая кнопка «+».
   ========================================================================== */
@media (max-width: 900px) {
  /* Карточки заказов — отдельными блоками с отступами и тенью (как в макете) */
  [data-theme="terra"] .ds-orders.is-table .ds-orders-table-body {
    gap: 14px;
    border: none;
    background: #f6f4f0;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order,
  [data-theme="terra"] .ds-orders.is-table .ds-orders-table-body > .ds-order {
    box-shadow: 0 2px 8px rgba(28, 25, 18, 0.06);
    background: var(--ds-surface);
    border-radius: 24px;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__body {
    display: none;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order:last-child {
    border-bottom: 1px solid #e7e3dc;
  }

  /* Кнопку «Развернуть/свернуть все» на мобиле не показываем (по умолчанию
     все заказы свёрнуты, разворачиваются тапом) */
  [data-theme="terra"] .ds-orders-viewbar__actions {
    display: none;
  }

  /* Голова карточки: сверху — трекинг-пилюля рядом с номером ТТН, затем товар
     (миниатюра + №N + мета) со статус-пилюлей справа, затем во всю ширину —
     бар наличия товаров, затем дата. Разрывы-строки базы отключаем. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head {
    padding: 14px 16px;
    align-items: flex-start;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head::before {
    display: none;
  }

  /* Разрыв строки после ряда статусов: ТТН и трекинг уходят на собственную
     строку и стоят рядом друг с другом (номер накладной, справа — её статус). */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head::after {
    content: '';
    display: block;
    order: 6;
    flex: 0 0 100%;
    width: 0;
    height: 0;
    margin: 0;
  }

  /* Трекинг + ТТН — общая верхняя строка карточки. Общее правило
     .ds-orders.is-table .ds-order__cell{width:100%} становится flex-basis
     при basis:auto, поэтому без явного width:auto каждая ячейка всё равно
     растягивается на всю строку и выталкивает соседа переносом. */
  /* Статус трекинга — справа от номера ТТН, в одной строке с ним. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--tracking {
    order: 8;
    display: flex;
    flex: 0 1 auto;
    width: auto;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    margin-top: 8px;
    margin-left: 8px;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--ttn {
    display: flex;
    order: 7;
    flex: 0 1 auto;
    /* auto давал ячейке ширину по контенту адреса (min-content с
       white-space:nowrap не сжимается), из-за чего адрес вылезал за карточку
       — 100% + min-width:0 заставляет её реально ужиматься до ширины
       карточки, и тогда ellipsis внутри .ds-order__ttn-place работает. */
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0;
    min-width: 0;
    margin-top: 8px;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--ttn .ds-order__ttn-info {
    min-width: 0;
    width: 100%;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--ttn .ds-order__ttn-place {
    display: block;
    width: 100%;
  }

  /* Кнопки печати/расчётов и «Добавить ТТН» — часть полного десктопного
     виджета, на свёрнутой карточке лишние (эти действия уже есть в
     развёрнутой детали заказа) — оставляем только номер ТТН с иконкой ТК. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--ttn .ds-order__ttn-head-actions,
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--ttn .ds-order__ttn-head-add {
    display: none;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--ttn .ds-order__ttn-head-label {
    padding: 4px 0;
    color: var(--ds-muted);
  }

  /* Оплата — своя строка сразу под доставкой. Без явного order она унаследовала
     бы order:0 по умолчанию и встала бы перед номером заказа: во flex-раскладке
     нет «естественного» места после ttn(7), оно должно быть задано явно —
     то же самое случалось с другими ячейками этой карточки (см. комментарий
     выше про номер/сумму). */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--payment {
    display: flex;
    order: 8;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 8px;
    /* Базовое правило .ds-order__cell:not(...) центрирует содержимое ячейки
       (оно рассчитано на десктопную grid-таблицу) — на карточке эта же
       ячейка стала flex-строкой на всю ширину, и центрирование осталось,
       хотя тут ему взяться неоткуда, кроме как из старого правила. */
    justify-content: flex-start;
    text-align: left;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--payment .ds-order__payment-info {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }

  /* Раскладка ячеек (order/flex) задана единым блоком ниже — «Карточка заказа
     — вариант A». Прежние значения отсюда убраны, чтобы не держать два
     конкурирующих набора с одинаковой специфичностью. */

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--avail .ds-order__avail-progress {
    width: 100%;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--avail .ds-order__avail-progress-track {
    width: auto;
    flex: 1 1 auto;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--avail .ds-order__avail-dots {
    flex-wrap: wrap;
  }

  /* Миниатюра-аватар товара — крупнее и мягче */
  [data-theme="terra"] .ds-orders.is-table .ds-order__main-thumb {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--order .ds-order__title {
    font-size: 15px;
    font-weight: 700;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__items-caption {
    font-size: 12.5px;
    color: var(--ds-muted);
  }

  /* Статус-пилюля справа — как в макете (скруглённая, с точкой) */
  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--status .ds-pill,
  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--status .ds-line-availability-trigger {
    border-radius: 18px;
  }

  /* ------------------------------------------------------------------
     Карточка заказа — вариант A + статус-рельс.
     Порядок строк: [0] трекинг/ТТН · [1] №заказа .......... сумма ·
     [2] дата · [3] статус + флаги · [4] бар наличия.
     Правила базового мобильного блока сюда не долетают: terra-селекторы
     специфичнее, а ::before/::after-переносы базы здесь отключены —
     поэтому переносы строк держим на flex-basis:100%.
     ------------------------------------------------------------------ */

  /* Статус-рельс: 3px левая кромка в цвете статуса отгрузки
     (--ds-order-rail проставляется на карточке из JS). Статус читается
     боковым зрением при прокрутке, не занимая отдельной строки.
     !important обязателен — terra гасит рамку карточки через
     `border: none !important` (см. правило вне медиа-запроса). */
  [data-theme="terra"] .ds-orders.is-table .ds-order,
  [data-theme="terra"] .ds-orders.is-table .ds-orders-table-body > .ds-order {
    border-left: 3px solid var(--ds-order-rail, var(--ds-border)) !important;
  }

  /* Строка 1: номер — якорь слева, сумма — якорь справа. Номер идёт самым
     первым (order:0): трекинг и ТТН раньше стояли на 0 и 1 и занимали первую
     строку вместе с номером, из-за чего сумме не хватало места и она
     переносилась вниз — у заказов с ТТН карточка «съезжала». */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--order {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--order .ds-order__title {
    font-size: 18px;
    font-weight: 680;
    letter-spacing: -0.01em;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--total {
    display: flex;
    order: 1;
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
    padding-left: 12px;
    align-items: baseline;
    justify-content: flex-end;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--total .ds-order__total {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ds-text);
    white-space: nowrap;
  }

  /* Строка 2: дата — подпись под номером, а не прижата к низу карточки. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--date {
    order: 2;
    flex: 0 0 100%;
    justify-content: flex-start;
    text-align: left;
    margin-top: 2px;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--date .ds-order__meta {
    font-size: 13px;
    color: var(--ds-muted);
  }

  /* Строка 3: статус и флаги — один ряд чипов, слева. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--status {
    order: 3;
    flex: 0 0 auto;
    width: auto;
    margin-left: 0;
    margin-top: 6px;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--flags {
    display: flex;
    order: 5;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    align-items: center;
    margin-top: 6px;
  }

  /* Дубль внутри заголовка — десктопный вариант, на мобиле его заменяет
     ячейка --flags в ряду чипов. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__title .ds-order__dup-mark {
    display: none;
  }

  /* Предупреждение — заметное, но вторичное: ниже статуса по весу. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--flags .ds-pill {
    min-height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 520;
    white-space: normal;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--flags .ds-pill__dot {
    display: none;
  }

  /* Наличие — в один ряд со статусом и флагами, а не отдельной строкой:
     раньше точка наличия висела сама по себе посреди карточки. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--avail {
    display: flex;
    order: 4;
    flex: 0 0 auto;
    width: auto;
    margin-top: 6px;
    align-items: center;
    gap: 6px;
  }

  /* Бар/точки наличия сами по себе не читаются — подписываем их. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--avail::before {
    content: 'Наличие:';
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
    color: var(--ds-muted);
    white-space: nowrap;
  }

  /* Миниатюра и счётчик «N товаров» в шапке больше не нужны — их место занял
     полноценный ряд товара ниже (название, артикул, количество). */
  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--order .ds-order__main-thumb,
  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--order .ds-order__items-caption,
  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--order .ds-order__items-caption-count {
    display: none;
  }

  /* Строка 4: товар — миниатюра, название (2 строки), артикул, количество. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--product {
    display: flex;
    order: 9;
    flex: 0 0 100%;
    width: 100%;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ds-border);
    text-align: left;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__product-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    overflow: hidden;
    cursor: zoom-in;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__product-thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-muted);
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__product-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 520;
    line-height: 1.35;
    color: var(--ds-text);
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__product-sku {
    font-size: 12px;
    color: var(--ds-muted);
    font-variant-numeric: tabular-nums;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__product-more {
    font-size: 12px;
    color: var(--ds-primary);
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__product-qty {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--ds-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Раскрытый блок: убираем собственный бордер/фон вложенной карточки —
     иначе двойной бордер (карточка заказа + вложенный блок). Товары внутри
     уже сами карточки. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__body-inner {
    margin: 0 14px 14px;
    border: none;
    background: transparent;
    padding: 0;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__body {
    border-top: 1px solid #f0ede7;
  }

  /* Плавающая кнопка «+» (FAB) — из топбара в правый нижний угол */
  [data-theme="terra"] .ds-topbar__create-order:not([hidden]) {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    z-index: 40;
    box-shadow: 0 8px 20px var(--ds-primary-alpha-35);
  }

  [data-theme="terra"] .ds-topbar__create-order:not([hidden]) .lucide {
    width: 24px;
    height: 24px;
  }

  [data-theme="terra"] .ds-topbar__create-order:not([hidden]):active {
    transform: scale(0.94);
  }

  /* Чипы фильтров — горизонтальный скролл без переноса, как в макете */
  [data-theme="terra"] .ds-orders-status-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  [data-theme="terra"] .ds-orders-status-tabs::-webkit-scrollbar {
    display: none;
  }

  [data-theme="terra"] .ds-order-status-tab {
    flex: 0 0 auto;
  }

  /* Панель деталей — на весь экран, скругления убираем (край в край).
     width:var(--ds-detail-w) (480px) в базовом terra-правиле не гейтится
     медиа-запросом и на мобиле шире экрана — контент вылезал за границы. */
  [data-theme="terra"] .ds-detail {
    border-radius: 0;
    width: 100%;
  }

  /* FAB fix: у terra-топбара backdrop-filter создаёт containing block для
     position:fixed, из-за чего кнопка «+» липла к топбару, а не к экрану.
     Убираем блюр на мобиле (фон делаем плотным) — FAB встаёт в угол экрана. */
  [data-theme="terra"] .ds-topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #f6f4f0;
    /* Без viewport-fit=cover страница вообще не рисует ничего под чёлкой —
       там просто голая системная заливка Safari. С ним страница получает
       область под чёлкой, но её нужно явно заполнить: иначе контент просто
       начинается ниже, а сама чёлка остаётся пустой. Растягиваем фон топбара
       вверх через padding, чтобы там был цвет сайта, а не пустота/чужой цвет. */
    padding-top: env(safe-area-inset-top);
  }

  /* Строка 5: «Детали заказа» — полноширинный CTA, завершающий карточку.
     Раньше ячейка пряталась в расчёте на кнопку внутри раскрытого блока, но
     сам блок (.ds-order__body) на мобиле тоже display:none — в итоге на
     карточке не оставалось ни одного явного действия. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--details {
    display: flex;
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    margin: 12px 0 0;
    padding: 0;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--details .ds-order__details-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    color: var(--ds-text);
    font-size: 14.5px;
    font-weight: 600;
    float: none;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--details .ds-order__details-btn > i,
  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--details .ds-order__details-btn > svg {
    display: none;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--details .ds-order__details-btn-label {
    display: inline;
  }

  /* Кнопка «Детали заказа» внутри раскрытого блока (мобайл) */
  [data-theme="terra"] .ds-order__body-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    color: var(--ds-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  [data-theme="terra"] .ds-order__body-details-btn .lucide {
    width: 16px;
    height: 16px;
  }

  /* ── Товары в раскрытой строке → карточки как в макете (с сохранением
     редактируемых полей). Каждая строка таблицы = flex-wrap карточка:
     [миниатюра + название] на всю ширину, артикул мелким + ×кол-во + цена на
     второй строке, комментарий/наличие/удаление ниже. Подписи-столбиком
     убраны — вид как в референсе. ── */
  [data-theme="terra"] .ds-order__body-inner .ds-table {
    min-width: 0;
    width: 100%;
    border-collapse: collapse;
  }

  [data-theme="terra"] .ds-order__body-inner .ds-table thead {
    display: none;
  }

  [data-theme="terra"] .ds-order__body-inner .ds-table tbody,
  [data-theme="terra"] .ds-order__body-inner .ds-table tr,
  [data-theme="terra"] .ds-order__body-inner .ds-table td {
    display: block;
  }

  [data-theme="terra"] .ds-order__body-inner .ds-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    background: var(--ds-surface);
    border: 1px solid #f0ede7;
    border-radius: 14px;
    padding: 11px 13px;
    margin-bottom: 10px;
  }

  [data-theme="terra"] .ds-order__body-inner .ds-table td {
    padding: 0;
    border: none;
  }

  /* Подписи-столбиком (data-ml) на мобиле не показываем — вид как в макете */
  [data-theme="terra"] .ds-order__body-inner .ds-table td[data-ml]::before {
    display: none;
  }

  /* Товар — шапка: миниатюра + название (жирным), на всю ширину */
  [data-theme="terra"] .ds-order__body-inner .ds-table td.ds-line-td--product {
    order: 1;
    flex: 1 1 100%;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ds-text);
  }

  /* Артикул — мелкий приглушённый (подзаголовок), слева на 2-й строке */
  [data-theme="terra"] .ds-order__body-inner .ds-table td[data-ml="Артикул"] {
    order: 2;
    flex: 1 1 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ds-muted);
  }

  /* ×кол-во и цена справа на 2-й строке */
  [data-theme="terra"] .ds-order__body-inner .ds-table td[data-ml="Кол-во"] {
    order: 3;
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--ds-muted);
  }

  [data-theme="terra"] .ds-order__body-inner .ds-table td[data-ml="Кол-во"]::before {
    content: "× ";
    display: inline;
    color: var(--ds-muted);
  }

  [data-theme="terra"] .ds-order__body-inner .ds-table td[data-ml="Цена"] {
    order: 4;
    flex: 0 0 auto;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ds-text);
  }

  /* Сумма и комментарий склада (когда пустой «—») в карточке не нужны */
  [data-theme="terra"] .ds-order__body-inner .ds-table td[data-ml="Сумма"] {
    display: none;
  }

  /* Комментарий дропшиппера — поле на всю ширину, отдельной строкой */
  [data-theme="terra"] .ds-order__body-inner .ds-table td[data-ml="Комментарий"] {
    order: 5;
    flex: 1 1 100%;
    margin-top: 2px;
  }

  [data-theme="terra"] .ds-order__body-inner .ds-table td[data-ml="Комментарий"] .ds-line-comment-input {
    width: 100%;
  }

  /* Комментарий склада — мелкой строкой во всю ширину (если есть текст);
     пустой («—») прячем целиком, чтобы не сиротел. */
  [data-theme="terra"] .ds-order__body-inner .ds-table td[data-ml="Коммент. склада"] {
    order: 6;
    flex: 1 1 100%;
    font-size: 12px;
    color: var(--ds-muted);
  }

  [data-theme="terra"] .ds-order__body-inner .ds-table td[data-ml="Коммент. склада"]:has(.ds-line-comment-static.is-empty) {
    display: none;
  }

  /* Обёртка таблицы: на мобиле карточки, горизонтальный скролл не нужен */
  [data-theme="terra"] .ds-order__body-inner .ds-table-wrap {
    overflow: visible;
  }

  /* Наличие (пилюля/пикер) слева на нижней строке */
  [data-theme="terra"] .ds-order__body-inner .ds-table td[data-ml="Наличие"] {
    order: 7;
    flex: 1 1 auto;
    margin-top: 2px;
  }

  /* Удаление — иконкой справа на нижней строке */
  [data-theme="terra"] .ds-order__body-inner .ds-table td.ds-table__actions {
    order: 8;
    flex: 0 0 auto;
    margin-left: auto;
    margin-top: 2px;
  }

  /* Итого под карточками */
  [data-theme="terra"] .ds-order__body-inner .ds-order__lines-total {
    padding: 8px 2px 0;
  }
}

/* ==========================================================================
   Terra — страница «Финансы» (#ds-settlements-view). Референс: Claude Design
   settlements-preview.html. Univer остаётся нативным виджетом (canvas), стилим
   только обёртку/ретинт. Новые блоки (KPI, шапка таблицы, статистика выделения,
   редизайн истории счетов) скрыты вне terra базовыми
   правилами display:none, чтобы другие темы не менялись.
   ========================================================================== */

/* Новые add-on блоки скрыты по умолчанию — включаются только в terra */
.settle-kpis,
.settle-tablehead,
.settle-selection-ext,
.inv-summary,
.inv-filters {
  display: none;
}

/* Вкладки Таблица / История счетов */
[data-theme="terra"] .ds-partner-tabs {
  gap: 4px;
  flex-wrap: nowrap;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
  box-shadow: var(--ds-shadow);
}

[data-theme="terra"] .ds-partner-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  border-radius: 9px;
  padding: 8px 16px;
  font: 600 13.5px "Onest", system-ui, sans-serif;
  color: var(--ds-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}

[data-theme="terra"] .ds-partner-tab .lucide {
  width: 16px;
  height: 16px;
}

[data-theme="terra"] .ds-partner-tab:hover {
  color: var(--ds-text);
}

[data-theme="terra"] .ds-partner-tab.is-active {
  background: #15161c;
  color: #fff;
}

/* Липкий тулбар действий */
[data-theme="terra"] .ds-settlements__toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 14px;
  position: sticky;
  top: 0;
  z-index: 20;
  /* --ds-bg-solid, not --ds-bg: this toolbar is sticky and rows scroll
     underneath it — --ds-bg carries alpha in this theme (see body/topbar),
     which let the scrolled grid show through. */
  background: var(--ds-bg-solid, var(--ds-bg));
  padding: 8px 0;
}

[data-theme="terra"] .ds-settlements__toolbar .ds-settings-lead {
  color: var(--ds-muted);
  font-size: 13px;
  margin: 0;
}

[data-theme="terra"] .ds-settlements__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* Баннер прав доступа */
[data-theme="terra"] .ds-permission-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eef2fb;
  border: 1px solid #d5def5;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
}

[data-theme="terra"] .ds-permission-bar__icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: #2f6fd8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="terra"] .ds-permission-bar__icon .lucide {
  width: 17px;
  height: 17px;
}

[data-theme="terra"] .ds-permission-bar__label {
  font-size: 13px;
  color: #2f4a7a;
  margin: 0;
}

[data-theme="terra"] .ds-permission-bar__label strong {
  color: #1e3260;
}

/* ─── KPI-строка ─── */
[data-theme="terra"] .settle-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

[data-theme="terra"] .settle-kpi {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--ds-shadow);
  transition: transform 0.18s, box-shadow 0.18s;
}

[data-theme="terra"] .settle-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 20, 20, 0.07);
}

[data-theme="terra"] .settle-kpi__top {
  display: flex;
  align-items: center;
  gap: 9px;
}

[data-theme="terra"] .settle-kpi__icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-highlight-bg);
  color: var(--ds-primary-dark);
}

[data-theme="terra"] .settle-kpi__icon .lucide {
  width: 16px;
  height: 16px;
}

[data-theme="terra"] .settle-kpi__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-theme="terra"] .settle-kpi__value {
  font-family: "Unbounded", "Onest", sans-serif;
  font-weight: 600;
  font-size: 24px;
  margin-top: 10px;
}

[data-theme="terra"] .settle-kpi__value small {
  font-size: 14px;
  color: var(--ds-muted);
  font-family: "Onest", sans-serif;
}

[data-theme="terra"] .settle-kpi--dark {
  background: #15161c;
  border-color: #15161c;
  position: relative;
  overflow: hidden;
}

[data-theme="terra"] .settle-kpi--dark::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ds-primary-alpha-35), transparent 70%);
}

[data-theme="terra"] .settle-kpi--dark .settle-kpi__label {
  color: #8b8d99;
}

[data-theme="terra"] .settle-kpi--dark .settle-kpi__value {
  color: #fff;
  position: relative;
}

[data-theme="terra"] .settle-kpi--dark .settle-kpi__icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ds-primary);
}

/* ─── Шапка над таблицей Univer ─── */
[data-theme="terra"] .settle-tablehead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--ds-border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  background: #faf8f4;
}

[data-theme="terra"] .settle-tablehead__title {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-theme="terra"] .settle-tablehead__title .lucide {
  width: 16px;
  height: 16px;
  color: var(--ds-primary-dark);
}

[data-theme="terra"] .settle-tablehead__range {
  font-size: 12.5px;
  color: var(--ds-muted);
}

[data-theme="terra"] .settle-tablehead__count {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-text);
  background: var(--ds-highlight-bg);
  border: 1px solid var(--ds-highlight-border);
  border-radius: 20px;
  padding: 3px 11px;
}

[data-theme="terra"] .settle-sync {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #0e8a5f;
}

[data-theme="terra"] .settle-sync__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0e8a5f;
}

[data-theme="terra"] .settle-sync.is-saving {
  color: var(--ds-muted);
}

[data-theme="terra"] .settle-sync.is-saving .settle-sync__dot {
  background: var(--ds-primary);
  animation: ds-terra-fade-in 0.6s infinite alternate;
}

/* Обёртка Univer как нижняя часть карточки */
[data-theme="terra"] .ds-settlement-univer-wrap {
  border: 1px solid var(--ds-border);
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  background: var(--ds-surface);
  padding: 0;
  box-shadow: var(--ds-shadow);
}

/* ─── Univer retint под terra ─── */
[data-theme="terra"] #ds-settlements-univer {
  --univer-primary-50: #fdf3ec;
  --univer-primary-100: #fde4d3;
  --univer-primary-200: #fbc9a6;
  --univer-primary-300: #f7a86f;
  --univer-primary-400: #f0803a;
  --univer-primary-500: #e8590c;
  --univer-primary-600: #cf4d08;
  --univer-primary-700: #a83e07;
  --univer-primary-800: #833106;
  --univer-primary-900: #6b2905;
  --univer-gray-50: #faf8f4;
  --univer-gray-100: #f2efe9;
  --univer-gray-200: #e7e3dc;
  font-family: "Onest", system-ui, sans-serif;
}

[data-theme="terra"] #ds-settlements-univer [class*="headerbar"],
[data-theme="terra"] #ds-settlements-univer [class*="header-bar"] {
  background: #faf8f4;
  border-bottom: 1px solid var(--ds-border);
}

[data-theme="terra"] #ds-settlements-univer [class*="toolbar"] {
  font-family: "Onest", system-ui, sans-serif;
}

/* Скелетон загрузки Univer */
[data-theme="terra"] .settle-skeleton {
  padding: 16px;
}

[data-theme="terra"] .settle-skeleton__bar {
  height: 30px;
  border-radius: 7px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #eeebe5 25%, #f7f5f1 50%, #eeebe5 75%);
  background-size: 900px 100%;
  animation: ds-settle-shimmer 1.1s infinite linear;
}

[data-theme="terra"] .settle-skeleton__bar:first-child {
  background: #15161c;
  opacity: 0.08;
}

@keyframes ds-settle-shimmer {
  0% { background-position: -500px 0; }
  100% { background-position: 500px 0; }
}

/* Итоговая строка долга */
[data-theme="terra"] .ds-settlements-debt-total {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 15px 18px;
  background: #15161c;
  color: #c9cbd6;
  border-radius: 12px;
  font-size: 13.5px;
  position: relative;
  overflow: hidden;
}

[data-theme="terra"] .ds-settlements-debt-total::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ds-primary-alpha-35), transparent 70%);
}

[data-theme="terra"] .ds-settlements-debt-total strong {
  margin-left: auto;
  color: #fff;
  font-size: 20px;
  font-family: "Unbounded", "Onest", sans-serif;
  font-weight: 600;
  position: relative;
}

/* Панель выделения: кол-во + сумма + среднее + максимум */
[data-theme="terra"] .settle-selection-ext {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 10px;
  padding: 4px;
  background: var(--ds-highlight-bg);
  border: 1px solid var(--ds-highlight-border);
  border-radius: 12px;
  animation: ds-terra-fade-up 0.2s;
}

[data-theme="terra"] .settle-selection__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 18px;
}

[data-theme="terra"] .settle-selection__stat + .settle-selection__stat {
  border-left: 1px solid var(--ds-highlight-border);
}

[data-theme="terra"] .settle-selection__k {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-muted);
}

[data-theme="terra"] .settle-selection__v {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}

[data-theme="terra"] .settle-selection__v--accent {
  color: var(--ds-primary-dark);
}

[data-theme="terra"] .settle-selection__clear {
  margin-left: auto;
  margin-right: 8px;
}

/* Тост */
[data-theme="terra"] .ds-settlements-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #15161c;
  color: #fff;
  padding: 11px 20px;
  border-radius: 12px;
  font: 600 13px "Onest", system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 60;
}

/* ─── История счетов: сводка + фильтр + карточки ─── */
[data-theme="terra"] .inv-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 16px 20px;
  background: #15161c;
  color: #fff;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

[data-theme="terra"] .inv-summary::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ds-primary-alpha-35), transparent 70%);
}

[data-theme="terra"] .inv-summary__k {
  font-size: 12px;
  font-weight: 600;
  color: #8b8d99;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-theme="terra"] .inv-summary__v {
  font-family: "Unbounded", "Onest", sans-serif;
  font-weight: 600;
  font-size: 26px;
  margin-top: 6px;
  position: relative;
}

[data-theme="terra"] .inv-summary__meta {
  margin-left: auto;
  text-align: right;
  font-size: 12.5px;
  color: #a3a5b1;
  position: relative;
}

[data-theme="terra"] .inv-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

[data-theme="terra"] .inv-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-muted);
  border-radius: 22px;
  padding: 7px 14px;
  font: 600 13px "Onest", sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}

[data-theme="terra"] .inv-filter:hover {
  border-color: var(--ds-muted);
  color: var(--ds-text);
}

[data-theme="terra"] .inv-filter.is-active {
  background: #15161c;
  border-color: #15161c;
  color: #fff;
}

[data-theme="terra"] .inv-filter__count {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.7;
}

[data-theme="terra"] .inv-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-theme="terra"] .inv-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 13px;
  padding: 15px 18px;
  cursor: pointer;
  animation: ds-terra-fade-up 0.25s backwards;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

[data-theme="terra"] .inv-card:hover {
  border-color: var(--ds-muted);
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.06);
  transform: translateY(-1px);
}

[data-theme="terra"] .inv-card__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-highlight-bg);
  color: var(--ds-primary-dark);
}

[data-theme="terra"] .inv-card__icon .lucide {
  width: 20px;
  height: 20px;
}

[data-theme="terra"] .inv-card__num {
  font-weight: 700;
  font-size: 14.5px;
}

[data-theme="terra"] .inv-card__meta {
  font-size: 12.5px;
  color: var(--ds-muted);
  margin-top: 2px;
}

[data-theme="terra"] .inv-card__sum {
  margin-left: auto;
  text-align: right;
}

[data-theme="terra"] .inv-card__sum-value {
  font-weight: 700;
  font-size: 15px;
  font-family: "Unbounded", "Onest", sans-serif;
}

[data-theme="terra"] .inv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 11.5px "Onest", system-ui, sans-serif;
  border-radius: 20px;
  padding: 4px 11px;
  margin-top: 5px;
}

[data-theme="terra"] .inv-badge--paid {
  background: #e3f5ec;
  color: #0e8a5f;
}

[data-theme="terra"] .inv-badge--wait {
  background: #fdf3e3;
  color: #b45309;
}

[data-theme="terra"] .inv-badge--overdue {
  background: #fdebeb;
  color: #d64545;
}

/* Панель счёта (выезжает справа) */
[data-theme="terra"] .inv-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 22, 28, 0.28);
  backdrop-filter: blur(2px);
  z-index: 70;
  animation: ds-terra-fade-in 0.2s;
}

[data-theme="terra"] .inv-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 92vw;
  background: var(--ds-surface);
  border-left: 1px solid var(--ds-border);
  z-index: 71;
  display: flex;
  flex-direction: column;
  animation: ds-terra-slide-in-right 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  box-shadow: -16px 0 40px rgba(20, 20, 20, 0.15);
}

[data-theme="terra"] .inv-panel__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--ds-border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

[data-theme="terra"] .inv-panel__close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--ds-border);
  border-radius: 9px;
  background: var(--ds-surface);
  cursor: pointer;
  color: var(--ds-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: all 0.15s;
}

[data-theme="terra"] .inv-panel__close:hover {
  background: var(--ds-highlight-bg);
  color: var(--ds-text);
}

[data-theme="terra"] .inv-panel__close .lucide {
  width: 15px;
  height: 15px;
}

[data-theme="terra"] .inv-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}

[data-theme="terra"] .inv-panel__rowline {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--ds-border);
  font-size: 13.5px;
}

[data-theme="terra"] .inv-panel__rowline:last-child {
  border-bottom: none;
}

[data-theme="terra"] .inv-panel__rowline span {
  color: var(--ds-muted);
}

[data-theme="terra"] .inv-panel__rowline strong {
  font-weight: 600;
}

[data-theme="terra"] .inv-panel__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid var(--ds-border);
}

[data-theme="terra"] .inv-panel__total b {
  font-family: "Unbounded", "Onest", sans-serif;
  font-weight: 600;
  font-size: 20px;
}

[data-theme="terra"] .inv-panel__foot {
  padding: 14px 22px;
  border-top: 1px solid var(--ds-border);
  display: flex;
  gap: 10px;
}


@keyframes ds-terra-slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: none; }
}

/* Мобильная версия финансов (<760px) */
@media (max-width: 760px) {
  [data-theme="terra"] .settle-kpis {
    grid-template-columns: 1fr;
  }

  /* Заголовок таблицы с индикатором сохранения прячем — его место занимает
     строка формул самого грида, которая на телефоне и есть поле ввода. */
  [data-theme="terra"] .settle-tablehead {
    display: none;
  }

  /* Таблица на телефоне — та же самая, не заменённая карточками. Ей нужна
     почти вся высота экрана: чем больше строк видно сразу, тем меньше
     прокрутки, а прокрутка здесь идёт в двух направлениях. Отнимаем место под
     панель, вкладки и итог. */
  .ds-settlement-univer-wrap {
    height: calc(100vh - 300px);
    min-height: 320px;
    margin-top: 0;
  }

  /* Панель статистики выделения не нужна: диапазон пальцем не протягивают. */
  [data-theme="terra"] .settle-selection-ext {
    display: none;
  }

  [data-theme="terra"] .ds-settlements-debt-total {
    margin-top: 0;
  }

  /* Вкладки листов остаются: дополнительные листы — такая же часть расчётов,
     и переключаться между ними с телефона нужно. Только компактнее. */
  [data-theme="terra"] .settle-sheets {
    overflow-x: auto;
  }

  /* Кнопки панели — в столбец и на всю ширину: «Добавить строку» и «Выставить
     счёт» на телефоне жмут пальцем, а не курсором. */
  [data-theme="terra"] .ds-settlements__toolbar-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  [data-theme="terra"] .ds-settlements__toolbar-actions .ds-btn {
    justify-content: center;
    width: 100%;
  }
}

/* Старую панель выделения долга в terra заменяет .settle-selection-ext */
[data-theme="terra"] .ds-settlements-debt-selection {
  display: none;
}

/* Формулы расчёта — "Автоматический тип" (склад + цена розница/опт + наценка) */
.ds-settings-subtitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text-strong, #0f172a);
  margin: 0 0 6px;
}

.ds-settings-subtitle--spaced {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--ds-border);
}

.ds-settlement-auto-formula-add {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 140px 140px 100px auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: #fafafa;
}

.ds-settlement-auto-formula-add .ds-field {
  margin: 0;
}

.ds-settlement-auto-formula__preview {
  align-self: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ds-highlight-bg);
  color: var(--ds-primary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}

/* One row PER WAREHOUSE — a company can configure several formulas at once
   (e.g. «Розница» −20% and «Опт» +10% simultaneously). Mirrors
   .ds-product-category-item's grid/field styling for visual consistency. */
.ds-settlement-auto-formula-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.ds-settlement-auto-formula-list__empty {
  padding: 12px;
  color: var(--ds-muted, #9ca3af);
  font-size: 13px;
}

.ds-settlement-auto-formula-item {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 120px 140px 90px auto 36px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: #fafafa;
  transition: opacity 0.15s ease;
}

.ds-settlement-auto-formula-item.is-saving {
  opacity: 0.65;
}

.ds-settlement-auto-formula-item__warehouse {
  font-weight: 600;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-settlement-auto-formula-item__price-type,
.ds-settlement-auto-formula-item__mode,
.ds-settlement-auto-formula-item__percent {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--ds-surface);
  font: inherit;
  font-size: 14px;
}

.ds-settlement-auto-formula-item__percent {
  text-align: right;
}

.ds-settlement-auto-formula-item__preview {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ds-highlight-bg);
  color: #4338ca;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 720px) {
  .ds-settlement-auto-formula-add {
    grid-template-columns: 1fr;
  }

  .ds-settlement-auto-formula-item {
    grid-template-columns: 1fr;
  }
}

/* Which warehouse an auto-matched line's price came from — shown under the
   sku in the settlement-import table once more than one warehouse formula
   could plausibly match the same sku. */
.ds-settlement-import-table__sku-warehouse {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-primary);
}

/* Same sku genuinely stocked on more than one configured warehouse — flag it
   and let the manager choose which one to price by, instead of silently
   defaulting to whichever warehouse was configured first. */
.ds-settlement-import-table__sku-dup {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ds-warning, #b45309);
}

.ds-settlement-import-table__sku-dup i {
  width: 11px;
  height: 11px;
}

.ds-settlement-import-table__sku-warehouse-select {
  display: block;
  margin-top: 2px;
  width: 100%;
  padding: 3px 4px;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  background: #fffbeb;
  color: var(--ds-text, #111);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
}

.ds-settlement-import-table__sku-warehouse-select:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}

/* Settlement import modal — auto mode hides the manual category column
   (4th: Товар, Артикул, Кол-во, Категория, ...) since the % comes from the
   single configured auto-formula, not a per-row category pick. */
.ds-settlement-import-table-wrap.is-auto-mode .ds-settlement-import-table th:nth-child(4),
.ds-settlement-import-table-wrap.is-auto-mode .ds-settlement-import-table td:nth-child(4) {
  display: none;
}

.ds-settlement-import-table tr.is-unmatched {
  background: #fef2f2;
}

.ds-settlement-import-table tr.is-unmatched [data-settlement-supplier-price] {
  border-color: #ef4444;
}

.ds-settlement-import-table tr.is-unmatched [data-settlement-supplier-price]::placeholder {
  color: #ef4444;
}

/* iOS/Android auto-zoom on focus into any text field is triggered purely by a
   computed font-size under 16px — it has nothing to do with the viewport's
   user-scalable/maximum-scale (those stay untouched here, so manual pinch-zoom
   keeps working everywhere). Forcing every form field to >=16px on mobile is
   the only way to stop the auto-zoom without disabling manual zoom. Kept last
   in the file and !important so it wins over every earlier per-component/
   per-theme input rule (tailwind/terra overrides, .ds-field, date pickers,
   settlement table inputs, etc.) without having to audit each one by hand. */
@media (max-width: 900px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ---- Доступ к статусам (модалка менеджера) ------------------------------- */
.ds-status-access__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-highlight-bg);
  color: var(--ds-muted);
  font-size: 13px;
  line-height: 1.55;
}

.ds-status-access__note i {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.ds-status-access__loading,
.ds-status-access__empty {
  padding: 14px 0;
  color: var(--ds-muted);
  font-size: 13px;
}

.ds-status-access__group + .ds-status-access__group {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--ds-border);
}

.ds-status-access__group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ds-status-access__group-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.ds-status-access__toggle-all {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--ds-primary, #465fff);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ds-status-access__toggle-all:hover {
  text-decoration: underline;
}

.ds-status-access__group-hint {
  margin: 6px 0 12px;
  color: var(--ds-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.ds-status-access__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-status-access__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ds-status-access__item:hover {
  border-color: var(--ds-primary, #465fff);
  background: var(--ds-highlight-bg);
}

.ds-status-access__item input {
  flex: none;
  cursor: pointer;
}

.ds-status-access__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--pill-bg, #6b7280);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ds-status-access__item-note {
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .ds-status-access__item {
    flex-wrap: wrap;
  }
}

/* Пометка внутри строки «Информация» — например, «возвращена» у комиссии Prom. */
.ds-detail__meta-note {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ds-highlight-bg, #f1f5f9);
  color: var(--ds-muted, #6b7280);
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
}

/* Имя выделенной колонки в панели статистики — длинное название не должно
   растягивать панель, поэтому обрезается многоточием. */
.settle-selection__v--name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Листы таблицы расчётов (вкладки внизу, как в Excel) ----------------- */
.settle-sheets {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 10px;
  background: var(--ds-surface, #fff);
  overflow-x: auto;
}

.settle-sheets[hidden] { display: none !important; }

.settle-sheets__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.settle-sheet-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ds-muted, #6b7280);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.settle-sheet-tab:hover { background: var(--ds-highlight-bg, #f1f5f9); }

.settle-sheet-tab.is-active {
  background: var(--ds-highlight-bg, #f1f5f9);
  border-color: var(--ds-border, #e5e7eb);
  color: var(--ds-text, #111);
  font-weight: 600;
}

.settle-sheet-tab__del {
  border: none;
  background: transparent;
  padding: 0 2px;
  color: var(--ds-muted, #9ca3af);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

.settle-sheet-tab:hover .settle-sheet-tab__del,
.settle-sheet-tab.is-active .settle-sheet-tab__del { opacity: 1; }
.settle-sheet-tab__del:hover { color: #dc2626; }

.settle-sheets__add {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px dashed var(--ds-border, #d1d5db);
  border-radius: 7px;
  background: transparent;
  color: var(--ds-muted, #6b7280);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.settle-sheets__add:hover {
  border-color: var(--ds-primary, #2563eb);
  color: var(--ds-primary, #2563eb);
}

/* ---- Список заказов: чекбоксы, клиент, объединённый статус, ТТН ---------- */
.ds-orders-table-head__cell--check,
.ds-order__cell--check {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.ds-order-check {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--ds-primary, #2563eb);
}

/* Колонка «Клиент» */
.ds-order__cell--client {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ds-order__client-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text, #111);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-order__client-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ds-muted, #6b7280);
}

.ds-order__client-empty { color: var(--ds-muted, #9ca3af); }

/* Статус + точки наличия в одной колонке */
.ds-order__cell--status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.ds-order__avail-dots {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Ячейка ТТН: перевозчик и отделение над номером накладной */
.ds-order__ttn-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-bottom: 3px;
}

.ds-order__ttn-carrier {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-text, #111);
}

.ds-order__ttn-carrier .ds-carrier-badge__icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

.ds-order__ttn-carrier .ds-carrier-badge__icon svg {
  width: 100%;
  height: 100%;
}

.ds-order__ttn-place {
  font-size: 11.5px;
  color: var(--ds-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Колонка «Оплата» — та же двухстрочная структура, что у «Доставка»
   (.ds-order__ttn-info/-carrier/-place): способ сверху, статус снизу. */
.ds-order__payment-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ds-order__payment-method {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-text, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Плоская точка вместо эмодзи-«шариков» (🟡🟢🔴 и т.п. рендерятся как глянцевые
   3D-смайлы в большинстве систем) — цвет берётся из PAYMENT_CATEGORY_INFO.color
   инлайн-стилем в разметке. */
.ds-order__payment-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ds-order__payment-status {
  font-size: 11.5px;
  color: var(--ds-muted, #6b7280);
}

.ds-order__payment-status.is-paid {
  color: var(--ds-success, #16a34a);
  font-weight: 600;
}

.ds-order__payment-status.is-unpaid {
  color: var(--ds-danger, #dc2626);
  font-weight: 700;
}

/* Нумерация страниц */
.ds-pager-num {
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 8px;
  background: transparent;
  color: var(--ds-text, #111);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.ds-pager-num:hover { background: var(--ds-highlight-bg, #f1f5f9); }

.ds-pager-num.is-active {
  background: var(--ds-primary, #2563eb);
  border-color: var(--ds-primary, #2563eb);
  color: #fff;
  font-weight: 600;
}

.ds-pager-gap {
  padding: 0 3px;
  color: var(--ds-muted, #9ca3af);
}

.ds-orders-pager__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ds-orders-selected-info {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-primary, #2563eb);
}

.ds-orders-selected-info[hidden] { display: none !important; }

@media (max-width: 900px) {
  /* «Клиент» в мобильную карточку не вписывается, а контакты и так есть
     в детали заказа. Чекбокс, наоборот, ОСТАЁТСЯ: без него на телефоне
     нечего выделять, а значит недоступны и массовые действия. */
  .ds-orders.is-table .ds-order__cell--client,
  .ds-orders-table-head__cell--client {
    display: none;
  }

  /* Тот же order, что у номера заказа (1), и раньше него по разметке —
     значит галочка встаёт СЛЕВА ОТ НОМЕРА, а не отдельной строкой сверху.
     С order:0 она попадала до первого разрыва строки и центрировалась
     на всю ширину. */
  .ds-orders.is-table .ds-order__cell--check {
    order: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    margin-right: 2px;
  }

  /* Шапки на карточке нет — «выделить все» жило бы в невидимой строке. */
  .ds-orders-table-head__cell--check {
    display: none;
  }

  /* Точки наличия рядом со статусом, а не под ним — вертикаль на узком
     экране съедала бы высоту карточки. */
  .ds-orders.is-table .ds-order__cell--status {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .ds-pager-num {
    min-width: 28px;
    height: 28px;
  }
}


/* ---- Выравнивание списка заказов ----------------------------------------
   ВАЖНО про специфичность: базовое правило
     .ds-orders.is-table .ds-order__cell:not(--order):not(--details)
   весит 5 классов (каждый :not() добавляет свой). Селектор вида
     .ds-orders.is-table .ds-order__cell--client
   весит 3 и молча проигрывает — правила не применяются вовсе.
   Поэтому здесь используется id контейнера (#ds-orders): один id перебивает
   любое число классов, и переопределение работает предсказуемо. */

#ds-orders.is-table .ds-order__cell--client,
#ds-orders.is-table .ds-order__cell--ttn {
  justify-self: stretch;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  flex-direction: column;
  gap: 3px;
}

#ds-orders .ds-orders-table-head__cell--client,
#ds-orders .ds-orders-table-head__cell--ttn {
  justify-self: stretch;
  text-align: left;
}

/* Заголовок ТТН — сам по себе кнопка сортировки. */
#ds-orders .ds-orders-table-head__cell--ttn.ds-orders-th-sort {
  justify-content: flex-start;
}

/* Клиент: имя и строка контактов прижаты влево. */
#ds-orders .ds-order__client-name {
  text-align: left;
  justify-content: flex-start;
  width: 100%;
}

/* Ширина по содержимому — критично: всплывающая панель позиционируется от
   правого края этого элемента (left:100%). С width:100% «правый край» — это
   дальний край всей колонки, и панель появлялась далеко от номера, курсором
   до неё было не дотянуться. */
#ds-orders .ds-order__client-phone {
  text-align: left;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
  align-self: flex-start;
}

#ds-orders .ds-order__client-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}


/* ТТН: перевозчик и отделение — одним блоком слева. */
#ds-orders .ds-order__ttn-info {
  width: 100%;
  align-items: flex-start;
}

#ds-orders.is-table .ds-order__cell--ttn .ds-order__ttn-head {
  justify-content: flex-start;
  width: 100%;
}

/* Статус: пилюля и точки наличия единым блоком, без разрыва. Прижаты к
   левому краю (а не по центру) — иначе пилюли разной ширины («Комплектуется»
   против «Готов к отправке») сдвигали весь блок то влево, то вправо от
   строки к строке, и колонка визуально «плясала». */
#ds-orders.is-table .ds-order__cell--status {
  flex-direction: column;
  align-items: flex-start;
  justify-self: stretch;
  text-align: left;
  gap: 4px;
}

#ds-orders .ds-order__avail-dots {
  display: flex;
  /* align-self (не width:100%+justify-content) — центрирует блок точек
     внутри уже растянутой (justify-self:stretch) ячейки статуса, не трогая
     собственную ширину блока. width:100% на дочернем элементе грид-ячейки
     рискует повлиять на то, как браузер считает max-content самого трека
     колонки (это и сдвигало Сумму/Доставку/Оплату правее). */
  align-self: center;
  justify-content: center;
  gap: 3px;
  min-height: 8px;
}

/* Оплата — та же причина: способ оплаты и статус разной длины, центрирование
   двигало блок от строки к строке. */
#ds-orders.is-table .ds-order__cell--payment {
  justify-self: stretch;
  align-items: flex-start;
  text-align: left;
}

#ds-orders .ds-orders-table-head__cell--payment {
  justify-self: stretch;
  text-align: left;
}

/* Дата — одной строкой. */
#ds-orders.is-table .ds-order__cell--date {
  white-space: nowrap;
}

/* Ровная высота строк независимо от объёма содержимого ячеек. */
#ds-orders.is-table .ds-order__head {
  min-height: 64px;
}

@media (max-width: 900px) {
  #ds-orders.is-table .ds-order__cell--client,
  #ds-orders .ds-orders-table-head__cell--check,
  #ds-orders .ds-orders-table-head__cell--client {
    display: none;
  }

  #ds-orders.is-table .ds-order__cell--status {
    flex-direction: row;
    align-items: center;
  }
}

/* ---- Колонка «Сумма» -----------------------------------------------------
   Раньше сумма показывалась только подписью под номером заказа (десктоп) и
   отдельной ячейкой в мобильной карточке, а на десктопе ячейка была скрыта.
   Теперь это полноценная колонка, поэтому дубль в подписи убираем. */
#ds-orders.is-table .ds-order__cell--total {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  justify-self: stretch;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

#ds-orders .ds-orders-table-head__cell--total {
  justify-self: stretch;
  text-align: left;
}

/* Сумма в списке — обычный шрифт интерфейса, как на макете.
   Тема terra вешает на .ds-order__total акцентный Unbounded и оформляет его
   «пилюлей» (фон + скругление + padding) — для отдельной колонки это лишнее:
   в ряду одинаковых чисел витринный шрифт мешает сравнивать разряды. */
#ds-orders .ds-order__cell--total .ds-order__total {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ds-text, #111);
  background: transparent;
  padding: 0;
  border-radius: 0;
  white-space: nowrap;
}

#ds-orders .ds-order__commission {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ds-muted, #6b7280);
  white-space: nowrap;
}

/* Сумма теперь в своей колонке — в подписи под номером заказа она лишняя. */
#ds-orders.is-table .ds-order__items-caption-sep,
#ds-orders.is-table .ds-order__items-caption-sum {
  display: none;
}

@media (max-width: 900px) {
  /* На мобиле колонок нет — карточка возвращает прежнюю раскладку: сумма
     остаётся правым якорем шапки карточки. */
  #ds-orders.is-table .ds-order__cell--total {
    align-items: baseline;
    flex-direction: row;
    gap: 6px;
  }
}

/* ---- Контакты клиента: всплывающая панель при наведении на номер ---------
   Иконки мессенджеров и кнопка шаблона показываются только по наведению —
   постоянно висящие, они забивали колонку и мешали читать сам телефон.

   Панель НЕ выносится в body: у .ds-order стоит overflow:hidden, и всё, что
   выходит за границы строки, обрезается. Поэтому она позиционируется от
   номера и центрируется по его высоте — так остаётся внутри строки при
   любой её высоте. Панель — дочерний элемент номера, поэтому при переходе
   курсора на неё :hover родителя не теряется и она не схлопывается. */
#ds-orders .ds-order__client-phone {
  position: relative;
}

#ds-orders .ds-order__client-actions {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 9px;
  background: var(--ds-surface, #fff);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

/* Невидимый «мостик» влево до самого номера: без него курсор пересекает
   зазор, который не принадлежит ни номеру, ни панели, :hover теряется и
   панель схлопывается раньше, чем до неё доедут. */
#ds-orders .ds-order__client-actions::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  width: 12px;
}

#ds-orders .ds-order__client-phone:hover .ds-order__client-actions,
#ds-orders .ds-order__client-phone:focus-within .ds-order__client-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(6px);
}

/* Подсказка, что телефон интерактивен. Селектор именно .ds-phone-link:
   раньше телефон был ссылкой <a>, теперь это кнопка копирования, и правило
   по тегу перестало бы срабатывать. */
#ds-orders .ds-order__client-phone:hover .ds-phone-link {
  border-bottom-color: var(--ds-border, #cbd5e1);
}

@media (max-width: 900px) {
  /* На узком экране наведения нет — панель просто встроена в строку. */
  #ds-orders .ds-order__client-actions {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }
}

/* ---- «Фильтры» как кнопка-пилюля в стиле вкладок статусов ----------------
   Блок фильтров переехал ПОД строку статусов (порядок в разметке изменён),
   и его заголовок теперь оформлен как такая же пилюля, а не как широкая
   строка-заголовок на всю ширину. */
#ds-orders-view .ds-mgr-filter-block {
  margin-top: 10px;
}

#ds-orders-view .ds-mgr-filter-block__head {
  width: auto;
  padding: 6px 14px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 24px;
  background: var(--ds-surface, #fff);
  color: var(--ds-muted, #5d5a52);
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

#ds-orders-view .ds-mgr-filter-block__head:hover {
  color: var(--ds-text, #111);
  border-color: var(--ds-primary, #2563eb);
}

/* Раскрытый блок — активная пилюля, как выбранная вкладка статуса. */
#ds-orders-view .ds-mgr-filter-block:not(.is-collapsed) .ds-mgr-filter-block__head {
  background: var(--ds-primary, #2563eb);
  border-color: var(--ds-primary, #2563eb);
  color: #fff;
}

#ds-orders-view .ds-mgr-filter-block__icon,
#ds-orders-view .ds-mgr-filter-block__chevron {
  width: 14px;
  height: 14px;
}

/* Поворот стрелки уже задан базовым правилом .ds-mgr-filter-block.is-collapsed
   — здесь только плавность. */
#ds-orders-view .ds-mgr-filter-block__chevron {
  transition: transform 0.15s ease;
}

/* ---- Строка управления: [Фильтры] ......... [сортировки | плотность] -----
   Блок фильтров теперь лежит внутри .ds-orders-status-tabs-row рядом с
   viewbar. Вкладки статусов занимают отдельную строку, под ними — одна
   аккуратная строка: пилюля «Фильтры» слева, элементы управления справа. */
#ds-orders-view .ds-orders-status-tabs-row > #ds-orders-status-tabs {
  flex: 1 1 100%;
}

#ds-orders-view .ds-orders-status-tabs-row > .ds-mgr-filter-block {
  flex: 0 0 auto;
  margin-top: 0;
  /* Именно flex-start, а не center: при раскрытии блок растёт вниз, и
     центрирование сдвигало бы пилюлю по вертикали — она «прыгала». */
  align-self: flex-start;
  /* Базовый padding 0 20px сдвигал пилюлю вправо относительно вкладок
     статусов над ней — левые края не совпадали. */
  padding-left: 0;
  padding-right: 0;
}

#ds-orders-view .ds-orders-status-tabs-row > .ds-orders-viewbar {
  margin-left: auto;
  align-self: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* Раскрытые фильтры занимают всю ширину: панель групп широкая, ужимать её
   до ширины пилюли нельзя.
   ВАЖНО: order здесь НЕ меняем. Раньше стояло order:3 — блок перескакивал
   на другую позицию флекс-строки, и пилюля «прыгала» в момент раскрытия.
   Без смены порядка блок просто растягивается на всю строку, оставаясь на
   месте, а панель управления переносится на строку ниже. */
#ds-orders-view .ds-orders-status-tabs-row > .ds-mgr-filter-block:not(.is-collapsed) {
  flex: 1 1 100%;
}

/* Сворачивание НЕ переопределяем: в базовых стилях оно сделано анимацией
   grid-template-rows 1fr↔0fr, и display:none здесь убил бы плавность. */

/* ---- Кнопка «Шаблон письма» — только иконка ------------------------------
   Подпись убрана: рядом с круглыми иконками мессенджеров прямоугольная
   кнопка с текстом выглядела инородно. Форма и размер теперь те же, что у
   Viber/Telegram, смысл передаёт тултип. */
#ds-orders .ds-messenger-template-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  border: 1px solid var(--ds-border, #e5e7eb);
  background: var(--ds-surface, #fff);
  color: var(--ds-muted, #6b7280);
  justify-content: center;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

#ds-orders .ds-messenger-template-btn:hover {
  color: var(--ds-primary, #2563eb);
  border-color: var(--ds-primary, #2563eb);
  background: var(--ds-surface, #fff);
}

#ds-orders .ds-messenger-template-btn i,
#ds-orders .ds-messenger-template-btn svg {
  width: 13px;
  height: 13px;
}

/* ---- Свёрнутый сайдбар (узкое меню) --------------------------------------
   Раскладка целиком завязана на --ds-sidebar-w: её читают и ширина сайдбара,
   и отступ основной области. Поэтому достаточно переопределить переменную —
   контент подвинется сам, отдельных правил для .ds-main не нужно. */

.ds-sidebar-collapse {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ds-sidebar-collapse:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.ds-sidebar-collapse i,
.ds-sidebar-collapse svg {
  width: 15px;
  height: 15px;
}

@media (min-width: 901px) {
  .ds-app.is-sidebar-collapsed {
    --ds-sidebar-w: 68px;
  }

  .ds-app.is-sidebar-collapsed .ds-sidebar {
    overflow: visible;
  }

  /* Подписи пунктов — голые текстовые узлы без обёрток, поэтому прячем их
     через font-size:0 на самом пункте. Иконки это не задевает: они SVG и
     размер берут из своих атрибутов/CSS. */
  .ds-app.is-sidebar-collapsed .ds-nav__item {
    font-size: 0;
    gap: 0;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .ds-app.is-sidebar-collapsed .ds-nav__item i,
  .ds-app.is-sidebar-collapsed .ds-nav__item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  /* Стрелка подменю и сам список статусов в узком режиме не помещаются. */
  .ds-app.is-sidebar-collapsed .ds-nav__item-chevron,
  .ds-app.is-sidebar-collapsed .ds-nav__submenu,
  .ds-app.is-sidebar-collapsed .ds-sidebar__help {
    display: none !important;
  }

  /* Счётчик остаётся, но превращается в точку: цифра в 68px не читается,
     а знать «там что-то новое» полезно. */
  .ds-app.is-sidebar-collapsed .ds-nav__badge {
    position: absolute;
    top: 6px;
    right: 12px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }

  .ds-app.is-sidebar-collapsed .ds-nav__item {
    position: relative;
  }

  /* Логотип со словом «Dropship CRM» в 68px нечитаем — прячем, оставляя
     только кнопку разворота. */
  .ds-app.is-sidebar-collapsed .ds-brand__icon {
    display: none;
  }

  .ds-app.is-sidebar-collapsed .ds-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .ds-app.is-sidebar-collapsed .ds-sidebar-collapse {
    margin-left: 0;
  }

  /* ---- Анимация сворачивания -------------------------------------------
     Переходы объявлены на обычном (развёрнутом) состоянии, а не только на
     .is-sidebar-collapsed — иначе анимировалось бы лишь сворачивание, а
     обратно меню прыгало бы скачком. Ширина сайдбара и отступ основной
     области идут одной кривой, чтобы контент не отставал от края меню. */
  .ds-sidebar,
  .ds-main {
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Подписи пунктов — голые текстовые узлы, отдельной обёртки для fade нет,
     поэтому «растворяем» их анимацией самого font-size вместе с отступами. */
  .ds-nav__item {
    transition: font-size 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                gap 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.15s ease,
                color 0.15s ease;
  }

  .ds-brand {
    transition: padding 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .ds-nav__badge {
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

}

@media (prefers-reduced-motion: reduce) {
  .ds-sidebar,
  .ds-main,
  .ds-nav__item,
  .ds-brand,
  .ds-nav__badge {
    transition: none !important;
  }
}

/* ---- Телефон: кнопка копирования ----------------------------------------
   Был ссылкой tel:, стал кнопкой (клик копирует номер) — сбрасываем
   браузерные стили кнопки, чтобы визуально это осталось обычным текстом. */
.ds-phone-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s, border-color 0.15s;
}

.ds-phone-link:hover {
  color: var(--ds-primary, #2563eb);
  border-bottom-color: currentColor;
}

.ds-phone-link:active {
  opacity: 0.7;
}

/* ===== Обсуждение заказа (общий тред) + метки упаковки =================
   Комментарии к позициям остались как были; здесь — общий тред на заказ,
   который видят обе стороны, и быстрые метки-инструкции для склада.
   Стили самого бейджа/кнопки-входа/меток/контекстного меню — ниже по файлу,
   рядом с ---Точки входа---; тут только вёрстка ленты и формы. */

/* --- Тред --- */
.ds-thread-card {
  /* Раньше жил карточкой внутри сайдбара (margin/padding сами по себе),
     теперь это содержимое модалки — у .ds-modal__body уже есть свой
     паддинг, дублировать не нужно. */
}

.ds-thread__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.ds-thread__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-text);
}

.ds-thread__title i,
.ds-thread__title svg {
  width: 15px;
  height: 15px;
}

.ds-thread__hint {
  font-size: 11px;
  color: var(--ds-muted);
}

.ds-thread__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.ds-thread__empty {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-muted);
}

.ds-thread-msg {
  padding: 8px 10px;
  border-radius: 10px;
  background: #f4f5f7;
  border: 1px solid transparent;
}

/* Свои сообщения слегка смещены и подкрашены — чтобы «кто кому» читалось
   без вчитывания в подписи. */
.ds-thread-msg.is-mine {
  background: var(--ds-primary-alpha-12, #fdf0e6);
  border-color: var(--ds-primary-alpha-18, #f8dcc4);
  margin-left: 18px;
}

.ds-thread-msg__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.ds-thread-msg__author {
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-text);
}

.ds-thread-msg__time {
  font-size: 10.5px;
  color: var(--ds-muted);
  margin-right: auto;
}

.ds-thread-msg__delete {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--ds-muted);
  opacity: 0;
  transition: opacity .15s, color .15s;
}

.ds-thread-msg:hover .ds-thread-msg__delete {
  opacity: 1;
}

.ds-thread-msg__delete:hover {
  color: var(--ds-danger);
}

.ds-thread-msg__delete i,
.ds-thread-msg__delete svg {
  width: 12px;
  height: 12px;
}

.ds-thread-msg__line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
  font-size: 10.5px;
  color: var(--ds-muted);
}

.ds-thread-msg__line i,
.ds-thread-msg__line svg {
  width: 11px;
  height: 11px;
}

.ds-thread-msg__text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ds-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.ds-thread-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ds-thread-form__line {
  flex: 1 1 100%;
  padding: 6px 8px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 12px;
}

.ds-thread-form__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  resize: vertical;
}

.ds-thread-form__input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

.ds-thread-form__send {
  flex: 0 0 auto;
  align-self: flex-end;
}

/* ===== Точки входа в обсуждение: бейдж в списке, кнопка в панели,
   контекстное меню по правому клику ===================================== */

.ds-order-comments-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 6px 1px 4px;
  border: none;
  border-radius: 10px;
  background: #eef0f3;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  vertical-align: middle;
  cursor: pointer;
  line-height: 1.6;
}

.ds-order-comments-mark:hover {
  filter: brightness(0.95);
}

.ds-order-comments-mark i,
.ds-order-comments-mark svg {
  width: 12px;
  height: 12px;
}

/* Непрочитанное от другой стороны — единственное состояние, которое обязано
   ловить взгляд в списке из 700 заказов. Но список живой (поллинг), и
   заказов с непрочитанным может быть сразу несколько — если пульс идёт
   безостановочно, это быстро превращается в мельтешение. Поэтому цикл
   длинный (3.6s), а сама вспышка занимает только начало каждого цикла —
   бейдж «дышит» раз в несколько секунд, а не трясётся постоянно. */
.ds-order-comments-mark.is-unread {
  background: var(--ds-primary, #e8590c);
  color: #fff;
  animation: ds-comments-badge-pulse 3.6s ease-in-out infinite;
}

@keyframes ds-comments-badge-pulse {
  0%, 60%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-primary, #e8590c) 55%, transparent);
  }

  15% {
    transform: scale(1.12);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--ds-primary, #e8590c) 0%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-order-comments-mark.is-unread {
    animation: none;
  }
}

.ds-pack-tag-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}

.ds-pack-tag-mark {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tag-color, #6b7280);
  background: color-mix(in srgb, var(--tag-color, #6b7280) 14%, white);
  border: 1px solid color-mix(in srgb, var(--tag-color, #6b7280) 28%, white);
}

/* --- Редактор меток в панели заказа --- */
.ds-pack-tags {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface);
}

.ds-pack-tags__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-muted);
}

.ds-pack-tags__head i,
.ds-pack-tags__head svg {
  width: 14px;
  height: 14px;
}

.ds-pack-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ds-pack-tag {
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--ds-border);
  background: transparent;
  color: var(--ds-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.ds-pack-tag:hover {
  border-color: var(--tag-color, #9ca3af);
  color: var(--tag-color, #374151);
}

.ds-pack-tag.is-on {
  color: var(--tag-color, #374151);
  background: color-mix(in srgb, var(--tag-color, #6b7280) 14%, white);
  border-color: color-mix(in srgb, var(--tag-color, #6b7280) 40%, white);
}

/* --- Кнопка-вход в обсуждение внутри панели заказа --- */
.ds-thread-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}

.ds-thread-entry:hover {
  border-color: var(--ds-primary-alpha-35, #f3b083);
  background: var(--ds-primary-alpha-12, #fdf0e6);
}

.ds-thread-entry.is-unread {
  border-color: var(--ds-primary, #e8590c);
}

.ds-thread-entry__icon {
  display: inline-flex;
  color: var(--ds-muted);
}

.ds-thread-entry.is-unread .ds-thread-entry__icon {
  color: var(--ds-primary, #e8590c);
}

.ds-thread-entry__icon i,
.ds-thread-entry__icon svg {
  width: 16px;
  height: 16px;
}

.ds-thread-entry__label {
  flex: 1;
}

.ds-thread-entry__count {
  padding: 2px 8px;
  border-radius: 10px;
  background: #eef0f3;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
}

.ds-thread-entry.is-unread .ds-thread-entry__count {
  background: var(--ds-primary, #e8590c);
  color: #fff;
}

.ds-thread-entry__count--empty {
  background: transparent;
  color: var(--ds-muted);
  font-weight: 500;
}

.ds-thread-entry__arrow {
  width: 14px;
  height: 14px;
  color: var(--ds-muted);
  flex: 0 0 auto;
}

/* --- Контекстное меню по правому клику на заказе --- */
.ds-order-ctx-menu {
  position: fixed;
  z-index: 2000;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  transform-origin: top left;
  animation: ds-popover-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.ds-order-ctx-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--ds-text);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ds-order-ctx-menu__item:hover {
  background: var(--ds-order-hover-bg, #f3f4f6);
}

.ds-order-ctx-menu__item i,
.ds-order-ctx-menu__item svg {
  width: 15px;
  height: 15px;
  color: var(--ds-muted);
}

/* --- Степпер количества в таблице позиций (+/- вместо только двойного клика) */
.ds-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ds-qty-stepper .ds-line-editable {
  min-width: 16px;
  text-align: center;
}

.ds-qty-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.ds-qty-stepper__btn:hover:not(:disabled) {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
  background: var(--ds-primary-alpha-12, #fdf0e6);
}

.ds-qty-stepper__btn:disabled {
  opacity: .4;
  cursor: default;
}

/* Поле секрета (API-токен интеграции), замаскированное БЕЗ type="password".
   Пока это был настоящий пароль, менеджер паролей Chrome предлагал сохранить
   токен как пароль от сайта при каждом сохранении настроек интеграции.
   -webkit-text-security даёт ту же визуальную маскировку, но поле остаётся
   обычным текстовым, и браузер не считает его учётными данными.
   Firefox это свойство не поддерживает — там токен будет видно; для поля,
   которое заполняют раз в жизни в своих же настройках, это приемлемо. */
.ds-input--secret {
  -webkit-text-security: disc;
}

/* При наведении/фокусе не раскрываем — раскрытие делается кнопкой рядом,
   если она есть; иначе значение и не нужно читать глазами. */
.ds-input--secret:focus {
  -webkit-text-security: disc;
}

/* ── Модалка «Внести в расчёты»: отступ и нейтральные шапки ──
   Блок выбора типа расчёта прижимался к таблице вплотную. Отступ задан не
   классу .ds-warehouse-mode-bar (он общий, используется и на складе), а
   конкретному блоку в этой модалке. */
#ds-settlement-import-mode-bar {
  margin-bottom: 16px;
}

/* Шапка таблицы и строка «Итого» брали фон из --ds-highlight-bg. В теме terra
   это #fdeee2 — тёплый оранжевый, из-за него половина модалки выглядела
   подсвеченной, будто там ошибка или выделение. Меняется только здесь:
   переменная используется во всём интерфейсе, и править её значило бы
   перекрасить подсветки везде. */
.ds-settlement-import-table thead th,
.ds-settlement-import-table tfoot td {
  background: #f6f3ee;
}

/* ── Персональные формулы расчёта дропшиппера ──
   Строка: название, контролы, состояние. Базовое значение показывается всегда,
   даже когда действует персональное — без него непонятно, от чего отклонились. */
.ds-partner-formula__group + .ds-partner-formula__group {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ds-border);
}

.ds-partner-formula__group-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ds-text);
}

.ds-partner-formula__group-hint {
  margin: 4px 0 12px;
  font-size: 12.5px;
  color: var(--ds-muted);
}

.ds-partner-formula__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-partner-formula__row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) auto minmax(150px, auto);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  transition: opacity 0.15s;
}

.ds-partner-formula__row.is-saving {
  opacity: 0.55;
  pointer-events: none;
}

.ds-partner-formula__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-partner-formula__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ds-text);
}

.ds-partner-formula__subtitle {
  font-size: 11.5px;
  color: var(--ds-muted);
}

.ds-partner-formula__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ds-partner-formula__mode {
  padding: 6px 8px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  font: inherit;
  font-size: 13px;
}

/* 16px — иначе Safari на iOS зумит страницу при фокусе. */
.ds-partner-formula__percent {
  width: 76px;
  padding: 6px 8px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  font: inherit;
  font-size: 16px;
  text-align: right;
}

.ds-partner-formula__percent:focus,
.ds-partner-formula__mode:focus {
  outline: none;
  border-color: var(--ds-primary);
}

.ds-partner-formula__unit {
  font-size: 13px;
  color: var(--ds-muted);
}

.ds-partner-formula__state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}

.ds-partner-formula__badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ds-bg-solid, #f3f4f6);
  color: var(--ds-muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ds-partner-formula__badge--own {
  background: var(--ds-highlight-bg);
  color: var(--ds-primary-dark, #1d4ed8);
}

.ds-partner-formula__reset {
  padding: 0;
  border: none;
  background: none;
  color: var(--ds-primary, #2563eb);
  font: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  cursor: pointer;
}

.ds-partner-formula__base {
  font-size: 11px;
  color: var(--ds-muted);
  white-space: nowrap;
}

.ds-partner-formula__empty {
  padding: 14px;
  border: 1px dashed var(--ds-border);
  border-radius: 10px;
  color: var(--ds-muted);
  font-size: 12.5px;
  text-align: center;
}

@media (max-width: 640px) {
  .ds-partner-formula__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ds-partner-formula__state {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
}

/* ── Расчёт по позициям в сайдбаре «Финансы» ─────────────────────────────── */

.ds-markup-block {
  margin-bottom: 18px;
}

.ds-markup-table {
  font-size: 12.5px;
}

.ds-markup-table th,
.ds-markup-table td {
  vertical-align: middle;
}

/* Итоги строкой под таблицей, а не tfoot: таблица теперь общая с товарами,
   и лишняя строка в ней спорила бы с колонками «Артикул/Кол-во». */
.ds-markup-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--ds-highlight-bg);
  font-size: 12.5px;
  color: var(--ds-muted);
}

.ds-markup-total b {
  margin-left: 5px;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}

.ds-markup-total .is-main b {
  font-size: 14.5px;
}

.ds-markup-line__name {
  min-width: 140px;
}

.ds-markup-line__qty {
  color: var(--ds-muted);
  font-size: 11.5px;
}

.ds-markup-line__wh {
  color: var(--ds-muted);
  white-space: nowrap;
}

.ds-markup-line__num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ds-markup-line__pct {
  text-align: right;
  width: 74px;
}

/* Правленая вручную позиция помечается — иначе через неделю не отличить, где
   процент из формулы склада, а где поставлен руками. */
.ds-markup-table tr.is-override .ds-markup-line__percent {
  border-color: var(--ds-primary);
  font-weight: 700;
}

.ds-markup-line__percent {
  width: 64px;
  padding: 4px 6px;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ds-markup-line__percent:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-12);
}

.ds-markup-line__na {
  color: var(--ds-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

/* Позиция без базы: менеджер сам вбивает склад/цену/процент вместо
   автоподбора. Тонкая пунктирная рамка на строке — чтобы было видно, где
   ввод целиком ручной, а не просто подправленный процент. */
.ds-markup-table tr.is-manual {
  background: var(--ds-bg-solid);
}

.ds-markup-line__wh-select {
  width: 100%;
  min-width: 90px;
  max-width: 130px;
  padding: 4px 6px;
  border: 1px dashed var(--ds-border);
  border-radius: 6px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-size: 12px;
}

.ds-markup-line__price {
  width: 72px;
  padding: 4px 6px;
  border: 1px dashed var(--ds-border);
  border-radius: 6px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ds-markup-line__wh-select:focus,
.ds-markup-line__price:focus {
  outline: none;
  border-style: solid;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-12);
}

.ds-markup-warn {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--ds-bg-solid);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  font-size: 12.5px;
  line-height: 1.45;
}

.ds-markup-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.ds-markup-actions[hidden] {
  display: none;
}

/* История */
.ds-markup-history {
  margin-top: 14px;
  font-size: 12.5px;
}

.ds-markup-history > summary {
  cursor: pointer;
  color: var(--ds-muted);
  font-weight: 600;
}

.ds-markup-history__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-markup-history__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
}

.ds-markup-history__when,
.ds-markup-history__who {
  color: var(--ds-muted);
  white-space: nowrap;
}

.ds-markup-history__sum {
  font-variant-numeric: tabular-nums;
}

.ds-markup-history__delta.is-up {
  color: #16a34a;
  font-weight: 600;
}

.ds-markup-history__delta.is-down {
  color: #dc2626;
  font-weight: 600;
}

/* Модалка подтверждения */
.ds-markup-modal {
  max-width: 620px;
}

.ds-markup-modal__totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ds-highlight-bg);
}

.ds-markup-modal__totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
}

.ds-markup-modal__totals > div span {
  color: var(--ds-muted);
}

.ds-markup-modal__totals > div b {
  font-variant-numeric: tabular-nums;
}

.ds-markup-modal__totals .is-main {
  padding-top: 7px;
  border-top: 1px solid var(--ds-border);
  font-size: 15px;
}

.ds-markup-modal__delta.is-up {
  color: #16a34a;
}

.ds-markup-modal__delta.is-down {
  color: #dc2626;
}

/* Подпись над итогами: откуда взялись числа — из сохранённой разбивки или
   восстановлены по текущим формулам. Без неё восстановленный итог читается
   как состав строки, хотя это лишь «как считалось бы сегодня». */
.ds-markup-total__cap {
  flex: 1 0 100%;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ds-muted);
}

/* Вторая строка — то, что реально записано в таблице расчётов. Показывается
   только когда расходится с разбивкой. */
.ds-markup-total.is-stored {
  margin-top: 6px;
  background: transparent;
  border: 1px dashed var(--ds-border);
}

/* Разбивка, чья сумма не сошлась с записанной в строке, — предположение, а не
   факт. Отличается пунктирной рамкой, а не цветом: пунктир и так читается как
   «неточно», и это не требует заливать блок. */
.ds-markup-total.is-unverified {
  background: transparent;
  border: 1px dashed var(--ds-border);
}

/* ── Массовый пересчёт ───────────────────────────────────────────────────── */

.ds-recalc-modal__dialog {
  max-width: 760px;
}

.ds-recalc-opt {
  display: flex;
  margin-top: 8px;
  font-weight: 500;
}

.ds-recalc-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ds-highlight-bg);
}

.ds-recalc-summary > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.ds-recalc-summary span {
  color: var(--ds-muted);
}

.ds-recalc-summary b {
  font-variant-numeric: tabular-nums;
}

.ds-recalc-summary .is-main b {
  font-size: 16px;
}

/* Список изменений может быть на сотни строк — ограничиваем высоту, иначе
   кнопка «Применить» уезжает за пределы экрана и до неё не добраться. */
.ds-recalc-table-wrap {
  max-height: 320px;
  overflow: auto;
  margin-top: 12px;
}

.ds-recalc-table {
  font-size: 12.5px;
}

.ds-recalc-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ds-recalc-open-cell {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

.is-up { color: #16a34a; }
.is-down { color: #dc2626; }

.ds-recalc-skipped {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--ds-bg-solid);
  border: 1px solid var(--ds-border);
  font-size: 12.5px;
  color: var(--ds-text);
}

.ds-recalc-skipped__title {
  margin: 0 0 6px;
  font-weight: 600;
}

.ds-recalc-skipped ul {
  margin: 0;
  padding-left: 18px;
}

.ds-recalc-history {
  margin-top: 16px;
  font-size: 12.5px;
}

.ds-recalc-history > summary {
  cursor: pointer;
  color: var(--ds-muted);
  font-weight: 600;
}

.ds-recalc-history__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-recalc-history__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 8px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
}

.ds-recalc-history__item.is-undone {
  opacity: 0.6;
}

.ds-recalc-history__undone {
  color: var(--ds-muted);
  font-style: italic;
}

/* Пропущенные строки: раскрывающаяся группа на каждую причину */
.ds-recalc-skip__group {
  margin-top: 8px;
  border-top: 1px solid var(--ds-border);
  padding-top: 8px;
}

.ds-recalc-skip__group > summary {
  cursor: pointer;
  font-weight: 600;
}

.ds-recalc-skip__hint {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.5;
}

.ds-recalc-skip__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-height: 220px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-recalc-skip__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 12px;
}

.ds-recalc-skip__order {
  font-weight: 600;
  white-space: nowrap;
}

.ds-recalc-skip__date,
.ds-recalc-skip__detail {
  color: var(--ds-muted);
}

.ds-recalc-skip__sum {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ds-recalc-skip__detail b {
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}

.ds-recalc-skip__detail--cause {
  color: var(--ds-text);
  font-weight: 500;
}

.ds-recalc-skip__item .ds-btn {
  margin-left: auto;
}

.ds-recalc-skip__cluster {
  border-radius: 7px;
  background: var(--ds-surface);
  padding: 2px 9px;
}

.ds-recalc-skip__cluster > details > summary {
  cursor: pointer;
  padding: 4px 0;
  font-size: 12px;
  color: var(--ds-text);
}

.ds-recalc-skip__cluster > details > summary b {
  font-variant-numeric: tabular-nums;
}

.ds-recalc-skip__cluster-hint {
  margin: 0 0 6px;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.5;
}

.ds-recalc-skip__cluster .ds-recalc-skip__list {
  max-height: 180px;
}

.ds-recalc-skip__cluster .ds-recalc-skip__item {
  background: var(--ds-bg);
}


/* Пометка, что показан прежний расчёт */
.ds-recalc-stale {
  flex: 1 0 100%;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ds-text);
}

/* Режим «рядом с панелью заказа»: окно остаётся открытым, но перестаёт быть
   модальным — своё затемнение скрыто, контейнер пропускает клики насквозь.

   Смещения влево тут нет: контейнер просто ужимается на ширину панели
   (right), а окно центрируется штатным justify-content уже в оставшемся
   месте. Поэтому оно стоит по центру свободного пространства, а не прижато
   к краю, и само возвращается в середину экрана, когда панель закрывается. */
.ds-modal.is-side-by-side {
  right: var(--ds-detail-w);
  pointer-events: none;
  /* Совпадает с длительностью выезда панели — двигаются синхронно. */
  transition: right 0.25s ease, opacity 0.2s ease;
}

.ds-modal.is-side-by-side .ds-modal__backdrop {
  display: none;
}

.ds-modal.is-side-by-side .ds-modal__dialog {
  pointer-events: auto;
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.28);
  max-height: calc(100vh - 40px);
}

/* На узком экране панель занимает почти весь экран — ужимать контейнер
   некуда, окно остаётся во всю ширину и просто ложится поверх. */
@media (max-width: 1180px) {
  .ds-modal.is-side-by-side {
    right: 0;
  }
}

/* ------------------------------------------------------------ Клиенты */
/* Раздел дропшиппера: список покупателей, собранный из заказов.        */

.ds-customers {
  padding: 4px 0 24px;
}

.ds-customers__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ds-customers__search {
  position: relative;
  flex: 1 1 auto;
  max-width: 420px;
}

.ds-customers__search .lucide {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ds-muted);
  pointer-events: none;
}

.ds-customers__search input {
  width: 100%;
  padding: 9px 12px 9px 32px;
  border: 1px solid var(--ds-border);
  border-radius: 9px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
}

.ds-customers__search input:focus {
  outline: 2px solid var(--ds-primary, #2563eb);
  outline-offset: -1px;
}

.ds-customers__count {
  color: var(--ds-muted);
  font-size: 13px;
  white-space: nowrap;
}

.ds-customers__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 4px;
  color: var(--ds-muted);
  font-size: 14px;
}

.ds-customers__loading[hidden],
.ds-customers__empty[hidden],
.ds-customers__more[hidden] {
  display: none !important;
}

.ds-customers__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 16px;
  color: var(--ds-muted);
  text-align: center;
}

.ds-customers__empty .lucide {
  width: 28px;
  height: 28px;
  opacity: 0.55;
}

.ds-customers__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-customers__more {
  margin: 12px auto 0;
  display: block;
}

/* Строка клиента. Колонки заданы явно, а не auto-раскладкой: имена и суммы
   разной длины, и без фиксированной сетки телефон с суммой ездили бы
   по горизонтали от строки к строке. */
.ds-cust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.ds-cust:hover {
  border-color: var(--ds-primary, #2563eb);
  background: var(--ds-order-hover-bg, rgba(37, 99, 235, 0.04));
}

.ds-cust:focus-visible {
  outline: 2px solid var(--ds-primary, #2563eb);
  outline-offset: 1px;
}

.ds-cust.is-nophone {
  cursor: default;
  opacity: 0.72;
}

.ds-cust.is-nophone:hover {
  border-color: var(--ds-border);
  background: var(--ds-surface);
}

.ds-cust__main {
  min-width: 0;
}

.ds-cust__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ds-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-cust__repeat {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--ds-success-bg, #dcfce7);
  color: var(--ds-success, #15803d);
  font-size: 11px;
  font-weight: 600;
}

.ds-cust__phone {
  margin-top: 2px;
  color: var(--ds-muted);
  font-size: 13px;
}

.ds-cust__stats {
  text-align: right;
}

.ds-cust__sum {
  font-weight: 600;
  color: var(--ds-text);
  white-space: nowrap;
}

.ds-cust__meta {
  margin-top: 2px;
  color: var(--ds-muted);
  font-size: 12px;
  white-space: nowrap;
}

.ds-cust__tags {
  display: flex;
  gap: 4px;
}

.ds-cust__src {
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--ds-border);
  color: var(--ds-muted);
  font-size: 11px;
  white-space: nowrap;
}

.ds-cust__acts {
  display: flex;
  gap: 6px;
}

.ds-cust__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  color: var(--ds-muted);
  background: var(--ds-surface);
  text-decoration: none;
}

.ds-cust__act .lucide {
  width: 15px;
  height: 15px;
}

.ds-cust__act:hover {
  border-color: var(--ds-primary, #2563eb);
  color: var(--ds-primary, #2563eb);
}

.ds-cust__act--viber:hover {
  border-color: #7360f2;
  color: #7360f2;
}

.ds-cust__act--tg:hover {
  border-color: #2aabee;
  color: #2aabee;
}

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

/* Панель истории. z-index НИЖЕ штатной панели заказа (.ds-detail, 30):
   заказ открывается поверх неё, а не под ней. */
.ds-cust-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(460px, 100vw);
  height: 100vh;
  z-index: 28;
  display: flex;
  flex-direction: column;
  background: var(--ds-surface);
  border-left: 1px solid var(--ds-border);
  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.10);
}

.ds-cust-panel[hidden] {
  display: none !important;
}

.ds-cust-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-cust-panel__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-text);
}

.ds-cust-panel__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--ds-muted);
  font-size: 13px;
}

.ds-cust-panel__sub a:first-child {
  color: var(--ds-muted);
  text-decoration: none;
}

.ds-cust-panel__sub a:first-child:hover {
  color: var(--ds-primary, #2563eb);
}

.ds-cust-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px 24px;
}

.ds-cust-panel__sum {
  padding: 0 4px 10px;
  color: var(--ds-muted);
  font-size: 13px;
}

.ds-cust-panel__loading,
.ds-cust-panel__empty {
  padding: 32px 8px;
  color: var(--ds-muted);
  text-align: center;
  font-size: 14px;
}

.ds-cust-order {
  display: grid;
  grid-template-columns: auto 1fr auto 16px;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 9px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ds-cust-order:hover {
  border-color: var(--ds-primary, #2563eb);
}

.ds-cust-order__num {
  font-weight: 600;
}

.ds-cust-order__date {
  color: var(--ds-muted);
  font-size: 12px;
}

.ds-cust-order__status {
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--ds-bg, #f1f5f9);
  font-size: 11px;
  white-space: nowrap;
}

.ds-cust-order__ttn {
  grid-column: 1 / -1;
  color: var(--ds-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ds-cust-order .lucide {
  width: 16px;
  height: 16px;
  color: var(--ds-muted);
}

@media (max-width: 760px) {
  /* На узком экране сумма и метки ушли бы за край — оставляем имя,
     телефон и кнопки связи, остальное под ними. */
  .ds-cust {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .ds-cust__stats {
    grid-column: 1;
    text-align: left;
  }

  .ds-cust__tags {
    grid-column: 1;
  }

  .ds-cust__acts {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }

  .ds-cust-panel {
    width: 100vw;
  }
}

/* Сортировка и выгрузка в шапке «Клиентов» */
.ds-customers__sort {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--ds-muted);
  font-size: 13px;
  white-space: nowrap;
}

.ds-customers__sort select {
  padding: 7px 9px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
}

.ds-customers__sort-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-muted);
  cursor: pointer;
}

.ds-customers__sort-dir:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

/* Одна иконка на оба направления: поворот дешевле второго набора svg */
.ds-customers__sort-dir.is-asc .lucide {
  transform: rotate(180deg);
}

.ds-customers__sort-dir .lucide {
  width: 15px;
  height: 15px;
  transition: transform 0.15s;
}

/* Реквизиты отправки в строке клиента */
.ds-cust__ship {
  margin-top: 3px;
  color: var(--ds-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-cust__carrier {
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ds-bg);
  color: var(--ds-text);
  font-size: 11px;
}

/* Окно выбора колонок */
.ds-cust-export__dialog {
  max-width: 520px;
}

.ds-cust-export__tools {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.ds-cust-export__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 14px;
}

.ds-cust-export__field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  cursor: pointer;
  color: var(--ds-text);
  font-size: 14px;
}

.ds-cust-export__loading {
  grid-column: 1 / -1;
  padding: 18px 4px;
  color: var(--ds-muted);
  text-align: center;
}

@media (max-width: 760px) {
  .ds-customers__bar {
    flex-wrap: wrap;
  }

  .ds-customers__sort {
    margin-left: 0;
  }
}

/* Значок автовыпуска ТТН в строке заказа */
.ds-order__autottn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid var(--ds-border);
  border-radius: 7px;
  background: var(--ds-surface);
  color: var(--ds-success, #15803d);
  cursor: pointer;
  padding: 0;
}

.ds-order__autottn .lucide {
  width: 14px;
  height: 14px;
}

.ds-order__autottn:hover {
  border-color: currentColor;
}

.ds-order__autottn[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* Выключен — приглушённый, чтобы «работает» читалось цветом, а не формой */
.ds-order__autottn.is-off {
  color: var(--ds-muted);
}

.ds-order__autottn.has-error {
  color: var(--ds-danger, #dc2626);
  border-color: var(--ds-danger, #dc2626);
}

/* Колонка «Метки» — всё, что помечает заказ, в одном месте.
   Раньше эти плашки жили рядом с номером и растягивали первую колонку
   тем сильнее, чем больше у заказа особенностей. */
.ds-order__cell--marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

/* Пустую ячейку прячем видимостью, а НЕ display:none: убранный из потока
   элемент перестаёт быть grid-элементом, и в этой строке трек схлопнулся бы,
   разъехавшись с соседними строками. Сейчас в ячейке всегда есть кнопка «+»,
   так что :empty срабатывает только у архивных заказов. */
.ds-order__cell--marks:empty {
  visibility: hidden;
}

/* Колонка есть у обеих ролей — трек больше не схлопываем. */

/* Внутри колонки плашки идут в поток, без собственных отступов от
   соседей — интервалы задаёт gap контейнера. */
.ds-order__cell--marks .ds-order__dup-mark {
  margin: 0;
}

.ds-order__cell--marks .ds-order-user-labels,
.ds-order__cell--marks .ds-pack-tag-marks {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

@media (max-width: 900px) {
  /* На карточке шапка — flex с явным порядком; без своего order новая
     ячейка ушла бы в самое начало, перед номером заказа. */
  .ds-orders.is-table .ds-order__cell--marks {
    order: 3;
    flex: 1 1 100%;
  }
}

/* Вход в кабинет Prom на странице «Разработка» */
.ds-prom-login {
  max-width: 720px;
}

.ds-prom-login__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 12px;
}

.ds-prom-login__row label {
  min-width: 108px;
  color: var(--ds-muted);
  font-size: 13px;
}

.ds-prom-login__row input,
.ds-prom-login__row select {
  padding: 8px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  min-width: 180px;
}

.ds-prom-login__state {
  color: var(--ds-muted);
  font-size: 13px;
}

.ds-prom-login__state.is-ok {
  color: var(--ds-success, #15803d);
}

.ds-prom-login__state.is-bad {
  color: var(--ds-danger, #dc2626);
}

/* hidden обязан побеждать display:flex у строки формы */
.ds-prom-login__row[hidden] {
  display: none;
}

/* Ход массового выпуска ТТН */
.ds-bulk-progress {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
}

.ds-bulk-progress__card {
  width: min(420px, 100%);
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--ds-surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.ds-bulk-progress__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-text);
}

.ds-bulk-progress__bar {
  height: 8px;
  margin: 14px 0 10px;
  border-radius: 999px;
  background: var(--ds-border);
  overflow: hidden;
}

.ds-bulk-progress__bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--ds-primary);
  transition: width 0.25s ease;
}

.ds-bulk-progress__count {
  color: var(--ds-text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.ds-bulk-progress__hint {
  margin-top: 8px;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 640px) {
  /* Массовые действия на телефоне: меню во всю ширину и крупные строки —
     выпадающий список на 220px уезжал за правый край экрана. */
  .ds-orders-bulkbar__dropdown {
    width: 100%;
  }

  .ds-orders-bulkbar__trigger {
    width: 100%;
    justify-content: center;
  }

  .ds-orders-bulkbar__menu {
    left: 0;
    right: 0;
    min-width: 0;
    width: 100%;
  }

  .ds-orders-bulkbar__item {
    padding: 12px 14px;
    font-size: 15px;
  }

  .ds-orders-bulkbar__clear {
    width: 100%;
  }
}

@media (max-width: 900px) {
  /* Палец крупнее курсора: галочка в 14px промахивается. */
  .ds-orders.is-table .ds-order__cell--check .ds-order-check {
    width: 20px;
    height: 20px;
  }

  /* Панель массовых действий липнет к низу экрана — на телефоне список
     листают вниз, и панель наверху уезжала бы из виду вместе с шапкой. */
  .ds-orders-bulkbar:not([hidden]) {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
    z-index: 40;
    margin: 0;
    padding: 10px 12px;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
  }

  /* Меню раскрывается ВВЕРХ: панель внизу, и вниз ему некуда. */
  .ds-orders-bulkbar__menu {
    top: auto;
    bottom: calc(100% + 6px);
  }
}

/* ---- Отступ от строки фильтров до таблицы заказов ------------------------
   Панель «Фильтры / Трекинг / Развернуть все» стояла почти вплотную к шапке
   таблицы — строки читались как продолжение панели. */
#ds-orders-view .ds-orders-status-tabs-row {
  margin-bottom: 18px;
}

/* ---- Крупное фото товара в режиме «Просторно» ----------------------------
   В просторном режиме строка высотой ~90px, а миниатюра занимала 42px —
   товар было не разглядеть. Компактный режим не трогаем: там строка низкая
   и своё правило на 30px идёт следом по каскаду. */
[data-theme="terra"] .ds-orders.is-table:not(.is-compact) .ds-order__main-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 11px;
}

/* ---- Адрес доставки не должен наезжать на колонку «Оплата» ---------------
   При открытом сайдбаре список сжимается, и длинный адрес выходил за свою
   ячейку поверх соседней. Обрезаем по реальной ширине трека: цепочке
   «ячейка → блок → строка» нужен min-width:0, иначе flex/grid-элемент
   не ужимается ниже min-content и overflow:hidden не срабатывает. */
#ds-orders.is-table .ds-order__cell--ttn {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#ds-orders.is-table .ds-order__cell--ttn .ds-order__ttn-info {
  min-width: 0;
  max-width: 100%;
}

#ds-orders.is-table .ds-order__cell--ttn .ds-order__ttn-place,
#ds-orders.is-table .ds-order__cell--ttn .ds-order__ttn-carrier {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Иконка перевозчика — часть строки-названия, поэтому строку рисуем блоком
   с обрезкой, а иконку возвращаем в поток как inline. */
#ds-orders.is-table .ds-order__cell--ttn .ds-order__ttn-carrier .ds-carrier-badge__icon {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 5px;
}

/* «Оплата» страдает так же — способ оплаты бывает длинным. */
#ds-orders.is-table .ds-order__cell--payment {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#ds-orders.is-table .ds-order__cell--payment .ds-order__payment-info,
#ds-orders.is-table .ds-order__cell--payment .ds-order__payment-info > * {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Блок оплаты прижимаем к левому краю ячейки — так же, как это уже сделано
   для .ds-order__ttn-info. Без width:100% flex-контейнер ячейки центрировал
   блок, и колонка визуально не совпадала со своим заголовком. */
#ds-orders.is-table .ds-order__cell--payment {
  justify-content: flex-start;
}

#ds-orders.is-table .ds-order__cell--payment .ds-order__payment-info {
  width: 100%;
  align-items: flex-start;
  text-align: left;
}

/* ---- Карточка оплаты: выпадающий список способа оплаты -------------------
   Нативный <select> внутри карточки выглядел инородной серой коробкой (в
   macOS/Safari он сохраняет системную отделку, пока не сброшен appearance).
   Приводим его к виду обычной подписи способа оплаты: рамка и фон появляются
   только при наведении/фокусе, стрелка — своя, в цвет приглушённого текста. */
[data-theme="terra"] .ds-payment-card__text {
  text-align: left;
}

[data-theme="terra"] .ds-payment-card__method-select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: -3px 0 0 -8px;
  padding: 3px 24px 3px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a938a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 12px 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ds-text);
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

[data-theme="terra"] .ds-payment-card__method-select:hover {
  border-color: var(--ds-border);
  background-color: #fff;
}

[data-theme="terra"] .ds-payment-card__method-select:focus,
[data-theme="terra"] .ds-payment-card__method-select:focus-visible {
  outline: none;
  border-color: var(--ds-primary, #c2410c);
  background-color: #fff;
}

/* Пункты списка рисует система — там наш font:inherit не нужен, но без
   явного цвета часть браузеров наследует приглушённый цвет карточки. */
[data-theme="terra"] .ds-payment-card__method-select option {
  color: #111;
  font-weight: 500;
}

[data-theme="terra"] .ds-payment-card .ds-payment-switch {
  flex: 0 0 auto;
  margin-left: 4px;
}

[data-theme="terra"] .ds-payment-card__note {
  margin-top: 4px;
}

/* ---- Быстрое добавление складской метки прямо из строки ------------------
   Кнопка не должна шуметь в спокойном состоянии: её видно только при
   наведении на строку, при фокусе с клавиатуры и пока открыт её список. */
.ds-pack-tags-quick {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px dashed var(--ds-border, #e5e7eb);
  border-radius: 6px;
  background: transparent;
  color: var(--ds-muted, #9ca3af);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}

.ds-pack-tags-quick i,
.ds-pack-tags-quick svg {
  width: 12px;
  height: 12px;
}

/* Наведение именно на ячейку меток, а не на всю строку: иначе кнопка
   мигала при любом движении курсора по заказу. Пустая ячейка узкая, но
   она растянута на весь трек колонки (см. .ds-order__cell{width:100%}),
   так что наводиться есть на что. */
.ds-order__cell--marks:hover .ds-pack-tags-quick,
.ds-pack-tags-quick:focus-visible {
  opacity: 1;
}

.ds-pack-tags-quick:hover {
  border-style: solid;
  border-color: var(--ds-primary, #c2410c);
  color: var(--ds-primary, #c2410c);
  background: var(--ds-highlight-bg, #fdf3ec);
}

/* Список меток. Лежит в body (не внутри строки) — иначе его обрезал бы
   overflow ячейки, а z-index конкурировал бы с соседними строками. */
.ds-pack-tags-pop {
  position: absolute;
  z-index: 4000;
  width: 232px;
  padding: 10px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 12px;
  background: var(--ds-surface, #fff);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

.ds-pack-tags-pop__head {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-muted, #9ca3af);
}

.ds-pack-tags-pop__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Сенсорные экраны: hover там не наступает, поэтому кнопка видна всегда. */
@media (hover: none) {
  .ds-pack-tags-quick {
    opacity: 1;
  }
}

/* Мобильная карточка: голова заказа не должна отличаться фоном от остальной
   карточки — иначе строка с номером читается как отдельная плашка поверх неё.
   Тень и разделение самих карточек при этом остаются (см. правило выше). */
@media (max-width: 900px) {
  [data-theme="terra"] .ds-orders.is-table .ds-order__head,
  [data-theme="terra"] .ds-orders.is-table .ds-order__head:hover {
    background: transparent;
    box-shadow: none;
  }
}

/* Серая подложка под лентой карточек: она просвечивала в промежутках и в
   скруглённых углах, из-за чего у каждой карточки читалась «заливка по
   краям». Фон убираем — карточки и так отделены тенью и промежутком. */
@media (max-width: 900px) {
  [data-theme="terra"] .ds-orders.is-table .ds-orders-table-body {
    background: transparent;
  }
}

/* Не паранойя: у .ds-order есть border-bottom (разделитель строк в
   десктопной таблице). На мобиле карточка скруглена на 24px, и эта линия
   загибалась дугами в нижних углах — те самые «полосочки». Карточки здесь
   разделяет промежуток и тень, линия не нужна. */
@media (max-width: 900px) {
  [data-theme="terra"] .ds-orders.is-table .ds-order,
  [data-theme="terra"] .ds-orders.is-table .ds-orders-table-body > .ds-order,
  [data-theme="terra"] .ds-orders.is-table .ds-order:last-child {
    border-bottom: none;
  }
}

/* ==========================================================================
   Мобильная карточка заказа — раскладка по референсу.
   Строки: [1] №заказа · сумма · чекбокс
           [2] дата · шеврон «открыть»
           [3] перевозчик · способ оплаты ....... статус оплаты
           [4] товар: фото · название · артикул ....... ×N
           [5] статус комплектации
   Блок идёт последним в файле — он перекрывает прежний «вариант A» выше:
   специфичность у правил одинаковая, побеждает порядок.
   ========================================================================== */
@media (max-width: 900px) {
  [data-theme="terra"] .ds-orders.is-table .ds-order__head {
    padding: 14px 16px 16px;
    gap: 0;
    align-items: center;
  }

  /* --- Строка 1 --------------------------------------------------------- */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--order {
    order: 0;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--order .ds-order__title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--total {
    display: flex;
    order: 1;
    flex: 0 0 auto;
    width: auto;
    margin: 0 10px 0 auto;
    padding: 0;
    align-items: baseline;
    justify-content: flex-end;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--total .ds-order__total {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  /* Комиссия — вспомогательная величина, в референсе её нет: на узкой
     карточке она конкурировала с суммой за ту же строку. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--total .ds-order__commission {
    display: none;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--check {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
  }

  /* Перенос после первой строки. ::before в прежнем блоке был погашен —
     возвращаем его в роли разделителя строк. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head::before {
    content: "";
    display: block;
    order: 3;
    flex: 0 0 100%;
    width: 0;
    height: 0;
    margin: 0;
  }

  /* --- Строка 2: дата и шеврон ------------------------------------------ */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--date {
    order: 4;
    flex: 1 1 auto;
    width: auto;
    justify-content: flex-start;
    text-align: left;
    margin: 4px 0 0;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--date .ds-order__meta {
    font-size: 13px;
    color: var(--ds-muted);
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--details {
    display: flex;
    order: 5;
    flex: 0 0 auto;
    width: auto;
    margin: 4px 0 0 auto;
    padding: 0;
    justify-content: flex-end;
  }

  /* «Детали заказа» на карточке — компактный шеврон справа от даты вместо
     полноширинной кнопки: действие то же, но оно не должно весить больше
     самого заказа. Глиф рисуем псевдоэлементом — иконка в разметке общая
     с десктопом (там это «⋮» в последней колонке). */
  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--details .ds-order__details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-muted);
    float: none;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--details .ds-order__details-btn::after {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg) translate(-1px, 1px);
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--details .ds-order__details-btn-label,
  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--details .ds-order__details-btn > i,
  [data-theme="terra"] .ds-orders.is-table .ds-order__cell--details .ds-order__details-btn > svg {
    display: none;
  }

  /* Перенос после второй строки. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head::after {
    content: "";
    display: block;
    order: 6;
    flex: 0 0 100%;
    width: 0;
    height: 0;
    margin: 0;
  }

  /* --- Строка 3: доставка и оплата --------------------------------------- */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--ttn,
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--payment {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ds-border);
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--ttn {
    display: flex;
    order: 7;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--payment {
    display: flex;
    order: 8;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }

  /* Разделительная точка между перевозчиком и способом оплаты. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--payment::before {
    content: "·";
    flex: 0 0 auto;
    margin: 0 8px 0 0;
    color: var(--ds-muted);
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--payment .ds-order__payment-info {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  /* Статус оплаты — серый чип у правого края, как в референсе. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__payment-status {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ds-highlight-bg, #f3f1ec);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Номер ТТН и статус трекинга на свёрнутой карточке не показываем — в
     референсе строка доставки несёт только перевозчика. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--ttn .ds-order__ttn-head,
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--tracking {
    display: none;
  }

  /* --- Строка 4: товар --------------------------------------------------- */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--product {
    order: 9;
    margin-top: 12px;
    padding-top: 12px;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__product-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__product-qty {
    align-self: flex-end;
  }

  /* --- Строка 5: статус комплектации ------------------------------------- */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--status {
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    justify-content: flex-start;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ds-border);
  }

  /* Метки и флаги — ниже статуса, отдельной строкой без разделителя. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--marks {
    order: 11;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 8px;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--flags {
    order: 12;
    margin-top: 8px;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--avail {
    order: 13;
    margin-top: 8px;
  }
}

/* --------------------------------------------------------------------------
   Мобильная карточка, доводка: статус заказа и наличие товаров переезжают
   сразу под номер, разделители тянутся во всю ширину карточки.
   Строки: [1] №заказа · сумма · чекбокс
           [2] статус · наличие · флаги · метки
           [3] дата ......................... шеврон
           ---- разделитель ----
           [4] перевозчик · оплата ......... статус оплаты
           ---- разделитель ----
           [5] товар
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Строка 2: статус и наличие. Ячейка статуса уже содержит и пилюлю, и
     точки наличия — разворачиваем её в строку. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--status {
    order: 4;
    flex: 0 1 auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--status .ds-order__avail-dots {
    align-self: center;
    margin: 0;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--flags {
    order: 5;
    flex: 0 1 auto;
    width: auto;
    margin-top: 10px;
    margin-left: 8px;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--marks {
    order: 6;
    flex: 0 1 auto;
    width: auto;
    margin-top: 10px;
    margin-left: 8px;
  }

  /* Строка 3: дата и шеврон. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--date {
    order: 8;
    flex: 1 1 auto;
    width: auto;
    margin: 6px 0 0;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--details {
    order: 9;
    margin: 6px 0 0 auto;
  }

  /* Перенос перед строкой доставки заодно рисует разделитель: он один на всю
     карточку, тогда как border-top на самих ячейках обрывался на их границе
     и линия шла кусками. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head::after {
    order: 10;
    height: 0;
    margin: 12px 0 0;
    border-top: 1px solid var(--ds-border);
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--ttn,
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--payment {
    order: 11;
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--payment {
    order: 12;
  }

  /* Точка-разделитель прилипала к названию перевозчика. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--payment::before {
    margin: 0 8px;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--product {
    order: 13;
  }

  /* Точки наличия — того же размера, что и точка в пилюле статуса, иначе
     они читаются как отдельный крупный элемент. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__avail-dot {
    width: 8px;
    height: 8px;
  }
}

/* Компактная плотность списка. Вертикальные отступы одинаковые сверху и
   снизу и заметно меньше, чем в просторном режиме, — в этом и смысл режима.
   Правило выше (padding: 4px 20px) задаёт то же значение по вертикали:
   их два, и расходиться им нельзя, иначе высота строки зависела бы от того,
   какое из них окажется в файле последним. */
[data-theme="terra"] .ds-orders.is-table.is-compact .ds-order__head {
  padding: 4px 10px;
}

/* --------------------------------------------------------------------------
   Мобильная карточка, доводка 2: дата встаёт в одну строку с номером (сразу
   за значком маркетплейса, а если его нет — за самим номером), шеврон уходит
   в строку статуса, слева возвращается рельс в цвет статуса отгрузки.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Рельс. !important обязателен: terra гасит рамку карточки правилом
     `border: none !important` вне медиа-запроса. */
  [data-theme="terra"] .ds-orders.is-table .ds-order,
  [data-theme="terra"] .ds-orders.is-table .ds-orders-table-body > .ds-order {
    border-left: 3px solid var(--ds-order-rail, var(--ds-border)) !important;
  }

  /* Строка 1: номер — по содержимому, чтобы дата встала вплотную за ним. */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--order {
    flex: 0 1 auto;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--date {
    order: 1;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    margin: 0 0 0 10px;
    align-self: baseline;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--date .ds-order__meta {
    font-size: 12.5px;
    white-space: nowrap;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--total {
    order: 2;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--check {
    order: 3;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head::before {
    order: 4;
  }

  /* Строка 2: статус, наличие, флаги, метки — и шеврон справа (дата ушла
     наверх, отдельная строка под неё больше не нужна). */
  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--status {
    order: 5;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--flags {
    order: 6;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--marks {
    order: 7;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--details {
    order: 8;
    margin: 10px 0 0 auto;
    align-self: center;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head::after {
    order: 9;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--ttn {
    order: 10;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--payment {
    order: 11;
  }

  [data-theme="terra"] .ds-orders.is-table .ds-order__head .ds-order__cell--product {
    order: 12;
  }
}

/* Всплывающее окно меток: два раздела с разной аудиторией. */
.ds-pack-tags-pop {
  width: 268px;
}

.ds-pack-tags-pop__section + .ds-pack-tags-pop__section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ds-border, #e5e7eb);
}

.ds-pack-tags-pop__head {
  margin: 0 0 2px;
}

.ds-pack-tags-pop__hint {
  margin: 0 0 8px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ds-muted, #9ca3af);
}

.ds-pack-tags-pop__empty {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ds-muted, #9ca3af);
}

/* Иконка обновления в кнопке ручной синхронизации с Prom.ua. */
[data-theme="terra"] .ds-manual-override__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

[data-theme="terra"] .ds-manual-override__btn i,
[data-theme="terra"] .ds-manual-override__btn svg {
  width: 13px;
  height: 13px;
}

/* ---- Главное действие в панели заказа -----------------------------------
   Одна кнопка над всеми карточками — сразу видно, что нужно сделать по
   заказу. Палитра штатная (--ds-primary), без «акцентного» блока-подложки. */
.ds-detail-primary-action {
  margin: 0 0 14px;
}

.ds-detail-primary-action__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  font-size: 14.5px;
  font-weight: 650;
  border-radius: 12px;
}

.ds-detail-primary-action__btn i,
.ds-detail-primary-action__btn svg {
  width: 17px;
  height: 17px;
}

/* ==========================================================================
   Панель заказа: сводка, покупатель, метки строкой, липкая нижняя панель.
   Палитра штатная — никакого фиолетового из макета.
   ========================================================================== */

/* Сводка под шапкой: сумма и способ оплаты сразу на виду. */
.ds-detail-summary {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 14px;
  background: var(--ds-surface, #fff);
}

.ds-detail-summary__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ds-detail-summary__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--ds-highlight-bg, #f3f1ec);
  color: var(--ds-primary-dark, #9a3412);
}

.ds-detail-summary__icon i,
.ds-detail-summary__icon svg {
  width: 15px;
  height: 15px;
}

.ds-detail-summary__total {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ds-text, #111);
}

.ds-detail-summary__pay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-muted, #6b7280);
}

.ds-detail-summary__sub {
  margin: 4px 0 0 38px;
  font-size: 12px;
  color: var(--ds-muted, #9ca3af);
}

/* Покупатель: аватар с инициалами и имя над строкой телефона. */
.ds-contact-row__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 0;
}

.ds-contact-row__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ds-highlight-bg, #f3f1ec);
  color: var(--ds-primary-dark, #9a3412);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ds-contact-row__name {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--ds-text, #111);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Метки — одна строка чипов с кнопкой добавления. */
.ds-detail-marks {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 14px;
  background: var(--ds-surface, #fff);
}

.ds-detail-marks__head {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ds-muted, #9ca3af);
}

/* Класс ds-order__cell--marks переиспользуется ради общей раскладки чипов,
   но :empty-скрытие и ширина колонки из таблицы здесь не нужны. */
.ds-detail-marks__row.ds-order__cell--marks {
  width: auto;
  max-width: none;
  visibility: visible;
}

/* В панели кнопка «+» видна всегда: наводиться на узкую ячейку, как в
   таблице, тут не на что. */
.ds-detail-marks .ds-pack-tags-quick {
  opacity: 1;
}

/* Липкая нижняя панель действий. */
.ds-detail-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  margin: 16px -18px -18px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ds-border, #e5e7eb);
  background: var(--ds-surface, #fff);
}

.ds-detail-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 620;
  text-decoration: none;
}

.ds-detail-footer__btn i,
.ds-detail-footer__btn svg {
  width: 16px;
  height: 16px;
}

/* Главное действие тянет на себя больше места и цвета. */
.ds-detail-footer__btn--main {
  flex: 1.4 1 0;
}

/* Липкая панель в terra-теме: тело панели имеет свою набивку 20/22, поэтому
   вытягиваем футер к её краям именно на эту величину. */
[data-theme="terra"] .ds-detail-footer {
  margin: 18px -22px -20px;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
}

/* ==========================================================================
   Панель заказа — плоский вид по референсу.
   Секции больше не карточки в рамках: разделяются волосяной линией, а вместо
   иконки-бейджа с заголовком стоит короткая подпись капслоком. Цвета — свои,
   фиолетовый из макета не берём.
   ========================================================================== */
[data-theme="terra"] .ds-detail__body {
  padding: 18px 22px 0;
}

/* Между секциями больше нет внешнего отступа — ритм задают их собственные
   вертикальные поля и разделитель. */
[data-theme="terra"] .ds-detail__body > * + * {
  margin-top: 0;
}

[data-theme="terra"] .ds-detail__body .ds-timeline-section.ds-detail-card,
[data-theme="terra"] .ds-detail__body .ds-detail-summary,
[data-theme="terra"] .ds-detail__body .ds-detail-marks {
  margin: 0;
  padding: 16px 0;
  border: none;
  border-top: 1px solid var(--ds-border, #efece6);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Первая секция идёт сразу под шапкой — линия над ней была бы второй подряд. */
[data-theme="terra"] .ds-detail__body > :first-child {
  border-top: none;
  padding-top: 0;
}

/* Заголовок секции: подпись капслоком вместо иконки-бейджа с текстом. */
[data-theme="terra"] .ds-detail__body .ds-detail-card .ds-timeline-toggle {
  padding: 0 0 10px;
  border: none;
  background: transparent;
  min-height: 0;
}

[data-theme="terra"] .ds-detail__body .ds-detail-card .ds-timeline-toggle__icon {
  display: none;
}

[data-theme="terra"] .ds-detail__body .ds-detail-card .ds-timeline-toggle__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-muted, #9ca3af);
}

[data-theme="terra"] .ds-detail__body .ds-detail-card .ds-timeline-panel {
  padding: 0;
}

/* Строки «подпись — значение»: без подчёркиваний, значение справа. */
[data-theme="terra"] .ds-detail__body .ds-detail-info-panel .ds-detail__meta-row {
  padding: 7px 0;
  border: none;
}

[data-theme="terra"] .ds-detail__body .ds-detail-info-panel .ds-detail__meta-row + .ds-detail__meta-row {
  border-top: 1px solid var(--ds-bg-solid, #f6f4f0);
}

/* Сводка: без рамки, но с той же плашкой-иконкой. */
[data-theme="terra"] .ds-detail-summary {
  padding-top: 0;
}

/* Метки: подпись капслоком в один регистр с остальными секциями. */
[data-theme="terra"] .ds-detail-marks__head {
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* Покупатель: аватар и имя без внутренней набивки карточки. */
[data-theme="terra"] .ds-detail__body .ds-contact-row-card .ds-contact-row__identity {
  padding: 0 0 10px;
}

[data-theme="terra"] .ds-detail__body .ds-contact-row-card .ds-contact-row {
  padding: 0;
}

/* Заголовок раздела «Накладная» — той же подписью, что и секции. */
[data-theme="terra"] .ds-detail__body .ds-section-title {
  margin: 16px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-border, #efece6);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-muted, #9ca3af);
}

/* Строки-входы «Обсуждение заказа» / «Примечания» — как в референсе:
   светлая рамка, скругление 12, высота 46. */
[data-theme="terra"] .ds-detail__body .ds-thread-entry {
  margin-top: 10px;
  min-height: 46px;
  border: 1px solid var(--ds-border, #efece6);
  border-radius: 12px;
  background: var(--ds-surface, #fff);
}

[data-theme="terra"] .ds-detail__body .ds-order-private-note--detail {
  margin-top: 10px;
  border: 1px solid var(--ds-border, #efece6);
  border-radius: 12px;
  background: var(--ds-surface, #fff);
}

/* Номер заказа в шапке — крупнее, он главный ориентир. */
[data-theme="terra"] .ds-detail__head #ds-detail-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Блок доставки: крупная иконка службы слева, справа — служба, пункт выдачи
   и населённый пункт тремя строками. Город и отделение раньше были двумя
   строками «подпись — значение»; вместе они читаются как один адрес. */
[data-theme="terra"] .ds-delivery-brief {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 0 4px;
}

[data-theme="terra"] .ds-delivery-brief__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
}

[data-theme="terra"] .ds-delivery-brief__icon svg {
  width: 100%;
  height: 100%;
}

[data-theme="terra"] .ds-delivery-brief__lines {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-theme="terra"] .ds-delivery-brief__carrier .ds-delivery-card__carrier {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ds-text, #111);
}

[data-theme="terra"] .ds-delivery-brief__place {
  font-size: 13px;
  color: var(--ds-text, #111);
}

[data-theme="terra"] .ds-delivery-brief__city {
  font-size: 13px;
  color: var(--ds-muted, #9ca3af);
}

/* Выпадающий выбор перевозчика встаёт на место названия — без своей рамки,
   чтобы не спорить с плоским видом панели. */
[data-theme="terra"] .ds-delivery-brief__carrier .ds-detail__carrier-select {
  margin-left: -6px;
  font-size: 14.5px;
  font-weight: 700;
}

/* ---- Блок «Покупатель» ---------------------------------------------------
   Аватар с инициалами слева, справа — имя, номер и кнопки связи. Кнопка
   «Позвонить» отдельной не нужна: звонок вешается на сам номер. */
[data-theme="terra"] .ds-buyer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

[data-theme="terra"] .ds-buyer__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ds-highlight-bg, #f3f1ec);
  color: var(--ds-primary-dark, #9a3412);
  font-size: 14px;
  font-weight: 700;
}

[data-theme="terra"] .ds-buyer__lines {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-theme="terra"] .ds-buyer__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ds-text, #111);
}

[data-theme="terra"] .ds-buyer__phone {
  font-size: 14px;
  color: var(--ds-text, #111);
  text-decoration: none;
  align-self: flex-start;
}

[data-theme="terra"] .ds-buyer__phone:hover {
  color: var(--ds-primary-dark, #9a3412);
}

[data-theme="terra"] .ds-buyer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

[data-theme="terra"] .ds-buyer__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ds-border, #efece6);
  border-radius: 10px;
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #111);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

[data-theme="terra"] .ds-buyer__action:hover {
  border-color: var(--ds-primary-dark, #9a3412);
  color: var(--ds-primary-dark, #9a3412);
}

[data-theme="terra"] .ds-buyer__action--more {
  width: 34px;
  padding: 0;
}

[data-theme="terra"] .ds-buyer__action--more i,
[data-theme="terra"] .ds-buyer__action--more svg {
  width: 16px;
  height: 16px;
}

/* Брендовые цвета мессенджеров — иконка цветная, подпись остаётся обычной,
   иначе две цветные кнопки подряд перетягивают внимание с номера. */
[data-theme="terra"] .ds-buyer__glyph--viber {
  color: #7360f2;
}

[data-theme="terra"] .ds-buyer__glyph--telegram {
  color: #229ed9;
}

[data-theme="terra"] .ds-buyer__action:hover .ds-buyer__glyph {
  color: inherit;
}

/* Значок коробки на кнопке создания ТТН в блоке Nova Poshta. */
[data-theme="terra"] .ds-np-summary .ds-btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

[data-theme="terra"] .ds-np-summary .ds-btn--primary i,
[data-theme="terra"] .ds-np-summary .ds-btn--primary svg {
  width: 15px;
  height: 15px;
}

/* Строка источника заказа под кнопкой «Действия с заказом». */
[data-theme="terra"] .ds-detail-source-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 14px;
  font-size: 13px;
  color: var(--ds-muted, #9ca3af);
}

[data-theme="terra"] .ds-detail-source-line__name {
  font-weight: 600;
  color: var(--ds-text, #111);
}

/* Значок площадки в этой строке крупнее, чем в списке заказов. */
[data-theme="terra"] .ds-detail-source-line .ds-order__source-mark,
[data-theme="terra"] .ds-detail-source-line svg {
  width: 15px;
  height: 15px;
}

/* Аватар покупателя компактнее — 44px спорил по весу с именем. */
[data-theme="terra"] .ds-buyer__avatar {
  width: 30px;
  height: 30px;
  font-size: 11.5px;
}

/* Подпись над кнопкой создания ТТН: куда уедет номер. */
[data-theme="terra"] .ds-np-summary__note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ds-muted, #8b8378);
}

[data-theme="terra"] .ds-np-summary__note i,
[data-theme="terra"] .ds-np-summary__note svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

/* Отвязанный заказ — это предупреждение, а не пояснение. */
[data-theme="terra"] .ds-np-summary__note--warn {
  color: var(--ds-danger, #c2410c);
  font-weight: 600;
}

/* Заливка блока ТТН — светлее прежней. */
[data-theme="terra"] .ds-np-summary,
[data-theme="terra"] .ds-ttn-add {
  background: linear-gradient(140deg, #fdf5ef, #ffffff);
}

/* Список стикеров прижимался вплотную к блоку добавления. */
[data-theme="terra"] .ds-sticker-list {
  margin-top: 14px;
}

/* ---- Снятие метки крестиком ---------------------------------------------
   Крестик появляется при наведении на сам чип. Ширина анимируется от нуля,
   а не opacity: иначе он занимал бы место постоянно и чипы были бы шире,
   чем нужно. */
.ds-pack-tag-mark,
.ds-order-user-label {
  position: relative;
}

.ds-chip-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 14px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: currentColor;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.12s ease, opacity 0.12s ease, margin 0.12s ease;
}

/* .ds-order__dup-mark — обёртка системных меток («Отменён на Prom»,
   «Возможный дубль», «Ошибка генерации», «Возврат принят»). У них крестик
   лежит внутри пилюли, поэтому ховер ловим и на обёртке тоже. */
.ds-pack-tag-mark:hover .ds-chip-del,
.ds-order-user-label:hover .ds-chip-del,
.ds-order__dup-mark:hover .ds-chip-del,
.ds-chip-del:focus-visible {
  width: 13px;
  margin-left: 4px;
  opacity: 0.65;
}

/* В пилюле системной метки крестик наследует её цвет текста — на красном
   и жёлтом фоне он читается сам собой, отдельный цвет не нужен. */
.ds-order__dup-mark .ds-chip-del {
  color: currentColor;
}

.ds-chip-del:hover {
  opacity: 1;
}

/* На сенсорных экранах наведения нет — крестик виден всегда. */
@media (hover: none) {
  .ds-chip-del {
    width: 13px;
    margin-left: 4px;
    opacity: 0.65;
  }
}

/* Поле номера ТТН забирает всю свободную ширину, кнопка — ровно по тексту:
   базовое правило растягивало обе на 1fr, и кнопка «Добавить» занимала
   треть строки без всякой на то причины. */
[data-theme="terra"] .ds-ttn-number-form__row {
  flex-wrap: nowrap;
}

[data-theme="terra"] .ds-ttn-number-form__row .ds-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

[data-theme="terra"] .ds-ttn-number-form__input {
  flex: 1 1 auto;
}

/* Текстовый логотип вместо картинки. Класс ds-brand__icon сохранён — на нём
   висят и типографика темы, и правило скрытия в свёрнутом меню. */
.ds-brand__wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}

[data-theme="terra"] .ds-brand__wordmark {
  font-size: 16px;
  letter-spacing: 0.02em;
}

/* Комментарий к заказу в окне меток: свободный текст + выбор, видит ли его
   вторая сторона. Секция подхватывает разделитель от
   .ds-pack-tags-pop__section + .ds-pack-tags-pop__section, поэтому своей
   верхней границы не рисует. */
.ds-pack-note__input {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 0;
  padding: 7px 9px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 8px;
  background: var(--ds-surface, #fff);
  color: var(--ds-text);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  resize: vertical;
  min-height: 46px;
}

.ds-pack-note__input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-12);
}

.ds-pack-note__share {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ds-text);
  cursor: pointer;
  user-select: none;
}

.ds-pack-note__share input {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}

/* Чужой комментарий — только для чтения, поэтому визуально отделён от поля
   ввода: приглушённый фон и подпись автора, чтобы его нельзя было принять
   за свой собственный текст. */
.ds-pack-note__other {
  margin-top: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--ds-bg-solid, #f6f6f4);
  border: 1px solid var(--ds-border, #e5e7eb);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ds-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.ds-pack-note__other-author {
  display: block;
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-muted, #9ca3af);
}

/* ── Таблица заказов на ноутбуках ──────────────────────────────────────────
   Сетка из 17 треков (9 колонок + 8 распорок на 1fr) с gap 16px требует
   минимум 1550px на саму таблицу, то есть окно ~1858px. Мобильная карточная
   раскладка включается только на ≤900px — поэтому весь диапазон «ноутбук»
   (1366–1600) оставался на десктопной сетке, которая туда не влезает: правые
   колонки «Дата» и кнопка деталей просто уезжали за край и обрезались.

   Лечим двумя ступенями сжатия: ужимаем и сами треки, и промежутки между
   ними (16 промежутков по 16px — это 256px, четверть дефицита). Колонки не
   прячем: кнопка деталей — единственный способ открыть панель заказа на
   десктопе, а дата нужна для сверки. */

/* 15–16″ и окно 1536 (типовой ноутбук при масштабе 125%) */
@media (max-width: 1750px) {
  .ds-orders.is-table {
    --ds-order-marks-col: minmax(112px, 200px);
    --ds-order-cols:
      30px
      minmax(132px, 1fr)
      0px
      var(--ds-order-marks-col)
      0px
      132px
      0px
      100px
      0px
      minmax(140px, 210px)
      0px
      minmax(150px, 210px)
      12px
      120px
      6px
      100px
      48px;
  }

  .ds-orders-table-head,
  .ds-orders.is-table .ds-order__head {
    gap: 10px;
  }

  .ds-orders-table-head {
    padding: 10px 10px;
    font-size: 10.5px;
    letter-spacing: 0.03em;
  }
}

/* 1366 — самое узкое окно, на котором таблица ещё должна помещаться целиком */
@media (max-width: 1500px) {
  .ds-orders.is-table {
    --ds-order-marks-col: minmax(92px, 170px);
    --ds-order-cols:
      26px
      minmax(112px, 1fr)
      0px
      var(--ds-order-marks-col)
      0px
      116px
      0px
      84px
      0px
      minmax(120px, 190px)
      0px
      minmax(132px, 190px)
      10px
      100px
      5px
      76px
      40px;
  }

  .ds-orders-table-head,
  .ds-orders.is-table .ds-order__head {
    gap: 6px;
  }

  /* В 76px «21.08.2026 17:55» одной строкой не встаёт — разрешаем перенос,
     иначе дата вылезет за свою колонку и наедет на кнопку деталей. */
  .ds-orders.is-table .ds-order__cell--date {
    white-space: normal;
    line-height: 1.25;
  }

  .ds-orders.is-table .ds-order__cell--date .ds-order__meta {
    font-size: 10.5px;
  }
}

/* Ниже 1250px даже сжатая сетка не помещается, а карточная раскладка ещё не
   включилась (она с ≤900px). Горизонтальная прокрутка здесь — не украшение,
   а гарантия, что ни одна колонка не станет недоступной. */
@media (max-width: 1250px) and (min-width: 901px) {
  #ds-orders-view.is-table-layout .ds-orders.is-table {
    overflow-x: auto;
  }

  #ds-orders-view.is-table-layout .ds-orders-table-head,
  #ds-orders-view.is-table-layout .ds-orders.is-table .ds-order {
    min-width: 1000px;
  }
}

/* ── Шаблоны сообщений: список вставок отдельной колонкой ──────────────────
   Раньше все 18 вставок шли сплошным абзацем внутри карточки «Новый шаблон»:
   найти нужную в потоке текста через точку с запятой было тяжело, а справа
   при этом пустовала половина экрана. Теперь это список в своей колонке. */
.ds-templates-layout {
  display: grid;
  /* Колонка шаблонов ровно по ширине карточек (.ds-settings-card
     max-width: 760px), а не 1fr: с 1fr она забирала всю свободную
     ширину монитора и отбрасывала «Вставки» к правому краю, оставляя
     посередине пустое поле. justify-content: start прижимает обе
     колонки влево, чтобы список стоял вплотную к шаблонам. */
  grid-template-columns: minmax(0, 760px) 320px;
  justify-content: start;
  align-items: start;
  gap: 16px;
}

.ds-templates-layout__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Список длинный, а карточки слева — ещё длиннее: липкая колонка держит
   вставки перед глазами, пока пишешь текст шаблона. */
.ds-template-tokens-card {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.ds-template-tokens {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-template-tokens li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border-radius: 7px;
}

.ds-template-tokens li:nth-child(odd) {
  background: var(--ds-bg-solid, #f6f6f4);
}

.ds-template-tokens code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #dc2626;
  word-break: break-all;
}

.ds-template-tokens span {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ds-muted, #9ca3af);
}

/* Узкие окна: колонка вставок уходит под карточки, липкость снимаем —
   иначе она прилипала бы посреди прокрутки, перекрывая содержимое. */
@media (max-width: 1100px) {
  .ds-templates-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-template-tokens-card {
    position: static;
    max-height: none;
  }

  .ds-template-tokens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px;
  }
}

/* Вставку можно взять мышью и бросить в текст шаблона. Курсор-«рука» —
   единственный визуальный намёк, что элемент вообще перетаскиваемый. */
.ds-template-tokens code[draggable="true"] {
  cursor: grab;
}

.ds-template-tokens code[draggable="true"]:active {
  cursor: grabbing;
}

.ds-template-tokens li:hover {
  background: var(--ds-primary-alpha-12);
}

.ds-template-tokens code.is-dragging {
  opacity: 0.45;
}

/* Пока вставку тащат — показываем, куда её можно бросить. Иначе поле ввода
   ничем не отличается от остальной страницы, и непонятно, сработает ли drop. */
.ds-template-tokens code[draggable="true"] {
  /* user-select: all мешает начать перетаскивание в части браузеров:
     нажатие сначала выделяет весь узел. Выделение остаётся доступным
     двойным кликом, а одиночное нажатие теперь начинает перенос. */
  user-select: none;
}

textarea.is-token-drop-target {
  border-color: var(--ds-primary) !important;
  box-shadow: 0 0 0 3px var(--ds-primary-alpha-12);
}

/* Выбор способа оплаты в сводной строке панели заказа. Выглядит как обычная
   подпись рядом с суммой, пока к нему не подвели курсор, — строка не должна
   превращаться в форму. */
.ds-detail-summary__pay-select {
  max-width: 190px;
  padding: 3px 22px 3px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ds-muted, #6b7280);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  text-overflow: ellipsis;
}

.ds-detail-summary__pay-select:hover {
  border-color: var(--ds-border);
  background-color: var(--ds-surface);
  color: var(--ds-text);
}

.ds-detail-summary__pay-select:focus {
  outline: none;
  border-color: var(--ds-primary);
  background-color: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: 0 0 0 2px var(--ds-primary-alpha-12);
}

.ds-detail-summary__pay-select:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ══ Таблица заказов менеджера: своя раскладка ═════════════════════════════
   У менеджера нет колонок «Клиент», «Сумма» и «Оплата» — это данные
   дропшиппера. Но треки под них оставались в общей сетке пустыми, а восемь
   распорок на 1fr растаскивали оставшиеся пять колонок по всей ширине: между
   «Заказом» и «Метками» зияла дыра в пол-экрана.

   Здесь сетка своя: распорок нет вовсе, колонки прижаты вправо и стоят
   плотной группой, а всю освободившуюся ширину забирает «Заказ» — там теперь
   показывается состав заказа, главное для того, кто его собирает. */
.ds-orders.is-table.is-manager {
  --ds-order-cols:
    34px
    minmax(260px, 1fr)
    minmax(120px, 200px)
    160px
    minmax(150px, 210px)
    120px
    48px;
}

.ds-orders.is-table.is-manager .ds-orders-table-head,
.ds-orders.is-table.is-manager .ds-order__head {
  gap: 12px 14px;
}

/* Позиции ячеек переназначаем целиком: в общей сетке они привязаны к номерам
   треков с распорками (2, 4, 6, 8…), а здесь треков семь подряд. */
.ds-orders.is-table.is-manager .ds-order__cell--check,
.ds-orders.is-table.is-manager .ds-orders-table-head__cell--check { grid-column: 1; }

.ds-orders.is-table.is-manager .ds-order__cell--order,
.ds-orders.is-table.is-manager .ds-orders-table-head__cell--order { grid-column: 2; }

.ds-orders.is-table.is-manager .ds-order__cell--marks,
.ds-orders.is-table.is-manager .ds-orders-table-head__cell--marks { grid-column: 3; }

.ds-orders.is-table.is-manager .ds-order__cell--status,
.ds-orders.is-table.is-manager .ds-orders-table-head__cell--status { grid-column: 4; }

.ds-orders.is-table.is-manager .ds-order__cell--ttn,
.ds-orders.is-table.is-manager .ds-orders-table-head__cell--ttn { grid-column: 5; }

.ds-orders.is-table.is-manager .ds-order__cell--date,
.ds-orders.is-table.is-manager .ds-orders-table-head__cell--date { grid-column: 6; }

.ds-orders.is-table.is-manager .ds-order__cell--details,
.ds-orders.is-table.is-manager .ds-orders-table-head__cell--details { grid-column: 7; }

/* Ячейка заказа выросла — содержимое равняем по верху, иначе номер повисал бы
   по центру относительно полосы товаров. */
.ds-orders.is-table.is-manager .ds-order__cell--order {
  align-items: center;
}

/* Блок номера по содержимому, а не на всю ширину: свободное место справа
   отдано полосе миниатюр, которая стоит рядом. */
/* Ширина блока с номером ФИКСИРОВАНА, а не по содержимому. Иначе её задаёт
   самая длинная строка внутри — а это подпись «N товаров», которая у
   «1 товар» и «6 товаров» разной длины. Полоса картинок стоит сразу за этим
   блоком, и её левый край гулял от строки к строке.

   min-width, а не width: если номер окажется длиннее ожидаемого (лишние
   значки-метки рядом), блок расширится, а не обрежет номер. Для нынешних
   пятизначных номеров этого не происходит, и все картинки встают ровно
   одна под другой. */
.ds-orders.is-table.is-manager .ds-order__title-wrap {
  min-width: var(--ds-order-title-w, 104px);
  flex: 0 0 auto;
}

/* Полоса заменяет большую миниатюру: иначе первый товар показан дважды —
   крупно слева и первым в полосе. */
.ds-orders.is-table.is-manager .ds-order__cell--order.has-inline-products .ds-order__main-thumb {
  display: none;
}

/* ── Состав заказа строкой ─────────────────────────────────────────────── */
.ds-order__inline-products {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Стоит справа от номера и забирает остаток ширины колонки. */
  flex: 1 1 auto;
  margin-left: 4px;
  min-width: 0;
  /* Не переносим: строка заказа обязана оставаться одной высоты, иначе
     таблица из шести позиций «прыгала» бы на три ряда. */
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Оранжевая рамка миниатюры при наведении (.ds-order__ip:hover) чуть
   поднимается и растёт — при overflow:hidden на полосе её верх обрезался
   той же границей, что режет правый край переполненного списка.
   overflow-y:visible тут не спасает (по спецификации overflow-x:hidden +
   overflow-y:visible приравнивается к auto, и часть браузеров всё равно
   режет transform-содержимое). Поэтому JS на время наведения (см.
   initInlineProductTooltip) добавляет этот класс, который снимает обрезку
   целиком — единственный способ гарантированно её убрать. */
.ds-order__inline-products.is-thumb-hovered {
  overflow: visible;
}

/* Растворение края — только когда список реально не помещается (класс ставит
   syncInlineProductsOverflow). Обрезанная миниатюра выглядит как обрыв, а так
   видно, что список продолжается, и не нужно считать «+N», который на другой
   ширине экрана всё равно оказался бы неверным. */
.ds-order__inline-products.is-overflowing {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

/* Картинка + точка наличия под ней, в столбик. flex:0 0 auto — иначе flex-
   родитель (.ds-order__inline-products) сжал бы ячейку у длинных заказов,
   когда 40px картинок много. */
.ds-order__ip-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

/* Внутри столбика точка уже не часть общего ряда — снимаем её собственный
   правый отступ (в ряду точки шли встык через gap контейнера-ряда). */
.ds-order__ip-cell .ds-order__avail-dot {
  width: 8px;
  height: 8px;
}

/* Квадратная миниатюра. Артикул и название не пишем рядом — они всплывают
   карточкой при наведении (.ds-ip-tip), иначе шесть подписей в строке
   съедали бы всю ширину колонки. */
.ds-order__ip {
  /* 40×40 — просили именно такой размер. Ставим и для просторного режима
     тоже: иначе компактный режим показывал бы картинки КРУПНЕЕ просторного,
     что читается как ошибка. На высоту строки это не влияет — её задаёт
     двухстрочный блок с номером (56px), а не миниатюры. */
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid var(--ds-border, #e5e7eb);
  background: var(--ds-bg-solid, #f1f0ec);
  object-fit: cover;
  /* По клику открывается фото товара, поэтому курсор — лупа, а не «справка»:
     подсказка при наведении здесь не единственное, что делает миниатюра. */
  cursor: zoom-in;
  transition: transform .13s ease, border-color .13s ease, box-shadow .13s ease;
}

.ds-order__ip:hover {
  transform: translateY(-1px) scale(1.06);
  border-color: var(--ds-primary);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
  /* Поднятая миниатюра не должна прятаться под соседнюю. */
  position: relative;
  z-index: 1;
}

.ds-order__ip--empty {
  display: block;
  /* Картинки нет — открывать нечего. */
  cursor: default;
}

/* Исключённая из комплектации позиция — та же семантика, что и в раскрытой
   таблице: видно, что она есть, но собирать её не нужно. */
.ds-order__ip.is-excluded {
  opacity: 0.4;
  filter: grayscale(1);
}

/* Карточка товара при наведении. Лежит в <body>, поэтому позиционируется
   абсолютно по координатам документа из JS. */
.ds-ip-tip {
  position: absolute;
  z-index: 5000;
  max-width: 280px;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid var(--ds-border, #e5e7eb);
  background: var(--ds-surface, #fff);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}

.ds-ip-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ds-ip-tip__sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-primary);
  letter-spacing: 0.02em;
}

.ds-ip-tip__name {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ds-text);
}

.ds-ip-tip__qty {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-muted, #9ca3af);
}

/* Раскрытая строка: состав уже виден полной таблицей ниже, дублировать его
   полосой незачем. */
.ds-orders.is-table.is-manager .ds-order.is-open .ds-order__inline-products {
  display: none;
}

/* В раскрытой строке миниатюры нет вовсе — ни полосы, ни большой: состав
   заказа полностью виден таблицей ниже, и картинка в шапке была бы третьим
   показом того же товара. Большая миниатюра возвращается только на узких
   экранах (медиазапрос ниже) — там таблицы под строкой ещё нет. */
.ds-orders.is-table.is-manager .ds-order.is-open .ds-order__cell--order.has-inline-products .ds-order__main-thumb {
  display: none;
}

/* Узкие экраны. Полоса — вторичная информация: чем меньше места, тем раньше
   она уступает его колонкам, а на планшете исчезает совсем (там состав
   смотрят раскрытием). */
@media (max-width: 1500px) {
  .ds-orders.is-table.is-manager {
    --ds-order-cols:
      30px
      minmax(220px, 1fr)
      minmax(104px, 170px)
      140px
      minmax(132px, 190px)
      100px
      40px;
  }

  .ds-orders.is-table.is-manager .ds-orders-table-head,
  .ds-orders.is-table.is-manager .ds-order__head {
    gap: 10px;
  }

  /* На узком экране миниатюры мельче — колонкам нужнее место. */
  .ds-order__ip {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 1150px) {
  .ds-order__inline-products {
    display: none;
  }

  .ds-orders.is-table.is-manager .ds-order__cell--order.has-inline-products .ds-order__main-thumb {
    display: flex;
  }
}

/* Менеджерской таблице горизонтальная прокрутка на 1000px не нужна: её сжатая
   сетка укладывается в ~830px, потому что колонок у неё меньше. Оставили бы
   общее правило — она скроллилась бы там, где помещается целиком. */
@media (max-width: 1250px) and (min-width: 901px) {
  #ds-orders-view.is-table-layout .ds-orders.is-table.is-manager {
    overflow-x: visible;
  }

  #ds-orders-view.is-table-layout .ds-orders.is-table.is-manager .ds-orders-table-head,
  #ds-orders-view.is-table-layout .ds-orders.is-table.is-manager .ds-order {
    min-width: 0;
  }
}

/* Компактная плотность НЕ должна зависеть от темы. Все правила .is-compact
   были написаны только под terra, поэтому в теме tailwind переключатель
   «Компактно» не делал ровным счётом ничего — строка оставалась с базовым
   отступом 10px сверху и снизу. Это правило задаёт плотность для любой темы;
   terra-версия выше специфичнее и по-прежнему выигрывает, задавая то же
   значение по вертикали. */
.ds-orders.is-table.is-compact .ds-order__head {
  padding: 4px 14px;
}

.ds-orders.is-compact .ds-order__main-thumb {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

/* Свёрнутая строка не должна занимать высоту.
   Вложенная карточка раскрытого заказа имеет margin 2px сверху и 16px снизу
   плюс рамку — итого 20px. Механизм сворачивания (grid-template-rows: 0fr +
   min-height: 0) обнуляет только СОДЕРЖИМОЕ: поля и рамка в минимальный
   размер грид-элемента входят всё равно, поэтому «схлопнутая» строка была на
   20px выше своего содержимого. В devtools это и выглядело так, будто строка
   наезжает на соседнюю: её бокс тянулся на 20px ниже видимого края.
   Замер до правки: строка 84px = шапка 64 + невидимое тело 20. */
[data-theme="terra"] .ds-orders.is-table .ds-order:not(.is-open) .ds-order__body-inner {
  margin-top: 0;
  margin-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}

/* Разделитель между заказами.
   Раньше его роль случайно играла верхняя рамка вложенной карточки, которая
   просвечивала сквозь несхлопнутое тело свёрнутой строки. Как только тело
   схлопнулось по-настоящему (правило выше), линии пропали — значит нужен
   настоящий разделитель, а не побочный эффект.
   !important и повышенная специфичность обязательны: терра гасит рамки строк
   правилом `border: none !important`. */
[data-theme="terra"] .ds-orders.is-table .ds-orders-table-body > .ds-order:not(:last-child) {
  border-bottom: 1px solid #f0ede7 !important;
}

/* Статус «Нет в наличии» — крестик вместо точки. Цвет тот же, что у обычной
   точки: он задаётся в настройках статуса (Статусы наличия), а не здесь. */
.ds-order__avail-dot--out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--avail-dot-color, #6b7280);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

/* Размер иконки внутри кнопок-действий над позицией. Без явного размера
   lucide подставляет 24px, и значок распирал кнопку в 30px. */
.ds-line-delete .lucide,
.ds-line-exclude .lucide,
.ds-line-restore .lucide,
.ds-line-delete svg,
.ds-line-exclude svg,
.ds-line-restore svg {
  width: 15px;
  height: 15px;
}

/* На узком экране номеру и подписи нужно меньше места — сужаем и фиксатор
   ширины, иначе он съедал бы место у самой полосы картинок. */
@media (max-width: 1500px) {
  .ds-orders.is-table.is-manager {
    --ds-order-title-w: 92px;
  }
}

/* Шапка и строки — ДВЕ отдельные сетки с одним шаблоном, поэтому их
   контент-боксы обязаны совпадать по ширине до пикселя. Раньше рамка 1px
   висела на .ds-orders-table-body: строки внутри тела оказывались уже шапки,
   и треки расходились — причём накопительно, потому что колонки minmax()
   при другой свободной ширине ужимаются по-разному.

   Подгонять шапку компенсирующей рамкой — лечение симптома. Переносим рамку
   на общего родителя: теперь шапка и тело лежат в ОДНОМ боксе и по
   определению имеют одинаковую внутреннюю ширину. */
[data-theme="terra"] .ds-orders.is-table {
  border: 1px solid var(--ds-border);
  border-radius: 24px;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
  overflow: hidden;
}

[data-theme="terra"] .ds-orders.is-table .ds-orders-table-body {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Шапка теперь внутри общей рамки — свои края ей не нужны, как и отступ
   до тела: линия под шапкой сама служит разделителем. */
[data-theme="terra"] .ds-orders.is-table .ds-orders-table-head {
  border-left: none;
  border-right: none;
  border-radius: 0;
  margin-bottom: 0;
}

/* ==========================================================================
   Горизонтальные отступы шапки и строк — ВСЕГДА одинаковые.
   Шапка и строки это две отдельные сетки: их треки считаются от собственной
   внутренней ширины, поэтому любая разница в padding-left/right разъезжает
   все колонки разом. Так и вышло: в компактном режиме строки получили 10px,
   а шапка осталась с 20px (замер показал pad 20px против 10px).
   Задаём обе стороны одним правилом, чтобы разойтись они больше не могли.
   Специфичность подобрана так, чтобы перекрыть прежние точечные правила.
   ========================================================================== */
[data-theme="terra"] .ds-orders.is-table .ds-orders-table-head,
[data-theme="terra"] .ds-orders.is-table .ds-order__head {
  padding-left: 20px;
  padding-right: 20px;
}

[data-theme="terra"] .ds-orders.is-table.is-compact .ds-orders-table-head,
[data-theme="terra"] .ds-orders.is-table.is-compact .ds-order__head {
  padding-left: 10px;
  padding-right: 10px;
}

/* На узких экранах отступы уменьшаем — но снова обеим сеткам сразу. */
@media (max-width: 1750px) {
  [data-theme="terra"] .ds-orders.is-table .ds-orders-table-head,
  [data-theme="terra"] .ds-orders.is-table .ds-order__head,
  [data-theme="terra"] .ds-orders.is-table.is-compact .ds-orders-table-head,
  [data-theme="terra"] .ds-orders.is-table.is-compact .ds-order__head {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 1500px) {
  [data-theme="terra"] .ds-orders.is-table .ds-orders-table-head,
  [data-theme="terra"] .ds-orders.is-table .ds-order__head,
  [data-theme="terra"] .ds-orders.is-table.is-compact .ds-orders-table-head,
  [data-theme="terra"] .ds-orders.is-table.is-compact .ds-order__head {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Обрезку с самих ячеек снимаем: она резала разделитель, который рисуется
   псевдоэлементом чуть правее края ячейки. Многоточие в длинных значениях
   по-прежнему работает — overflow задан внутренним блокам (.ds-order__ttn-place,
   .ds-order__payment-info), а не ячейке-контейнеру. */
#ds-orders.is-table .ds-order__cell--ttn,
#ds-orders.is-table .ds-order__cell--payment {
  overflow: visible;
}

/* Колонка «⋮» была прижата вправо (text-align: right), поэтому слева от
   кнопки оставался весь неиспользованный хвост трека, а справа — только
   отступ таблицы. Центрируем содержимое: отступы становятся равными. */
[data-theme="terra"] .ds-orders.is-table .ds-order__cell--details,
[data-theme="terra"] .ds-orders.is-table .ds-orders-table-head__cell--details {
  text-align: center;
  justify-content: center;
}

/* Кнопка «⋮» была на float: right — выпадала из потока, и центрирование
   ячейки на неё не действовало. Возвращаем в поток и центрируем. */
[data-theme="terra"] .ds-orders.is-table .ds-order__cell--details .ds-order__details-btn {
  float: none;
  margin: 0 auto;
}

/* Ячейка «⋮» исключена из общего flex-правила для ячеек, поэтому осталась
   блоком: ни text-align, ни margin:auto кнопку не центрировали надёжно.
   Делаем саму ячейку flex-контейнером с центрированием. */
[data-theme="terra"] .ds-orders.is-table .ds-order__cell--details,
[data-theme="terra"] .ds-orders.is-table .ds-orders-table-head__cell--details {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

[data-theme="terra"] .ds-orders.is-table .ds-order__cell--details .ds-order__details-btn {
  margin: 0;
}

/* Кнопка «⋮» по центру трека. id-селектор — чтобы гарантированно перебить
   базовое float: right и правило justify-self у ячеек. */
#ds-orders.is-table .ds-order__cell--details,
#ds-orders.is-table .ds-orders-table-head__cell--details {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  width: 100%;
  /* Слева от ячейки сразу идёт линия-разделитель, а справа — ещё 10px
     отступа таблицы. Видимая колонка на эти 10px шире трека, и её центр
     правее центра трека. Компенсируем набивкой слева: содержимое смещается
     ровно на половину разницы и встаёт по центру ВИДИМОЙ колонки. */
  padding: 0 0 0 10px;
  text-align: center;
}

#ds-orders.is-table .ds-order__cell--details .ds-order__details-btn {
  float: none;
  margin: 0;
  flex: 0 0 auto;
}

/* «Заказ» — по левому краю (над номером), остальные заголовки по центру
   своей колонки. */
#ds-orders .ds-orders-table-head__cell--order {
  justify-self: stretch;
  text-align: left;
  padding-left: 2px;
}

#ds-orders .ds-orders-table-head__cell:not(.ds-orders-table-head__cell--check):not(.ds-orders-table-head__cell--details):not(.ds-orders-table-head__cell--order) {
  justify-self: stretch;
  text-align: center;
  padding-left: 0;
}



/* Чекбокс по центру ВИДИМОЙ колонки. Слева от трека идёт ещё 10px отступа
   таблицы, справа — сразу разделитель, поэтому центр трека и центр видимой
   колонки не совпадали. Набивка справа сдвигает содержимое ровно на половину
   разницы. */
#ds-orders.is-table .ds-order__cell--check,
#ds-orders.is-table .ds-orders-table-head__cell--check {
  padding-left: 0;
  padding-right: 10px;
}

/* Название перевозчика и номер ТТН — единый блок, между ними набегало 6px
   (margin-bottom 3px у .ds-order__ttn-info плюс gap 3px у ячейки). */
#ds-orders.is-table .ds-order__cell--ttn .ds-order__ttn-info {
  margin-bottom: 0;
}

#ds-orders.is-table .ds-order__cell--ttn {
  gap: 1px;
}

/* ---- Состав заказа строкой — теперь у обеих ролей -----------------------
   Правила ниже дублируют менеджерские, но без .is-manager: сами стили полосы
   (.ds-order__inline-products, .ds-order__ip, .ds-ip-tip) роли не знают, а
   вот эти три были привязаны к ней. */

/* Блок с номером фиксированной ширины — иначе его задаёт подпись «N товаров»
   («1 товар» против «6 товаров»), и левый край полосы гуляет от строки к
   строке. */
#ds-orders.is-table .ds-order__title-wrap {
  min-width: var(--ds-order-title-w, 104px);
  flex: 0 0 auto;
}

/* Полоса заменяет большую миниатюру: иначе первый товар показан дважды —
   крупно слева и первым в полосе. */
#ds-orders.is-table .ds-order__cell--order.has-inline-products .ds-order__main-thumb {
  display: none;
}

/* Ячейку заказа выравниваем по центру — полоса выше однострочного блока
   с номером. */
#ds-orders.is-table .ds-order__cell--order {
  align-items: center;
}

/* В раскрытой строке состав виден полной таблицей ниже — полоса лишняя. */
#ds-orders.is-table .ds-order.is-open .ds-order__inline-products {
  display: none;
}

#ds-orders.is-table .ds-order.is-open .ds-order__cell--order.has-inline-products .ds-order__main-thumb {
  display: none;
}

/* На узких экранах полоса уступает место колонкам, миниатюра возвращается. */
@media (max-width: 1150px) {
  #ds-orders.is-table .ds-order__inline-products {
    display: none;
  }

  #ds-orders.is-table .ds-order__cell--order.has-inline-products .ds-order__main-thumb {
    display: flex;
  }
}

/* Содержимое колонок «Метки», «Клиент», «Статус», «Сумма», «Доставка» и
   «Оплата» — по центру, под своими заголовками. Прежде эти ячейки были
   прижаты влево точечными правилами (justify-content/text-align/align-items),
   поэтому перечисляем и внутренние блоки, которые растянуты на всю ширину
   ячейки и выравнивают текст сами. */
#ds-orders.is-table .ds-order__cell--marks,
#ds-orders.is-table .ds-order__cell--client,
#ds-orders.is-table .ds-order__cell--status,
#ds-orders.is-table .ds-order__cell--total,
#ds-orders.is-table .ds-order__cell--ttn,
#ds-orders.is-table .ds-order__cell--payment {
  justify-content: center;
  align-items: center;
  text-align: center;
}

#ds-orders.is-table .ds-order__cell--marks {
  justify-content: center;
}

/* Блоки внутри «Доставки», «Оплаты», «Клиента» и «Статуса» — колонки-флексы
   на всю ширину ячейки, поэтому центрировать нужно и их содержимое. */
#ds-orders.is-table .ds-order__cell--ttn .ds-order__ttn-info,
#ds-orders.is-table .ds-order__cell--payment .ds-order__payment-info,
#ds-orders.is-table .ds-order__cell--client .ds-order__client-info {
  align-items: center;
  text-align: center;
}

#ds-orders.is-table .ds-order__cell--status {
  align-items: center;
}

#ds-orders.is-table .ds-order__cell--ttn .ds-order__ttn-head {
  justify-content: center;
}

/* Имя и телефон покупателя — по центру колонки. У самих строк своё
   выравнивание влево, ячейку они не слушают. */
#ds-orders.is-table .ds-order__cell--client .ds-order__client-name,
#ds-orders.is-table .ds-order__cell--client .ds-order__client-phone,
#ds-orders.is-table .ds-order__cell--client .ds-phone-link {
  text-align: center;
  justify-content: center;
}

/* У строки телефона своё align-self: flex-start — она не слушала
   центрирование ячейки и прижималась к левому краю. */
#ds-orders.is-table .ds-order__cell--client .ds-order__client-phone {
  align-self: center;
}

/* ---- Вертикальные разделители колонок ------------------------------------
   Линия у левого края каждой из перечисленных колонок — от шапки и вниз
   через все строки. Рисуется псевдоэлементом, вытянутым за пределы ячейки по
   вертикали, чтобы перекрыть отступы строк и читаться сплошной; вылет за края
   таблицы срезает overflow:hidden контейнера. */
#ds-orders.is-table .ds-order__cell--marks,
#ds-orders.is-table .ds-order__cell--client,
#ds-orders.is-table .ds-order__cell--status,
#ds-orders.is-table .ds-order__cell--total,
#ds-orders.is-table .ds-order__cell--ttn,
#ds-orders.is-table .ds-order__cell--payment,
#ds-orders.is-table .ds-order__cell--date,
#ds-orders.is-table .ds-orders-table-head__cell--marks,
#ds-orders.is-table .ds-orders-table-head__cell--client,
#ds-orders.is-table .ds-orders-table-head__cell--status,
#ds-orders.is-table .ds-orders-table-head__cell--total,
#ds-orders.is-table .ds-orders-table-head__cell--ttn,
#ds-orders.is-table .ds-orders-table-head__cell--payment,
#ds-orders.is-table .ds-orders-table-head__cell--date {
  position: relative;
}

#ds-orders.is-table .ds-order__cell--marks::before,
#ds-orders.is-table .ds-order__cell--client::before,
#ds-orders.is-table .ds-order__cell--status::before,
#ds-orders.is-table .ds-order__cell--total::before,
#ds-orders.is-table .ds-order__cell--ttn::before,
#ds-orders.is-table .ds-order__cell--payment::before,
#ds-orders.is-table .ds-order__cell--date::before,
#ds-orders.is-table .ds-orders-table-head__cell--marks::before,
#ds-orders.is-table .ds-orders-table-head__cell--client::before,
#ds-orders.is-table .ds-orders-table-head__cell--status::before,
#ds-orders.is-table .ds-orders-table-head__cell--total::before,
#ds-orders.is-table .ds-orders-table-head__cell--ttn::before,
#ds-orders.is-table .ds-orders-table-head__cell--payment::before,
#ds-orders.is-table .ds-orders-table-head__cell--date::before {
  content: '';
  position: absolute;
  top: -60px;
  bottom: -60px;
  left: -8px;
  width: 1px;
  background: var(--ds-border, #efece6);
  pointer-events: none;
}

/* Кнопка «+» в колонке меток занимает 20px даже когда невидима (у неё
   opacity:0, а не display:none — иначе трек бы дёргался). Из-за этого чипы
   центрировались вместе с ней и выглядели смещёнными влево. Убираем её из
   потока: чипы центрируются сами, а «+» висит у правого края ячейки. */
#ds-orders.is-table .ds-order__cell--marks .ds-pack-tags-quick {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

/* Заголовок «Доставка» — это кнопка сортировки со своим justify-content:
   flex-start, поэтому текст стоял слева, несмотря на text-align ячейки. */
#ds-orders .ds-orders-table-head__cell--ttn.ds-orders-th-sort {
  justify-content: center;
}

/* ---- Колонка «Доставка» в одну строку ------------------------------------
   Было три строки на заказ: название службы, номер ТТН с кнопками, чип
   статуса трекинга. Стало: иконка службы · точка статуса · номер · кнопки. */
#ds-orders.is-table .ds-order__ttn-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

#ds-orders.is-table .ds-order__ttn-carrier-only {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

#ds-orders.is-table .ds-order__ttn-carrier-only .ds-carrier-badge__icon {
  width: 15px;
  height: 15px;
}

/* Номер ТТН — без подчёркивания: оно читалось как подсветка ошибки. */
#ds-orders.is-table .ds-order__ttn-head-label,
#ds-orders.is-table .ds-order__ttn-head-label * {
  text-decoration: none;
  border-bottom: none;
}

/* Кнопки печати и «внести в расчёты» — только при наведении на строку, как
   крестики у меток. В покое они шумели в каждой строке. */
#ds-orders.is-table .ds-order__ttn-head-actions {
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 0.15s;
}

#ds-orders.is-table .ds-order__head:hover .ds-order__ttn-head-actions,
#ds-orders.is-table .ds-order__ttn-head-actions:focus-within {
  opacity: 1;
}

/* Заглушки-плейсхолдеры внутри блока кнопок держали ширину впустую. */
#ds-orders.is-table .ds-order__ttn-head-open--placeholder,
#ds-orders.is-table .ds-order__ttn-head-settlement--placeholder {
  display: none;
}

/* Сенсорные экраны: наведения нет, кнопки видны всегда. */
@media (hover: none) {
  #ds-orders.is-table .ds-order__ttn-head-actions {
    opacity: 1;
  }
}

/* Ячейка «Доставка» — две строки: строка с номером и под ней пилюля статуса.
   Обе не должны вылезать за трек: раньше строка была nowrap-флексом и на
   узкой колонке наезжала на соседей. */
#ds-orders.is-table .ds-order__cell--ttn {
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

#ds-orders.is-table .ds-order__ttn-line {
  flex-wrap: wrap;
  max-width: 100%;
}

#ds-orders.is-table .ds-order__ttn-head {
  min-width: 0;
  max-width: 100%;
}

#ds-orders.is-table .ds-order__ttn-head-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ds-orders.is-table .ds-order__cell--ttn .ds-tracking-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Кнопки прятались через opacity — место в строке они при этом занимали, и
   строка «иконка + номер + кнопки» не влезала в трек и переносилась. Убираем
   их из потока целиком, показываем при наведении на строку. */
#ds-orders.is-table .ds-order__ttn-head-actions {
  display: none;
  opacity: 1;
}

#ds-orders.is-table .ds-order__head:hover .ds-order__ttn-head-actions,
#ds-orders.is-table .ds-order__ttn-head-actions:focus-within {
  display: inline-flex;
}

@media (hover: none) {
  #ds-orders.is-table .ds-order__ttn-head-actions {
    display: inline-flex;
  }
}

/* Строка не переносится: при нехватке места номер обрезается многоточием,
   а не уезжает на вторую строку под иконку. */
#ds-orders.is-table .ds-order__ttn-line {
  flex-wrap: nowrap;
}

/* Обрезку с ячейки снимаем: разделитель рисуется псевдоэлементом слева, за
   её пределами, и overflow:hidden срезал его. От вылезания содержимого
   защищают max-width и многоточие у самих строк внутри. */
#ds-orders.is-table .ds-order__cell--ttn {
  overflow: visible;
}

/* Вторая строка ячейки: пилюля трекинга и справа от неё значок «внесён в
   расчёты». Значок про деньги, а не про действие, поэтому виден всегда. */
#ds-orders.is-table .ds-order__ttn-status-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}

#ds-orders.is-table .ds-order__ttn-status-line .ds-order__settlement-done,
#ds-orders.is-table .ds-order__ttn-status-line .ds-order__settlement-import {
  flex: 0 0 auto;
}

/* Иконка перевозчика вплотную к номеру: раньше между ними стоял общий
   зазор строки в 6px, из-за чего пара читалась как два отдельных элемента. */
#ds-orders.is-table .ds-order__ttn-line {
  gap: 4px;
  position: relative;
}

/* Кнопка печати не должна сдвигать пару «иконка + номер» при появлении.
   Выносим её из потока к правому краю ячейки — центрирование остаётся за
   номером, а кнопка просто проявляется рядом. */
#ds-orders.is-table .ds-order__ttn-head-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* В потоке её больше нет, поэтому переключаем видимость прозрачностью —
   display:none тут не нужен и мешал бы плавности. */
#ds-orders.is-table .ds-order__ttn-head-actions {
  display: inline-flex;
  opacity: 0;
  transition: opacity 0.15s;
}

#ds-orders.is-table .ds-order__head:hover .ds-order__ttn-head-actions,
#ds-orders.is-table .ds-order__ttn-head-actions:focus-within {
  opacity: 1;
}

@media (hover: none) {
  #ds-orders.is-table .ds-order__ttn-head-actions {
    opacity: 1;
  }
}

/* Блок с номером был растянут на всю ширину ячейки и центрировал номер
   внутри себя — из-за этого между иконкой и номером зияли 42px, а пара
   в целом стояла не по центру. Сжимаем его по содержимому: центрирует
   теперь сама строка. */
#ds-orders.is-table .ds-order__ttn-line .ds-order__ttn-head {
  flex: 0 1 auto;
  width: auto;
  justify-content: flex-start;
}

/* Иконка перевозчика чуть крупнее — она единственный указатель службы
   доставки после того, как название убрали в тултип. */
#ds-orders.is-table .ds-order__ttn-carrier-only .ds-carrier-badge__icon {
  width: 18px;
  height: 18px;
}

/* Разделители в шапке ограничиваем её собственной высотой. Общий вылет в
   60px нужен строкам — там он перекрывает промежутки между ними, — а в шапке
   линия уезжала на 60px вверх и упиралась в скруглённую рамку контейнера,
   отчего у верхнего края читалась вторая, наложенная граница. */
#ds-orders.is-table .ds-orders-table-head__cell::before {
  /* Короткая засечка по высоте подписи, а не линия во всю шапку: сплошная
     на 46px читалась заметно тяжелее, чем в строках, где линию каждый раз
     прерывает горизонтальный разделитель. */
  top: -5px;
  bottom: -5px;
}

/* Разделители вылезают за пределы строки на 60px вниз — это нужно, чтобы
   перекрыть промежутки между строками. Но у раскрытого заказа сразу под
   строкой идёт таблица товаров, и линии ложились поверх неё. Обрезаем их
   границами самой строки. */
#ds-orders.is-table .ds-order__head {
  overflow: hidden;
}

/* У раскрытой строки линии не нужны вовсе: ниже своя таблица со своими
   колонками, и продолжение чужих границ только путает. */
#ds-orders.is-table .ds-order.is-open .ds-order__head::before,
#ds-orders.is-table .ds-order.is-open .ds-order__cell::before {
  display: none;
}

/* У менеджера кнопка печати видна всегда, а не по наведению: он печатает
   ТТН пачками при сборке, и прятать её за hover — лишнее движение. */
#ds-orders.is-table.is-manager .ds-order__ttn-head-actions {
  opacity: 1;
}

/* Место под кнопку «+» резервируем набивкой, а не запасом ширины: чипы
   центрируются в оставшейся части и не попадают под кнопку. Той же набивкой
   сдвигаем заголовок, чтобы «МЕТКИ» стояли над центром чипов. */
#ds-orders.is-table .ds-order__cell--marks,
#ds-orders.is-table .ds-orders-table-head__cell--marks {
  padding-right: 24px;
}

/* Плашки меток не переносят текст: иначе «Возможный дубль (№11167)» ломался
   на две строки, строка заказа становилась выше, а замер ширины колонки
   получал уже сжатое значение и уводил её ещё уже. */
#ds-orders.is-table .ds-order__cell--marks .ds-order-user-label,
#ds-orders.is-table .ds-order__cell--marks .ds-pack-tag-mark,
#ds-orders.is-table .ds-order__cell--marks .ds-pill {
  white-space: nowrap;
}