/* Парк, инциденты, экономика, статус, главная (Pages/Fleet, Incidents, Economics, Status, Home, Components/TimeRangePicker) — постраничные классы поверх общей системы раскладки (app.css). */

/* --- Шапки и ряды фильтров ---------------------------------------------------------------------------------------- */

/* Пикер периода и ↻ в правой группе шапки (инциденты, экономика) — одной неразрывной группой: на телефоне уходят под
   заголовок вместе. Группа и пикер сжимаются (min-width:0) — режется подпись пикера многоточием, а не ряд. */
.analytics-range {
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
}

.analytics-range > .time-range-picker {
    flex: 0 1 auto;
}

.analytics-range > .mud-icon-button {
    flex: none;
}

/* Поиск справа в ряду фильтров (парк, экономика): обёртка .orion-toolbar__end шириной с поле (--analytics-search),
   поле тянется на всю обёртку; в узком ряду сжимается до 200px или ширины ряда. */
.analytics-search {
    flex: 0 1 var(--analytics-search, 260px);
    min-width: min(200px, 100%);
}

/* Размер страницы под строками парка (вместо MudTablePager): селектору хватает трёх цифр. */
.analytics-page-size {
    width: 104px;
}

/* --- Парк (Pages/Fleet.razor) ---------------------------------------------------------------------------------------
   Строка аккаунта поверх .orion-row. Узко — аккаунт с действиями, ниже вердикт, «должен», «делает» и причина ярусами;
   средне (520) — две строки: аккаунт · должен · делает / вердикт · причина; широко (1080) — одна строка. Ширины колонок —
   фиксированные или fr, не auto: сетка у каждой строки своя, и только так колонки соседних строк совпадают. */

.fleet-row {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 68px;
    grid-template-areas:
        "account actions"
        "verdict verdict"
        "plan    plan"
        "fact    fact"
        "reason  reason";
}

.fleet-row__account { grid-area: account; }
.fleet-row__verdict { grid-area: verdict; }
.fleet-row__plan { grid-area: plan; }
.fleet-row__fact { grid-area: fact; }

.fleet-row__id {
    font-weight: 600;
}

.fleet-row__reason {
    grid-area: reason;
    overflow-wrap: anywhere;
}

/* Две иконки (сессия, журнал) — у правого края; колонка фиксированная, даже когда сессии нет. */
.fleet-row__actions {
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
}

@container orion-rows (min-width: 520px) {
    .fleet-row {
        column-gap: 16px;
        grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) 68px;
        grid-template-areas:
            "account plan   fact   actions"
            "verdict reason reason actions";
    }
}

@container orion-rows (min-width: 1080px) {
    .fleet-row {
        grid-template-columns: minmax(120px, 0.7fr) 150px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.8fr) 68px;
        grid-template-areas: "account verdict plan fact reason actions";
    }
}

/* --- Экономика (Pages/Economics.razor) ------------------------------------------------------------------------------ */

/* Доля плана с полоской не уже 120px — короче полоска не читается. */
.economics-plan {
    min-width: 120px;
}

/* --- Статус (Pages/Status.razor) ------------------------------------------------------------------------------------ */

/* Статус сервиса: иконка и текст рядом, текст переносится (раньше nowrap-строка «не настроен на окружении» распирала
   колонку). */
.status-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* --- Главная (Pages/Home.razor) ------------------------------------------------------------------------------------- */

/* Плитки разделов одной ширины во всех категориях: auto-fill (лишние места остаются пустыми) вместо auto-fit базы — у
   категории из двух разделов плитки не растягиваются на всю строку. */
.home-tiles > .orion-tiles__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

/* Плитка-ссылка на базе .orion-row: иконка слева, название и kind справа. */
.home-tile {
    grid-template-columns: auto minmax(0, 1fr);
}

.home-tile__title {
    font-weight: 500;
}

/* --- Пикер периода (Components/TimeRangePicker.razor) ---------------------------------------------------------------- */

/* Корень и группа кнопок сжимаются: длинная строка часов режется многоточием, а не выталкивает кнопки за край.
   position: relative — якорь выпадашки. */
.time-range-picker {
    position: relative;
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
}

.time-range-picker__buttons {
    min-width: 0;
    max-width: 100%;
}

/* Выпадашка — контейнер своей раскладки: встают ли панели рядом и месяцы календаря в ряд, решает её ширина, а не окна.
   С открытым календарём она шире: два месяца в ряд — 630px. */
.time-range-picker__popover {
    container: time-range-picker / inline-size;
    width: min(580px, calc(100vw - 32px));
}

.time-range-picker__popover--calendar {
    width: min(680px, calc(100vw - 32px));
}

.time-range-picker__panels {
    display: flex;
    flex-wrap: wrap;
}

.time-range-picker__custom {
    flex: 1 1 320px;
    min-width: 0;
}

.time-range-picker__quick {
    flex: 1 0 220px;
    max-height: min(420px, 60vh);
    overflow-y: auto;
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* Календарь — отдельным рядом под обеими панелями. */
.time-range-picker__calendar {
    flex: 1 0 100%;
    min-width: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Двум месяцам в ряд места нет — друг под другом (MudBlazor ставит их в ряд по ширине ОКНА, ≥600px, а не места). */
@container time-range-picker (max-width: 661.98px) {
    .time-range-picker__popover .time-range-picker__calendar .mud-picker-calendar-content {
        grid-template-columns: auto;
        justify-items: center;
    }

    /* Стрелки листания MudBlazor прячет под раскладку в ряд (у левого месяца нет «вперёд», у правого — «назад»);
       в столбик это выглядело бы обрывками — показываем обе у каждого месяца, как сам MudBlazor на узком окне.
       Скрытие на время анимации (.mud-picker-hidden … !important) не трогаем. */
    .time-range-picker__popover .time-range-picker__calendar .mud-picker-calendar-content :is(.mud-picker-nav-button-prev, .mud-picker-nav-button-next) {
        visibility: visible;
    }
}

/* Телефон: быстрый выбор — самое частое действие — первым и в две колонки, разделитель под ним, а не черта слева. */
@container time-range-picker (max-width: 559.98px) {
    .time-range-picker__quick {
        order: -1;
        flex-basis: 100%;
        border-left: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .time-range-picker__presets {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}