/* Стили загрузчика WASM (до старта MudBlazor) и аварийного баннера Blazor.
   Всё остальное оформление — на MudBlazor. */

h1:focus {
    outline: none;
}

/* Моноширинные текстовые поля для редактирования JSON. */
.mud-monospace .mud-input-slot,
.mud-monospace textarea {
    font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 0.85rem;
}

/* MudPicker (8.x) копирует Style пикера не только на поле ввода, но и на бумагу
   попапа: заданный полю max-width (напр. 170px) обрезал календарь до 4 колонок
   и половину циферблата часов. Инлайн-стиль бумаги перебиваем !important —
   попап всегда своей естественной ширины, поля остаются узкими. */
.mud-picker-popover-paper.mud-picker-paper,
.mud-picker-popover-paper .mud-picker-toolbar {
    max-width: none !important;
}

/* Блок предпросмотра JSON (собранный конфиг). */
.orion-code {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    padding: 1rem;
    overflow: auto;
    max-height: 60vh;
    font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, monospace;
    font-size: 0.85rem;
    white-space: pre;
}

/* Сравнение ревизий (Components/RevisionDiff): длинный JSON вложенного объекта не должен распирать таблицу —
   переносится где угодно, но короткие значения не рвутся посреди слова (break-all рвал и их). */
.orion-diff-path code,
.orion-diff-value {
    font-family: var(--orion-font-mono);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    vertical-align: top;
}

.orion-diff-before {
    background: rgba(244, 67, 54, 0.08);
}

.orion-diff-after {
    background: rgba(76, 175, 80, 0.08);
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ---- Стартовый загрузчик WASM (до старта .NET/MudBlazor) ----
   Тёмный фон под тему приложения (без белой вспышки), логотип, название,
   прогресс-бар реальной загрузки (--blazor-load-percentage) + бегущий блик,
   чтобы на 100% во время инициализации рантайма не выглядел «замёрзшим». */
.app-boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    background: #15161f;
    color: #cfd1e0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.app-boot__logo {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(124, 131, 255, 0.35);
    animation: app-boot-pulse 1.6s ease-in-out infinite;
}

.app-boot__title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
}

.app-boot__track {
    position: relative;
    width: 260px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
}

.app-boot__fill {
    position: absolute;
    inset: 0;
    width: var(--blazor-load-percentage, 0%);
    background: linear-gradient(90deg, #594ae2, #7c83ff);
    border-radius: 999px;
    transition: width 0.2s ease-out;
}

/* Бегущий блик поверх дорожки — постоянная анимация (живой даже на 100%). */
.app-boot__track::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: translateX(-100%);
    animation: app-boot-shimmer 1.3s linear infinite;
}

.app-boot__status {
    font-size: 0.85rem;
    color: #8a8d9f;
}

    .app-boot__status::after {
        content: " " var(--blazor-load-percentage-text, "");
    }

@keyframes app-boot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.94); }
}

@keyframes app-boot-shimmer {
    100% { transform: translateX(100%); }
}

/* Таблицы на узком экране (MudTable с Breakpoint.Sm — так у всех таблиц консоли): MudBlazor рисует строку
   карточкой, а ячейку — flex-строкой «подпись · значение». Каждый ребёнок ячейки становится отдельной колонкой, и
   двухстрочное значение (id и под ним гео, рум и под ним шаблон) вставало В РЯД, налезая друг на друга. Сетка:
   подпись слева на всю высоту, части значения — друг под другом справа; длинное значение переносится, а не вылезает
   за карточку. */
