/* Планировщик и расписания (Pages/Scheduler, SchedulesImport, Components/Scheduler*, ScheduleEditor) — постраничные классы поверх общей системы раскладки (app.css). */

/* --- Журнал (Components/SchedulerJournal.razor): строки P2 поверх .orion-row, кромка — цвет типа факта ------------
   Узко — время и факт, ниже кого касается, причина, окно и сессия; средне (520) — две строки; широко (1080) — одна.
   Каждая строка — своя сетка, поэтому на средней и широкой раскладке колонки заданы rem/fr, а не auto: иначе колонки
   соседних строк разъезжались бы по ширине содержимого. */
.journal-entry {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "ts     fact"
        "who    who"
        "reason reason"
        "window session";
    row-gap: 4px;
}

.journal-entry__ts {
    grid-area: ts;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.journal-entry__fact { grid-area: fact; }
.journal-entry__who { grid-area: who; }
.journal-entry__window { grid-area: window; }

.journal-entry__reason {
    grid-area: reason;
    overflow-wrap: anywhere;
}

.journal-entry__session {
    grid-area: session;
    font-size: 0.75rem;
}

@container orion-rows (min-width: 520px) {
    .journal-entry {
        grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "ts     fact   who"
            "window reason session";
    }
}

@container orion-rows (min-width: 1080px) {
    .journal-entry {
        grid-template-columns: 8rem 13rem minmax(0, 0.9fr) 9.5rem minmax(0, 2fr) minmax(0, 1.1fr);
        grid-template-areas: "ts fact who window reason session";
    }
}

/* Длинный журнал (больше 20 записей) прокручивается своим окном, как прежняя таблица с липкой шапкой: фильтры остаются
   на экране. На телефоне — прокрутка страницей: вложенный скролл на 70vh там мешает больше, чем помогает. */
@media (min-width: 600px) {
    .journal-scroll {
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* --- Планы дня: карта покрытия и дорожки на одной сетке (Components/SchedulerDayPlans.razor) ----------------------
   «Подпись 180px | шкала суток» у карты, у каждой дорожки и у оси: час 12 у них на одной вертикали, и карта тянется на
   всю ширину, а не стоит 716px слева. Узко (< 520px по ширине блока) подпись встаёт над шкалой, подписи часов редеют
   до кратных 6 (и текущего часа), пустые левые ячейки схлопываются. */
.day-plan-chart {
    container: day-plan-chart / inline-size;
    width: 100%;
}

.day-plan-chart__row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
}

.day-plan-chart__label {
    min-width: 0;
}

/* Левая ячейка карты: «пик N» вровень с верхом шкалы. */
.day-plan-chart__row--coverage {
    align-items: stretch;
}

/* Легенда в шапке блока: справа от заголовка, при переносе — строкой под ним. */
.day-plan-chart__legend {
    flex: 1 1 260px;
    text-align: end;
}

/* Колонки карты делят ширину поровну (вместо фиксированных 26px), цифра и подпись часа — по центру колонки. */
.day-plan-coverage {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 148px;
}

.day-plan-coverage__hour {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.day-plan-coverage__hour--now {
    background: var(--mud-palette-action-default-hover);
    border-radius: 3px;
}

/* Цифра над столбиком шире узкой колонки (три знака на телефоне) — пусть выходит за колонку, а не режется. */
.day-plan-coverage__hour > .mud-typography {
    white-space: nowrap;
}

/* Столбик (ширина 100% инлайном из BarStyle) на широком мониторе не разъезжается в плиту: колонка ~60px, столбик ≤ 40. */
.day-plan-coverage__hour > div {
    max-width: 40px;
}

@container day-plan-chart (max-width: 519.98px) {
    .day-plan-chart__row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2px;
    }

    /* «пик N» есть в легенде над картой, у оси левая ячейка пустая — на узком месте они не нужны. */
    .day-plan-chart__label--aside {
        display: none;
    }

    .day-plan-chart__legend {
        text-align: start;
    }

    /* Подпись дорожки одной строкой над ней: «369000015 · 19:00–23:00». */
    .day-plan-chart__account {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 4px;
    }

    .day-plan-chart__times::before {
        content: "· ";
    }

    .day-plan-chart__tick--minor {
        visibility: hidden;
    }
}

/* Таблица планов (P1 860): раскрытие окон плана — отдельная строка таблицы; в карточном режиме пристёгиваем её к
   карточке плана, а раскрытую карточку обводим primary, как раскрытую .orion-row. */
@container orion-table (max-width: 859.98px) {
    .day-plans-table.orion-table > .mud-table-container > table > tbody > tr.day-plan--expanded {
        margin-bottom: 0;
        border-color: var(--mud-palette-primary);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .day-plans-table.orion-table > .mud-table-container > table > tbody > tr.day-plan__details {
        padding: 0;
        border-color: var(--mud-palette-primary);
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .day-plans-table.orion-table > .mud-table-container > table > tbody > tr.day-plan__details > td {
        border-radius: 0 0 var(--mud-default-borderradius) var(--mud-default-borderradius);
    }
}

/* Окна раскрытого плана — строками с переносом вместо вложенной таблицы: на телефоне таблица на 4 колонки скроллилась
   внутри карточки. Времена моноширинно и с секундами — сверка запуска с джиттером. */
.day-plan-windows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.day-plan-window {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
}

.day-plan-window--skipped {
    opacity: 0.5;
}

/* --- Расписания (Components/SchedulerSchedules.razor): строка-кнопка «открыть на правку» поверх .orion-row --------
   Узко — аккаунт с ревизией и «Править», ниже состояние и сводка; средне (520) — две строки; широко (860) — одна.
   Таймзона отдельной колонкой не нужна: она в конце сводки (ScheduleForm.Summary). Редактор раскрывается сразу под
   выбранной строкой (.schedule-editor). */
.schedule-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "account rev     edit"
        "state   state   state"
        "summary summary summary";
    row-gap: 6px;
}

/* Ссылка на аккаунт гасит клик строки (stopPropagation на обёртке) — обёртка по ширине ссылки, а не всей колонки:
   иначе клик по пустому месту рядом с id не открывал бы правку. */
.schedule-row__account {
    grid-area: account;
    justify-self: start;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.schedule-row__rev {
    grid-area: rev;
    white-space: nowrap;
}

.schedule-row__state {
    grid-area: state;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.schedule-row__summary {
    grid-area: summary;
    overflow-wrap: anywhere;
}

/* «Править» — подпись, а не вложенная кнопка: строка сама кнопка. */
.schedule-row__edit {
    grid-area: edit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
}

.schedule-row[aria-disabled="true"] {
    cursor: progress;
}

@container orion-rows (min-width: 520px) {
    .schedule-row {
        grid-template-columns: 9rem minmax(0, 1fr) 5rem auto;
        grid-template-areas:
            "account state   rev     edit"
            "summary summary summary edit";
    }
}

@container orion-rows (min-width: 860px) {
    .schedule-row {
        grid-template-columns: 9rem 13rem minmax(0, 1fr) 5rem auto;
        grid-template-areas: "account state summary rev edit";
    }
}

/* Панель правки под выбранной строкой — той же рамкой primary, что и строка: видно, чьё расписание правится. */
.schedule-editor.mud-paper-outlined {
    border-color: var(--mud-palette-primary);
}

/* --- Конструктор расписания (Components/ScheduleEditor.razor) -------------------------------------------------------
   Хостов два (вкладка «Расписания» и шаг мастера), оба уже окна — поэтому таймзона и разбросы раскладываются по ширине
   самого редактора, а не по брейкпоинтам окна: узко — друг под другом, средне — таймзона строкой, разбросы рядом,
   широко — в одну строку. */
.schedule-editor__basics {
    container: schedule-editor-basics / inline-size;
    width: 100%;
}

.schedule-editor__basics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 16px;
}

@container schedule-editor-basics (min-width: 520px) {
    .schedule-editor__basics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schedule-editor__timezone {
        grid-column: 1 / -1;
    }
}

@container schedule-editor-basics (min-width: 1080px) {
    .schedule-editor__basics-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .schedule-editor__timezone {
        grid-column: auto;
    }
}

/* --- Импорт расписаний (Pages/SchedulesImport.razor) ---------------------------------------------------------------
   Справочник колонок в две колонки (как у импорта SOCKS): имя колонки + «обязательна/опционально» | описание + формат.
   Имя колонки (limit_currency_code) переносится, иначе на телефоне оно одно занимало бы всю ширину. */
.schedule-import__column {
    width: 38%;
}

.schedule-import__column code {
    overflow-wrap: anywhere;
}