/* Палитра взята дословно из Themes/Dark.xaml настольного окна.
   Админка и оболочка должны выглядеть одним продуктом, а не двумя разными:
   человек переключается между ними десятки раз в день. */
:root {
    --editor-bg: #1E1E1E;
    --editor-fg: #D4D4D4;
    --sidebar-bg: #252526;
    --activity-bg: #333333;
    --toolbar-bg: #2D2D30;
    --status-bg: #007ACC;
    --status-fg: #FFFFFF;
    --status-fg-muted: #CCFFFFFF;

    --panel-border: #3E3E42;
    --contrast-border: #2B2B2B;
    --input-border: #565656;
    --input-bg: #3C3C3C;
    --card-bg: #2D2D30;

    --text: #CCCCCC;
    --text-bright: #E7E7E7;
    --text-muted: #8C8C8C;
    --text-dim: #6E6E6E;

    --accent: #0E639C;
    --accent-hover: #1177BB;
    --accent-fg: #FFFFFF;
    --focus: #007FD4;

    --list-hover: #2A2D2E;
    --list-selected: #04395E;
    --button-hover: #3A3D41;

    --success: #89D185;
    --warn: #CCA700;
    --danger: #F14C4C;
    --danger-bg: #A1260D;

    --activity-fg: #868686;
    --activity-hover: #3C3C3C;
    --activity-border: #454545;
    --activity-fg-active: #FFFFFF;
    --activity-fg-hover: #DDDDDD;

    --ui-font: "Segoe UI", system-ui, sans-serif;
    --mono-font: "Cascadia Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--editor-bg);
    color: var(--text);
    font: 13px/1.5 var(--ui-font);
}

a { color: var(--focus); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ——— Каркас: панель действий слева, содержимое справа, строка состояния
   во всю ширину внизу. Как в окне: там она тоже проходит под панелью. ——— */
.shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.workbench { flex: 1; display: flex; min-height: 0; }

.activity {
    width: 72px;
    flex: 0 0 72px;
    background: var(--activity-bg);
    display: flex;
    flex-direction: column;
    padding: 4px 0 6px;
    overflow-y: auto;
}

/*
    display:flex здесь обязателен, а не для красоты: ссылки внизу лежат во
    вложенном блоке и оставались строчными — подписи «Скачать» и «Настройки»
    выезжали текстом за пределы полосы.

    Высота у всех пунктов одна: полоса читается сеткой, и «Вне оболочки» в две
    строки не сбивает ритм соседям.
*/
.activity a {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 56px;
    padding: 0 4px 0 2px;
    color: var(--activity-fg);
    text-align: center;
    font-size: 10.5px;
    line-height: 1.2;
    border-left: 2px solid transparent;
    text-decoration: none;
}

.activity a:hover {
    color: var(--activity-fg-hover);
    background: var(--activity-hover);
    text-decoration: none;
}

/* Полоска слева и яркий значок — ровно как отмечен выбранный раздел в окне.
   Затемнения под пунктом нет намеренно: на фоне #333 оно читалось дырой. */
.activity a.active {
    color: var(--activity-fg-active);
    border-left-color: var(--activity-fg-active);
}

.activity a:focus-visible { outline: 1px solid var(--focus); outline-offset: -3px; }

.activity .icon { display: block; flex: none; width: 20px; height: 20px; }
.activity .label { display: block; max-width: 100%; }

/* Действия внизу отделены линией: без неё «Выйти» читается как ещё раздел.
   Линия нарисована вставкой, чтобы не спорить с полоской выбранного пункта. */
.activity .bottom { margin-top: auto; padding-top: 7px; position: relative; }

.activity .bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    border-top: 1px solid var(--activity-border);
}

/* Низкое окно (ноутбук, у браузера открыты свои панели): пункты ужимаются,
   чтобы полоса не уходила в прокрутку — на неё промахиваются мышью. */
@media (max-height: 660px) {
    .activity a { height: 48px; gap: 3px; }
}

.activity::-webkit-scrollbar { width: 6px; }

.content { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.header {
    flex: none;
    background: var(--toolbar-bg);
    border-bottom: 1px solid var(--contrast-border);
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header h1 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-bright); }
.header .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/*
    Отступ сверху задан полем первого блока, а не полем самого контейнера:
    поле контейнера прокрутки остаётся видимой полосой над прилипшей шапкой
    таблицы, и строки проезжают в этой полосе поверх неё.
*/
.body { flex: 1; overflow: auto; padding: 0 18px 24px; }
.body > :first-child { margin-top: 16px; }

