/* css/redesign-admin-orders.css
   Фаза 6 редизайна (docs/REDESIGN_PLAN.md): Админка Desktop — Заказы.
   Первая фаза, затрагивающая общую оболочку админки (#adminTabs — пилюли
   разделов), т.к. она была полностью на легаси-стилях ни в одной прошлой
   фазе — тот же приём, что и с общей шапкой сайта в Фазе 5.0 / табами
   профиля в Фазе 4.1. Мобильная адаптация карточки заказа (Фаза 14.2,
   см. @media в конце файла) переиспользует ту же разметку/классы, что и
   десктоп — старая отдельная .mobile-order-card удалена. */

#adminPage {
  font-family: var(--rd-font-family);
}

/* ===== Общая пилюльная навигация админки (#adminTabs) ===== */
#adminTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  background: var(--rd-panel-header);
  border-radius: 12px;
  padding: 5px;
}
#adminTabs .admin-tab {
  background: none;
  border: none;
  border-radius: 9px;
  padding: 9px 16px;
  color: var(--rd-text-muted);
  font-weight: 700;
  font-size: 0.85em;
  cursor: pointer;
}
#adminTabs .admin-tab:hover {
  color: var(--rd-text);
}
/* Приглушённая активная пилюля вместо сплошной золотой заливки — по
   фидбэку пользователя ("выбор вкладок не такой золотой, как ты ставишь"):
   золотой текст на тонированном фоне, а не инвертированный блок. */
#adminTabs .admin-tab.active {
  background: oklch(0.3 0.05 85 / 0.35);
  color: var(--rd-gold);
}

.admin-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.8em;
  margin-left: 5px;
}
.admin-nav-badge-error { background: var(--rd-status-error); }
.admin-nav-badge-pending { background: var(--rd-status-pending); }
.admin-nav-badge-new { background: var(--rd-status-new); }

/* ===== Заказы: под-вкладки (Активные/Не оплаченные/Завершённые) ===== */
#adminPage .tabs#orderTabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  background: var(--rd-panel-header);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
}
#adminPage .tabs#orderTabs .tab-btn {
  border-radius: 8px;
  padding: 9px 20px;
  color: var(--rd-text-muted);
  font-weight: 700;
  font-size: 0.85em;
}
#adminPage .tabs#orderTabs .tab-btn:hover {
  background: none;
  color: var(--rd-text);
}
#adminPage .tabs#orderTabs .tab-btn.active {
  background: oklch(0.3 0.05 85 / 0.35);
  color: var(--rd-gold);
}

/* ===== Фильтры + тулбар (выбрать все / массовые действия) ===== */
#adminPage .filter-row {
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-card);
  padding: 14px 16px;
}
#adminPage .filter-row input,
#adminPage .filter-row select {
  background: var(--rd-bg);
  border: 1px solid var(--rd-border);
  color: var(--rd-text);
  border-radius: 8px;
}
#adminPage .filter-row .btn-small {
  font-weight: 700;
}

/* Заказы: "Фильтры" — сворачиваемая группа (дропдаун-поле + значение),
   расположение "Все статусы → Фильтры → Поле фильтра → Сброс" (по фидбэку
   пользователя). Глобально .filter-toggle скрыт, а .filter-fields
   принудительно показан на десктопе (css/admin.css, @media min-width:769px,
   там же собственный !important) — здесь тот же приём с более высокой
   специфичностью (#orderFilters), чтобы свернуть/развернуть работало и на
   десктопе именно в Заказах, не трогая Товары (тот же .filter-toggle
   используется и там, но с другим поведением — оставляем как есть). */
#orderFilters .filter-toggle {
  display: inline-block !important;
}
#orderFilters .filter-fields.collapsed {
  display: none !important;
}
#orderFilters .filter-fields:not(.collapsed) {
  display: flex !important;
  gap: 10px;
  align-items: center;
}
#adminPage .admin-order-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  flex-wrap: wrap;
}
#adminPage .admin-order-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--rd-text-muted);
  font-size: 0.85em;
  cursor: pointer;
}
#adminPage .admin-order-toolbar-mass {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
#adminPage .admin-order-selected-count {
  color: var(--rd-text-muted);
  font-size: 0.85em;
}

/* ===== Карточки заказов (десктоп) ===== */
#adminPage .admin-order-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#adminPage .admin-order-card {
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
  border-left: 3px solid var(--rd-border);
  border-radius: var(--rd-radius-card);
  padding: 16px 18px;
  color: var(--rd-text);
}
/* Не status-{key} напрямую — эти имена уже заняты глобальными легаси-
   классами в css/base.css (строки 444-455, красят статус-пилюлю/точку в
   дропдауне), совпадение имени на карточке красило бы весь фон карточки
   в тот же зелёный/синий и т.п. (найдено и исправлено на этапе проверки
   Фазы 6, аналогично коллизии из Фазы 4.4). */
