/* --- Inter, локально --------------------------------------------------
   Раньше шрифт грузился с Google Fonts. В клинике без интернета — а это
   норма для районной больницы — запрос висел до таймаута, а экраны
   откатывались на Segoe UI. Теперь файлы лежат рядом с приложением.

   Переменный шрифт, четыре поднабора с unicode-range: браузер скачивает
   только те, символы из которых встретил. Казахские буквы (Ә Ғ Қ Ң Ө Ұ Ү Һ)
   лежат в cyrillic-ext, І — в cyrillic; оба поднабора обязательны.
   Источник: пакет @fontsource-variable/inter 5.3.0 (Inter 4.x), лицензия
   OFL 1.1 — файл LICENSE рядом со шрифтами. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter/inter-cyrillic-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter/inter-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter/inter-latin-wght-normal.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;
}

html, body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Произошла ошибка."
    }

.cursor-pointer { cursor: pointer; }

/* Цифры одной ширины в таблицах: у Inter по умолчанию цифры пропорциональные,
   и столбцы значений, сумм и времени «пляшут» (ревью UX 11.10.2026). */
.mud-table-cell, .barcode-chips span { font-variant-numeric: tabular-nums; }

/* Стили этикеток пробирок живут в OrderCard.razor (инлайн <style>):
   они обязаны работать даже при недоступной статике сервера. */

/* --- Фирменная шапка SARAP LAB --------------------------------------- */
.brand { gap: .55rem; margin-right: .5rem; }
.brand-plate {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
    overflow: hidden;
}
.brand-plate img { width: 34px; height: 34px; display: block; }
.brand-word {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 700; font-size: 1.15rem; letter-spacing: .06em; line-height: 1;
    color: #fff;
}
.brand-word-lab { color: #D9B77E; margin-left: .35em; }
/* Кнопки шапки только для широкого экрана (язык, тема). Строчный span ставил
   их по базовой линии текста: язык уезжал вверх, тема вниз от центра шапки,
   где стоят меню и чип клиники. На телефоне скрыт правилом ниже (!important). */
.appbar-wide { display: inline-flex; align-items: center; }

/* --- Меню: подписи разделов и счётчики «Мои очереди» -------------------- */
.nav-caption {
    padding: 14px 16px 4px; font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--mud-palette-text-secondary);
}
.mud-nav-group .nav-caption { padding-left: 24px; }
.nav-caption-gap { padding: 0; height: 8px; }
.nav-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.nav-row > span:first-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-count {
    flex: 0 0 auto; min-width: 22px; padding: 0 7px; border-radius: 999px;
    font-size: .75rem; font-weight: 700; line-height: 20px; text-align: center;
    font-variant-numeric: tabular-nums;
    background: #E6F2ED; color: #064D39;
}
.nav-count-crit { background: #B3261E; color: #FFFFFF; }
.theme-dark .nav-count { background: #17332A; color: #8FD3B8; }
.theme-dark .nav-count-crit { background: #B3261E; color: #FFFFFF; }

/* --- Скан или поиск в шапке (Components/Shared/GlobalScan.razor) -------- */
.global-scan {
    display: flex; align-items: center; gap: 8px;
    flex: 0 1 440px; min-width: 0; height: 38px; margin-left: 24px; padding: 0 10px;
    border-radius: 8px; background: rgba(255, 255, 255, .12); color: #FFFFFF;
}
.global-scan:focus-within { background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 2px #D9B77E; }
.global-scan input {
    flex: 1 1 auto; min-width: 0; height: 100%;
    background: transparent; border: 0; outline: 0; color: #FFFFFF; font: inherit; font-size: .875rem;
}
.global-scan input::placeholder { color: rgba(255, 255, 255, .75); }
.global-scan input::-webkit-search-cancel-button { filter: invert(1); }
.global-scan kbd {
    font: inherit; font-size: .6875rem; padding: 0 5px; border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .45); color: rgba(255, 255, 255, .85);
}
@media (max-width: 720px) { .global-scan { margin-left: 8px; } .global-scan kbd { display: none; } }

/* --- Заголовок страницы (Components/Shared/PageHeader.razor) -----------
   Одна строка: название, мелко пояснение, «Как это сделать», действия
   справа. Длинное пояснение переносится в своей колонке рядом с названием. */
.page-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    margin-bottom: 16px;
}
.page-header-main {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
    flex: 1 1 420px; min-width: 0;
}
.page-title {
    margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.3;
    color: var(--mud-palette-text-primary);
}
/* После перехода Blazor ставит фокус на h1 (FocusOnNavigate в Routes.razor) —
   для экранного диктора. Рамка вокруг заголовка зрячему пользователю не нужна. */
.page-title:focus { outline: none; }
.page-subtitle {
    flex: 1 1 260px; min-width: 0; max-width: 72ch;
    font-size: .8125rem; line-height: 1.4; color: var(--mud-palette-text-secondary);
}
.page-help {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    font-size: .8125rem; font-weight: 600; text-decoration: none;
    color: var(--mud-palette-primary);
}
.page-help:hover { text-decoration: underline; }
.page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* --- Пустое состояние --------------------------------------------------- */
.empty-state {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 3rem 1.5rem; color: var(--mud-palette-text-secondary);
}
.empty-state-icon {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #E6F2ED; color: #0B6B4F;
}
.empty-state .mud-typography-h6 { color: var(--mud-palette-text-primary); }
.empty-state-hint { max-width: 460px; margin-top: .25rem; opacity: .8; }

/* --- Таблицы: широкие уходят в горизонтальную прокрутку, а не за край --- */
.table-scroll { overflow-x: auto; }
.nowrap { white-space: nowrap; }
.barcode-chips { display: flex; flex-wrap: wrap; gap: .25rem .4rem; }
.barcode-chips span {
    font-family: ui-monospace, Consolas, monospace; font-size: .78rem;
    padding: .1rem .4rem; border-radius: 6px;
    background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default);
}
.empty-state-compact { padding: 1.5rem 1rem; }
.empty-state-compact .empty-state-icon { width: 48px; height: 48px; }

/* --- Статусы: шесть групп по смыслу (Theme/StatusCatalog.cs) ----------
   Тональная пара «светлый фон + тёмный текст того же оттенка», контраст
   5,4–8,6:1. Раньше — заливка с белым текстом: зелёный «успех» 3,4:1,
   янтарь 2,8:1. Изумруд бренда здесь только в виде светлого тона. */
.st-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
    vertical-align: middle;
    /* Тонкая обводка цветом текста: светлый тон не сливается с подсвеченной
       строкой («новый» в журнале, выделение при наведении). */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}