/*
    Заголовок раздела внутри страницы. До этого он стоял инлайновым стилем в
    каждой странице отдельно и от страницы к странице разъезжался.
*/
.section { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.section:not(:first-child) { margin-top: 20px; }

.statusbar {
    flex: none;
    background: var(--status-bg);
    color: var(--status-fg);
    font-size: 11.5px;
    padding: 3px 12px;
    display: flex;
    gap: 14px;
    align-items: center;
}

.statusbar .muted { color: var(--status-fg-muted); }

/*
    ——— Плотные таблицы: их здесь читают, а не любуются ими. ———

    Ширина по содержимому, а не 100%. Растянутая на весь монитор таблица
    разносила «Сотрудник» и «Ходов» на пол-экрана, и строку приходилось вести
    глазами через пустоту. Дорасти до края она всё равно может — max-width.
*/
table { width: auto; max-width: 100%; border-collapse: collapse; font-size: 12.5px; }

/*
    Шапка держится при прокрутке: в аудите и сессиях строк сотни, и без этого
    к середине списка уже не помнишь, что за колонка. Фон непрозрачный — иначе
    уезжающие под неё строки просвечивают.

    Линия под шапкой нарисована тенью, а не border-bottom: при border-collapse
    рамка принадлежит сетке таблицы, а не ячейке, с прилипшей шапкой она не
    едет вместе с ней и на прокрутке пропадает.
*/
th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--editor-bg);
    box-shadow: inset 0 -1px 0 var(--panel-border);
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    padding: 5px 20px 5px 0;
    white-space: nowrap;
}

td { padding: 5px 20px 5px 0; border-bottom: 1px solid var(--contrast-border); vertical-align: top; }

/* Последняя колонка не тащит за собой пустое поле в 20 пикселей: у таблицы
   с числами справа это выглядело обрывом на полуслове. */
th:last-child, td:last-child { padding-right: 0; }

tbody tr:hover { background: var(--list-hover); }

/* Итог отделён линией, а не одной жирностью: в длинном списке жирная строка
   внизу всё равно читается как ещё одна строка данных. */
tfoot td {
    font-weight: 600;
    color: var(--text-bright);
    border-top: 1px solid var(--panel-border);
    border-bottom: none;
    padding-top: 7px;
}

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.mono { font-family: var(--mono-font); font-size: 12px; }

/*
    Второстепенное в строке: время, машина, модель, подробности. Класс стоял в
    разметке полудюжины страниц, а правила у него не было — таблица выводилась
    одним ровным цветом, и глазу не за что было зацепиться. У строки состояния
    свой приглушённый цвет: там фон синий, и серый на нём не читается.
*/
.muted { color: var(--text-muted); }

/* ——— Деньги. Фактические и условные никогда не сливаются в одну колонку. ——— */
.real { color: var(--text-bright); }
.notional { color: var(--text-muted); }
.bypass { color: var(--warn); }
.none { color: var(--text-dim); }

/*
    ——— Карточки сводки ———

    Ширина у карточки своя и постоянная, а не «поделить экран поровну»: на
    широком мониторе пять карточек превращались в пять полупустых полей по
    350 пикселей, где число терялось в углу. Одинаковая ширина ещё и позволяет
    сравнивать соседние цифры взглядом, не примеряя их к разным полям.
*/
.tiles { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }

/*
    Карточка сама по себе (первичный пароль, предупреждение о квоте) несёт текст,
    и её ширину задаёт читаемость строки. Постоянная ширина — только у карточек
    сводки, которые стоят рядом и сравниваются взглядом.
*/
.tile {
    max-width: 560px;
    background: var(--card-bg);
    border: 1px solid var(--panel-border);
    padding: 10px 12px 11px;
    margin-bottom: 14px;
}

/* 204 пикселя — чтобы все пять карточек сводки вставали в один ряд даже в окне
   шириной 1180: перенесённая на вторую строку пятая карточка читается как
   отдельный блок, хотя она такая же, как соседние. */
.tiles > .tile { flex: 0 0 auto; width: 204px; max-width: none; margin-bottom: 0; }

.tile .caption { color: var(--text-muted); font-size: 11.5px; margin-bottom: 4px; }

.tile .value {
    font-size: 21px;
    line-height: 1.2;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
}

.tile .note { color: var(--text-dim); font-size: 11px; margin-top: 5px; }

/* Каждое уточнение своей строкой: фактические и условные доллары в одной
   строке через точку читались как одна сумма — ровно то, чего нельзя. */
.tile .note div + div { margin-top: 2px; }