#adminPage .admin-order-card.admin-order-status-new { border-left-color: var(--rd-status-new); }
#adminPage .admin-order-card.admin-order-status-awaiting-payment { border-left-color: var(--rd-status-pending); }
#adminPage .admin-order-card.admin-order-status-in-work { border-left-color: var(--rd-status-progress); }
#adminPage .admin-order-card.admin-order-status-completed { border-left-color: var(--rd-status-done); }
#adminPage .admin-order-card.admin-order-status-error { border-left-color: var(--rd-status-error); }
#adminPage .admin-order-card.admin-order-status-cancelled { border-left-color: var(--rd-status-cancelled); }

/* ===== Карточка заказа — иерархия по значимости (ручной редизайн по
   скриншоту пользователя): товар/сумма/данные пользователя/статус — это
   главное и крупное; email/дата/чекбоксы оплаты — второстепенное и мельче;
   действия (чат/удалить/оплата/автовыполнение) сдвинуты в подвал карточки,
   не конкурируют за внимание с содержимым заказа. ===== */
#adminPage .admin-order-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
#adminPage .admin-order-checkbox-label {
  padding-top: 3px;
}
#adminPage .admin-order-card-idBlock {
  flex: 1;
  min-width: 0;
}
#adminPage .admin-order-card-id {
  font-weight: 800;
  font-size: 1.02em;
  color: var(--rd-text);
}
#adminPage .admin-order-card-meta {
  color: var(--rd-text-muted);
  font-size: 0.82em;
  margin-top: 3px;
}
#adminPage .admin-order-card-sum {
  text-align: right;
  flex-shrink: 0;
}
#adminPage .admin-order-card-price {
  color: var(--rd-gold);
  font-weight: 800;
  font-size: 1.15em;
  white-space: nowrap;
}
#adminPage .admin-order-card-discount {
  color: var(--rd-text-muted);
  font-size: 0.78em;
  margin-top: 2px;
  white-space: nowrap;
}

/* Название товара — самый крупный акцент в теле карточки, без ярлыка
   "Товар:" (Player ID и суммы уже подписаны отдельно, здесь достаточно
   самого значения). */
#adminPage .admin-order-card-product {
  font-weight: 800;
  font-size: 1.2em;
  color: var(--rd-text);
  margin-bottom: 12px;
}

#adminPage .admin-order-card-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
#adminPage .order-field-gameLabel {
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-text-muted);
  margin-top: 4px;
}
#adminPage .order-field-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--rd-panel-header);
}
#adminPage .order-field-box-files {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#adminPage .order-field-label {
  font-size: 0.68em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-text-muted);
  margin-bottom: 3px;
}
#adminPage .order-field-value {
  font-size: 1.05em;
  font-weight: 800;
  color: var(--rd-text);
  word-break: break-word;
}
#adminPage .order-field-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#adminPage .order-field-file-link {
  color: var(--rd-status-new);
  font-size: 0.9em;
}
#adminPage .order-field-box .copy-btn {
  background: none;
  border: 1px solid var(--rd-border);
  color: var(--rd-text-muted);
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 0.8em;
  cursor: pointer;
  flex-shrink: 0;
}
#adminPage .order-field-box .copy-btn:hover {
  border-color: var(--rd-border-gold);
  color: var(--rd-gold);
}

/* Действия — второстепенные по значимости, поэтому в самом низу карточки:
   "Удалить" изолирована слева (деструктивное, подальше от остального),
   рабочие действия (оплата/чат/выполнение) сгруппированы справа. */
#adminPage .admin-order-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
#adminPage .admin-order-card-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
#adminPage .admin-order-card-paid {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--rd-text-muted);
  font-size: 0.85em;
  cursor: pointer;
}

/* Сплошная заливка + жирный текст для ключевых действий (по фидбэку
   пользователя) — вместо приглушённой тонированной заливки, которую
   .rd-btn-danger/.rd-btn-purple используют по умолчанию в остальной
   админке/профиле (эти общие классы намеренно не трогаем, чтобы не
   зацепить другие экраны — переопределяем только в контексте Заказов). */
