/* Сессии и столы (Pages/Sessions, TableView, SessionTables, Components/PokerTable) — постраничные классы поверх общей системы раскладки (app.css). */

/* --- «Сессии» (Pages/Sessions.razor): строка сессии поверх .orion-row ---------------------------------------------
   Узко — аккаунт с действиями, ниже статус, ниже тренер/координатор/asid; средне — две строки; широко — одна.
   Раскрытая панель (.orion-row__details) встаёт отдельной строкой сетки на всю ширину (grid-column 1 / -1 из базы).
   Порог «широко» — 1080: в одну строку нужны аккаунт ~110, статус до ~370 (с индикатором завершения), тренер с
   координатором и действия ~250. */

.session-row {
    /* Аккаунту не меньше 96px: иначе на телефоне действия (auto) забирали всю строку, и ник ломался по буквам. */
    grid-template-columns: minmax(96px, 1fr) auto;
    grid-template-areas:
        "account actions"
        "status  status"
        "meta    meta";
}

.session-row__account { grid-area: account; }

/* Тултип ника («id игрока») — по ширине ника, а не всей колонки: корень MudTooltip в колонке-стеке растягивался бы, и
   «id …» всплывал бы над пустым местом справа от ника. */
.session-row__account > .mud-tooltip-root {
    align-self: flex-start;
    max-width: 100%;
}

/* Чипы статуса, индикатор завершения и глазик — с переносом: в узкой карточке ряд не вылезает за край. */
.session-row__status {
    grid-area: status;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

/* Тренер, координатор, asid — фактами с переносом (без «·»: при переносе разделитель повис бы в конце строки). */
.session-row__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 16px;
    font-size: 0.875rem;
}

.session-row__fact {
    min-width: 0;
    overflow-wrap: anywhere;
}

.session-row__asid {
    font-size: 0.75rem;
}

/* Кнопки строки: прижаты вправо, на телефоне «Завершить» уходит строкой ниже, а не сжимает аккаунт. */
.session-row__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

@container orion-rows (min-width: 520px) {
    .session-row {
        grid-template-columns: minmax(110px, 0.6fr) minmax(0, 1.4fr) auto;
        grid-template-areas:
            "account status actions"
            "meta    meta   meta";
    }
}

@container orion-rows (min-width: 1080px) {
    .session-row {
        grid-template-columns: minmax(110px, 0.5fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
        grid-template-areas: "account status meta actions";
    }

    /* В одну строку тренер с координатором сверху, asid — под ними (рядом с ником под аккаунтом). */
    .session-row__asid {
        flex-basis: 100%;
    }
}

/* --- Стол (Pages/TableView.razor) ------------------------------------------------------------------------------- */

/* Заголовок — table_id (36 символов) моноширинным: мельче обычного h4 страницы, иначе на ноутбуке он съедает шапку,
   а на телефоне встаёт в четыре строки. Переносится где угодно (orion-break), полностью виден. */
.mud-typography.orion-page-title.table-view__title {
    font-size: clamp(1.25rem, 0.9rem + 1.5vw, 1.75rem);
}

/* Стол целиком в окне по высоте: ширина SVG (900×560) ограничена высотой окна за вычетом шапки консоли и рядов
   страницы (~270px) — бокс hero внизу, самое важное место, не уходит под сгиб. Когда шапка страницы переносится в
   две-три строки (узкое окно), низ стола может немного уйти под сгиб. Не уже 320px: на низком окне лучше прокрутка,
   чем нечитаемый стол. Первая строка — запас для браузеров без dvh. */
.table-view__fit {
    max-width: min(1000px, calc((100vh - 270px) * 900 / 560));
    max-width: min(1000px, calc((100dvh - 270px) * 900 / 560));
    min-width: min(100%, 320px);
    margin-inline: auto;
}

/* --- Столы сессии (Pages/SessionTables.razor) -------------------------------------------------------------------
   auto-fit, а не auto-fill: пустые треки схлопываются, и единственный стол (частый случай в начале сессии)
   растягивается на всю строку, а не занимает половину с пустотой справа. На телефоне плитка во всю ширину
   (min(480px, 100%)). align-items: start — плитки разной высоты не тянутся друг за другом. */
.table-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
    gap: 12px;
    align-items: start;
}

/* --- SVG стола (Components/PokerTable.razor) ---------------------------------------------------------------------
   SVG масштабируется целиком (viewBox 900×560), и в плитке ~450px ник места выходил ~6px. В узком контейнере места,
   ставки, кнопка дилера и пот крупнее: transform на ВНЕШНИХ <g> (анимации хода и победителя — на внутренних
   элементах, не конфликтуют), точки опоры — инлайн в разметке, в единицах viewBox. Место растёт от верха карманных
   карт вниз: верхние места не вылезают за viewBox, а карты hero не наезжают на подпись его ставки. Ставка растёт
   вверх от подписи суммы. ×1.25 — предел, при котором у 9-max соседние места не перекрываются; сумма выигрыша hero
   выходит за низ viewBox на ~3 единицы — отсюда overflow: visible. */
.poker-table {
    container: poker-table / inline-size;
    /* Контейнер inline-size не берёт ширину от содержимого — во flex-ряду схлопнулся бы в 0. */
    width: 100%;
}

/* Плитка столов (SessionTables): единственный стол при auto-fit занимает всю строку, и SVG до 1000px выходил выше окна
   ноутбука (1366×768, 1280×800) — бокс hero уходил под сгиб. Ширина ограничена высотой окна, как на странице стола
   (.table-view__fit), за вычетом шапки консоли, ряда страницы и двух рядов плитки (~280px); несколько столов в ряд
   (~490px) это не задевает. Первая строка — запас для браузеров без dvh. */
.table-tiles .poker-table {
    max-width: calc((100vh - 280px) * 900 / 560);
    max-width: calc((100dvh - 280px) * 900 / 560);
    min-width: min(100%, 320px);
    margin-inline: auto;
}

/* Точка опоры (инлайновый transform-origin) — в координатах viewBox; явно, хотя view-box и так начальное значение. */
.poker-seat,
.poker-pot,
.poker-bet,
.poker-dealer {
    transform-box: view-box;
}

@container poker-table (max-width: 640px) {
    .poker-table__svg {
        overflow: visible;
    }

    .poker-seat,
    .poker-pot {
        transform: scale(1.25);
    }

    .poker-bet,
    .poker-dealer {
        transform: scale(1.2);
    }
}