@media (max-width: 960px) {
    .mud-sm-table .mud-table-cell {
        display: grid;
        grid-template-columns: fit-content(45%) minmax(0, 1fr);
        align-items: center;
        /* На ячейке, а не на детях: голый текст значения (анонимный элемент сетки) тоже уходит вправо. */
        justify-items: end;
        text-align: end !important;
        column-gap: 16px;
        /* Голый текст (email «Кем», имя пода тренера) — анонимный элемент сетки, правило для детей его не берёт. */
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .mud-sm-table .mud-table-cell::before {
        grid-column: 1;
        grid-row: 1 / span 8;
        justify-self: start;
        text-align: start;
        padding-right: 0;
        padding-inline-end: 0;
    }

    .mud-sm-table .mud-table-cell > * {
        grid-column: 2;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/* Строка быстрого выбора в пикере периода (Components/TimeRangePicker.razor). */
.orion-quick-range:hover {
    background: var(--mud-palette-action-default-hover);
}

/* ===================================================================================================================
   Общая система раскладки страниц. Принцип: раскладка считается от ширины КОЛОНКИ, а не окна (container queries) —
   колонка зависит и от сетки страницы, и от открытого меню, и от [WidePage]. Данные не прячем: на узком месте они
   встают ярусами, а не обрезаются и не уезжают за край. Классы страниц (css/areas/*.css) задают только свою сетку
   областей поверх этой базы.
   =================================================================================================================== */

:root {
    --orion-font-mono: 'Roboto Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --orion-row-pad: 10px 12px 10px 16px;
}

/* --- Утилиты текста ------------------------------------------------------------------------------------------------ */

.orion-mono {
    font-family: var(--orion-font-mono);
}

/* Вторичный длинный id в строке (asid, IMEI, room_package): одна строка с многоточием, полный — в title. */
.orion-ellipsis {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Главный id страницы/карточки, URL, email, тексты ошибок: переносится где угодно, но не распирает раскладку. */
.orion-break {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Вместо инлайнового white-space: nowrap — карточный режим таблиц может его перебить, инлайн — нет. */
.orion-nowrap {
    white-space: nowrap;
}

/* MudChip с длинным текстом (сводка расписания, статус RedHive, клубы): переносится вместо вылезания за карточку. */
.mud-chip.orion-chip-wrap {
    height: auto;
    min-height: 24px;
    padding-block: 2px;
    white-space: normal;
}

.mud-chip.orion-chip-wrap > .mud-chip-content {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
}

/* Пара «шеврон + чип» в полосах шагов: при переносе ряда шеврон не отрывается от своего чипа. */
.orion-step {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Две строки в одной ячейке/области: основное и caption под ним (рум · шаблон, модель · IMEI). */
.orion-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Вводные абзацы и MudAlert на широких страницах ([WidePage]): строка текста не длиннее ~100 символов. */
.orion-prose {
    max-width: 100ch;
}

/* --- Структура страницы -------------------------------------------------------------------------------------------- */

/* Шапка страницы, ряд фильтров, ряд кнопок. MudSpacer в переносящемся ряду не годится: при переносе он остаётся в
   первой строке, и правая группа уходит вниз прижатой ВЛЕВО — вместо него .orion-toolbar__end. */
.orion-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.orion-toolbar > .mud-typography {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Правая группа ряда: прижата вправо, при переносе уходит строкой ниже целиком и остаётся справа. */
.orion-toolbar__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-inline-start: auto;
}

/* Растягиваемый элемент ряда: подсказка, причина блокировки, пикер периода. */
.orion-toolbar__grow {
    flex: 1 1 220px;
    min-width: 0;
}

/* h4 страницы: на телефоне мельче, длинный id (kind:id, table_id) переносится, а не распирает шапку. */
.mud-typography.orion-page-title {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: clamp(1.5rem, 1rem + 2.5vw, 2.125rem);
}

/* Поле в ряду с переносом: тянется от своего минимума (--orion-field, по умолчанию 240px), но не шире ряда.
   Минимум и верхний предел — классом (свой класс с --orion-field и max-width), НЕ инлайновым Style: у MudTextField,
   MudNumericField, пикеров Style уходит на внутренний input, а корень тянется на весь ряд. У MudSelect и Class — на
   внутренний MudInputControl, на корень — OuterClass. */
.orion-field {
    flex: 1 1 var(--orion-field, 240px);
    min-width: min(var(--orion-field, 240px), 100%);
}

/* Вкладки разделов (с MinimumTabWidth="0", PanelClass="pa-2 pa-sm-4"): на телефоне — только текст, без иконок,
   чтобы вкладки помещались и не требовали стрелок. */
@media (max-width: 600px) {
    .orion-tabs .mud-tab .mud-tab-icon-text {
        display: none;
    }
}

/* Прокручиваемая панель-список рядом с основным (аккаунты записей, кадры сцены): на телефоне не съедает экран —
   то, что под ней, должно быть видно. */
.orion-scroll-pane {
    max-height: 72vh;
    overflow: auto;
}

.orion-scroll-pane--short {
    max-height: 40vh;
}

@media (max-width: 960px) {
    .orion-scroll-pane {
        max-height: 45vh;
    }

    .orion-scroll-pane--short {
        max-height: 30vh;
    }
}

/* --- Цветная кромка слева ------------------------------------------------------------------------------------------
   Один язык на всю консоль: error — провал или идёт запись; warning — внимание (завершение, блок, недобор);
   info — переходное (запуск, сворачивание); success — штатно. Выбранная/раскрытая строка — рамка primary, не кромка. */

.orion-accent--error { --orion-accent: var(--mud-palette-error); }
.orion-accent--warning { --orion-accent: var(--mud-palette-warning); }
.orion-accent--info { --orion-accent: var(--mud-palette-info); }
.orion-accent--success { --orion-accent: var(--mud-palette-success); }

[class*="orion-accent--"]:not(tr) {
    box-shadow: inset 3px 0 0 var(--orion-accent);
}

/* В табличном режиме у tr тени нет — кромку рисует первая ячейка. */
tr[class*="orion-accent--"] > td:first-child {
    box-shadow: inset 3px 0 0 var(--orion-accent);
}

/* --- Строки-карточки (P2): главные списки страниц ------------------------------------------------------------------
   <div class="orion-rows"> со строками <a class="orion-row …"> (переход без вложенных кнопок — вся строка ссылка) или
   <div class="orion-row …"> с растянутой ссылкой .orion-row__link на главном id (в строке есть кнопки/меню). Страница
   задаёт только grid-template-columns/areas и @container orion-rows (min-width: …) по шкале: средне 520|640|720,
   широко 860|1080|1200. */

.orion-rows {
    container: orion-rows / inline-size;
    /* Контейнер inline-size не берёт ширину от содержимого — в flex-ряду схлопнулся бы. */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.orion-row {
    position: relative;
    display: grid;
    align-items: center;
    gap: 8px 12px;
    padding: var(--orion-row-pad);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.orion-row > * {
    min-width: 0;
}

a.orion-row:hover,
.orion-row:has(.orion-row__link):hover,
.orion-row[role="button"]:hover {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
}

a.orion-row:focus-visible,
.orion-row[role="button"]:focus-visible,
.orion-row:has(.orion-row__link:focus-visible) {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.orion-row[role="button"] {
    cursor: pointer;
}

/* --hover: подсветка некликабельной строки под курсором (живые списки с кнопками) — только фон, без рамки primary,
   чтобы не выглядеть ссылкой. Раскрытую не подсвечиваем: её выделяет рамка. */
.orion-row--hover:not(.orion-row--expanded):hover {
    background: var(--mud-palette-action-default-hover);
}

/* Растянутая ссылка: клик (и средний клик, и Ctrl) по любому месту строки — переход; фокус клавиатуры один. Ссылка не
   должна лежать внутри позиционированного предка, иначе ::after накроет только его. */
.orion-row__link {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.orion-row__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* Интерактивное в строке — над растянутой ссылкой. */
.orion-row :is(a, button, input, select, textarea, label, .mud-button-root, .mud-chip.mud-clickable, .mud-tooltip-root, .mud-menu, .mud-input-control, .mud-checkbox, .mud-switch):not(.orion-row__link):not(:has(.orion-row__link)) {
    position: relative;
    z-index: 1;
}

/* Неинтерактивный чип (статус, стадия, «свободен»): у MudBlazor .mud-chip позиционирован и, идя в DOM после ссылки,
   лёг бы поверх её ::after и глотал клик. Пропускаем клик сквозь него; чип-ссылка (<a>) и кликабельный подняты выше. */
.orion-row:has(.orion-row__link) .mud-chip:not(.mud-clickable):not(a) {
    position: static;
}

/* Части строки, общие у «семьи списков документов» (документы, телефоны, шаблоны эмуляторов) — чтобы три страницы
   выглядели одинаково. Область (grid-area) страница задаёт сама. */
.orion-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.orion-row__title {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

/* «ревизия · схема» / «обновлён · кем»: мелко и вторично; автор, не влезший рядом с датой, уходит строкой ниже. */
.orion-row__meta {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.orion-row__meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
}

.orion-row__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 6px 8px;
}

/* Кнопки столбиком одной ширины — когда их несколько, а строка широкая. */
.orion-row__actions--stack {
    flex-direction: column;
    align-items: stretch;
}

.orion-row--selected,
.orion-row--expanded {
    border-color: var(--mud-palette-primary);
}

/* Раскрытая панель строки (детали сессии, этапы заявки): на всю ширину карточки. */
.orion-row__details {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 12px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background);
}

/* Микроподпись над значением в областях без шапки таблицы («план», «факт»); годится и вне строки (подпись поля формы). */
.orion-row__label {
    display: block;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* --- Адаптивная таблица (P1): служебные таблицы ----------------------------------------------------------------------
   <MudTable/MudSimpleTable Class="orion-table orion-table-cards-860" Breakpoint="Breakpoint.None">. Уже порога таблица
   становится карточками: поля лежат сеткой, подпись (DataLabel → data-label) мелко над значением; уже 480px — подпись
   слева, значение справа. Ячейка без подписи (кнопки) — во всю ширину справа; .orion-table__title — заголовок
   карточки, .orion-table__wide — поле на всю ширину. Порог = реальная ширина таблицы: 640 | 860 | 1080.
   Breakpoint.None обязателен: оконный карточный режим MudBlazor (.mud-sm-table, ≤960px) спорил бы с container query.
   У MudSimpleTable data-label на <td> ставится руками. Селекторы — прямыми потомками: таблицы, вложенные в раскрытую
   строку, сами по себе. */

.orion-table {
    container: orion-table / inline-size;
}

/* «Бумага» таблицы — на .mud-table-container, а не на корне: корень — контейнер запроса, сам себя он перекрасить по
   своей ширине не может, и в карточном режиме карточки лежали бы в ещё одной карточке с тенью. Пагинация и сортировка
   (на корне) остаются на фоне страницы. */
.mud-table.orion-table {
    background: transparent;
    box-shadow: none;
}

.orion-table > .mud-table-container {
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-1);
}

/* Пейджер (на прозрачном корне) не рисует свою линию сразу под краем бумаги. */
.mud-table.orion-table .mud-table-pagination-toolbar {
    border-top: none;
}

/* Индикатор Loading у MudTable живёт в <thead>, а в карточном режиме thead скрыт — у адаптивных таблиц вместо
   Loading ставится MudProgressLinear над таблицей. */

/* Три блока ниже одинаковы, кроме порога (640 / 860 / 1080): container query не берёт порог из переменной.
   Правишь один — правь все три. */

@container orion-table (max-width: 639.98px) {
    .orion-table.orion-table-cards-640 > .mud-table-container {
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    /* NoRecordsContent/LoadingContent MudTable кладёт в <tr><th colspan> внутри tbody. */
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tbody > tr > th[colspan],
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tr > th[colspan] {
        display: block;
        grid-column: 1 / -1;
        padding: 0;
        border: none;
        text-align: start;
    }

    .orion-table.orion-table-cards-640 > .mud-table-container > table,
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tbody {
        display: block;
    }

    .orion-table.orion-table-cards-640 > .mud-table-container > table > thead,
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tfoot {
        display: none;
    }

    .orion-table.orion-table-cards-640 > .mud-table-container > table > tbody > tr,
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tr {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        align-items: start;
        gap: 8px 16px;
        padding: var(--orion-row-pad);
        margin-bottom: 8px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--mud-default-borderradius);
        background: var(--mud-palette-surface);
    }

    .orion-table.orion-table-cards-640 > .mud-table-container > table > tbody > tr[class*="orion-accent--"],
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tr[class*="orion-accent--"] {
        box-shadow: inset 3px 0 0 var(--orion-accent);
    }

    .orion-table.orion-table-cards-640 > .mud-table-container > table > tbody > tr > td,
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tr > td {
        display: block;
        height: auto;
        min-width: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        text-align: start !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .orion-table.orion-table-cards-640 > .mud-table-container > table > tbody > tr > td[data-label]:not([data-label=""])::before,
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tr > td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.4;
        color: var(--mud-palette-text-secondary);
    }

    .orion-table.orion-table-cards-640 > .mud-table-container > table > tbody > tr > td:is(:not([data-label]), [data-label=""], [colspan], .orion-table__wide, .orion-table__title),
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tr > td:is(:not([data-label]), [data-label=""], [colspan], .orion-table__wide, .orion-table__title) {
        grid-column: 1 / -1;
    }

    /* Ячейка без подписи — действия: к правому краю карточки. */
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tbody > tr > td:is(:not([data-label]), [data-label=""]):not([colspan]):not(.orion-table__title):not(.orion-table__wide),
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tr > td:is(:not([data-label]), [data-label=""]):not([colspan]):not(.orion-table__title):not(.orion-table__wide) {
        justify-self: end;
    }

    .orion-table.orion-table-cards-640 > .mud-table-container > table > tbody > tr > td.orion-table__title,
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tr > td.orion-table__title {
        order: -1;
        font-weight: 500;
    }

    .orion-table.orion-table-cards-640 > .mud-table-container > table > tbody > tr > td.orion-table__title::before,
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tr > td.orion-table__title::before,
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tbody > tr > td[colspan]::before,
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tr > td[colspan]::before {
        display: none !important;
    }

    .orion-table.orion-table-cards-640 > .mud-table-container > table > tbody > tr > td:empty,
    .orion-table.orion-table-cards-640 > .mud-table-container > table > tr > td:empty {
        display: none;
    }

    /* Сортировка таблицы (SortLabel) без шапки — селектором над карточками. */
    .orion-table.orion-table-cards-640 > .mud-table-smalldevices-sortselect {
        display: block;
        max-width: 280px;
        padding: 0 0 8px;
    }
}

@container orion-table (max-width: 859.98px) {
    .orion-table.orion-table-cards-860 > .mud-table-container {
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    /* NoRecordsContent/LoadingContent MudTable кладёт в <tr><th colspan> внутри tbody. */
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tbody > tr > th[colspan],
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tr > th[colspan] {
        display: block;
        grid-column: 1 / -1;
        padding: 0;
        border: none;
        text-align: start;
    }

    .orion-table.orion-table-cards-860 > .mud-table-container > table,
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tbody {
        display: block;
    }

    .orion-table.orion-table-cards-860 > .mud-table-container > table > thead,
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tfoot {
        display: none;
    }

    .orion-table.orion-table-cards-860 > .mud-table-container > table > tbody > tr,
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tr {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        align-items: start;
        gap: 8px 16px;
        padding: var(--orion-row-pad);
        margin-bottom: 8px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--mud-default-borderradius);
        background: var(--mud-palette-surface);
    }

    .orion-table.orion-table-cards-860 > .mud-table-container > table > tbody > tr[class*="orion-accent--"],
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tr[class*="orion-accent--"] {
        box-shadow: inset 3px 0 0 var(--orion-accent);
    }

    .orion-table.orion-table-cards-860 > .mud-table-container > table > tbody > tr > td,
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tr > td {
        display: block;
        height: auto;
        min-width: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        text-align: start !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .orion-table.orion-table-cards-860 > .mud-table-container > table > tbody > tr > td[data-label]:not([data-label=""])::before,
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tr > td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.4;
        color: var(--mud-palette-text-secondary);
    }

    .orion-table.orion-table-cards-860 > .mud-table-container > table > tbody > tr > td:is(:not([data-label]), [data-label=""], [colspan], .orion-table__wide, .orion-table__title),
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tr > td:is(:not([data-label]), [data-label=""], [colspan], .orion-table__wide, .orion-table__title) {
        grid-column: 1 / -1;
    }

    /* Ячейка без подписи — действия: к правому краю карточки. */
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tbody > tr > td:is(:not([data-label]), [data-label=""]):not([colspan]):not(.orion-table__title):not(.orion-table__wide),
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tr > td:is(:not([data-label]), [data-label=""]):not([colspan]):not(.orion-table__title):not(.orion-table__wide) {
        justify-self: end;
    }

    .orion-table.orion-table-cards-860 > .mud-table-container > table > tbody > tr > td.orion-table__title,
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tr > td.orion-table__title {
        order: -1;
        font-weight: 500;
    }

    .orion-table.orion-table-cards-860 > .mud-table-container > table > tbody > tr > td.orion-table__title::before,
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tr > td.orion-table__title::before,
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tbody > tr > td[colspan]::before,
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tr > td[colspan]::before {
        display: none !important;
    }

    .orion-table.orion-table-cards-860 > .mud-table-container > table > tbody > tr > td:empty,
    .orion-table.orion-table-cards-860 > .mud-table-container > table > tr > td:empty {
        display: none;
    }

    /* Сортировка таблицы (SortLabel) без шапки — селектором над карточками. */
    .orion-table.orion-table-cards-860 > .mud-table-smalldevices-sortselect {
        display: block;
        max-width: 280px;
        padding: 0 0 8px;
    }
}

@container orion-table (max-width: 1079.98px) {
    .orion-table.orion-table-cards-1080 > .mud-table-container {
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    /* NoRecordsContent/LoadingContent MudTable кладёт в <tr><th colspan> внутри tbody. */
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tbody > tr > th[colspan],
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tr > th[colspan] {
        display: block;
        grid-column: 1 / -1;
        padding: 0;
        border: none;
        text-align: start;
    }

    .orion-table.orion-table-cards-1080 > .mud-table-container > table,
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tbody {
        display: block;
    }

    .orion-table.orion-table-cards-1080 > .mud-table-container > table > thead,
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tfoot {
        display: none;
    }

    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tbody > tr,
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tr {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        align-items: start;
        gap: 8px 16px;
        padding: var(--orion-row-pad);
        margin-bottom: 8px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--mud-default-borderradius);
        background: var(--mud-palette-surface);
    }

    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tbody > tr[class*="orion-accent--"],
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tr[class*="orion-accent--"] {
        box-shadow: inset 3px 0 0 var(--orion-accent);
    }

    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tbody > tr > td,
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tr > td {
        display: block;
        height: auto;
        min-width: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        text-align: start !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tbody > tr > td[data-label]:not([data-label=""])::before,
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tr > td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.4;
        color: var(--mud-palette-text-secondary);
    }

    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tbody > tr > td:is(:not([data-label]), [data-label=""], [colspan], .orion-table__wide, .orion-table__title),
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tr > td:is(:not([data-label]), [data-label=""], [colspan], .orion-table__wide, .orion-table__title) {
        grid-column: 1 / -1;
    }

    /* Ячейка без подписи — действия: к правому краю карточки. */
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tbody > tr > td:is(:not([data-label]), [data-label=""]):not([colspan]):not(.orion-table__title):not(.orion-table__wide),
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tr > td:is(:not([data-label]), [data-label=""]):not([colspan]):not(.orion-table__title):not(.orion-table__wide) {
        justify-self: end;
    }

    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tbody > tr > td.orion-table__title,
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tr > td.orion-table__title {
        order: -1;
        font-weight: 500;
    }

    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tbody > tr > td.orion-table__title::before,
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tr > td.orion-table__title::before,
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tbody > tr > td[colspan]::before,
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tr > td[colspan]::before {
        display: none !important;
    }

    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tbody > tr > td:empty,
    .orion-table.orion-table-cards-1080 > .mud-table-container > table > tr > td:empty {
        display: none;
    }

    /* Сортировка таблицы (SortLabel) без шапки — селектором над карточками. */
    .orion-table.orion-table-cards-1080 > .mud-table-smalldevices-sortselect {
        display: block;
        max-width: 280px;
        padding: 0 0 8px;
    }
}

@container orion-table (max-width: 479.98px) {
    .orion-table[class*="orion-table-cards-"] > .mud-table-container > table > tbody > tr,
    .orion-table[class*="orion-table-cards-"] > .mud-table-container > table > tr {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .orion-table[class*="orion-table-cards-"] > .mud-table-container > table > tbody > tr > td[data-label]:not([data-label=""]):not(.orion-table__wide):not(.orion-table__title),
    .orion-table[class*="orion-table-cards-"] > .mud-table-container > table > tr > td[data-label]:not([data-label=""]):not(.orion-table__wide):not(.orion-table__title) {
        display: grid;
        grid-template-columns: fit-content(45%) minmax(0, 1fr);
        align-items: center;
        justify-items: end;
        column-gap: 16px;
        text-align: end !important;
    }

    .orion-table[class*="orion-table-cards-"] > .mud-table-container > table > tbody > tr > td[data-label]:not([data-label=""]):not(.orion-table__wide):not(.orion-table__title)::before,
    .orion-table[class*="orion-table-cards-"] > .mud-table-container > table > tr > td[data-label]:not([data-label=""]):not(.orion-table__wide):not(.orion-table__title)::before {
        grid-column: 1;
        grid-row: 1 / span 8;
        justify-self: start;
        margin: 0;
        text-align: start;
    }

    .orion-table[class*="orion-table-cards-"] > .mud-table-container > table > tbody > tr > td[data-label]:not([data-label=""]):not(.orion-table__wide):not(.orion-table__title) > *,
    .orion-table[class*="orion-table-cards-"] > .mud-table-container > table > tr > td[data-label]:not([data-label=""]):not(.orion-table__wide):not(.orion-table__title) > * {
        grid-column: 2;
        max-width: 100%;
    }
}

/* --- Пары «ключ — значение» ----------------------------------------------------------------------------------------
   <dl class="orion-kv"><dt>…</dt><dd>…</dd>…</dl>: от 400px — подпись слева, значение справа; уже — подпись над
   значением. */

.orion-kv {
    container: orion-kv / inline-size;
    display: grid;
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    align-items: baseline;
    gap: 6px 16px;
    width: 100%;
    margin: 0;
}

.orion-kv > dt {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.orion-kv > dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

@container orion-kv (max-width: 399.98px) {
    .orion-kv > dt,
    .orion-kv > dd {
        grid-column: 1 / -1;
    }

    .orion-kv > dt {
        margin-top: 4px;
        font-size: 0.75rem;
    }
}

/* --- Лента событий -------------------------------------------------------------------------------------------------
   <div class="orion-feed"> > .orion-feed__item с __time, __marker, __text, __tag (любые можно опустить). Узко — маркер,
   время и метка первой строкой, текст второй; от 480px — одной строкой. Пункт-ссылка/кнопка подсвечивается. */

.orion-feed {
    container: orion-feed / inline-size;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.orion-feed__item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "marker time .    tag"
        "text   text text text";
    align-items: center;
    gap: 2px 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: inherit;
    text-decoration: none;
}

.orion-feed__item:last-child {
    border-bottom: none;
}

a.orion-feed__item:hover,
.orion-feed__item[role="button"]:hover {
    background: var(--mud-palette-action-default-hover);
    cursor: pointer;
}

/* --hover: подсвечивать и некликабельные пункты (внутри которых своя ссылка) — глазу проще держать строку. */
.orion-feed--hover > .orion-feed__item:hover {
    background: var(--mud-palette-action-default-hover);
}

a.orion-feed__item:focus-visible,
.orion-feed__item[role="button"]:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.orion-feed__time {
    grid-area: time;
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.orion-feed__marker {
    grid-area: marker;
    display: inline-flex;
    align-items: center;
}

.orion-feed__text {
    grid-area: text;
    min-width: 0;
    overflow-wrap: anywhere;
}

.orion-feed__tag {
    grid-area: tag;
    justify-self: end;
}

@container orion-feed (min-width: 480px) {
    .orion-feed__item {
        grid-template-columns: 110px auto minmax(0, 1fr) auto;
        grid-template-areas: "time marker text tag";
    }
}

/* --- Плитки --------------------------------------------------------------------------------------------------------
   <div class="orion-tiles"><div class="orion-tiles__grid">плитки</div></div>: сколько влезет по --orion-tile-min
   (220px). --quad — для четырёх сводок: 2 колонки, от 640px — 4 (без раскладки 3+1). */

.orion-tiles {
    container: orion-tiles / inline-size;
    width: 100%;
}

.orion-tiles__grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--orion-tile-min, 220px), 100%), 1fr));
}

.orion-tiles--quad > .orion-tiles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container orion-tiles (min-width: 640px) {
    .orion-tiles--quad > .orion-tiles__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Экран эмулятора RedHive (Pages/EmulatorScreen.razor, Layout/ScreenLayout.razor): вкладка целиком под картинку —
   полоса управления сверху, видео на всё остальное с сохранением пропорций. touch-action: none — жесты пальцем по
   видео уходят в эмулятор, а не прокручивают страницу. */
.emulator-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* На телефоне 100vh — высота окна БЕЗ панелей браузера (Safari: адресная строка снизу), и низ экрана эмулятора
       уходил под неё; dvh — видимая высота сейчас. */
    height: 100dvh;
    background: var(--mud-palette-background);
}

.emulator-screen__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Сцена и (по кнопке «Буфер обмена») панель справа. */
.emulator-screen__main {
    display: flex;
    flex: 1;
    min-height: 0;
}

.emulator-screen__stage {
    position: relative;
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Поле — место контуру картинки: у края окна его бы обрезало. Размер сцены — для cqw/cqh у картинки. */
    padding: 6px;
    container-type: size;
    background: #000;
}

.emulator-screen__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    touch-action: none;
    outline: none;
    /* Долгое нажатие пальцем — касание эмулятора, а не меню «Сохранить видео» и не выделение (iOS). */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/*
 * Кадр пришёл (пропорции ставит emulator-screen.js): элемент ровно по картинке, «contain» руками, и контур идёт по краю
 * экрана телефона. Контур — тенью, не border: прямоугольник элемента не меняется, а от него клиент RedHive считает касания.
 */
.emulator-screen__video--framed {
    width: min(100cqw, 100cqh * var(--emulator-aspect));
    height: auto;
    aspect-ratio: var(--emulator-aspect);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.emulator-screen__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

.emulator-screen__overlay .mud-button-root {
    pointer-events: auto;
}

/* Панель «Буфер обмена» экрана эмулятора: отправка текста и журнал буфера эмулятора. */
.emulator-screen__side {
    width: 360px;
    max-width: 45vw;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 8px 12px 16px;
    border-left: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

/* Телефон: панели справа места нет (45vw — полоска в пару слов) — она уходит под экран. */
@media (max-width: 600px) {
    .emulator-screen__main {
        flex-direction: column;
    }

    .emulator-screen__side {
        width: auto;
        max-width: none;
        max-height: 45%;
        border-left: none;
        border-top: 1px solid var(--mud-palette-lines-default);
    }
}

.emulator-clip__head,
.emulator-clip__actions,
.emulator-clip__entry-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.emulator-clip__actions {
    margin: 6px 0;
    flex-wrap: wrap;
}

.emulator-clip__entry {
    margin-top: 8px;
    padding: 4px 8px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* Текст буфера целиком: моноширинно, с переносами, выделяется мышью (Ctrl/⌘+C по выделению здесь копирует браузер). */
.emulator-clip__text {
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: text;
}