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

h1:focus {
    outline: none;
}

#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%); }
}

/* ---- «Ферма»: диаграмма «аккаунты × время» (Farm/FarmDiagram.razor) ----
   Строка — подпись слева и дорожка времени справа; всё внутри дорожки — в процентах окна.
   Высота строки — FarmDiagram.RowHeight: Virtualize считает по ней прокрутку. */
.farm {
    /* Подпись — не уже 190 px и не уже самого длинного id снимка (U-42): --farm-id-chars ставит FarmDiagram, знак
       моноширинного шрифта — 0,6 em, 24 px — отступ и значок нарушений; не влезает — режется город, а не id. */
    --farm-label: max(190px, calc(var(--farm-id-chars, 0) * 0.6em + 24px));
    font-size: 0.75rem;
}

.farm-line {
    display: flex;
    align-items: stretch;
}

.farm-label {
    flex: 0 0 var(--farm-label);
    padding-right: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.farm-track {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.farm-line--axis {
    height: 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.farm-tick {
    position: absolute;
    top: 2px;
    padding-left: 3px;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    border-left: 1px solid var(--mud-palette-lines-default);
}

.farm-tick--major {
    color: var(--mud-palette-text-primary);
    border-left-color: var(--mud-palette-text-secondary);
}

.farm-line--hist {
    height: 36px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.farm-line--hist .farm-label {
    display: flex;
    align-items: flex-end;
}

.farm-bar {
    position: absolute;
    bottom: 0;
    min-width: 1px;
    background: var(--mud-palette-secondary);
    opacity: 0.8;
}

.farm-rows {
    overflow-y: auto;
    overflow-x: hidden;
}

.farm-row {
    height: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.farm-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.farm-account {
    display: flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.farm-account:hover .farm-account__id {
    text-decoration: underline;
}

.farm-account__id {
    flex: 0 0 auto;
    font-family: 'Roboto Mono', Consolas, monospace;
}

.farm-account__city {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* «С даты» (U-42): дата dd.MM.yyyy и значок календаря — без обрезки. */
.farm-from { max-width: 190px; }

/* Подпись аккаунта в три строки — только на узком экране (U-43). */
.farm-account__short, .farm-account__place, .farm-account__since { display: none; }

/* Узкий экран (U-43 («Ферма» на узком экране), замечание владельца 2026-10-04): уже 600 px (sm MudBlazor) подпись — узкая
   колонка в три строки («weekend-warrior-001», «RU · Москва», «с 30.10»), иначе id роста съедает всю ширину и дорожке
   времени места не остаётся. Высота строки — 46 px: Virtualize берёт высоту из отрисованных строк, RowHeight — оценка. */
@media (max-width: 599.98px) {
    .farm { --farm-label: 150px; } /* «weekend-warrior-001»: 19 знаков по 0,6 em + отступ */
    .farm-row { height: 46px; }
    .farm-account { position: relative; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; line-height: 14px; }
    .farm-account__id, .farm-account__city { display: none; }
    .farm-account__short, .farm-account__place, .farm-account__since { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .farm-account__short { font-family: 'Roboto Mono', Consolas, monospace; }
    .farm-account:hover .farm-account__short { text-decoration: underline; }
    .farm-account__violations { position: absolute; top: 2px; right: 8px; }
}

/* Заголовок шапки — в строку; на очень узком окне (U-43) — только значок: в 330 px заголовок, «Локально» и профиль шире окна. */
.app-title { white-space: nowrap; }
@media (max-width: 399.98px) {
    .app-title { display: none; }
}

/* Кнопка профиля в шапке на узком окне (U-43) — только значок: подпись «имя · роли» была шире окна в 330 px. */
@media (max-width: 599.98px) {
    .profile-button .profile-button__label { display: none; }
    .profile-button .mud-button-icon-start { margin: 0; }
}

/* Метки оси — внутри дорожки (U-43): подпись последней метки на узком экране вылезала за край страницы. */
.farm-line--axis .farm-track { overflow: hidden; }

/* Календарь на очень узком экране (U-43): MudBlazor держит его 310 px и ставит по центру поля — на 330 px он вылезал за
   правый край; 280 px вмещают семь дней по 36 px и встают под полем. */
@media (max-width: 399.98px) {
    .mud-picker-popover, .mud-picker-popover .mud-picker-inline-paper, .mud-picker-popover .mud-picker-paper,
    .mud-picker-popover .mud-picker-container, .mud-picker-popover .mud-picker-content, .mud-picker-popover .mud-picker-calendar-content {
        min-width: 0;
        max-width: 280px;
    }

    /* Сетку дней держит контейнер календаря (310 px): день — 36 px и по 2 px с боков, семь дней — 280. */
    .mud-picker-popover .mud-picker-calendar-container { width: 280px; }
}

.farm-stage {
    position: absolute;
    top: 0;
    bottom: 0;
}

.farm-stage--onboarding { background: rgba(38, 198, 218, 0.16); }
.farm-stage--reserve { background: rgba(102, 187, 106, 0.14); }
.farm-stage--operation { background: rgba(124, 131, 255, 0.07); }
.farm-stage--cooling { background: rgba(255, 167, 38, 0.13); }
.farm-stage--retired { background: rgba(158, 158, 158, 0.16); }

.farm-grid {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--mud-palette-lines-default);
}

.farm-session {
    position: absolute;
    top: 5px;
    bottom: 5px;
    min-width: 2px;
    border-radius: 2px;
    background: var(--mud-palette-primary);
}

.farm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.farm-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.farm-legend__swatch {
    position: static;
    display: inline-block;
    width: 18px;
    height: 10px;
    border-radius: 2px;
}

.farm-density--bad td {
    color: var(--mud-palette-warning);
}

/* ---- Volume Planner (U-11) ---- */
.vp-page { display: flex; gap: 16px; align-items: flex-start; }
.vp-main { flex: 1 1 auto; min-width: 0; }
.vp-side { flex: 0 0 340px; position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; }
.vp-month { min-width: 11em; text-align: center; text-transform: capitalize; }
.vp-plan { text-align: right; }
.vp-plan-input { max-width: 190px; }
.vp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vp-sub { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.vp-ok { color: var(--mud-palette-success); }
.vp-bad { color: var(--mud-palette-error); }
.vp-indent { padding-left: 28px !important; }
.vp-subrow td { font-size: 0.8rem; }
.vp-compare th { vertical-align: top; }
.vp-col-head { cursor: pointer; }
.vp-col-selected { background: var(--mud-palette-action-default-hover); }
.vp-shortfall { margin-bottom: 4px; }
.vp-why-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px dotted currentColor; }
.vp-why-link:hover { color: var(--mud-palette-primary); }
.vp-why-table td:first-child { white-space: normal; }
.vp-why-total td { font-weight: 600; border-top: 1px solid var(--mud-palette-divider); }
.vp-breakdown { max-height: 520px; overflow: auto; }
.vp-toggle { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.vp-profile-row td { background: var(--mud-palette-background-gray); }
.vp-whatif .mud-input-control { max-width: 110px; }
.vp-errors { margin: 4px 0 0 18px; padding: 0; }

/* ---- Параметры VP (U-12) ---- */
.vp-params-table .mud-input-control { margin: 0; }
.vp-params-table td { vertical-align: top; }
.vp-amount { max-width: 96px; }
.vp-number { max-width: 110px; }
.vp-was { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }
.vp-warn { font-size: 0.72rem; color: var(--mud-palette-warning); }
.vp-row-changed td { background: var(--mud-palette-warning-hover); }
.vp-row-new td { background: var(--mud-palette-success-hover); }
.vp-overrides { max-height: 520px; overflow: auto; }
.vp-comment { max-width: 280px; }

/* «Рост парка» (U-19) */
.growth-shares { max-width: 560px; }
.growth-percent { width: 120px; }
.growth-country-code { min-width: 200px; max-width: 260px; }
.growth-city-search { min-width: 240px; max-width: 320px; }
.growth-scenarios { min-width: 360px; max-width: 560px; }
.growth-indent { padding-left: 32px !important; }
.growth-held td:last-child { color: var(--mud-palette-warning); }
.growth-cohort td { color: var(--mud-palette-text-secondary); font-size: 0.8125rem; }
.growth-chart { max-width: 900px; }
.growth-calculating { position: sticky; top: 72px; z-index: 5; }
.growth-plan-dim { opacity: 0.45; pointer-events: none; }

/* Свёрнутые строки крутилок (U-28) */
.growth-knob-row-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* «Рост парка» на всю ширину рабочей области, 60 / 40 в пользу отчёта (решения владельца 2026-10-02, U-31): общий
   MudContainer оболочки (MaxWidth.Large, 1280 px) на этом экране не держит ширину — иначе на 2000 px поля по краям,
   а отчёт зажат. Уже md (960 px, точка MudBlazor) — колонки одна под другой. Таблица шире колонки прокручивается сама. */
.mud-main-content .mud-container:has(.growth-page) { max-width: none; }
.growth-page > .vp-main { flex: 3 1 0; min-width: 0; }
.growth-page > .vp-side { flex: 2 1 0; min-width: 0; }
.growth-page .vp-main .mud-table-container { overflow-x: auto; }
/* Текст когорты не задаёт ширину колонок недель (U-42): нулевая ширина в расчёте таблицы, во всю ячейку — на экране. */
.growth-cohort-text { width: 0; min-width: 100%; white-space: normal; }
/* Неделя и дата когорты — в строку: свёрнутая неделя переносилась, и раскрытие расширяло колонку под дату когорты. */
.growth-weeks th:first-child, .growth-weeks td:first-child { white-space: nowrap; }
/* Чтобы недели помещались в колонку отчёта (решение владельца, U-31): заголовки чисел переносятся, отступы ячеек — 6 px.
   С отступами MudBlazor (16 px) минимум таблицы недель — 694 px, а колонка отчёта на 1280 px — 580. */
.growth-page .vp-main th.vp-num { white-space: normal; }
.growth-page .vp-main .mud-simple-table table * tr > td,
.growth-page .vp-main .mud-simple-table table * tr > th { padding-left: 6px; padding-right: 6px; }
.growth-form-head { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.growth-form-head > * { min-width: 0; }
/* Название — на две колонки сетки (U-42): в одной обрезалось. */
.growth-form-head > .growth-form-name { grid-column: span 2; }
/* Обёртка «Скачать .xlsx» (U-32) — её title виден и у неактивной кнопки */
.growth-export-wrap, .growth-schedule-wrap { display: inline-block; }

/* Журнал расчёта (U-30): главное число шага — правой колонкой; «предел журнала» — приглушённо */
.growth-log-value { width: 1%; white-space: nowrap; }
.growth-log-truncated td { color: var(--mud-palette-text-secondary); font-style: italic; }
@media (max-width: 959.98px) {
  .growth-page { flex-direction: column; align-items: stretch; }
  .growth-page > .vp-side { position: static; max-height: none; }
}

/* Поля пункта в ряд (U-31): поле не уже 100 px, иначе ряд переносится; подписи — по словам. 100, а не 110: на 1600 px
   половина — 608 px, у сетки 568, пять полей по 110 с промежутками (582) в ряд не встают */
.growth-knob-fields { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
/* Отступы панелей крутилок — меньше, чем у MudExpansionPanel (24 px): на половине экрана в 1600 px пять полей профиля встают в ряд */
.growth-knobs .mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters { padding-left: 8px; padding-right: 8px; }
.growth-knob { min-width: 0; }
.growth-knob .mud-input-label { max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.growth-knob legend { max-width: 100%; }
.growth-knob fieldset { overflow: hidden; }
.growth-knob-hint { display: flex; align-items: flex-start; gap: 2px; margin-top: 2px; font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.growth-knob-hint-text { flex: 1 1 0; min-width: 0; white-space: normal; overflow-wrap: normal; }
.growth-knob-row-error .growth-knob-row-mark { color: var(--mud-palette-error); }
.growth-knob-warning { color: var(--mud-palette-warning); }

/* Экран «Аккаунт» (U-03) */
.account-session--violation { color: var(--mud-palette-error); }
.account-segments { margin-left: 8px; font-size: 0.8rem; }
.account-violation--hard { color: var(--mud-palette-error); }
.account-violation--soft { color: var(--mud-palette-text-secondary); font-size: 0.8rem; }
.account-week--short td:nth-child(4) { color: var(--mud-palette-warning-darken); }
/* «Почему так» дня (U-40): день, по которому спросили, и старт сессии, по которой щёлкнули, — выделены. */
.account-day--why { background: var(--mud-palette-action-default-hover); }
.account-why-start--focus { border-left: 3px solid var(--mud-palette-primary); padding-left: 8px; }

/* Нарушения на «Ферме» (U-37) */
.farm-account__violations { margin-left: 4px; color: var(--mud-palette-error); font-weight: 600; }
.farm-session--violation { outline: 2px solid var(--mud-palette-error); outline-offset: -1px; }
.farm-violations-soft, .farm-violations-group { display: inline; }
.farm-violations-soft > summary, .farm-violations-group > summary { display: inline; cursor: pointer; text-decoration: underline dotted; }
.farm-violations-soft[open] { display: block; }
.farm-violations-group { display: block; margin-left: 12px; }
.farm-violations-group ul { margin: 2px 0 4px 16px; max-height: 240px; overflow-y: auto; }

/* «Что это?» (U-29) */
.growth-field { display: flex; align-items: flex-start; gap: 2px; }
.growth-field > .mud-input-control, .growth-field > .mud-picker { flex: 1; }
.growth-help { display: inline-flex; vertical-align: middle; }
.growth-help-icon { opacity: 0.6; }
.growth-help-text { max-width: 320px; padding: 8px 12px; white-space: normal; text-align: left; }

/* «Параметры роста и стадий» (U-21) */
.settings-country { min-width: 32px; }
.settings-country-code { min-width: 200px; max-width: 260px; }
/* Подсказки полей настроек (U-42) — переносом, а не обрезкой. */
.settings-panel .mud-input-helper-text { white-space: normal; overflow: visible; }
.settings-city-search { min-width: 240px; max-width: 320px; }
.settings-policies td { vertical-align: top; }
.settings-read-only-fields { border: 0; margin: 0; padding: 0; min-width: 0; }

/* «Стадии аккаунтов» (U-08): список аккаунтов слева, карточка справа; уже 960 px (md MudBlazor) — одно под другим. */
.stages-page { display: flex; gap: 16px; align-items: flex-start; }
.stages-list { flex: 0 0 320px; min-width: 0; }
.stages-detail { flex: 1 1 auto; min-width: 0; }
.stages-accounts { max-height: 70vh; overflow-y: auto; }
.stages-account__id { font-family: 'Roboto Mono', Consolas, monospace; font-size: 0.8rem; overflow-wrap: anywhere; }
.stages-account__meta { font-size: 0.75rem; }
.stages-card__id { font-family: 'Roboto Mono', Consolas, monospace; overflow-wrap: anywhere; }
.stages-rows td { vertical-align: top; }
@media (max-width: 959.98px) {
    .stages-page { flex-direction: column; align-items: stretch; }
    .stages-list { flex: 0 0 auto; }
}