/* Roboto лежит рядом, а не на чужом CDN: панель поднимается в сети, где наружу
   ходить некуда, да и незачем. Файл один на все начертания - шрифт переменный */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/roboto-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/roboto-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

/* Своего здесь ровно столько, сколько не закрывает MudBlazor: поля статических форм,
   пара мелочей вокруг них и окно обрыва связи */

body { margin: 0; }

/* Крошки над страницей: путь слева от заголовка, сам заголовок - обычный h1 */
.crumbs {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 1.5rem;
}
.crumbs h1 { margin: 0; font-size: inherit; font-weight: 400; }

/* После перехода фокус уводится на заголовок - это нужно скринридеру, но рамку
   вокруг текста при каждой загрузке страницы видеть незачем */
.crumbs h1:focus { outline: none; }

.crumb, .crumb-sep { color: var(--mud-palette-text-secondary); }

a.crumb { text-decoration: none; }
a.crumb:hover { color: var(--mud-palette-primary); }

/* Числа в плитках набраны моноширинными цифрами: иначе счетчик дергается на каждом чтении */
.panel-tile-value { font-variant-numeric: tabular-nums; }

.panel-facts td:first-child { width: 40%; color: var(--mud-palette-text-secondary); }

/* Строка счетчика: имя, шкала во всю оставшуюся ширину и само число справа */
.panel-stages td:first-child { width: 30%; color: var(--mud-palette-text-secondary); }
.panel-stages td:last-child { width: 1%; white-space: nowrap; text-align: right; }