.st-glyph { font-weight: 700; }
.st-waiting   { background: #E6EEF4; color: #35556E; }
.st-progress  { background: #E6F2ED; color: #064D39; }
.st-attention { background: #FCEFD9; color: #8A5208; }
.st-done      { background: #E3F3E8; color: #1F6E3D; }
.st-problem   { background: #FBE6E5; color: #A12E2C; }
.st-closed    { background: #ECEFED; color: #3E4A45; }
.st-critical  { background: #B3261E; color: #FFFFFF; }
.theme-dark .st-waiting   { background: #1D2C38; color: #A9C6DC; }
.theme-dark .st-progress  { background: #17332A; color: #8FD3B8; }
.theme-dark .st-attention { background: #3A2C14; color: #F2C17A; }
.theme-dark .st-done      { background: #173A26; color: #7FD6A0; }
.theme-dark .st-problem   { background: #3F1F1F; color: #F4A3A1; }
.theme-dark .st-closed    { background: #262E2B; color: #C2CCC7; }

/* --- Итог скана на приёме материала (AcceptMaterial.razor) --------------
   Крупно и цветом группы: в потоке пробирок взгляд на руках, а не на экране. */
.scan-result {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
    padding: 14px 18px; border-radius: 12px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}
.scan-result-ok      { background: #E3F3E8; color: #1F6E3D; }
.scan-result-warn    { background: #FCEFD9; color: #8A5208; }
.scan-result-problem { background: #FBE6E5; color: #A12E2C; }
.theme-dark .scan-result-ok      { background: #173A26; color: #7FD6A0; }
.theme-dark .scan-result-warn    { background: #3A2C14; color: #F2C17A; }
.theme-dark .scan-result-problem { background: #3F1F1F; color: #F4A3A1; }
.scan-result-glyph { font-size: 2rem; font-weight: 700; line-height: 1; width: 32px; text-align: center; }
.scan-result-text { flex: 1 1 320px; min-width: 0; }
.scan-result-title { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.scan-result-detail { font-size: .875rem; color: var(--mud-palette-text-primary); opacity: .85; }
.scan-result-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* --- Флаг значения (Components/Shared/FlagCell.razor) -------------------
   Отклонение — стрелка и слово тёмным янтарём, симметрично для «выше» и
   «ниже»; критическое — двойная стрелка на залитом красном. Как в бланке. */
.flag { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: .8125rem; white-space: nowrap; }
.flag-dev { color: #8A5208; }
.flag-crit { padding: 1px 8px; border-radius: 6px; background: #B3261E; color: #FFFFFF; font-size: .75rem; letter-spacing: .02em; }
.theme-dark .flag-dev { color: #F2C17A; }

/* --- Бланк результата (ResultReview.razor) ------------------------------
   Шапка с пациентом закреплена под панелью приложения: в гемограмме 25 строк,
   и к нижним проверяющий прокручивает, теряя из виду, чей анализ, возраст и
   срочность. На низких экранах не закрепляем — съела бы половину окна.
   На телефоне тоже: высота у него 800+, а шапка с пациентом и кнопками
   занимала 350 px из 844 (ревью мобильной версии, M0).
   «Δ» — тёмным янтарём, когда изменение больше порога дельта-чека. */
@media (min-height: 700px) and (min-width: 600px) {
    .review-head {
        position: sticky; top: var(--mud-appbar-height); z-index: 5;
        background: var(--mud-palette-background);
        padding-top: 8px; margin-top: -8px; padding-bottom: 8px;
    }
}
.review-context { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.review-context b { font-weight: 600; color: var(--mud-palette-text-primary); }
.delta { white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta-hit { color: #8A5208; font-weight: 700; }
.theme-dark .delta-hit { color: #F2C17A; }

/* --- Строки результатов с отклонением ----------------------------------
   Классы вместо зашитых цветов: светлый персиковый фон в тёмной теме
   слепил бы, а тёмная тема переключается на лету. */
.row-abnormal { background: #FFF7ED; }
.row-critical { background: #FDECEC; }

/* --- Тёмная тема --------------------------------------------------------
   Переключается классом на корне макета; переменные MudBlazor меняет сам
   провайдер, здесь — только то, что задано своими цветами. */
.theme-dark .empty-state-icon { background: #1F3A31; color: #5CBFA0; }
.theme-dark .barcode-chips span { background: #1A2220; border-color: #2A3430; }
.theme-dark .row-abnormal { background: #3A2E1A; }
.theme-dark .row-critical { background: #3F1F1F; }
.theme-dark .login-card { background: #161D1A; }

/* --- Переподключение circuit (О2) -------------------------------------
   Блок скрыт, пока blazor.web.js не навесит класс состояния; внутри три
   варианта текста, показывается один. Цвета — как у входа. */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex; position: fixed; inset: 0; z-index: 3000;
    align-items: center; justify-content: center;
    background: rgba(22, 26, 29, 0.55); backdrop-filter: blur(2px);
}
.reconnect-card { background: #fff; color: #161A1D; border-radius: 16px; padding: 28px 32px;
    width: 420px; max-width: 92vw; text-align: center; border-bottom: 3px solid #A8804F;
    box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.reconnect-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
/* «Восстанавливаем»: видно, что попытки идут, а не что всё зависло. */
.reconnect-spinner { width: 28px; height: 28px; margin: 4px auto 12px; border-radius: 50%;
                     border: 3px solid rgba(11,107,79,.2); border-top-color: #0B6B4F; animation: reconnect-spin 1s linear infinite; }
@keyframes reconnect-spin { to { transform: rotate(360deg); } }
.reconnect-text { font-size: 14px; opacity: .8; }
.reconnect-card button { margin-top: 18px; padding: 10px 22px; border: 0; border-radius: 8px;
    background: #0B6B4F; color: #fff; font-size: 14px; cursor: pointer; }
.reconnect-show, .reconnect-failed, .reconnect-rejected { display: none; }
#components-reconnect-modal.components-reconnect-show .reconnect-show,
#components-reconnect-modal.components-reconnect-failed .reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-rejected { display: block; }
.theme-dark .reconnect-card { background: #161D1A; color: #E6EDEA; }


/* --- Длинный текст в узкой колонке: две строки, полностью — в подсказке --- */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Сырое сообщение прибора: моноширинно, перенос, своя прокрутка.
   Цвета от темы, а не синие Tailwind (ревью UX, A5). */
.raw-payload {
    font-family: ui-monospace, Consolas, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all;
    max-height: 260px; overflow: auto; border-radius: 8px;
    background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary);
}

/* По сегментам: строка — сегмент, поле с номером в подсказке, ключевые выделены. */
.raw-segments { white-space: normal; max-height: 360px; }
.raw-seg { display: flex; gap: 8px; padding: 2px 4px; border-bottom: 1px dashed var(--mud-palette-lines-default); }
.raw-seg:last-child { border-bottom: 0; }
.raw-seg-id { flex: 0 0 3.2em; font-weight: 700; color: var(--mud-palette-primary); }
.raw-seg-fields { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-all; }
.raw-sep { opacity: .35; }
.raw-key { background: var(--mud-palette-primary-hover); border-radius: 3px; font-weight: 600; }

/* --- Опасный пункт меню «⋮» (RowMenu): красный, после разделителя --- */
.menu-danger, .menu-danger .mud-menu-item-text { color: var(--mud-palette-error) !important; }

/* --- Плитка показателя (KpiTile): цвет только у отклонения --------------- */
.kpi-tile-link { display: block; height: 100%; color: inherit; text-decoration: none; border-radius: 8px; }
.kpi-tile-link:hover .kpi-tile { box-shadow: 0 0 0 2px var(--mud-palette-primary); }
.kpi-tile-link:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.kpi-alert, .kpi-bad { color: var(--mud-palette-error) !important; }

/* Ряд плиток без сетки MudGrid: семь плиток склада в 12 колонок не делятся,
   а auto-fit укладывает их в одну строку на 1366 и переносит на узком. */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }

/* «Решить сегодня»: строка-дело — значок, число, что сделать, стрелка. */
.today-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
             color: inherit; text-decoration: none; }
a.today-row:hover { background: var(--mud-palette-action-default-hover); }
a.today-row:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.today-count { min-width: 2.5ch; text-align: right; font-weight: 600; font-size: 1.1rem; }
.today-text { flex: 1; }

/* Полоса шагов мастера: сделано — галочка, текущий — выделен (ревью UX, A5). */
.wizard-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.wizard-step { display: flex; align-items: center; gap: 8px; color: var(--mud-palette-text-secondary); font-size: .875rem; }
.wizard-num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
              font-weight: 600; font-size: .8rem; border: 1px solid var(--mud-palette-lines-default); }
.wizard-step.current { color: var(--mud-palette-text-primary); font-weight: 600; }
.wizard-step.current .wizard-num { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.wizard-step.done .wizard-num { background: var(--mud-palette-primary-hover); border-color: transparent; color: var(--mud-palette-primary); }

/* Увеличенный снимок обучения поверх страницы. */
.lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.82); display: flex;
            align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.5); background: #fff; }

/* Поиск по статьям обучения: найденное слово выделено. */
.learn-hit mark { background: var(--mud-palette-warning-hover); color: inherit; padding: 0 1px; border-radius: 2px; }

/* Карта Леви-Дженнингса: цвета темы, в тёмной теме оси видны (ревью UX, RS6). */
.qc-chart { width: 100%; height: auto; font-family: inherit; font-size: 11px; }
.qc-zone-ok { fill: var(--mud-palette-success); opacity: .07; }
.qc-zone-warn { fill: var(--mud-palette-warning); opacity: .08; }
.qc-zone-out { fill: var(--mud-palette-error); opacity: .07; }
.qc-grid { stroke: var(--mud-palette-lines-default); stroke-width: .8; }
.qc-mean, .qc-axis { stroke: var(--mud-palette-text-secondary); stroke-width: 1.3; }
.qc-label { fill: var(--mud-palette-text-secondary); }
.qc-trend { fill: none; stroke: var(--mud-palette-text-disabled); stroke-width: 1; }
.qc-pt { stroke: var(--mud-palette-surface); stroke-width: 1.5; }
.qc-pt.qc-ok { fill: var(--mud-palette-success); }
.qc-pt.qc-warn { fill: var(--mud-palette-warning); }
.qc-pt.qc-out { fill: var(--mud-palette-error); }
.qc-pt.qc-done { stroke: var(--mud-palette-text-primary); stroke-width: 2; }
.qc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.qc-dot.qc-ok { background: var(--mud-palette-success); }
.qc-dot.qc-warn { background: var(--mud-palette-warning); }
.qc-dot.qc-out { background: var(--mud-palette-error); }
.qc-dot.qc-done { box-shadow: 0 0 0 2px var(--mud-palette-text-primary); }

/* Чат ассистента: реплики пузырями, ответ — Markdown модели (ревью UX, AI). */
.chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: .875rem; line-height: 1.5; }
.chat-user { white-space: pre-wrap; background: var(--mud-palette-primary-hover); }
.chat-answer { background: var(--mud-palette-background-gray); }
.chat-error { max-width: 80%; }
.chat-md > :first-child { margin-top: 0; }
.chat-md > :last-child { margin-bottom: 0; }
.chat-md p, .chat-md ul, .chat-md ol { margin: 0 0 .5rem; }
.chat-md ul, .chat-md ol { padding-left: 1.25rem; }
.chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4 { font-size: 1rem; font-weight: 600; margin: .75rem 0 .25rem; }
.chat-md code { font-size: .8rem; padding: 0 .25rem; border-radius: 4px; background: var(--mud-palette-action-default-hover); }
.chat-md table { border-collapse: collapse; margin: .25rem 0 .5rem; }
.chat-md th, .chat-md td { border: 1px solid var(--mud-palette-lines-default); padding: 2px 8px; }

/* === Телефон и планшет (ревью мобильной версии 12.10.2026, волна M0) =====
   До 600 px — телефон: шапка из четырёх элементов, заголовок страницы в одну
   строку, кнопки не меньше 44 px. ПК (от 960 px) эти правила не трогают. */

/* Карточный вид таблиц. Ниже точки перелома MudBlazor показывает строку
   столбиком «подпись — значение», ячейка — flex без переноса. Длинное
   название с пометкой («нет КК за сутки», «сверх заказа») растягивало всю
   таблицу шире экрана (463 px при 358), и значения уезжали за правый край
   карточки: в бланке было видно «Гемоглобин (HGB)», но не «138 g/L».
   Таблица — по ширине экрана, содержимое ячейки переносится. Подпись слева,
   всё содержимое — одной группой справа (у MudBlazor space-between ставил
   «17» посередине, а чип «крит: 4» — у края). Пустая ячейка («Пред.» и «Δ»
   без прежнего результата) на телефоне не показывается — пустая строка с
   подписью только удлиняла карточку. */
@media (max-width: 600px) {
    .mud-xs-table .mud-table-root { table-layout: fixed; width: 100%; }
    .mud-xs-table .mud-table-cell { flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; min-width: 0; overflow-wrap: anywhere; text-align: right; }
    .mud-xs-table .mud-table-cell::before { margin-right: auto; text-align: left; font-family: var(--mud-typography-default-family); }
    .mud-xs-table .mud-table-cell > * { min-width: 0; max-width: 100%; }
    .mud-xs-table .mud-table-cell:empty { display: none; }
}
@media (max-width: 960px) {
    .mud-sm-table .mud-table-root { table-layout: fixed; width: 100%; }
    .mud-sm-table .mud-table-cell { flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; min-width: 0; overflow-wrap: anywhere; text-align: right; }
    .mud-sm-table .mud-table-cell::before { margin-right: auto; text-align: left; font-family: var(--mud-typography-default-family); }
    .mud-sm-table .mud-table-cell > * { min-width: 0; max-width: 100%; }
    .mud-sm-table .mud-table-cell:empty { display: none; }
}

/* Пункты меню профиля, нужные только на телефоне (тема): на ПК для них
   есть кнопка в шапке. */
.menu-narrow-only { display: none !important; }

/* Шапка меню профиля: кто вошёл, роли, клиника. */
.menu-profile-head { display: flex; align-items: flex-start; padding: 10px 16px 12px; min-width: 240px; }

/* Номер заказа в карточке — целиком, без переноса по дефисам. */
.order-title { white-space: nowrap; }

/* Картотека: пока колонки идут друг под другом, карточка пациента — над списком. */
@media (max-width: 959.98px) { .patient-card-col { order: -1; } }

@media (max-width: 599.98px) {
    .menu-narrow-only { display: flex !important; }
    .order-title { font-size: 1.25rem !important; }

    /* Шапка: ☰, знак, скан, профиль. Надпись «SARAP LAB», переключатель темы
       и чип клиники не помещались — шапка тянулась до 449 px, и меню профиля
       с «Выходом» оказывалось за краем экрана. Тема и клиника — в меню профиля. */
    .brand-word, .appbar-wide { display: none !important; }
    .brand { margin-right: 0; }

    /* Поля страницы: 24 px сверху и 16 по бокам — много для экрана в 390. */
    .mud-main-content > .mud-container { padding: 12px 12px 24px !important; }

    /* Заголовок страницы — одна строка: название с многоточием и «?» справа.
       Пояснение скрыто (оно нужно один раз, а не на каждом заходе): шапка
       занимала 150–190 px — пятую часть экрана. */
    .page-header { margin-bottom: 12px; gap: 8px; }
    .page-header-main { flex: 1 1 100%; flex-wrap: nowrap; align-items: center; gap: 4px; }
    .page-title { font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
    .page-subtitle { display: none; }
    .page-help-text { display: none; }
    .page-help { flex: 0 0 44px; width: 44px; height: 44px; justify-content: center; border-radius: 50%; }
    .page-header-actions { flex: 1 1 100%; }

    /* Палец — 44 px: маленькие иконки-кнопки (в том числе «⋮» строки) были
       26×26. */
    .mud-icon-button.mud-icon-button-size-small { min-width: 44px; min-height: 44px; }
}

/* === Нижняя навигация (ревью мобильной версии, M1; доска 12) ============
   До 960 px — телефон и планшет вертикально: четыре задачи роли и «Ещё»
   (полное меню). Набор — BottomNav.For, по правам. Высота 64 px; контент
   снизу отступает на столько же, чтобы последняя строка не пряталась под
   панелью. Открытая клавиатура панель закрывает сама — браузер не поднимает
   нижние закреплённые элементы над клавиатурой. */
.bottom-nav { display: none; }
@media (max-width: 959.98px) {
    .bottom-nav {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; height: 64px;
        background: var(--mud-palette-surface); border-top: 1px solid var(--mud-palette-lines-default);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
    }
    .bottom-nav-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        min-width: 0; min-height: 44px; padding: 0 1px; border: 0; background: none; cursor: pointer;
        color: var(--mud-palette-text-secondary); text-decoration: none; font: inherit; font-size: 11px; line-height: 1.2;
    }
    .bottom-nav-item.active { color: var(--mud-palette-primary); font-weight: 600; }
    .bottom-nav-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bottom-nav-icon { position: relative; display: inline-flex; }
    .bottom-nav-badge {
        position: absolute; top: -5px; left: 15px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
        background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
        font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    }
    .bottom-nav-badge.crit { background: var(--mud-palette-error); color: #FFFFFF; }
    .has-bottom-nav .mud-main-content { padding-bottom: 64px; }
}
@media (min-width: 600px) and (max-width: 959.98px) {
    .bottom-nav-item { flex-direction: row; gap: 8px; font-size: 14px; }
    .bottom-nav-badge { position: static; }
}

/* === Пульс клиники (ревью мобильной версии, M1; доски 10–12) ============
   Цвета — переменные темы: тёмная тема перекрашивает пульс сама. Исключение —
   главная карточка: она на фоне шапки, и подписи на ней светлые в обеих темах. */
.pulse-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 4px; }
.pulse-toolbar-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.pulse-seg {
    display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 340px;
    border: 1px solid var(--mud-palette-lines-inputs); border-radius: 10px; overflow: hidden; background: var(--mud-palette-surface);
}
.pulse-seg button {
    height: 40px; padding: 0 14px; border: 0; border-right: 1px solid var(--mud-palette-lines-default);
    background: transparent; color: var(--mud-palette-text-primary); font: inherit; font-size: .875rem; cursor: pointer;
}
.pulse-seg button:last-child { border-right: 0; }
.pulse-seg button.on { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-weight: 600; }
.pulse-compare { margin: 0; }
.pulse-period { margin: 0 0 12px; }
.pulse-filter-chip { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 8px; font-size: .8125rem; }

.pulse-narrow { display: none; }
@media (max-width: 959.98px) {
    .pulse-narrow { display: block; }
    .pulse-narrow.pulse-top { display: grid; }
    .pulse-wide, .pulse-wide-block { display: none !important; }
}
.pulse-top { gap: 10px; margin-bottom: 4px; }
@media (min-width: 600px) and (max-width: 959.98px) {
    .pulse-narrow.pulse-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.pulse-alert-strip {
    width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 10px; align-items: center;
    padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--mud-palette-error);
    background: var(--mud-palette-error-hover); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.pulse-alert-strip > .mud-icon-root:first-child { color: var(--mud-palette-error); }
.pulse-alert-strip.ok { grid-template-columns: 24px minmax(0, 1fr); border-color: var(--mud-palette-success); background: var(--mud-palette-success-hover); cursor: default; }
.pulse-alert-strip.ok > .mud-icon-root { color: var(--mud-palette-success); }
.pulse-alert-strip b { display: block; }
.pulse-alert-sub { display: block; font-size: .8125rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-alert-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pulse-alert {
    display: grid; grid-template-columns: 10px minmax(0, 1fr) 20px; gap: 10px; align-items: center;
    padding: 10px 12px; border-radius: 12px; color: inherit; text-decoration: none; background: var(--mud-palette-warning-hover);
}
.pulse-alert.critical { background: var(--mud-palette-error-hover); }
.pulse-alert-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mud-palette-warning); }
.pulse-alert.critical .pulse-alert-dot { background: var(--mud-palette-error); }
.pulse-alert-text { display: flex; flex-direction: column; min-width: 0; }
.pulse-alert-text small { opacity: .8; }

.pulse-hero {
    display: flex; flex-direction: column; gap: 2px; overflow: hidden; padding: 14px 16px 0; border-radius: 18px;
    background: #064D39; color: #FFFFFF;
}
.theme-dark .pulse-hero { background: #0A2A21; }
.pulse-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8125rem; color: #B9D9CB; }
.pulse-hero-delta { font-weight: 700; color: #FFFFFF; background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.pulse-hero-value { font-size: 2.25rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pulse-hero-note { font-size: .75rem; color: #B9D9CB; margin-bottom: 6px; min-height: 1em; }
.pulse-hero-foot {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    margin: 0 -16px; padding: 10px 16px 12px; border-top: 1px solid rgba(255, 255, 255, .14);
}
.pulse-hero-foot span { display: flex; flex-direction: column; min-width: 0; }
.pulse-hero-foot small { font-size: .75rem; color: #B9D9CB; }
.pulse-hero-foot b { font-size: 1rem; font-variant-numeric: tabular-nums; }

.pulse-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pulse-tile, .pulse-kpi {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; min-width: 0; padding: 10px 12px;
    border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--mud-palette-lines-default);
    background: var(--mud-palette-surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.pulse-tile > *, .pulse-kpi > * { text-align: left; }
.pulse-tile small { font-size: .75rem; }
.pulse-tile-title { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.pulse-tile-value { font-size: 1.375rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pulse-meter { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--mud-palette-lines-default); }
.pulse-meter > span { border-radius: 4px; background: var(--mud-palette-primary); }
.pulse-bullet { display: block; position: relative; height: 8px; margin: 4px 0; border-radius: 4px; background: var(--mud-palette-lines-default); }
.pulse-bullet-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--mud-palette-primary); }
.pulse-bullet-fill.bad { background: var(--mud-palette-error); }
.pulse-bullet-target { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--mud-palette-text-primary); }
.pulse-good { color: var(--mud-palette-success); font-weight: 600; }
.pulse-bad { color: var(--mud-palette-error); font-weight: 600; }

/* Шесть плиток — ровно в ряд от 1280 px, по три — уже: «5 + 1» с одинокой
   плиткой во втором ряду читалась как ошибка вёрстки. */
.pulse-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1280px) { .pulse-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pulse-kpi { padding: 14px 16px 10px; gap: 2px; }
.pulse-kpi.on { box-shadow: 0 0 0 2px var(--mud-palette-primary); }
.pulse-kpi-value { font-size: 1.625rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pulse-kpi small { font-size: .8125rem; min-height: 20px; }

.pulse-spark { display: block; width: 100%; }
.pulse-spark-line { fill: none; stroke: var(--mud-palette-primary); stroke-width: 2; stroke-linejoin: round; }
.pulse-spark-area { fill: var(--mud-palette-primary); opacity: .12; }
.pulse-spark-prev { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .7; }
.pulse-spark-light .pulse-spark-line { stroke: #7FD1AE; }
.pulse-spark-light .pulse-spark-area { fill: #7FD1AE; opacity: .22; }
.pulse-spark-light .pulse-spark-prev { stroke: #FFFFFF; opacity: .45; }

.pulse-ring-track { stroke: var(--mud-palette-lines-default); }
.pulse-ring-ok { stroke: var(--mud-palette-primary); }
.pulse-ring-warn { stroke: var(--mud-palette-warning); }
.pulse-ring-bad { stroke: var(--mud-palette-error); }

.pulse-card {
    height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 16px !important;
}
.pulse-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.pulse-card-head h2 { margin: 0; font-size: 1.125rem; font-weight: 700; flex: 1 1 auto; }
.pulse-card-head > span { font-size: .8125rem; }
.pulse-attention { border-color: var(--mud-palette-error); }
.pulse-attention.ok { border-color: var(--mud-palette-success); }
.pulse-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 10px; background: var(--mud-palette-background-gray); }
.pulse-tabs button {
    height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
    color: var(--mud-palette-text-primary); font: inherit; font-size: .8125rem; cursor: pointer;
}
.pulse-tabs button.on { background: var(--mud-palette-surface); color: var(--mud-palette-primary); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.pulse-chart { position: relative; }
.pulse-chart svg { display: block; width: 100%; height: auto; }
.pulse-grid { fill: none; stroke: var(--mud-palette-lines-default); stroke-width: 1; }
.pulse-axis { font-size: 11px; fill: var(--mud-palette-text-secondary); }
.pulse-chart-area { fill: var(--mud-palette-primary); opacity: .10; }
.pulse-chart-line { fill: none; stroke: var(--mud-palette-primary); stroke-width: 2.6; stroke-linejoin: round; }
.pulse-chart-prev { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 1.6; stroke-dasharray: 4 5; opacity: .8; }
.pulse-cross { stroke: var(--mud-palette-text-primary); stroke-width: 1; stroke-dasharray: 2 3; }
.pulse-dot { fill: var(--mud-palette-primary); stroke: var(--mud-palette-surface); stroke-width: 2; }
.pulse-dot-prev { fill: var(--mud-palette-surface); stroke: var(--mud-palette-text-secondary); stroke-width: 1.5; }
.pulse-chart-hit { position: absolute; top: 0; bottom: 15%; display: flex; }
.pulse-chart-hit > span { flex: 1 1 0; cursor: crosshair; }
.pulse-tip {
    position: absolute; top: 4px; z-index: 2; pointer-events: none; display: flex; flex-direction: column;
    padding: 8px 12px; border-radius: 10px; background: #161A1D; color: #FFFFFF;
    font-size: .8125rem; line-height: 1.4; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}
.pulse-tip-static { position: static; margin-top: 6px; white-space: normal; box-shadow: none; }
.pulse-tip-title { color: #B9C3BF; }
.pulse-tip-value { font-size: 1rem; }
.pulse-tip-good { color: #9FE0C3; }
.pulse-tip-bad { color: #F2A7A3; }
.pulse-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.pulse-legend > span { display: flex; align-items: center; gap: 6px; }
.pulse-legend-line { width: 18px; height: 3px; border-radius: 2px; background: var(--mud-palette-primary); }
.pulse-legend-dash { width: 18px; border-top: 2px dashed var(--mud-palette-text-secondary); }
.pulse-legend-hint { margin-left: auto; }

.pulse-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pulse-donut-ring { position: relative; flex: 0 0 auto; }
.pulse-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.pulse-donut-center b { font-size: 1.25rem; line-height: 1.1; }
.pulse-donut-center span { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.pulse-donut-slice { cursor: pointer; transition: opacity .15s; }
.pulse-donut-legend { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.pulse-legend-row {
    display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 36px;
    padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: .875rem;
    text-align: left; cursor: pointer;
}
.pulse-legend-row.selected { background: var(--mud-palette-background-gray); }
.pulse-legend-row.dim { opacity: .55; }
.pulse-legend-dot { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; }
.pulse-legend-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-drill { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--mud-palette-lines-default); }
.pulse-drill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pulse-drill-grid span { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: var(--mud-palette-background-gray); }
.pulse-drill-grid small { font-size: .75rem; color: var(--mud-palette-text-secondary); }

.pulse-dept {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 4px 0;
    border: 0; background: transparent; color: inherit; font: inherit; font-size: .875rem; text-align: left; cursor: pointer;
}
.pulse-dept:disabled { cursor: default; }
.pulse-dept-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-dept-bar { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 5px; background: var(--mud-palette-lines-default); }
.pulse-dept-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.pulse-dept-fill.ok { background: var(--mud-palette-primary); }
.pulse-dept-fill.warn { background: var(--mud-palette-warning); }
.pulse-dept-fill.bad { background: var(--mud-palette-error); }
.pulse-dept b.ok { color: var(--mud-palette-success); }
.pulse-dept b.warn { color: var(--mud-palette-warning-darken); }
.pulse-dept b.bad { color: var(--mud-palette-error); }
.pulse-dept-target { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--mud-palette-text-primary); }
.pulse-dept-note { grid-column: 1 / -1; font-size: .75rem; color: var(--mud-palette-text-secondary); }

.pulse-heat { display: grid; gap: 3px; font-size: 11px; color: var(--mud-palette-text-secondary); }
.pulse-heat-cell { height: 22px; border-radius: 4px; cursor: pointer; }
.pulse-heat-cell.selected { outline: 2px solid var(--mud-palette-secondary); outline-offset: 1px; }
.pulse-heat-day { align-self: center; }
.pulse-heat-hour { text-align: center; }
.pulse-heat-caption { min-height: 20px; font-size: .8125rem; }

.pulse-gw { display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--mud-palette-warning-darken); }
.pulse-gw.error { color: var(--mud-palette-error); }
.pulse-analyzer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: .875rem; }
.pulse-analyzer .pulse-meter { grid-column: 1 / -1; height: 6px; }
.pulse-analyzer small { grid-column: 1 / -1; font-size: .75rem; }
.pulse-analyzer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pulse-stack { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--mud-palette-lines-default); }
.pulse-pay { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: center; font-size: .875rem; }

.pulse-quality {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
    padding: 4px 0; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: .875rem;
}
.pulse-quality:last-of-type { border-bottom: 0; }
.pulse-pill { padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.pulse-pill.ok { background: var(--mud-palette-success-hover); color: var(--mud-palette-success); }
.pulse-pill.warn { background: var(--mud-palette-warning-hover); color: var(--mud-palette-warning-darken); }
.pulse-pill.bad { background: var(--mud-palette-error-hover); color: var(--mud-palette-error); }
.pulse-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; font-size: .875rem; }

@media (max-width: 599.98px) {
    .pulse-seg { min-width: 0; width: 100%; }
    .pulse-seg button { padding: 0 6px; }
    .pulse-card { padding: 14px; }
    .pulse-legend-hint { display: none !important; }
    .pulse-quality { grid-template-columns: minmax(0, 1fr) auto; }
    .pulse-quality .pulse-pill { grid-column: 1 / -1; justify-self: start; }
}

/* === Узкий экран: что показывать (ревью мобильной версии, M1) ==========
   only-narrow / not-narrow — до 960 px (телефон и планшет вертикально, там
   же нижняя навигация); only-phone / not-phone — до 600 px. Свой вид для
   телефона рисуется рядом с таблицей ПК, а не вместо неё: ПК не меняется. */
.only-narrow, .only-phone, .only-phone-inline { display: none; }
@media (max-width: 959.98px) {
    .only-narrow { display: block; }
    .mud-button-root.only-narrow { display: inline-flex; }
    .not-narrow { display: none !important; }
}
@media (max-width: 599.98px) {
    .only-phone { display: block; }
    .mud-button-root.only-phone { display: inline-flex; }
    .only-phone-inline { display: inline; }
    .not-phone { display: none !important; }
}

/* Чипы-фильтры на телефоне — одной строкой с прокруткой, а не тремя строками. */
@media (max-width: 599.98px) {
    .chips-scroll { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .chips-scroll::-webkit-scrollbar { display: none; }
    .chips-scroll .mud-chip { flex: 0 0 auto; }
}

/* Критические значения на телефоне — карточки (макет 07). */
.crit-cards { display: flex; flex-direction: column; gap: 10px; }
.crit-card {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-surface);
}
.crit-card.pending { border-color: var(--mud-palette-error); }
.crit-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .9375rem; }
.crit-card-head span { flex: 0 0 auto; font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.crit-card-value { display: flex; align-items: baseline; gap: 6px; color: var(--mud-palette-error); }
.crit-card-value b { font-size: 1.75rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.crit-card-limit { font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.crit-card-who {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
    font-size: .875rem; color: inherit; text-decoration: none; border-top: 1px solid var(--mud-palette-lines-default); margin-top: 4px;
}
.crit-card-wait { font-size: .8125rem; color: var(--mud-palette-error); font-weight: 600; }
.crit-card-done { font-size: .8125rem; color: var(--mud-palette-success); }
.crit-card .crit-card-btn { min-height: 48px; margin-top: 4px; }

/* Очередь проверки на телефоне и планшете — строки (макет 07). */
.queue-list {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mud-palette-surface);
}
.queue-row {
    position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 10px 40px 10px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default); color: inherit; text-decoration: none;
}
.queue-row:last-child { border-bottom: 0; }
.queue-row:active { background: var(--mud-palette-action-default-hover); }
.queue-row-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.queue-row-name { font-size: .9375rem; }
.queue-row-meta, .queue-row-why { font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.queue-row-why.problem { color: var(--mud-palette-error); }
.queue-row-why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.queue-row-sum { margin-left: auto; font-weight: 700; white-space: nowrap; }
.queue-row-right { margin-left: auto; font-size: .8125rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.queue-row-new { box-shadow: inset 4px 0 0 var(--mud-palette-primary); }
.filterbar-toggle {
    width: 100%; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px;
    border: 0; background: none; color: inherit; font: inherit; font-size: .9375rem; font-weight: 600; text-align: left; cursor: pointer;
}
.filterbar-toggle > span { flex: 1 1 auto; }
.queue-row-go { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--mud-palette-text-secondary); }

/* Бланк результата на телефоне и планшете (макет 07). */
.review-mini {
    position: sticky; top: 64px; z-index: 5; margin: 0 0 8px; padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-surface);
    font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 599.98px) { .review-mini { top: 56px; } }
.review-lines { margin-bottom: 12px; }
.review-lines-caption {
    margin: 12px 2px 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.review-lines-caption.crit { color: var(--mud-palette-error); }
.rl {
    display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mud-palette-surface);
}
.rl-crit { border-color: var(--mud-palette-error); background: var(--mud-palette-error-hover); }
.rl-abn { background: var(--mud-palette-warning-hover); }
.rl-excluded { opacity: .45; }
.rl-main { display: flex; align-items: flex-start; gap: 8px; }
.rl-main .mud-input-control { flex: 0 0 auto; width: auto; margin: -8px -4px 0 -10px; }
.rl-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rl-name > span { font-size: .9375rem; overflow-wrap: anywhere; }
.rl-name small, .rl-value small { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.rl-value { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; max-width: 45%; }
.rl-value b { font-size: 1.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rl-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.rl-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rl-acked { font-size: .8125rem; font-weight: 600; color: var(--mud-palette-success); }
.rl .mud-button-filled { min-height: 44px; margin-top: 2px; }
.rl-fix { align-self: flex-end; }

/* Нижняя панель бланка: «Проверить / Подтвердить» под пальцем; пока она на
   экране, нижняя навигация спрятана, а контент снизу отступает на её высоту. */
.review-actionbar { display: none; }
@media (max-width: 959.98px) {
    .review-actionbar {
        display: flex; flex-direction: column; gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1060;
        padding: 8px 12px 10px; background: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-lines-default); box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    }
    .review-actionbar-why { font-size: .8125rem; line-height: 1.35; color: var(--mud-palette-error); }
    .review-actionbar-buttons { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
    .review-actionbar-buttons .mud-button-root { min-height: 48px; }
    body:has(.review-actionbar) .bottom-nav { display: none !important; }
    body:has(.review-actionbar) .mud-main-content { padding-bottom: 140px; }
}

/* === Касание вместо мыши (ревью мобильной версии, M2) ====================
   Окна с полями на телефоне — на весь экран: поле ввода и кнопки окна не
   прячутся за клавиатурой, а длинная форма листается внутри окна. Короткие
   подтверждения (dialog-compact, MudMessageBox) остаются окнами. */
@media (max-width: 599.98px) {
    .mud-dialog-container .mud-dialog:not(.dialog-compact):not(.mud-message-box) {
        width: 100% !important; max-width: 100% !important; height: 100%; max-height: 100% !important;
        margin: 0 !important; border-radius: 0 !important;
    }
    .mud-dialog-container .mud-dialog:not(.dialog-compact):not(.mud-message-box) .mud-dialog-content {
        flex: 1 1 auto; overflow-y: auto;
    }
    .mud-dialog-container .mud-dialog:not(.dialog-compact):not(.mud-message-box) .mud-dialog-actions {
        border-top: 1px solid var(--mud-palette-lines-default);
    }
    .mud-dialog-actions .mud-button-root { min-height: 44px; }
}

/* Контроль качества: точка по нажатию и её строка под картой. */
.qc-pt { cursor: pointer; }
.qc-pt.qc-picked-pt { stroke: var(--mud-palette-text-primary); stroke-width: 3; }
.qc-picked { margin-top: 6px; padding: 6px 10px; border-radius: 8px; font-size: .875rem; background: var(--mud-palette-background-gray); }
.qc-picked-out { background: var(--mud-palette-error-hover); }
.qc-picked-warn { background: var(--mud-palette-warning-hover); }
.qc-dev-row { padding-right: 14px; }

/* Температурный журнал на телефоне: утро и вечер рядом, крупно. */
.temp-card-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0; }
.temp-card-cells > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; border-radius: 10px; background: var(--mud-palette-background-gray); font-size: 1.125rem; }
.temp-card-cells small { font-size: .75rem; color: var(--mud-palette-text-secondary); }

/* Новый заказ на телефоне: итог и главная кнопка в нижней панели. */
.order-actionbar-row { display: flex; align-items: center; gap: 12px; }
.order-actionbar-row .mud-button-root { flex: 1 1 auto; min-height: 48px; }
.order-actionbar-sum { display: flex; flex-direction: column; line-height: 1.25; font-size: .875rem; white-space: nowrap; }
.order-actionbar-sum span { color: var(--mud-palette-text-secondary); }

/* === Графики аналитики (ревью аналитики 12.10.2026) =======================
   Полосы по убыванию (HBarList) — для всего, что сравнивают по названию;
   полоса 100 % (Bar100) — вместо колец, где одна доля занимает почти всё. */
.hbar-list { display: flex; flex-direction: column; gap: 4px; }
.hbar-row { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding: 3px 4px; border-radius: 6px; font-size: .875rem; color: inherit; text-decoration: none; text-align: left;
    background: none; border: 0; font-family: inherit; width: 100%; }
.hbar-click { cursor: pointer; }
.hbar-click:hover, .hbar-click:focus-visible { background: var(--mud-palette-action-default-hover); }
.hbar-label { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.hbar-track { display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: var(--mud-palette-lines-default); }
.hbar-fill { height: 100%; flex: 0 0 auto; }
.hbar-value { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbar-note { font-weight: 600; margin-left: 6px; color: var(--mud-palette-text-secondary); }
.hbar-more { align-self: flex-start; margin-top: 4px; border: 0; background: none; padding: 6px 4px; cursor: pointer;
    color: var(--mud-palette-primary); font: inherit; font-weight: 600; }
/* Плитки показателей: столько колонок, сколько влезает, без одинокой седьмой во втором ряду. */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.bar100 { display: flex; flex-direction: column; gap: 8px; }
.bar100-track { display: flex; gap: 2px; height: 30px; border-radius: 6px; overflow: hidden; }
.bar100-seg { display: flex; align-items: center; padding: 0 8px; min-width: 0; overflow: hidden; white-space: nowrap;
    font-size: .8125rem; font-weight: 600; }
.bar100-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .8125rem; }
.bar100-key { display: inline-flex; align-items: center; gap: 6px; }
.bar100-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
@media (max-width: 599.98px) {
    .hbar-row { grid-template-columns: minmax(90px, 40%) minmax(0, 1fr) auto; gap: 8px; }
}

/* «Пуля» (BulletBar): факт заливкой, цель — риской. */
.bullet { position: relative; display: block; height: 14px; border-radius: 3px; background: var(--mud-palette-lines-default); }
.bullet-fill { position: absolute; left: 0; top: 3px; height: 8px; border-radius: 2px; }
.bullet-target { position: absolute; top: -3px; width: 2px; height: 20px; margin-left: -1px; background: var(--mud-palette-text-primary); }

/* Конвейер сроков (StagePipeline): медианы этапов одной полосой. */
.stage-pipe { display: flex; gap: 2px; height: 32px; border-radius: 6px; overflow: hidden; }
.stage-pipe-seg { display: flex; align-items: center; padding: 0 8px; min-width: 0; overflow: hidden; white-space: nowrap;
    font-size: .8125rem; font-weight: 600; }
.stage-pipe-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: .75rem; color: var(--mud-palette-text-secondary); }
.stage-pipe-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stage-pipe-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* === Ситуационный центр (ревью аналитики 12.10.2026, вариант A) ============ */
.sc-lamps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.sc-lamp { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; align-content: start; padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-surface);
    color: inherit; text-decoration: none; }
.sc-lamp:hover { box-shadow: 0 1px 6px rgba(0, 0, 0, .08); }
.sc-lamp-icon { grid-row: span 3; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.sc-lamp-title { font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.sc-lamp-text { font-size: .9375rem; line-height: 1.25; overflow-wrap: anywhere; }
.sc-lamp-state { margin-top: 4px; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--mud-palette-text-secondary); }
.sc-lamp.ok .sc-lamp-icon { background: var(--mud-palette-success-hover); color: var(--mud-palette-success); }
.sc-lamp.ok .sc-lamp-state { color: var(--mud-palette-success); }
.sc-lamp.warn { border-color: var(--mud-palette-warning-lighten); }
.sc-lamp.warn .sc-lamp-icon { background: var(--mud-palette-warning-hover); color: var(--mud-palette-warning-darken); }
.sc-lamp.warn .sc-lamp-state { color: var(--mud-palette-warning-darken); }
.sc-lamp.bad { border-color: var(--mud-palette-error); background: var(--mud-palette-error-hover); }
.sc-lamp.bad .sc-lamp-icon { background: var(--mud-palette-error); color: #FFFFFF; }
.sc-lamp.bad .sc-lamp-state { color: var(--mud-palette-error); }
@media (max-width: 599.98px) {
    .sc-lamp { grid-template-columns: minmax(0, 1fr); }
    .sc-lamp-icon { display: none; }
}
.sc-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.sc-row > .pulse-card { height: auto; }
.sc-wide { flex: 999 1 600px; min-width: 0; }
.sc-side { flex: 1 1 380px; min-width: 0; }
.sc-kicker { font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.sc-answer { margin: -6px 0 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.sc-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--mud-palette-text-secondary); margin-top: -4px; }
.sc-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sc-mini { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--mud-palette-lines-default); }
.sc-mini span { font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.sc-mini b { font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sc-mini.bad { border-color: var(--mud-palette-error); background: var(--mud-palette-error-hover); }
.sc-mini.bad b, .sc-mini.bad span { color: var(--mud-palette-error); }
.sc-note { font-size: .8125rem; }
.sc-calm { border-color: var(--mud-palette-success); }
.sc-calm-text { display: flex; align-items: center; gap: 10px; }
.sc-alerts-list { display: flex; flex-direction: column; }
.sc-alert { border-top: 1px solid var(--mud-palette-lines-default); }
.sc-alert-row { width: 100%; display: grid; grid-template-columns: 12px minmax(0, 1fr) 20px; gap: 12px; align-items: center;
    padding: 10px 4px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sc-alert-row:hover { background: var(--mud-palette-action-default-hover); }
.sc-alert-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mud-palette-warning); }
.sc-alert.critical .sc-alert-dot { background: var(--mud-palette-error); }
.sc-alert-text { display: flex; flex-direction: column; min-width: 0; }
.sc-alert-text small { color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-alert.open .sc-alert-text small { white-space: normal; }
.sc-alert-todo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 10px 28px; padding: 10px 14px;
    border-radius: 10px; background: var(--mud-palette-background-gray); font-size: .875rem; }
.sc-alert-todo > span { flex: 1 1 360px; min-width: 0; }
.sc-advice { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--mud-palette-lines-default); }
.sc-advice-item { display: flex; align-items: flex-start; gap: 8px; }
.sc-kpis { margin-bottom: 4px; }
.sc-reagents { display: flex; align-items: flex-start; gap: 8px; font-size: .875rem; }
.sc-quality { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 28px; }
.sc-q { display: flex; flex-direction: column; gap: 4px; }
.sc-q-head { display: flex; justify-content: space-between; gap: 10px; font-size: .875rem; }
.sc-q-value { white-space: nowrap; }

/* === Сводка для руководства (ревью аналитики 12.10.2026, А3) ================ */
.sm-main { margin-bottom: 16px; height: auto; }
.sm-title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.sm-highlights { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sm-hl { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 1rem; line-height: 1.45; }
.sm-hl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mud-palette-text-disabled); transform: translateY(-1px); }
.sm-hl.good .sm-hl-dot { background: var(--mud-palette-success); }
.sm-hl.bad .sm-hl-dot { background: var(--mud-palette-error); }
.sm-note { font-size: .75rem; }
.sm-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sm-hero .pulse-kpi { cursor: default; }
.sm-hero-value { font-size: 2rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sm-hero-bullet { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: .75rem; }
.sm-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 16px; margin-bottom: 16px; }
.sm-blocks > .pulse-card { height: auto; }
@media (max-width: 599.98px) {
    .sm-blocks { grid-template-columns: minmax(0, 1fr); }
    .sm-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .sm-hero-value { font-size: 1.375rem; }
}
.sm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.sm-stat { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--mud-palette-lines-default);
    color: inherit; text-decoration: none; }
.sm-stat span { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.sm-stat b { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.sm-stat small { font-size: .75rem; }
.sm-link:hover { background: var(--mud-palette-action-default-hover); }
.sm-quality { display: flex; flex-direction: column; gap: 10px; }
.sm-shares { display: flex; flex-direction: column; gap: 6px; }
.sm-more { height: auto; margin-bottom: 8px; }
.sm-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 28px; }
.sm-group { display: flex; flex-direction: column; gap: 2px; }
.sm-group > b { margin-bottom: 4px; }
.sm-group > small { margin-top: 4px; font-size: .75rem; }
.sm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 10px; align-items: baseline; padding: 4px 6px;
    border-radius: 6px; font-size: .875rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--mud-palette-lines-default); }
.sm-row > span { min-width: 0; overflow-wrap: anywhere; }
.sm-detail { display: block; font-size: .75rem; color: var(--mud-palette-text-secondary); text-align: left; }
/* Узкие колонки «Финансов» (md=4–5): стандартные 16 px по краям ячеек давали
   прокрутку на 4–7 px у таблиц из четырёх столбцов. Селектор длиннее, чем у
   MudBlazor для плотной таблицы (.mud-table-dense * .mud-table-row .mud-table-cell). */
.fin-narrow.mud-table .mud-table-row .mud-table-cell,
.fin-narrow.mud-table .mud-table-row .mud-table-cell:last-child { padding-left: 8px; padding-right: 8px; }

/* Матрица «отделения × показатели» (DeptMatrix): цвет клетки — к цели, значение
   и «из скольких» — текстом. Фон — доля цвета статуса (color-mix): «-hover» палитры
   слишком бледен для клетки, а своя доля работает и в тёмной теме. На телефоне прокручивается внутри карточки, первый
   столбец с названием отделения остаётся на месте. */
.dm-wrap { overflow-x: auto; margin: 0 -4px; }
.dm { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 4px; font-size: .875rem; }
.dm thead th { text-align: left; vertical-align: bottom; padding: 4px 8px; font-size: .8125rem; font-weight: 600;
    color: var(--mud-palette-text-secondary); }
.dm thead th small { display: block; font-weight: 400; }
.dm th.dm-name { text-align: left; padding: 6px 8px; font-weight: 600; min-width: 150px; max-width: 240px;
    position: sticky; left: 0; z-index: 1; background: var(--mud-palette-surface); overflow-wrap: anywhere; }
.dm thead th.dm-name { z-index: 2; }
.dm th.dm-none { color: var(--mud-palette-warning-darken); font-weight: 500; }
.dm td { padding: 0; }
.dm-cell { width: 100%; min-height: 48px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
    gap: 1px; padding: 6px 10px; border: 0; border-radius: 8px; text-align: left; font: inherit; color: inherit;
    background: var(--mud-palette-background-gray); }
button.dm-cell { cursor: pointer; }
button.dm-cell:hover, button.dm-cell:focus-visible { box-shadow: 0 0 0 2px var(--mud-palette-primary); outline: none; }
.dm-cell b { font-size: .9375rem; font-variant-numeric: tabular-nums; }
.dm-cell small { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.dm-cell.ok { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.dm-cell.ok b { color: var(--mud-palette-success-darken); }
.dm-cell.warn { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); }
.dm-cell.warn b, .dm-cell.warn small { color: var(--mud-palette-warning-darken); }
.dm-cell.bad { background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent); }
.dm-cell.bad b, .dm-cell.bad small { color: var(--mud-palette-error-darken); }
.dm-bar { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--mud-palette-lines-default); overflow: hidden; }
.dm-bar > span { display: block; height: 100%; background: var(--mud-palette-primary); }
.dm-selected th.dm-name { color: var(--mud-palette-primary); }
.dm-selected .dm-cell { box-shadow: 0 0 0 2px var(--mud-palette-text-primary); }
.dm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.dm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dm-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.dm-swatch.ok { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.dm-swatch.warn { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); }
.dm-swatch.bad { background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent); }
.dm-swatch.none { background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); }
.sm-row b { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sm-row > small { text-align: right; font-size: .75rem; }