/* ============================================================
   Вкладки «Пополнение баланса» / «История операций» в модалке #purse.

   Заголовок модалки — плашка .modal-new-header (пунктирная рамка,
   вылезает над модалкой на 3rem). Вкладки — две такие же плашки в ряд:
   активная выглядит как раньше, неактивная приглушена.

   Таблица истории — общая .history-table (style.css), та же, что на
   странице /purse в мобильной теме.
   ============================================================ */

.purse-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* .modal-new-header — это div; здесь он кнопка, поэтому сбрасываем
   то, что браузер даёт кнопке, и оставляем шрифт и цвет плашки */
button.purse-tab {
    margin-bottom: 10px;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
    transition: opacity 140ms ease, border-color 140ms ease, color 140ms ease;
}

button.purse-tab:not(.is-active) {
    border-style: solid;
    border-color: rgba(255, 255, 255, .12);
    color: #8f8f9c;
}

button.purse-tab:not(.is-active):hover {
    border-color: var(--span-color);
    color: var(--span-color);
}

button.purse-tab:focus-visible {
    outline: 2px solid var(--span-color);
    outline-offset: 2px;
}

/* История длинная (десятки записей по 10), поэтому свой скролл внутри
   модалки, а не вытягивание самой модалки за экран */
.purse-history {
    max-height: 480px;
    padding-right: 4px;
    overflow-y: auto;
}

.purse-history[hidden],
#purseTopup[hidden] { display: none; }

.purse-history .history-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--modal-bg, #0d0d11);
}

/* «Подгрузить записи» и «Пусто» приходят в самом ответе */
.purse-history .upload-next {
    display: block;
    margin: 10px 0 4px;
    text-align: center;
}

.purse-history__state {
    padding: 28px 0;
    color: #8f8f9c;
    text-align: center;
}