/* Карточка аккаунта и сведения об устройстве приходят готовым текстом сервера */
.panel-card {
    max-height: 60vh;
    overflow: auto;
    padding: 12px;
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.panel-code textarea {
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
}

/* Журнал: строки добавляются от новых к старым, а колонка развернута - так новая строка
   встает внизу и прокрутка сама держится у нее, без обращения к браузеру из цепи */
.panel-log {
    display: flex;
    flex-direction: column-reverse;
    height: 60vh;
    overflow-y: auto;
    padding: 8px 12px;
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.5;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.panel-log-line { white-space: pre-wrap; word-break: break-word; }

/* Время и комната в ленте чата: служебная часть строки, текст сообщения важнее */
.panel-chat-time { margin-right: 8px; color: var(--mud-palette-text-disabled); }
.panel-chat-room { margin-right: 8px; color: var(--mud-palette-text-secondary); }

.panel-log-important { color: var(--mud-palette-warning); }
.panel-log-error { color: var(--mud-palette-error); }
.panel-log-test { color: var(--mud-palette-text-secondary); }

/* --map-aspect ставит map.js по размерам мира */
.panel-map {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    aspect-ratio: var(--map-aspect, 1);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* Карту тянут мышью, поэтому касания не должны прокручивать страницу */
.panel-map canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.panel-map canvas:active { cursor: grabbing; }

.panel-map:fullscreen {
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
    border: none;
    border-radius: 0;
}

.panel-map-overlay {
    position: absolute;
    display: flex;
    background: color-mix(in srgb, var(--mud-palette-surface) 82%, transparent);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.panel-map-layers {
    top: 8px;
    left: 8px;
    flex-direction: column;
    align-items: flex-start;
    /* Снизу остается место под карточку координат */
    max-height: calc(100% - 52px);
    overflow-y: auto;
    padding: 2px 8px 2px 2px;
}

.panel-map-layers .mud-switch { margin-left: 4px; }
.panel-map-layers .mud-switch .mud-typography { font-size: .8125rem; }

.panel-map-corner {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 12px;
}

.panel-map-corner > .panel-map-overlay { position: static; }

/* Сжимается между карточкой слоев и кнопками карты, но не до нуля: название с крестиком остаются видны */
.panel-map-title {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    max-width: min(320px, max(140px, calc(100% - 480px)));
    padding-left: 8px;
    font-size: .8125rem;
    line-height: 1.2;
}

.panel-map-title-open { padding-right: 4px; padding-bottom: 2px; }
.panel-map-title-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.panel-map-title-row > :not(.panel-map-title-text) { flex-shrink: 0; }
.panel-map-title-text { display: flex; flex-direction: column; min-width: 0; padding: 2px 0; }

.panel-map-title-pick {
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.panel-map-title .panel-map-layer { overflow: hidden; text-overflow: ellipsis; }
.panel-map-title-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-map-title-detail { font-size: .75rem; color: var(--mud-palette-text-secondary); }

/* Пока map.js не нарисовал линейку, карточки нет */
.panel-map-scale {
    left: 8px;
    bottom: 8px;
    align-items: center;
    gap: 12px;
    padding: 2px 8px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.panel-map-focus {
    top: 44px;
    right: 8px;
    max-width: 260px;
    padding: 2px 8px;
    font-size: .75rem;
    color: var(--mud-palette-warning);
}

.panel-map-load {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Строки подсказки map.js разделяет переводом строки */
.panel-map-tip {
    position: absolute;
    padding: 4px 8px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-4);
    font-size: .8125rem;
    color: var(--mud-palette-text-primary);
    white-space: pre;
    pointer-events: none;
    z-index: 1;
}

.panel-map-tip[hidden] { display: none; }

.panel-map-scale:not(:has([data-units])) { display: none; }
.panel-map-coords:empty { display: none; }
.panel-map-ruler { display: flex; align-items: center; gap: 6px; }

.panel-map-ruler-bar {
    height: 6px;
    border: 1px solid var(--mud-palette-text-secondary);
    border-top: none;
}

.panel-map-layer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border: none;
    border-radius: var(--mud-default-borderradius);
    background: none;
    font: inherit;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.panel-map-layer:not(:disabled) { cursor: pointer; }
.panel-map-layer:not(:disabled):hover { background: var(--mud-palette-action-default-hover); }
.panel-map-layer-off { opacity: .45; }
.panel-map-layer-part { opacity: .75; }
.panel-map-fold { padding: 0 4px; }

.panel-map-layers-head { display: flex; align-items: center; justify-content: space-between; align-self: stretch; gap: 8px; }
.panel-map-layers-profile { flex: 1; font-size: .75rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }

.panel-map-section { display: flex; align-items: center; align-self: stretch; margin-top: 4px; }
.panel-map-section-name { flex: 1; justify-content: flex-start; gap: 2px; padding-left: 0; font-weight: 500; }
.panel-map-section-count { font-size: .75rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.panel-map-caption { padding: 2px 8px; font-size: .75rem; color: var(--mud-palette-text-secondary); }

.panel-map-key { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--key); }
.panel-map-key-outline { border: 2px solid var(--key); background: none; }
.panel-map-key-round { border-radius: 50%; }
.panel-map-key-diamond { border-radius: 1px; transform: rotate(45deg) scale(.8); }
.panel-map-key-cross {
    border-radius: 0;
    background:
        linear-gradient(45deg, transparent 40%, var(--key) 40% 60%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, var(--key) 40% 60%, transparent 60%);
}

/* Отступ слева на ширину ключа слоя */
.panel-map-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 8px 1px 26px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.panel-map-legend.panel-map-model { padding-left: 42px; }

.panel-map-wind {
    right: 8px;
    bottom: 8px;
    flex-direction: column;
    align-items: center;
    padding: 2px 8px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* Тип NPC заметно ниже нормы */
.row-short td { background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }

/* Под полосу уезжает страница, а слева к ней примыкает меню: без линий край прокрутки
   сливался с содержимым, а полоса с меню - в один угол */
.panel-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.panel-drawer { border-right: 1px solid var(--mud-palette-lines-default); }

/* Значки состояния стоят в ряд с кнопками шапки: клетка та же, 48px, иначе ряд сбивается */
.panel-status-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

/* Состояние сессии - точка: значок материала рядом со строкой крупнее ее и сидит выше */
.panel-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--mud-palette-error); }
.panel-dot-up { background: var(--mud-palette-success); }

/* У окна поля по 24px, а ряду кнопок MudBlazor оставляет 8: кнопка липла к углу */
.mud-dialog .mud-dialog-actions { padding: 8px 24px 20px; }

/* Пустышка под сохраненный логин: браузер подставляет его сюда, а не в поле почты.
   Ни display:none, ни нулевой размер не годятся - такие поля автозаполнение пропускает */
.panel-autofill-decoy {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Подсветка строк списка игроков онлайн: тон берется из палитры темы, поэтому на темной
   теме он не выжигает строку, как сплошные Pink и LightGreen прежней панели */
.row-suspect td { background: rgba(var(--mud-palette-warning-rgb), 0.18); }
.row-newcomer td { background: rgba(var(--mud-palette-success-rgb), 0.14); }

/* Отметка времени в аудите: без запрета переноса грид ломает ее на три строки */
.audit-moment { white-space: nowrap; }

.panel-chart { display: block; width: 100%; height: 140px; }

/* MudBlazor дает полю flex 1 1 auto, и в ряду оно забирает всю свободную ширину.
   Заданная ширина при этом остается у видимой рамки, а обертка продолжает занимать
   место и отодвигает соседнюю кнопку. Поля с явной шириной не растягиваем */
.mud-input-control[style^="width:"],
:is(.mud-input-control, .mud-select, .mud-picker-inline):has([style^="width:"]) { flex: 0 1 auto; }

/* Подпись под полем длиннее самого поля, и поле разъезжается по ней. Ширину подписи
   для расчета считаем нулевой, а рисуем ее по ширине поля с переносом */
.mud-input-control:has([style^="width:"]) .mud-input-helper-text { width: 0; min-width: 100%; }

/* Стрелки числовых полей убраны атрибутом HideSpinButtons, это подстраховка для поля
   без него. Место под стрелки MudBlazor резервирует внутри рамки, поэтому вместе со
   стрелками возвращаем полю обычный отступ справа */
.mud-input-control.mud-input-number-control .mud-input-numeric-spin { display: none; }

.mud-input-control.mud-input-number-control.mud-input-showspin
    .mud-input:not(.mud-input-adorned-end).mud-input-outlined input.mud-input-root { padding-inline-end: 14px; }

/* Панель вкладки MudBlazor рисует как display contents, и отступ на ней пропадает.
   Задаем его контейнеру, иначе содержимое липнет к строке вкладок */
.mud-tabs-panels { padding-top: 16px; }

/* Сводка за неделю: дни стоят колонками, и на узком окне таблица уезжает вбок сама,
   не растягивая карточку */
.panel-scroll-x { overflow-x: auto; }

.panel-summary-group { font-weight: 500; color: var(--mud-palette-text-secondary); }

.panel-summary th:not(:first-child), .panel-summary td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Заголовок колонки грида несет кнопку сортировки, воронку фильтра и меню колонки, и
   столбец с пятизначным SID выходит под полтораста пикселей шириной. Меню колонки
   повторяет и сортировку, и фильтр, а до них есть более короткий путь - щелчок по
   заголовку и та же воронка. Стрелку сортировки несортированный столбец и так не
   показывает, но место под нее держит */
.mud-data-grid th .column-options .mud-menu { display: none; }

.mud-data-grid th .sort-direction-icon:not(.mud-direction-asc):not(.mud-direction-desc) {
    display: none;
}

.mud-data-grid .mud-table-root th.mud-table-cell,
.mud-data-grid .mud-table-root td.mud-table-cell { padding-left: 12px; padding-right: 12px; }

/* Редактор скрипта: подсветка лежит слоем под прозрачной textarea, номера строк слева.
   Прокручивает textarea, слой и гутер повторяют ее смещение */
.panel-editor {
    position: relative;
    display: flex;
    height: 420px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.5;
    tab-size: 4;
}

.panel-editor-gutter {
    flex: 0 0 auto;
    min-width: 2.5rem;
    padding: 12px 8px;
    overflow: hidden;
    color: var(--mud-palette-text-disabled);
    text-align: right;
    white-space: pre;
    user-select: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.panel-editor-body {
    position: relative;
    flex: 1 1 auto;
}

.panel-editor-highlight,
.panel-editor-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 12px;
    font: inherit;
    line-height: inherit;
    white-space: pre;
    overflow: auto;
    border: 0;
}

.panel-editor-highlight {
    pointer-events: none;
    color: var(--mud-palette-text-primary);
}

.panel-editor-input {
    resize: none;
    background: transparent;
    color: transparent;
    caret-color: var(--mud-palette-text-primary);
    outline: none;
}

.panel-editor-input::selection { background: var(--mud-palette-primary-hover); }

/* Тело на всю длину: прокручивается страница, внутри остается только сдвиг по длинным строкам,
   и номера строк на нем держатся у левого края */
.panel-editor-grown {
    height: auto;
    overflow: auto;
}

.panel-editor-grown .panel-editor-gutter {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--mud-palette-background-gray);
}

.panel-editor-grown .panel-editor-highlight {
    position: relative;
    overflow: visible;
}

.panel-editor-grown .panel-editor-input { overflow: hidden; }

.panel-editor-comment { color: var(--mud-palette-success); }
.panel-editor-string { color: var(--mud-palette-warning); }
.panel-editor-number { color: var(--mud-palette-info); }
.panel-editor-keyword { color: var(--mud-palette-primary); }

.panel-help {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    font-size: .875rem;
    line-height: 1.6;
}

.panel-help-code {
    margin: 0;
    padding: .75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.5;
    overflow-x: auto;
}

.panel-help-table td { vertical-align: top; }

.panel-help-member {
    width: 18rem;
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: .8125rem;
    white-space: nowrap;
}