/* Заказы Яндекс.Маркета: список и карточка.
 *
 * Все цвета — токенами тем: в MPI страницы куста YM держали часть оформления
 * атрибутом style в разметке, и такая страница не переключается вместе с темой.
 */

.ym-order__filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

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

.ym-order__message {
    margin: 8px 0;
}

/* Таблица длинная, а шапка нужна всё время: заказов за месяц — сотни. */
.ym-order__table-shell {
    overflow: auto;
    max-height: calc(100vh - 320px);
}

/* Числовые колонки выравниваются по правому краю и набираются моноширинным:
 * одиннадцать сумм в строке иначе не сравнить глазом. */
.ym-order__number {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ym-order__number--negative {
    color: var(--color-error);
}

.ym-order__number--positive {
    color: var(--color-success);
}

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

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

.ym-order__timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ym-order__timeline-item {
    display: grid;
    grid-template-columns: 110px 200px max-content 1fr max-content;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-left: 3px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.ym-order__timeline-date {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.ym-order__timeline-kind {
    color: var(--color-text-primary);
}

.ym-order__timeline-source {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

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

/* Сырой ответ площадки: со своим скроллом — он бывает в сотни строк, и
   растягивать им страницу нельзя. */
.ym-order__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;
}