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

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

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

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

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

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

.wb-funnel__sticky-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-bg-secondary);
}

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

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

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

.wb-funnel__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-funnel__summary-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

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

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

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

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

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

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