/* Заказы Wildberries: список событий и карточка заказа.
 *
 * Все цвета — токенами тем: страница обязана переключаться вместе с темой.
 */

.wb-orders__filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wb-orders__filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.wb-orders__filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.wb-orders__message {
    margin: 8px 0;
}

.wb-orders__table-shell {
    overflow: auto;
    max-height: calc(100vh - 340px);
}

.wb-orders__number {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wb-orders__code {
    font-family: var(--font-mono, monospace);
    white-space: nowrap;
}

/* Сводка дня: восемь чисел, ради которых карточку и открывают. */
.wb-orders__summary {
    padding: 0 16px;
}

.wb-orders__summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 6px);
    background: var(--color-bg-secondary);
}

.wb-orders__summary-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wb-orders__summary-label {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.wb-orders__summary-value {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

/* Конверсия под счётчиком: она объясняет число, а не спорит с ним. */
.wb-orders__summary-note {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.wb-orders__sort {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.wb-orders__sort-label {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Подписи, объясняющие, чего пустая колонка не означает. */
.wb-orders__hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Кнопки порядка над таблицей товаров: выбранная подсвечена как основная. */
.wb-orders__sort .button {
    padding: 4px 10px;
}

/* Заголовок раздела карточки: сводка, деньги, проекции. */
.wb-orders__section-title {
    margin: 16px 0 8px;
    font-size: 14px;
    color: var(--color-text-primary);
}

/* Пикер занимает место двух полей даты, которые он заменил: его полоса шире
 * колонки в 180px, поэтому ячейка берёт две. */
.wb-orders__filter-period {
    grid-column: span 2;
    min-width: 0;
}

/* ── Карточка заказа ───────────────────────────────────────────────────────
   У каждой вкладки свой вопрос. Блоки полей, отступы вкладок и таблицы двух
   ширин — общие для карточек документов (`doc_form.css`); здесь остаётся своё:
   строка итога, кликабельная строка продажи и сырой ответ площадки.

   Карточка живёт под корневым классом страницы (`a015-page`), а не под
   `wb-orders`: список и карточка — разные страницы одного среза, и общее у
   них только имя. */

.a015-page .a015-message {
    margin: var(--spacing-sm) var(--spacing-lg);
}

.a015-page .a015-empty {
    margin: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    max-width: 90ch;
}

.a015-page .a015-hint {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    max-width: 90ch;
}

.a015-page .a015-code {
    font-family: var(--font-mono, monospace);
    word-break: break-all;
}

/* Итоги над таблицей: ответ на вопрос вкладки числом, а не суммой глазами
   по столбцу. */
.a015-page .a015-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--spacing-md);
}

.a015-page .a015-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.a015-page .a015-total__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.a015-page .a015-total__value {
    font-size: var(--font-size-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.a015-page .a015-row {
    cursor: pointer;
}

.a015-page .a015-row:hover {
    background: var(--color-bg-secondary);
}

.a015-page .a015-payload {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Сырой ответ площадки: моноширинный и со своим скроллом — он бывает
   в сотни строк, и растягивать им страницу нельзя. */
.a015-page .a015-json__body {
    margin: 0;
    padding: var(--spacing-md);
    max-height: 26rem;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size-xs);
    white-space: pre-wrap;
    word-break: break-word;
}