#adminPage .admin-order-card-actions .rd-btn-danger,
#adminPage .admin-order-toolbar-mass .rd-btn-danger {
  background: oklch(0.55 0.19 25);
  color: #fff;
}
#adminPage .admin-order-card-actions .rd-btn-danger:hover,
#adminPage .admin-order-toolbar-mass .rd-btn-danger:hover {
  background: oklch(0.5 0.19 25);
}
#adminPage .admin-order-card-actions .rd-btn-purple,
#adminPage .admin-order-toolbar-mass .rd-btn-purple {
  background: oklch(0.5 0.15 300);
  color: #fff;
}
#adminPage .admin-order-card-actions .rd-btn-purple:hover,
#adminPage .admin-order-toolbar-mass .rd-btn-purple:hover {
  background: oklch(0.45 0.15 300);
}
#adminPage .admin-order-card-actions .btn-small,
#adminPage .admin-order-toolbar-mass .btn-small {
  font-weight: 700;
}

/* Кнопка чата заказа — сплошная синяя заливка, белый текст (по фидбэку
   пользователя). .chat-deal-admin-btn (Фаза 8, P2P-сделки) сознательно не
   трогаем в этом заходе — за пределами скоупа текущей правки (Заказы). */
#adminPage .chat-order-btn {
  position: relative;
  background: oklch(0.5 0.16 240);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
}
#adminPage .chat-order-btn:hover {
  background: oklch(0.45 0.16 240);
}
#adminPage .chat-deal-admin-btn {
  position: relative;
  background: oklch(0.4 0.14 240 / 0.3);
  color: oklch(0.75 0.13 240);
  border: none;
  border-radius: 8px;
}
#adminPage .chat-deal-admin-btn:hover {
  background: oklch(0.4 0.14 240 / 0.45);
}

/* Круглый бейдж непрочитанных на кнопке "Просмотреть"/"Чат" — переиспользует
   ту же форму, что .chat-badge (css/chat.css), но с токеном цвета вместо
   инлайн-хекса (js/admin/moderations/moderationBadges.js создавал такой же
   бейдж через style.cssText — теперь через этот класс). */
.admin-view-unread-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--rd-status-new);
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  font-weight: bold;
}

/* ===== Статус-дропдаун — перекраска под токены поверх css/base.css ===== */
#adminPage .status-current {
  border-radius: 8px;
}
#adminPage .status-menu {
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
}
#adminPage .status-menu-item:hover,
#adminPage .status-menu-item.active {
  background: var(--rd-panel-header);
  color: var(--rd-text);
}

/* ===== Мобильная адаптация (Фаза 14.2) =====
   Раньше карточка заказа на мобильном рендерилась отдельной (более бедной)
   разметкой (.mobile-order-card, см. js/admin/orders/orders-list.js) — с
   Фазы 14.2 разметка одна (.admin-order-card) на всех ширинах, здесь
   только реflow в один столбец. */
@media (max-width: 768px) {
  #adminPage .admin-order-card-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  #adminPage .admin-order-card-sum {
    text-align: left;
  }
  #adminPage .status-dropdown {
    width: 100%;
    order: 4;
  }
  #adminPage .admin-order-card-actions .btn-small {
    flex: 1 1 auto;
  }
  #adminPage .admin-order-card-actions-right {
    width: 100%;
  }
}

/* ===== Чекбоксы — приглушённые, не золотые "под лупой" (по фидбэку
   пользователя): затемнённый gold-gray акцент вместо яркого системного
   синего/золотого. ===== */
#adminPage input[type="checkbox"] {
  accent-color: oklch(0.5 0.03 85);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ===== Инлайн-чат заказа (js/admin/orders/orderChatInline.js) — тот же
   визуальный язык карточки (панель/рамка), разворачивается прямо под
   заказом, без затемнения фона всей страницы (в отличие от #chatModal,
   которым по-прежнему пользуются модерация/P2P). ===== */
#adminPage .admin-order-chat {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rd-border);
}
#adminPage .admin-order-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 10px;
}
#adminPage .admin-order-chat-inputRow {
  display: flex;
  align-items: center;
  gap: 8px;
}
#adminPage .admin-order-chat-input {
  flex: 1;
  background: var(--rd-bg);
  border: 1px solid var(--rd-border);
  color: var(--rd-text);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.9em;
}
#adminPage .admin-order-chat-attach {
  cursor: pointer;
  color: var(--rd-text-muted);
  padding: 4px;
}
#adminPage .admin-order-chat-send {
  background: var(--rd-gold);
  color: oklch(0.15 0.01 85);
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 700;
  cursor: pointer;
}
#adminPage .admin-order-chat-closeBtn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  background: none;
  border: 1px solid var(--rd-status-error);
  color: var(--rd-status-error);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 0.85em;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
#adminPage .admin-order-chat-closeBtn:hover {
  background: oklch(0.55 0.17 25 / 0.12);
}