/* Телефоны и заявки эмуляторов (Pages/Phones, EmulatorRequests, NewEmulators) — постраничные классы поверх общей системы раскладки (app.css). */

/* --- Списки «Телефонов» (Pages/Phones.razor) -------------------------------------------------------------------------
   Семья «списки документов» (как Documents и «Шаблоны эмуляторов»): id (ссылка + чип + caption), meta (ревизия · схема /
   обновлён · кем), связи (канал, аккаунт), состояние, действия. Своё у вкладок: у фермы — идентичность (LAN IP, MAC,
   serial), у RedHive — рум с шаблоном «создан из» и модель с IMEI. Узко — ярусами; от 640 — две-три строки; от 1080 —
   одна (meta под id). Голова (ссылка + чип), meta и действия — общие части семьи (.orion-row__head/__title/__meta/
   __actions, app.css); здесь только области, своё содержимое (идентичность, связи) и пороги. Предки растянутой ссылки без
   position — иначе её ::after накрыл бы только область. Колонка кнопок — не auto, а с минимумом (8.5rem, как у
   Documents): строки — отдельные сетки, и у архивных «Доудалить» есть не у всех — с auto колонки строк разъезжались бы. */

.phone-row {
    align-items: start;
}

.phone-row__id { grid-area: id; }
.phone-row__meta { grid-area: meta; }

