/* Документы конфигуратора (Pages/Documents, DocumentView, CreateDocument, Components/RevisionDiff, RefPickers, SocksChannelGpsEditor) — постраничные классы поверх общей системы раскладки (app.css). */

/* --- Список документов kind'а (Pages/Documents.razor) ----------------------------------------------------------------
   Строка .orion-row семьи «списки документов» (Documents, Phones, EmulatorTemplates): области id · meta · links · state ·
   actions. Части строки — общие классы app.css (.orion-row__head / __title / __meta / __meta-line / __actions); здесь только
   области и пороги. Узко — ярусами; от 640px списка — у аккаунтов две строки, у прочих одна; от 1080px — у аккаунтов тоже
   одна. Модификатор — какие области есть у kind'а: --account (стадия и «Запустить»), --bare (нет колонки «кто
   использует»). Колонки — долями, а не auto: строки одного списка — отдельные сетки, и с auto колонки разных строк
   разъезжались бы. Неинтерактивные чипы пропускают клик к растянутой ссылке по правилу app.css. */

.doc-row {
    /* Как у остальной семьи («Телефоны», «Шаблоны эмуляторов»): области прижаты к верху строки. */
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "id"
        "meta"
        "links";
}

.doc-row--bare {
    grid-template-areas:
        "id"
        "meta";
}

.doc-row--account {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "id    actions"
        "meta  meta"
        "links links"
        "state state";
}

/* ID ссылкой (растянута на всю строку) и чип статуса рядом. Без position: иначе ::after ссылки накрыл бы только область. */
.doc-row__id { grid-area: id; }
.doc-row__meta { grid-area: meta; }
.doc-row__links { grid-area: links; }
.doc-row__state { grid-area: state; }
.doc-row__actions { grid-area: actions; }

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

    .doc-row--bare {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        grid-template-areas: "id meta";
    }

    /* Колонка действий не уже 8.5rem: «Запустить» и «запущен» разной ширины, а колонки строк должны совпадать. */
    .doc-row--account {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(8.5rem, max-content);
        grid-template-areas:
            "id    meta  actions"
            "links state actions";
    }
}

@container orion-rows (min-width: 1080px) {
    .doc-row--account {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(8.5rem, max-content);
        grid-template-areas: "id meta links state actions";
    }
}

/* --- Карточка документа (Pages/DocumentView.razor) ------------------------------------------------------------------- */

/* Хлебные крошки: длинный id последним пунктом переносится, а не распирает строку на телефоне. */
.doc-breadcrumbs .mud-breadcrumb-item {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* «Собранный конфиг», манифест $ref: ревизия цели — подписью под kind:id. */
.doc-manifest__rev {
    font-size: 0.75rem;
}

/* История ревизий: MudTimeline в позиции Start держит полосу с точкой 96px — на узкой вкладке это треть телефона, и
   содержимому (кнопки, сравнение, тело) оставалось ~215px. Уже 600px вкладки — полоса 40px: точка Size.Small по центру,
   линия под ней (19px = середина 40 минус половина линии). */
.doc-history {
    container: doc-history / inline-size;
    /* Контейнер inline-size не берёт ширину от содержимого — во flex-родителе схлопнулся бы. */
    width: 100%;
}

@container doc-history (max-width: 599.98px) {
    .doc-timeline.mud-timeline-vertical.mud-timeline-position-start::before {
        left: 19px;
    }

    .doc-timeline.mud-timeline-vertical.mud-timeline-position-start .mud-timeline-item-divider {
        min-width: 40px;
    }

    .doc-timeline.mud-timeline-vertical.mud-timeline-position-start .mud-timeline-item-content {
        max-width: calc(100% - 40px);
    }
}

/* Кнопки ревизии («Тело», «Что изменилось», «С текущей», «Откатить сюда») — одной группой: переносятся строкой ниже вместе. */
.doc-revision__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* --- Сравнение ревизий (Components/RevisionDiff) — адаптивная таблица P1 (.orion-table-cards-640, app.css) ------------ */

/* Табличный режим: колонки 28 / 36 / 36 %. Style="table-layout: fixed" на MudSimpleTable ложился на внешний div и не
   работал — раскладка задаётся здесь, по классу; в карточном режиме таблица — блок, и правило не действует. */
.revision-diff > .mud-table-container > table {
    table-layout: fixed;
}

.revision-diff > .mud-table-container > table > thead > tr > th:nth-child(1) {
    width: 28%;
}

.revision-diff > .mud-table-container > table > thead > tr > th:nth-child(2),
.revision-diff > .mud-table-container > table > thead > tr > th:nth-child(3) {
    width: 36%;
}

@container orion-table (max-width: 639.98px) {
    /* Карточка: путь поля — заголовком, «Было» и «Стало» — рядом (общая сетка auto-fill дала бы третью пустую колонку). */
    .revision-diff.orion-table-cards-640 > .mud-table-container > table > tbody > tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 8px;
    }

    /* Подкраска было/стало — плашкой вокруг значения, а не вплотную к тексту. pre-wrap — обратно: общая карточка ставит
       ячейкам white-space: normal, и пробелы внутри значения (строки JSON) схлопывались бы. */
    .revision-diff.orion-table-cards-640 > .mud-table-container > table > tbody > tr > td.orion-diff-value {
        padding: 4px 6px;
        border-radius: 4px;
        white-space: pre-wrap;
    }
}

/* Правила ниже идут ПОСЛЕ правила 640 выше: та же специфичность, иначе две колонки остались бы и на телефоне. */
@container orion-table (max-width: 479.98px) {
    .revision-diff.orion-table-cards-640 > .mud-table-container > table > tbody > tr {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Значения длинные (JSON): подпись над значением, текст слева — вместо общей раскладки узкой карточки «подпись слева,
       значение справа». */
    .revision-diff.orion-table[class*="orion-table-cards-"] > .mud-table-container > table > tbody > tr > td.orion-diff-value[data-label]:not([data-label=""]):not(.orion-table__wide):not(.orion-table__title) {
        display: block;
        text-align: start !important;
    }

    .revision-diff.orion-table[class*="orion-table-cards-"] > .mud-table-container > table > tbody > tr > td.orion-diff-value[data-label]:not([data-label=""]):not(.orion-table__wide):not(.orion-table__title)::before {
        margin-bottom: 2px;
    }
}