/* ——— Полоса квоты: одна на страницу, без графиков ради графиков. ——— */
.bar { height: 6px; background: #1A1A1A; border: 1px solid var(--contrast-border); margin-top: 6px; }
.bar > div { height: 100%; background: var(--accent); }
.bar.warn > div { background: var(--warn); }
.bar.over > div { background: var(--danger); }

/* ——— Кнопки и поля ——— */
button, .btn {
    background: var(--accent);
    color: var(--accent-fg);
    border: 1px solid transparent;
    padding: 4px 12px;
    font: 12.5px var(--ui-font);
    cursor: pointer;
}

button:hover, .btn:hover { background: var(--accent-hover); text-decoration: none; }
button:disabled { background: var(--button-hover); color: var(--text-dim); cursor: default; }

button.quiet, .btn.quiet { background: transparent; border-color: var(--input-border); color: var(--text); }
button.quiet:hover, .btn.quiet:hover { background: var(--button-hover); }

/*
    Опасное действие обозначено цветом надписи, а не заливкой. Залитая красным
    кнопка стоит в каждой строке списка сотрудников, и таблица превращалась в
    красную полосу, где взгляд цеплялся за кнопки, а не за людей. Заливка
    появляется под курсором — там, где действие вот-вот произойдёт.
*/
button.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
button.danger:hover { background: var(--danger-bg); border-color: var(--danger-bg); color: #fff; }

/* Кнопки внутри строк мельче: это действия над строкой, а не главное на
   странице, и высокая кнопка раздувала бы саму строку. */
td button { padding: 2px 8px; font-size: 12px; }
td button + button { margin-left: 6px; }

input, select, textarea {
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--input-border);
    padding: 4px 7px;
    font: 12.5px var(--ui-font);
}

input:focus, select:focus, textarea:focus { outline: 1px solid var(--focus); border-color: var(--focus); }
label { color: var(--text-muted); font-size: 12px; display: block; margin-bottom: 3px; }

.formrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; }

/* ——— Метки состояния ——— */
.tag {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
}

.tag.ok { color: var(--success); border-color: var(--success); }
.tag.alert { color: var(--danger); border-color: var(--danger); }
.tag.attn { color: var(--warn); border-color: var(--warn); }

/* ——— Лента переписки ——— */
.feed { display: flex; flex-direction: column; gap: 1px; }

.entry {
    background: var(--card-bg);
    border-left: 3px solid var(--panel-border);
    padding: 8px 12px;
}

.entry .entryhead {
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 4px;
    display: flex;
    gap: 10px;
}

.entry .entrytext { white-space: pre-wrap; word-break: break-word; }

.entry.from-user { border-left-color: var(--focus); }
.entry.from-model { border-left-color: var(--panel-border); }
.entry.thinking { border-left-color: var(--text-dim); color: var(--text-muted); font-style: italic; }
.entry.tool { border-left-color: var(--warn); }
.entry.tool .entrytext { font-family: var(--mono-font); font-size: 12px; }

/* Запрещённое действие видно сразу: ради этого контроль и заводился. */
.entry.denied { border-left-color: var(--danger); }
.entry.denied .entryhead { color: var(--danger); }

/* ——— Вход ——— */
.signin { display: flex; height: 100vh; align-items: center; justify-content: center; }

.signin form {
    background: var(--sidebar-bg);
    border: 1px solid var(--panel-border);
    padding: 26px 28px;
    width: 330px;
}

.signin h1 { margin: 0 0 4px; font-size: 16px; color: var(--text-bright); }
.signin .subtitle { color: var(--text-muted); font-size: 12px; margin-bottom: 18px; }
.signin .field { margin-bottom: 12px; }
.signin input { width: 100%; }
.signin button { width: 100%; padding: 6px; margin-top: 6px; }

/* Блок загрузки оболочки под формой входа: отделён линией, чтобы не читался
   как часть формы, и приглушён — войти пришли не за ним. */
.signin .download { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--panel-border); font-size: 12px; }
.signin .download .meta { color: var(--text-muted); margin-top: 4px; }

/* «Выйти» под формой смены пароля — тем же отделённым блоком: это не часть формы. */
.signin .aside { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--panel-border); font-size: 12px; }

.error { color: var(--danger); font-size: 12px; margin-top: 10px; }

/* Пояснения ограничены по ширине: строка в 1800 пикселей на широком мониторе
   не читается — глаз теряет начало следующей строки. */
.hint { color: var(--text-muted); font-size: 12px; margin: 10px 0 14px; max-width: 700px; }
.empty { color: var(--text-dim); padding: 22px 0; }

/* Полосы прокрутки в тон окну, а не системные светлые. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #4F4F4F; }
::-webkit-scrollbar-thumb:hover { background: #5F5F5F; }

/* Blazor показывает свою полосу об обрыве соединения — приводим её к теме. */
#blazor-error-ui {
    background: var(--danger-bg);
    color: #fff;
    bottom: 0;
    display: none;
    left: 0;
    padding: 8px 14px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* Ссылка на красной полосе: обычный синий цвет ссылок на этом фоне не читается. */
#blazor-error-ui a { color: #fff; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ——— Сбои оболочек ———
   Строка сводки открывает случаи под таблицей: выбранная подсвечена так же,
   как выбранный элемент списка в оболочке. */
tbody tr.clickable { cursor: pointer; }
tbody tr.selected, tbody tr.selected:hover { background: var(--list-selected); }

.sectionhead { display: flex; align-items: center; gap: 12px; margin: 22px 0 8px; }
.sectionhead h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-bright); }
.sectionhead .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.body .entry { margin-top: 10px; }