/* Чипы канала и аккаунта: переносятся парой, а не вылезают за карточку. */
.phone-row__links {
    grid-area: links;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

/* Ферма: LAN IP · MAC · serial — три значения в строку с мелкими префиксами вместо шапки колонок; при нехватке места
   значение уходит строкой ниже целиком. */
.phone-row__ident {
    grid-area: ident;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 16px;
    min-width: 0;
    font-size: 0.875rem;
}

.phone-row__key {
    margin-inline-end: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Пояснение значка «неполная идентичность» — видимым текстом (тултипа на касании нет), отдельной строкой ряда. */
.phone-row__ident-problem {
    flex: 1 1 100%;
}

.phone-row__room { grid-area: room; }
.phone-row__model { grid-area: model; }
.phone-row__state { grid-area: state; }

/* «Экран» над «Удалить» одинаковой ширины (.orion-row__actions--stack): столбик уже ряда и не отнимает ширину у id. */
.phone-row__actions { grid-area: actions; }

.phone-row--farm {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "id"
        "meta"
        "ident"
        "links";
}

.phone-row--redhive {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "id    id"
        "meta  meta"
        "room  model"
        "links links"
        "state actions";
}

@container orion-rows (min-width: 640px) {
    .phone-row--farm {
        column-gap: 20px;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-areas:
            "id    meta"
            "ident links";
    }

    .phone-row--redhive {
        column-gap: 20px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(8.5rem, max-content);
        grid-template-areas:
            "id    meta  actions"
            "room  model actions"
            "links state actions";
    }
}

@container orion-rows (min-width: 1080px) {
    .phone-row--farm {
        grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.8fr) minmax(0, 1.2fr);
        grid-template-areas:
            "id   ident links"
            "meta ident links";
    }

    .phone-row--redhive {
        grid-template-columns: minmax(150px, 0.9fr) minmax(130px, 0.9fr) minmax(150px, 1fr) minmax(0, 1.1fr) minmax(130px, 1fr) minmax(8.5rem, max-content);
        grid-template-areas:
            "id   room model links state actions"
            "meta room model links state actions";
    }
}

/* Фильтр: минимум и потолок поля ряда — классом на корне. У MudSelect Class/Style ложатся на внутреннее поле, корень —
   OuterClass; у MudTextField Class — на корне, а Style уходит на внутренний MudInput, поэтому инлайновый max-width
   ограничивал бы только рамку поля, а корень тянулся бы на весь ряд и уносил «Обновить» к правому краю. */
.phones-filter__status {
    --orion-field: 160px;
    max-width: 220px;
}

.phones-filter__query {
    --orion-field: 240px;
    max-width: 360px;
}

/* --- Заявки на эмуляторы (Pages/EmulatorRequests.razor) --------------------------------------------------------------
   Строка заявки (база .orion-row): раскрытие — явной кнопкой у имени, строка не ссылка. Узко — имя, под ним этап/прошло,
   статус/канал парами, кнопки; от 720 — две строки с кнопками справа; от 1080 — одна. Строка-проблема и лента этапов —
   во всю ширину под областями (сеткой не задаются: пустые ряды шаблона оставляли бы зазоры). Колонка кнопок — с
   минимумом по самой широкой кнопке списка («Повторить запись» / «Повторить»), а не auto: у строк разный набор кнопок, и
   с auto колонки отдельных сеток-строк разъезжались бы. */

.emulator-request {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "name    name"
        "stage   elapsed"
        "status  channel"
        "actions actions";
}

.emulator-request--history {
    grid-template-areas:
        "name    name"
        "result  elapsed"
        "channel created"
        "actions actions";
}

/* Кнопка раскрытия слева от имени и подписей, а не над ними. */
.emulator-request__name {
    grid-area: name;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.emulator-request__stage { grid-area: stage; }
.emulator-request__status { grid-area: status; }
.emulator-request__result { grid-area: result; }
.emulator-request__elapsed { grid-area: elapsed; }
.emulator-request__channel { grid-area: channel; }
.emulator-request__created { grid-area: created; }

/* Кнопки — общий .orion-row__actions (app.css): узко рядом справа, от 720 — столбиком (ниже). */
.emulator-request__actions { grid-area: actions; }

.emulator-request__problem {
    grid-column: 1 / -1;
}

@container orion-rows (min-width: 720px) {
    .emulator-request {
        column-gap: 20px;
        grid-template-columns: minmax(160px, 1.4fr) minmax(140px, 1fr) minmax(120px, 1fr) minmax(12rem, max-content);
        grid-template-areas:
            "name stage   status  actions"
            "name elapsed channel actions";
    }

    .emulator-request--history {
        grid-template-columns: minmax(160px, 1.4fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(8.5rem, max-content);
        grid-template-areas:
            "name result  elapsed actions"
            "name created channel actions";
    }

    /* Кнопки — столбиком справа, как было в таблице: «Повторить запись» над «Отменить» (как .orion-row__actions--stack,
       но только от этой ширины). */
    .emulator-request__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@container orion-rows (min-width: 1080px) {
    .emulator-request {
        grid-template-columns: minmax(160px, 1.4fr) minmax(140px, 1fr) minmax(120px, 1fr) minmax(90px, 0.6fr) minmax(100px, 0.8fr) minmax(12rem, max-content);
        grid-template-areas: "name stage status elapsed channel actions";
    }

    .emulator-request--history {
        grid-template-columns: minmax(160px, 1.4fr) minmax(100px, 0.8fr) minmax(90px, 0.6fr) minmax(100px, 0.8fr) minmax(140px, 1fr) minmax(8.5rem, max-content);
        grid-template-areas: "name result elapsed channel created actions";
    }
}

/* --- Создание эмуляторов (Pages/NewEmulators.razor) ------------------------------------------------------------------
   Шаг 3 — «строка формы» на выбранный канал (блок с рамкой + .orion-toolbar): канал, модель с 🎲 и пара селектов
   ручного выбора встают в ряд, когда влезают, и переносятся группами (селекты — парой), а не уезжают за край. */

.emulator-picks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.emulator-pick {
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.emulator-pick__channel {
    flex: 1 1 180px;
}

.emulator-pick__model {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.emulator-pick__manual {
    flex: 2 1 360px;
    min-width: min(360px, 100%);
}

/* Минимумы селектов (OuterClass — внешний div MudSelect, см. .phones-filter__status). */
.emulator-pick__brand {
    --orion-field: 140px;
    max-width: 240px;
}

.emulator-pick__device {
    --orion-field: 200px;
}