/* S605: тонированные фоны для обеих тем — от палитры MudBlazor, не хексом.
   Текст на них наследует --mud-palette-text-primary и читается в светлой и тёмной теме. */
:root {
  --wms-tint-success: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
  --wms-tint-warning: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
  --wms-tint-error:   color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
  --wms-tint-info:    color-mix(in srgb, var(--mud-palette-info) 14%, transparent);
  --wms-tint-primary: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
  --wms-tint-neutral: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

html, body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    /* Резервируем место под вертикальный скроллбар: его появление/исчезание
       (авто-фит гридов, диалоги) не должно менять ширину страницы — иначе
       весь layout дёргается влево-вправо. */
    scrollbar-gutter: stable;
}

/* ══════════════════════════════════════════════════════
   WMS Compact Mode — FluentUI-like density for MudBlazor
   ══════════════════════════════════════════════════════ */

/* ── Input fields: 36px height instead of 56px ── */
.mud-input.mud-input-outlined {
    margin-top: 0 !important;
}
.mud-input-control {
    margin-top: 0 !important;
}
/* Unified font size for all input controls */
.mud-input.mud-input-outlined .mud-input-slot,
.mud-input.mud-input-outlined input,
.mud-input.mud-input-outlined textarea,
.mud-input input,
.mud-input textarea,
.mud-input .mud-input-slot {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 0.875rem !important;
}

/* Unified height for every outlined control (TextField / Select / DatePicker
   / Autocomplete / NumericField / TimePicker). Selects and pickers set
   min-height via their own slot rules — textfields only had padding, so
   they looked a bit shorter. Force the same min-height everywhere. */
.mud-input.mud-input-outlined .mud-input-slot,
.mud-input.mud-input-outlined input,
.mud-input.mud-input-outlined textarea {
    min-height: 24px !important;
    box-sizing: content-box;
}
.mud-input.mud-input-outlined {
    min-height: 36px;
}
/* Label: always shrunk (above the field) to prevent overlap with value text */
.mud-input-label {
    font-size: 0.875rem !important;
}
.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input-label-inputcontrol.mud-shrink {
    transform: translate(14px, -9px) scale(0.85) !important;
    background: var(--mud-palette-surface);
    padding: 0 4px;
}

/* ── MudPicker popover sizing ──
   MudBlazor 9.1 default `.mud-picker-popover-paper` has min-width:16px and
   overflow-x:hidden, so the popover inherits the trigger input's width — in a
   narrow MudItem (md=2 ≈ 150px) the calendar gets clipped to ~150×408.
   Force a calendar-fit min-width and unhide overflow. Same fix covers Dialog
   variant since it also uses .mud-picker-popover-paper as the inner paper. */
.mud-picker-popover-paper {
    min-width: 340px !important;
    width: max-content !important;
    max-width: 95vw !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}
.mud-overlay-content .mud-picker-popover-paper {
    width: auto !important;
}
.mud-picker-content {
    min-width: 320px !important;
}

/* ── Select: compact dropdown ── */
.mud-select .mud-input-slot {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 24px !important;
    font-size: 0.875rem !important;
}
.mud-select .mud-input-adornment {
    margin-top: 0 !important;
}
.mud-list-item {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 32px !important;
    font-size: 0.8125rem;
}

/* ── NumericField: same compact sizing ── */
.mud-input-control .mud-input-adornment {
    margin-top: 0 !important;
}

/* ── Buttons: 32px height ── */
.mud-button-root:not(.mud-icon-button):not(.mud-fab) {
    padding: 4px 12px !important;
    min-height: 32px !important;
    font-size: 0.8rem;
}
.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-outlined {
    min-height: 32px !important;
}

/* ── Chips: compact ── */
.mud-chip {
    height: 24px !important;
    font-size: 0.75rem !important;
}
.mud-chip .mud-chip-content {
    padding: 0 8px !important;
}

/* ── Dialog: less padding ── */
.mud-dialog .mud-dialog-content {
    padding: 12px 20px !important;
}
.mud-dialog .mud-dialog-title {
    padding: 12px 20px 8px !important;
}
.mud-dialog .mud-dialog-actions {
    padding: 8px 20px 12px !important;
}

/* ── Table cells: already dense from MudTable Dense=true, make tighter ── */
.mud-table-cell {
    padding: 4px 8px !important;
    font-size: 0.8rem;
    text-align: left;
}
.mud-table-head .mud-table-cell {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 8px !important;
    text-align: left;
}
/* MudBlazor 9 wraps sortable headers in MudTableSortLabel (flex container).
   Pin its content to flex-start so headers don't drift right while data
   sits left in non-sortable cells. */
.mud-table-head .mud-table-sort-label {
    justify-content: flex-start;
}

/* ── DataGrid: compact rows ── */
.mud-table-row {
    height: auto !important;
}

/* ── Toolbar / AppBar items: compact ── */
.mud-toolbar {
    min-height: 36px !important;
    padding: 4px 8px !important;
}

/* ── Card: less padding ── */
.mud-card-content {
    padding: 12px !important;
}
.mud-card-header {
    padding: 8px 12px !important;
}
.mud-card-actions {
    padding: 4px 12px 8px !important;
}

/* ── Alert: compact ── */
.mud-alert {
    padding: 4px 12px !important;
    font-size: 0.8rem;
}

/* ── Tabs: compact ── */
.mud-tab {
    min-width: auto !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
}

/* ── Grid spacing: tighter ── */
.mud-grid-spacing-xs-3 > .mud-grid-item {
    padding: 6px !important;
}

/* Dark mode preload — prevents flash of light theme on page load */
html.wms-dark-preload {
    background-color: #121212;
    color: #fff;
}

/* ── Бейджи в AppBar (колокольчик, принтер) ──
   Dense AppBar = 48px, полноразмерная MudIconButton занимает его целиком,
   а верх бара = верх окна. MudBadge с Overlap выносит чип ВВЕРХ за край
   кнопки → чип уходит за экран и не виден вовсе. Прижимаем внутрь кнопки:
   иконка 24px по центру 48px — угол над ней свободен, чип его занимает. */
.wms-appbar-badge .mud-badge {
    transform: none !important;
    /* Кнопка-иконка 48px в тулбаре 36px: флекс-центрирование выносит обёртку
       бейджа на −6px выше бара → top:8px кладёт чип на +2px от верха окна.
       Замерено headless-пробой 07.08 (S224-2). */
    top: 8px !important;
    right: 4px !important;
}

/* ── AppBar always full width over drawer ── */
.mud-appbar.mud-appbar-fixed-top {
    left: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    z-index: 1300;
}

/* ── Sidebar Drawer — flush with AppBar, no gap ──
   2026-05-17 visual audit: между AppBar (48px Dense fixed-top) и Drawer
   видна 1-2px щель — комбинация бэкграунда AppBar primary-green +
   Drawer.Variant=Persistent default border-top + elevation shadow.
   Жёстко прибиваем drawer к bottom-edge AppBar без зазоров. */
.wms-drawer {
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* Dense AppBar реально 48px, но базовая --mud-appbar-height резолвится в 64 →
       давала 16px щель под AppBar слева (сайдбар). Прибиваем к реальным 48px,
       как уже сделано в .wms-tab-bar. */
    top: 48px !important;
    height: calc(100vh - 48px) !important;
    z-index: 1200;
    border-top: none !important;
    /* Доп. защита: если у MudDrawer.Variant=Persistent появится свой transform-origin, не сместит */
    transform-origin: top left;
}
.wms-drawer.mud-drawer--open,
.wms-drawer.mud-drawer-pos-left {
    top: 48px !important;
}

/* Eliminate gap between AppBar and Drawer/Content */
.mud-appbar + .mud-drawer-container .mud-drawer {
    border-top: none !important;
}

.mud-layout .mud-main-content {
    margin-top: 0;
}

/* Remove any default spacing MudBlazor adds between appbar and drawer */
.mud-layout .mud-drawer-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* AppBar fixed-top: убираем border + elevation shadow, чтобы их «полоска»
   не выглядела как щель между AppBar и Drawer. Тонкая граница между ними
   и так читается из-за разных бэкграундов (зелёный AppBar / белый Drawer). */
.mud-appbar.mud-appbar-fixed-top {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* In dark mode AppBar and Drawer share #1E1E2E. The default elevation
   shadow falls onto the drawer's top edge and darkens it, which reads
   as a gap because there's no color contrast to mask it. Swap the drop
   shadow for a 1px highlight line so the transition is visible but no
   strip gets darkened. */
html.mud-dark .mud-appbar.mud-appbar-fixed-top {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Drawer overlay — no gap on top */
.mud-drawer {
    border-top: none !important;
}

.wms-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.nav-drawer-header {
    flex-shrink: 0;
}

.nav-drawer-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding-bottom: 80px; /* space for TabBar + last item fully visible */
}

.nav-drawer-menu::-webkit-scrollbar {
    width: 4px;
}

.nav-drawer-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.nav-drawer-toggle {
    width: 100%;
    border-radius: 0 !important;
}

.nav-search-results {
    max-height: 200px;
    overflow-y: auto;
}

.nav-favorites .mud-nav-link {
    font-size: 0.82rem;
}

/* Drawer nav items — compact */
.wms-drawer .mud-nav-link {
    padding: 4px 16px !important;
    min-height: 32px !important;
    font-size: 0.82rem;
}

.wms-drawer .mud-navgroup .mud-nav-link {
    padding-left: 24px !important;
}

.wms-drawer .mud-navgroup-title {
    font-size: 0.82rem;
    font-weight: 600;
}

/* Active nav link highlight */
.wms-drawer .mud-nav-link:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Mobile — drawer as overlay */
@media (max-width: 960px) {
    .wms-drawer {
        position: fixed !important;
        z-index: 1300;
    }
}

/* ── Compact tables ── */
.mud-table-cell {
    padding: 4px 8px !important;
}

/* ── KPI Cards ── */
.kpi-card {
    transition: transform 0.15s ease-in-out;
}
.kpi-card:hover {
    transform: scale(1.02);
}

/* ── Clickable rows ── */
.cursor-pointer {
    cursor: pointer;
}

/* ── ConfigurableMudTable (shared list table) ──
   Convention 2026-05-06: Dense + Bordered, FixedHeader/FixedFooter, full-page
   height with internal scroll, no footer checkbox in MultiSelection mode. */
.wms-no-footer-check tfoot tr td:first-child .mud-checkbox,
.wms-no-footer-check tfoot tr td:first-child input[type="checkbox"] {
    display: none !important;
}
.wms-cfg-table .mud-table-container {
    overflow: auto;
}

/* ── Tab Bar (наверху, вплотную под AppBar) ── */
.wms-tab-bar {
    position: fixed;
    /* Dense AppBar = 48px (MudBlazor: 0.75 × --mud-appbar-height(64)). Базовая
       переменная резолвится в 64 → давала щель 16px. Прибиваем к реальным 48px. */
    top: 48px;
    left: var(--wms-drawer-width, 0px);
    right: 0;
    height: 40px;
    background: var(--mud-palette-surface);
    border-bottom: 2px solid var(--mud-palette-primary);
    display: flex;
    align-items: stretch;
    z-index: 1100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: left 0.2s ease;
}

.wms-tab-list {
    display: flex;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    /* Hide scrollbar — visible 3px bar appeared on hover near the tab
       counter at the right edge and was visually distracting. Wheel +
       swipe scrolling still works. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wms-tab-list::-webkit-scrollbar {
    display: none;
}

.wms-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    min-width: 100px;
    max-width: 200px;
    cursor: pointer;
    border-right: 1px solid var(--mud-palette-lines-default);
    font-size: 0.78rem;
    white-space: nowrap;
    transition: background-color 0.15s, box-shadow 0.15s;
    user-select: none;
    position: relative;
}

/* No drawer — no first-tab offset needed */

.wms-tab:hover {
    background: var(--mud-palette-action-default-hover);
}

.wms-tab--active {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    font-weight: 600;
    box-shadow: inset 0 3px 0 var(--mud-palette-secondary);
}

.wms-tab--active .wms-tab__icon,
.wms-tab--active .wms-tab__close {
    color: var(--mud-palette-primary-text) !important;
}

.wms-tab__icon {
    flex-shrink: 0;
    font-size: 16px !important;
}

.wms-tab__title {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.wms-tab__close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.15s, background-color 0.15s;
    color: inherit;
}

.wms-tab__close:hover {
    opacity: 1;
    background: rgba(255,255,255,0.2);
}

.wms-tab-bar__info {
    display: flex;
    align-items: center;
    border-left: 1px solid var(--mud-palette-lines-default);
    padding: 0 4px;
    flex-shrink: 0;
}

/* Main content offset: top for fixed AppBar (48px Dense), bottom for tab bar
   (40px high fixed) + 16px buffer чтобы последний row контента не подлезал
   под TabBar (visual audit 2026-05-17: empty-state иконка/текст обрезались). */
.mud-main-content {
    /* 48px AppBar + 40px TabBar (теперь сверху) = 88px; низ — обычный буфер */
    padding-top: 88px !important;
    padding-bottom: 16px !important;
}

/* ── Compact toolbar on small screens ── */
@media (max-width: 960px) {
    .wms-tab-bar {
        height: 36px;
    }
}

/* ── Fixed-viewport page pattern (S183) ──────────────────────────────
   Страница занимает ровно вьюпорт минус фикс-хром (48 AppBar + 40 TabBar
   = 88 padding-top у .mud-main-content, + 16 padding-bottom). Скроллят
   ТОЛЬКО внутренности таблиц (sticky header), не страница и не .mud-paper.
   Никаких магических Height="calc(100vh - Npx)" на гридах — вместо этого:

     <div class="wms-page-fill">
       <MudPaper>фильтры (авто-высота)</MudPaper>
       <MudPaper Class="wms-fill">              ← забирает остаток
         <MudDataGrid Class="wms-grid-fill" FixedHeader="true" .../>
       </MudPaper>
       <MudPaper>нижняя панель фикс. высоты</MudPaper>
     </div>                                                            */
.wms-page-fill {
    /* 88 сверху (AppBar+TabBar) + 16 снизу + 46 хлебные крошки MainLayout
       (in-flow бар 40px + margin 6px; есть на всех страницах кроме корня). */
    height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
}

/* Секция (обычно MudPaper), забирающая весь остаток высоты родителя-флекса. */
.wms-fill {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── S444 (owner 07.10.2026): стопка «master → детали» ──────────────
   Верхний грид НЕ держит жёсткую долю: занимает столько, сколько в нём строк,
   но не больше потолка (55% стопки); всё остальное уходит деталям ниже.
   Заказ на 1 строку → детали получают ~2/3 высоты; заказ на 40 строк → мастер
   упирается в потолок и скроллит внутри (.wms-grid-fill > .mud-table-container).
   Проверено инъекцией на тесте (S444, 6 экранов). Было: flex:1 1 55% / 45%. */
.wms-fill-master {
    flex: 0 1 auto;
    max-height: var(--wms-master-max, 55%);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Нижняя часть стопки: весь остаток. Направление задаёт сам элемент
   (.wms-row-split — ряд панелей, .wms-fill — колонка). */
.wms-fill-rest {
    flex: 1 1 0;
    min-height: 0;
}

/* ── S446: фокусная строка грида карточки заказа — тон primary + полоса слева
   (было бледное --mud-palette-action-selected). Класс вешает RowClassFunc. */
:root { --wms-row-focus-bg: rgba(var(--mud-palette-primary-rgb), .16); }
html.mud-dark { --wms-row-focus-bg: color-mix(in srgb, var(--mud-palette-primary) 30%, transparent); }
tr.wms-row-focus > td { background: var(--wms-row-focus-bg) !important; }
tr.wms-row-focus > td:first-child { box-shadow: inset 3px 0 0 var(--mud-palette-primary); }
tr.wms-row-focus, tr.wms-row-click { cursor: pointer; }
/* «Позиции» заказа: строка = одна линия (чип без вертикального margin 4px, без переноса). */
.wms-grid-oneline td { white-space: nowrap; }
.wms-grid-oneline .mud-chip { margin: 0 2px; }
/* Ячейка-строка с многоточием (полный текст — в title). */
.wms-cell-ellipsis { display: block; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .75rem; }

/* MudDataGrid/MudTable, растягивающийся на высоту flex-родителя.
   .mud-table по умолчанию block → делаем flex-колонкой; скролл живёт
   в .mud-table-container, sticky thead работает от его max-height:100%. */
.wms-grid-fill {
    flex: 1 1 auto;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
}
/* Обёртка-корень ConfigurableMudDataGrid (держит ElementReference для
   gridAutoFit). Без класса это block с min-height:auto — он рос по контенту
   и рвал fill-цепочку S183: Height="100%" у грида резолвился от auto-родителя,
   таблица вырастала на тысячи px, футер/пейджер уезжали за overflow-клип.
   Во flex-родителе ведёт себя как .wms-grid-fill; в обычном потоке безвреден
   (высота остаётся контентной, JS auto-fit работает как раньше). */
.wms-grid-host {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.wms-grid-fill > .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* S268: широкие гриды (кокпит заказов с грузополучателем) скроллятся
       горизонтально внутри контейнера, а не распирают страницу. */
    overflow-x: auto;
}

/* Отчётная таблица с прилипающим итогом (<tfoot>) — отчёты Warehouse*.
   Sticky не может целиться в скролл страницы (AutoFitPanel): между tfoot и
   ним стоит .mud-table-container с overflow≠visible — «ближайший скроллпорт»,
   который сам не скроллится (замерено headless-пробой S289). Поэтому скролл
   отдаём самому контейнеру: шапка и итог прилипают к его краям, футер виден
   всегда. Нарочно ТОЛЬКО tfoot, не tr:last-child: тот цепляет последнюю
   строку каждой секции (thead/tbody) — данные плавали бы поверх итога. */
.wms-sticky-total .mud-table-container {
    max-height: calc(100vh - 340px);
    overflow-y: auto;
}
.wms-sticky-total thead th {
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
    z-index: 1;
}
.wms-sticky-total tfoot td {
    position: sticky;
    bottom: 0;
    background: var(--mud-palette-surface);
    font-weight: 600;
    box-shadow: 0 -1px 0 var(--mud-palette-table-lines);
}

/* Горизонтальный ряд равноширинных панелей внутри .wms-page-fill
   (например ЛПН слева + серийники справа). Высоту задаёт flex-basis
   родителя, дети — .wms-fill/.wms-grid-fill. */
.wms-row-split {
    display: flex;
    gap: 6px;
    min-height: 0;
}
.wms-row-split > * {
    flex: 1 1 0;
    min-width: 0;
}

/* ── Fullscreen-диалог без собственного скролла (S183) ──
   Вешается через <MudDialog ContentClass="wms-dialog-fill">.
   .mud-dialog-content уже flex:1 1 auto внутри flex-колонки .mud-dialog —
   гасим его overflow и делаем flex-контейнером для шапки + табов. */
.wms-dialog-fill {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    min-height: 0;
    padding: 8px 12px;
}

/* MudTabs, заполняющий остаток высоты (в диалоге или на странице).
   .mud-tabs уже flex-колонка, .mud-tabs-panels уже flex-grow:1 —
   добавляем ограничение высоты и внутренний скролл активной панели. */
.wms-tabs-fill {
    flex: 1 1 0;
    min-height: 0;
}
.wms-tabs-fill > .mud-tabs-panels {
    /* MudBlazor 9.1: класс mud-tabs-rounded переехал с корня .mud-tabs на таббар,
       и штатное правило .mud-tabs.mud-tabs-rounded .mud-tabs-panels{flex-grow:1}
       перестало матчиться — панели схлопывались в 0 (NOTIF-PAGE-PANELS-COLLAPSED).
       Держим рост панелей своим правилом, не завися от разметки MudBlazor. */
    flex: 1 1 0;
    min-height: 0;
    /* S590: при MudTabs KeepPanelsAlive="true" активная панель получает inline display:contents —
       своего бокса у неё нет, правила .mud-tab-panel ниже на неё не действуют, и «простыню»
       (форма класса К: SkuForm, карточка клиента, ячейка) резал overflow:hidden этого контейнера.
       overflow-y:auto здесь: длинная вкладка скроллит контейнер; кокпиты с .wms-panel-fill/.wms-grid-fill
       не переполняют его (проверено живьём 03.11: ASN «Позиции» — грид скроллит сам, двойного скролла нет). */
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}
.wms-tabs-fill > .mud-tabs-panels > [role="tabpanel"],
.wms-tabs-fill > .mud-tabs-panels > .mud-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto; /* панели-«простыни» (Инфо, Обзор) скроллят сами себя */
}
/* Панель, которой нужен внутренний split без скролла (Позиции):
   первым ребёнком кладём <div class="wms-panel-fill">…flex-колонка…</div> */
.wms-tabs-fill > .mud-tabs-panels > [role="tabpanel"]:has(> .wms-panel-fill),
.wms-tabs-fill > .mud-tabs-panels > .mud-tab-panel:has(> .wms-panel-fill) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wms-panel-fill {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
}
/* Во flex-родителе (панель таба с :has выше) высоту даёт флекс, не процент —
   иначе паддинг панели выталкивает низ за границу. */
.wms-tabs-fill > .mud-tabs-panels > [role="tabpanel"] > .wms-panel-fill,
.wms-tabs-fill > .mud-tabs-panels > .mud-tab-panel > .wms-panel-fill {
    height: auto;
    flex: 1 1 0;
}

/* ── Пропорциональная стопка секций (S230) ───────────────────────────────
   Зачем: в обычной стопке .wms-panel-fill мастер-секция стоит на .wms-fill
   (flex:1 1 0) и получает ТОЛЬКО остаток после секций естественной высоты.
   Как только нижние секции наполнялись таблицами, они выдавливали мастер-
   список до одной строки (жалоба владельца по табу «Сборка», 10.08).
   Здесь секции — доли ОДНОГО бюджета высоты, у каждой свой внутренний скролл.
   Доли и минимумы крутятся одной правкой в переменных ниже.

     <div class="wms-panel-fill wms-vstack">
       <MudPaper Class="wms-vsec wms-vsec-1">§ 1 (внутри .wms-grid-fill)</MudPaper>
       <MudPaper Class="wms-vsec wms-vsec-2">§ 2 (внутри .wms-grid-fill)</MudPaper>
     </div>

   Секция, в которой сейчас НЕТ таблицы (инфо-плашка «выберите…»), помечается
   .wms-vsec-auto — она сжимается по содержимому, и весь освободившийся
   остаток уходит § 1: при пустом выборе виден максимум строк мастера.        */
.wms-vstack {
    /* Доли высоты: § 1 мастер-список / § 2 деталь-таблица.
       Числа безразмерные — это flex-grow, читаются как проценты.
       50/50 подобрано по факту на 1536×745 (владелец, 10.08): при 60/40
       в § 1 помещалось 8 строк — просили 6, чтобы отдать высоту деталям.
       Арифметика: бюджет стопки ~533px, хром § 1 (однорядный тулбар 48 +
       шапка грида 36) ~84px, плотная строка ~30px → 6 строк = 264px ≈ 50%.

       S444 (07.10.2026): § 1 больше не держит долю — flex:0 1 auto по содержимому с потолком --wms-vsec-max-1 (55% ≈ 6 плотных строк на 1366×768), § 2 забирает остаток; при коротком списке деталь получает больше. --wms-vsec-1/2 оставлены для совместимости, в раскладке не участвуют. */
    --wms-vsec-1: 50;
    --wms-vsec-2: 50;
    --wms-vsec-max-1: 55%;
    /* Минимум § 1 = его содержимое; § 2 — 210px.
       Ниже суммы минимумов скролл стопки целиком (см. overflow-y ниже). */
    --wms-vsec-min-1: 0px;
    --wms-vsec-min-2: 210px;
    /* Ниже суммы минимумов (очень низкое окно) скроллим стопку целиком,
       а не режем нижнюю секцию по overflow:hidden родителя. */
    overflow-y: auto;
    overflow-x: hidden;
}
.wms-vsec {
    flex-shrink: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wms-vsec-1 { flex: 0 1 auto; max-height: var(--wms-vsec-max-1); min-height: var(--wms-vsec-min-1); }
.wms-vsec-2 { flex: 1 1 0; min-height: var(--wms-vsec-min-2); }
/* Ничего не выбрано (§ 2 — инфо-плашка .wms-vsec-auto): мастер забирает весь остаток, как и до S444. */
.wms-vstack:has(.wms-vsec-auto) .wms-vsec-1 { flex: 1 1 0; max-height: none; }
/* Пустое состояние (инфо-плашка): по содержимому, доли не резервирует.
   Идёт ПОСЛЕ .wms-vsec-N — при равной специфичности выигрывает порядок. */
.wms-vsec-auto {
    flex-grow: 0;
    flex-basis: auto;
    min-height: 0;
    overflow: visible;
}

/* Раскрытие строки грида (ChildRowContent) — деталь под строкой. */
.wms-row-detail {
    background: var(--mud-palette-background-grey);
    padding: 8px 12px;
}

/* ── Status badge hover tooltip ── */
.mud-chip:hover {
    opacity: 0.9;
}

/* ── Menu card headers ── */
.menu-card-header {
    padding: 8px 12px;
    color: white;
}
.menu-card-header--operations { background: #2E7D32; }
.menu-card-header--services { background: #0277BD; }
.menu-card-header--inbound { background: #1565C0; }
.menu-card-header--outbound { background: #E65100; }
.menu-card-header--warehouse { background: #6A1B9A; }
.menu-card-header--monitoring { background: #37474F; }
.menu-card-header--reports { background: #00838F; }
.menu-card-header--ai { background: #7B1FA2; }
.menu-card-header--references { background: #4E342E; }
.menu-card-header--admin { background: #263238; }

.menu-card-header .mud-icon-root,
.menu-card-header .mud-typography {
    color: white !important;
}

/* ── Login page ── */
/* S305 (2026-09-04): LoginLayout без AppBar/TabBar, а глобальное
   .mud-main-content { padding-top:88px; padding-bottom:16px } + .login-page
   { min-height:100vh } давали страницу выше вьюпорта ровно на 104px —
   вертикальный скролл на логине на любом экране (замер headless на проде). */
.mud-layout .mud-main-content.wms-login-main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.login-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8vh;
    min-height: 100vh;
}

.login-card {
    width: 420px;
    max-width: 95vw;
    padding: 2rem;
    border-radius: 12px !important;
}

.login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* h1 с логотипом: FocusOnNavigate (Routes.razor) фокусирует первый h1 — без outline:none вокруг логотипа рамка фокуса */
.login-brand { margin: 0 0 6px; line-height: 0; }
/* специфичнее глобального :focus-visible ниже (Accessibility: Focus indicators) — тот идёт позже и иначе побеждает */
.login-brand:focus, .login-brand:focus-visible { outline: none; }

.login-logo {
    font-size: 3rem !important;
}

.login-field {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-field:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
}

.login-field__icon {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--mud-palette-text-secondary);
}

.login-input {
    flex: 1;
    padding: 14px 12px 14px 0;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    background: transparent;
    color: var(--mud-palette-text-primary);
    width: 100%;
    box-sizing: border-box;
}

.login-input::placeholder {
    color: var(--mud-palette-text-secondary);
}

.login-input--password {
    padding-right: 44px;
}

.login-field__toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    color: var(--mud-palette-text-secondary);
    transition: background-color 0.15s;
}

.login-field__toggle:hover {
    background: var(--mud-palette-action-default-hover);
}

.login-submit {
    width: 100%;
    padding: 14px;
    background: var(--mud-palette-primary);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, box-shadow 0.2s;
    margin-top: 8px;
}

.login-submit:hover {
    filter: brightness(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.login-submit:active {
    filter: brightness(0.95);
}

.login-submit:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ── Command Palette ── */
.cmd-palette {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1501;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
    pointer-events: none;
}

.cmd-palette__panel {
    width: 520px;
    max-width: 90vw;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    border-radius: 12px !important;
    overflow: hidden;
    pointer-events: auto;
}

.cmd-palette__input {
    padding: 8px 12px 4px;
}

.cmd-palette__results {
    overflow-y: auto;
    max-height: 320px;
}

.cmd-palette__results .mud-list {
    padding: 0 !important;
}

.cmd-palette__results .mud-list-item {
    min-height: 36px !important;
}

.cmd-palette__footer {
    padding: 6px 12px;
    text-align: center;
}

.cmd-palette__footer kbd {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.7rem;
    font-family: inherit;
}

/* ── Notification bell popover ── */
/* S450 (08.10.2026, owner: «при многих сообщениях два вертикальных скролла»): MudBlazor 9
   даёт списку внутри попапа своё правило `.mud-popover .mud-list { max-height: inherit;
   overflow-y: auto }` — список наследовал max-height бумаги (620px) и скроллился сам,
   а бумага (шапка + чипы категорий + список > 620px) скроллилась поверх него: две полосы.
   Теперь бумага — flex-колонка без overflow, скроллер РОВНО ОДИН — список; шапка
   «Уведомления / Прочитать все» и чипы категорий остаются на месте при прокрутке.
   Проверено замером на тесте при 20 уведомлениях: scrollers = [mud-list] (было два). */
.cmd-notifications-popover > .mud-paper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cmd-notifications-popover .mud-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}
.notification-unread {
    background: rgba(var(--mud-palette-primary-rgb), 0.06) !important;
}

/* ── Favorites bar (legacy, kept for AppBar if needed) ── */
.wms-favorites-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.2);
}

.wms-favorites-bar__item {
    color: rgba(255,255,255,0.8) !important;
    transition: color 0.15s;
}

.wms-favorites-bar__item:hover {
    color: white !important;
}

/* ── Session timeout warning ── */
.wms-session-warning {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border-radius: 8px !important;
}

/* S566: полный логотип (≈132px) шире старого текста «Atlas WMS» и на 1366px выталкивал
   за край тему/профиль — до 1600px в шапке только знак-глобус. Блок ДО @media 600px ниже:
   там .appbar-brand прячется целиком и должно побеждать по порядку. */
.appbar-brand--mark { display: none; }
/* S570: на 26px строчные логотипа ~7px — owner «мелко, зрение напрягается». 32px только от
   1920px: на 1600–1919 шапка уже переносит кнопки в две строки, +31px вытолкнули бы профиль. */
.appbar-brand--full { height: 26px; }
@media (min-width: 1920px) {
    .appbar-brand--full { height: 32px; }
}
@media (max-width: 1599.98px) {
    .appbar-brand--full { display: none; }
    .appbar-brand--mark { display: inline-block; }
}

/* ── Responsive AppBar ── */
@media (max-width: 600px) {
    .appbar-brand {
        display: none;
    }

    .wms-favorites-bar {
        display: none;
    }

    .mud-appbar .mud-chip {
        display: none;
    }

    .mud-appbar .mud-menu:not(:last-child) {
        display: none;
    }

    /* Keep notification bell + user menu + theme toggle visible */
}

@media (max-width: 960px) {
    .cmd-palette__panel {
        width: 95vw;
    }
}

/* ── Tab transition ── */
.mud-main-content > div[aria-hidden="false"] {
    animation: wms-tab-fadein 0.15s ease-out;
}

@keyframes wms-tab-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── KPI Card tooltips ── */
.kpi-card .mud-tooltip-root {
    width: 100%;
}

/* ── Print styles ── */
@media print {
    .wms-tab-bar,
    .mud-appbar,
    .mud-drawer,
    .mud-snackbar-provider,
    .mud-dialog-provider,
    .mud-popover-provider,
    .no-print {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
    }

    .mud-table {
        box-shadow: none !important;
    }

    .mud-paper {
        box-shadow: none !important;
        border: 1px solid #ddd;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a[href]::after {
        content: none;
    }
}

/* ── Accessibility: Focus indicators ── */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.mud-button:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.wms-tab:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Screen reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Dark mode contrast — chip readability ── */
html.mud-dark .mud-chip-outlined { border-width: 1.5px; }
html.mud-dark .mud-chip { font-weight: 500; }

/* ── Responsive — tablet KPI cards ── */
@media (max-width: 1024px) {
    .kpi-card { padding: 12px !important; }
    .kpi-card .mud-typography-h4 { font-size: 1.5rem !important; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .live-dot,
    .kpi-value-flash {
        animation: none !important;
    }

    .kpi-card:hover {
        transform: none !important;
    }

    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ──────────────────────────────────────────────────────────────────
   Uniform table style across the app (UX request 2026-04-30)
   - Kill zebra-striping that some inline MudSimpleTable / MudDataGrid
     instances still set explicitly via Striped="true".
   - Add a thin row separator + outer border for every table the app
     renders (MudTable, MudSimpleTable, MudDataGrid).
   ConfigurableMudTable already opts into Bordered/no-Striped via its
   own defaults; this stylesheet covers the inline tables that bypass
   that wrapper. !important is intentional — overrides per-table
   props that were set in razor before this rule landed.
   ────────────────────────────────────────────────────────────────── */
.mud-table-striped tbody > tr:nth-of-type(even),
.mud-data-grid-striped tbody > tr:nth-of-type(even) {
    background-color: transparent !important;
}

.mud-table:not(.mud-table-bordered) > .mud-table-container > table,
.mud-data-grid > .mud-table-container > table {
    border: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, .10));
}

.mud-table > .mud-table-container > table > tbody > tr > td,
.mud-table > .mud-table-container > table > thead > tr > th,
.mud-data-grid > .mud-table-container > table > tbody > tr > td,
.mud-data-grid > .mud-table-container > table > thead > tr > th {
    border-bottom: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, .08));
}

/* ══════════════════════════════════════════════════════
   MudNumericField — compact 36px (match TextField) + proportional ▲▼.
   MudBlazor 9.1 real class is `.mud-input-numeric-spin` (position:absolute,
   right:0, top/bottom:0, justify-content:space-between). With our 36px
   input height, each button gets ~18px half — icons must shrink or the
   bottom arrow gets pushed off-center by overflowing into the input pad.
   Burned 2026-05-17 (was 56px-override, looked oversized).
   ══════════════════════════════════════════════════════ */

/* Right-pad input so the value doesn't run under the arrows */
.mud-input-control.mud-input-number-control .mud-input-slot,
.mud-input-control.mud-input-number-control input {
    padding-right: 24px !important;
}

/* Spin container — auto height (= sum of two buttons), centered vertically
   in the input row. Stock rule has top:0/bottom:0 which makes the container
   span the entire control INCLUDING label area, so the buttons end up at
   the very top (over the label) and very bottom (under the helper text).
   Override by collapsing height and centering. */
.mud-input-control.mud-input-number-control .mud-input-numeric-spin {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    height: auto !important;
    padding: 0 !important;
    gap: 1px;
}

/* Spin buttons — fixed 16px × 22px slots. Override stock `.mud-icon-button`
   padding:12px and `.mud-button-root` size classes with !important + multi-class
   specificity so neither one wins. */
.mud-input-control.mud-input-number-control .mud-input-numeric-spin button,
.mud-input-control.mud-input-number-control .mud-input-numeric-spin button.mud-button-root,
.mud-input-control.mud-input-number-control .mud-input-numeric-spin button.mud-icon-button {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    flex: 0 0 16px !important;
}

/* ▲▼ glyph — 12px so it fits the 16px button with breathing room */
.mud-input-control.mud-input-number-control .mud-input-numeric-spin .mud-icon-root,
.mud-input-control.mud-input-number-control .mud-input-numeric-spin svg {
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* ══════════════════════════════════════════════════════
   WCAG AA color-contrast fixes (axe-core audit 2026-05-17)
   Theme.Secondary=#D97706 — оригинальный brand-оранжевый. Когда применён
   как ТЕКСТ на белой поверхности (MudText Color="Color.Secondary") даёт
   contrast ≈3.2 (нужно 4.5). Заменяем ТОЛЬКО для текстовых классов на
   amber-800 (#92400E) — contrast ≈7 на белом, бренд
   читаем. Кнопки/AppBar с Secondary остаются исходным цветом.
   ══════════════════════════════════════════════════════ */
/* Light-only: яркий #D97706 secondary даёт 2.79 contrast на белом.
   В dark-теме MudBlazor уже использует Lighten(secondary), не трогаем —
   там оригинальный #D97706 на чёрном фоне читается с contrast 5.9+.
   Без html.mud-light scope правило раньше делало dark-secondary темно-красным. */
html:not(.mud-dark) .mud-secondary-text {
    color: #92400E !important;
}
/* S301 (2026-09-03), PORTAL-SECONDARY-IS-ORANGE: MudText Color="Color.Secondary" стоит
   на ~670 строках портала как «второстепенная подпись» (Typo.caption, пустые состояния,
   подписи полей), а Theme.Secondary — бренд-янтарный: подписи выглядели как
   предупреждение. Для ТИПОГРАФИКИ (и только для неё — иконки, кнопки, чипы остаются
   оранжевыми) secondary = приглушённый текст палитры, в обеих темах. Специфичность
   выше правила light-only выше (html body + два класса), иначе оно перебивает. Нужен
   оранжевый акцент в тексте — задавайте Style явно. */
html body .mud-typography.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}
/* Error text caption ("Offline") на светло-сером бэкграунде — только light.
   default #F44336 даёт 3.37 → используем Material Red 700 (#D32F2F) = 5.07 */
html:not(.mud-dark) .mud-error-text {
    color: #D32F2F !important;
}
/* MudAlert Success: текст "Всё в порядке" имеет
   #00A344 на #E6F2EB (filled-success style) = 2.88 → Material Green 900 */
html:not(.mud-dark) .mud-alert.mud-alert-success .mud-alert-message,
html:not(.mud-dark) .mud-alert-filled-success .mud-alert-message,
html:not(.mud-dark) .mud-alert.mud-alert-success {
    color: #1B5E20 !important;
}

/* ── S257: карточки-кнопки развилки «Что с паллетой?» ─────────────────────────
   Карточка целиком кликабельна, но по виду это MudPaper — без реакции на hover
   оператор не понимает, что жать можно мимо кнопки, и тычет строго в кнопку.
   Приподнимаем и подсвечиваем рамку, чтобы «кликабельность» читалась глазами.  */
.wms-choice-card {
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.wms-choice-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-6);
    transform: translateY(-2px);
}

/* S447: вкладка «Инфо» заказа (OrderDetailDialog) — полоса этапов + группы «метка : значение» */
.wms-info-stages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.wms-info-stage { display: flex; align-items: center; gap: 4px; line-height: 1.2; font-size: .75rem; }
.wms-info-stage-sep { width: 16px; height: 1px; margin: 0 6px; background: var(--mud-palette-lines-default); }
.wms-info-stage-time { color: var(--mud-palette-text-secondary); white-space: nowrap; }
.wms-info-stage-current .wms-info-stage-label { font-weight: 700; } .wms-info-stage-current .wms-info-stage-time { color: var(--mud-palette-text-primary); }
.wms-info-stage-future, .wms-info-stage-future .wms-info-stage-time { color: var(--mud-palette-text-disabled); }
.wms-info-due { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: .875rem; }
/* S447: строка «Срок … / Изменить» над группами «Инфо» заказа — справа, отдельно от полосы этапов */
.wms-info-actions { display: flex; justify-content: flex-end; align-items: center; min-height: 32px; }
.wms-info-group { height: 100%; } .wms-info-group-title { display: block; line-height: 1.6; color: var(--mud-palette-text-secondary); }
.wms-info-row { display: flex; align-items: baseline; gap: 8px; min-height: 26px; }
.wms-info-label { flex: 0 0 110px; font-size: .75rem; color: var(--mud-palette-text-secondary); } .wms-info-due .wms-info-label { flex: none; }
.wms-info-value { flex: 1 1 auto; min-width: 0; font-size: .875rem; overflow-wrap: anywhere; }
.wms-info-empty, .wms-info-hint { color: var(--mud-palette-text-secondary); } .wms-info-mono { font-family: monospace; }
.wms-info-notes-text { white-space: pre-wrap; }
/* S447: режим «Изменить» вкладки «Инфо» заказа — dense-инпуты в строках, кликабельные значения в просмотре */
.wms-info-editable { cursor: pointer; border-bottom: 1px dashed var(--mud-palette-lines-inputs); } .wms-info-editable:hover { color: var(--mud-palette-primary); }
.wms-info-editing .wms-info-row { align-items: center; min-height: 34px; } .wms-info-editing .wms-info-value .mud-input-control { margin-top: 0; }
.wms-info-input-xs { max-width: 90px; } .wms-info-input-sm { max-width: 110px; }
.wms-info-edit-bar { display: flex; align-items: flex-start; gap: 8px; } .wms-info-edit-bar > .mud-input-control { flex: 1 1 auto; max-width: 520px; } .wms-info-edit-bar > .mud-button-root { margin-top: 6px; }
/* S447: «Инфо» ASN (AsnDetailDialog) — полоса хода: «Принято N из M» + прогресс + оператор справа */
.wms-info-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .875rem; }

/* S450 фаза 2: кнопки страницы в тулбаре ConfigurableMudDataGrid.
   Страница кладёт в ToolBarContent «поиск, MudSpacer, кнопки», а обёртка
   после него добавляет свой MudSpacer перед иконками экспорта/колонок.
   Два спейсера делили остаток пополам, и кнопка вставала посередине
   (замер /carriers: кнопка 864–984 при ширине тулбара 1323). Второй и
   следующие спейсеры не растут: кнопки прижимаются вправо к иконкам. */
.wms-cfg-grid .mud-toolbar > .flex-grow-1 ~ .flex-grow-1 {
    flex-grow: 0 !important;
    margin-left: 8px;
}

/* S450 пилот B1: фильтры в тулбаре грида. Корень MudDatePicker (.mud-picker)
   и MudSelect (.mud-select) во флекс-тулбаре растягивается, а Style="width"
   задаёт ширину только полю внутри: «Статус» на /transfers занимал 580px
   вместо 160, вторая дата на /snapshots уезжала к середине. Поля фильтров
   в тулбаре — по своей ширине; поиск (MudTextField) растягивается, как раньше. */
.mud-table .mud-toolbar > .mud-picker,
.mud-table .mud-toolbar > .mud-select {
    flex: 0 0 auto;
}

/* S455 (решение owner: фильтры строкой над гридом, кнопки — в панели грида, portal-page §3в).
   Строка фильтров: корни MudDatePicker (.mud-picker) и MudSelect (.mud-select) во флекс-строке
   растягиваются (Style="width" ставит ширину только полю внутри) — «Статус» на /cycle-counts
   занимал 1100px, даты /snapshots разъезжались по краям, корень MudTextField (.mud-input-control)
   отжимал «Статус»/«Тип» на /returns к правому краю; поля — по своей ширине, как в тулбаре
   выше. padding-top — подпись outlined-поля («Статус», «С») не срезается краем под крошками. */
.wms-filter-row {
    padding-top: 8px; /* S457: 6px не хватало — подпись Outlined-поля выше рамки на ~7px */
}
.wms-filter-row > .mud-picker,
.wms-filter-row > .mud-select,
.wms-filter-row > .mud-input-control {
    flex: 0 0 auto;
}
/* S458: то же в панели грида — фильтры переехали в ToolBarFilterContent (R9), и корень поля забирал
   свободное место наравне с MudSpacer: «ID оператора» уезжал в середину, на /returns между
   поиском и «Статусом» зияла дыра. Поля — по своей ширине, кнопки прижимает к правому краю спейсер. */
.mud-table .mud-toolbar > .mud-picker,
.mud-table .mud-toolbar > .mud-select,
.mud-table .mud-toolbar > .mud-input-control,
.mud-table .mud-toolbar > .mud-autocomplete {
    flex: 0 0 auto;
}

/* S457, owner 08.10.2026: пейджинг только под таблицей, «Выбрано» в футере, подписи полей над полем не режутся.
   padding-top fill-контейнеров: всплывающая подпись Outlined-поля (~7px над рамкой) резалась
   overflow:hidden — «лейбл заходит за крошки/таб». Высота .wms-page-fill не меняется (border-box). */
.wms-page-fill, .wms-panel-fill { padding-top: 8px; }
/* Страницы БЕЗ fill-цепочки (обычный поток): подпись наезжала на нижнюю линию хлебных крошек
   (/billing, /admin/disposition-rules) — отступ хосту вкладки (MainLayout .wms-tab-host); у прямого
   потомка .wms-page-fill отступ хоста гасится, чтобы не удваивать (внутренний padding нужен для
   overflow:hidden). */
.wms-tab-host { padding-top: 8px; }
.wms-tab-host > .wms-page-fill { margin-top: -8px; }
/* Подвал грида (WmsGridPager в PagerContent ConfigurableMudDataGrid): «Записи X–Y из N» слева,
   «Строк» + пагинация справа; в fill-цепочке высот не сжимается, таблица забирает остаток. */
.wms-grid-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    min-height: 40px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.wms-grid-pager .wms-grid-pager-size { width: 80px; flex: 0 0 auto; }
.wms-grid-fill > .mud-table-pagination,
.wms-cfg-grid > .mud-table-pagination { flex: 0 0 auto; }

/* S455: кнопки в панели грида не переносят подпись на две строки — после переноса действий
   в тулбар на /skus восемь кнопок сжимались до «ВСТАВИТЬ ИЗ / EXCEL» разной высоты; на 1366
   в одну строку помещаются (замер scrollWidth = clientWidth). */
.mud-table .mud-toolbar .mud-button-root {
    white-space: nowrap;
    flex-shrink: 0;
}

/* S468-F1: подпись футера грида (первая колонка) — одна строка, не влияет на ширину колонки */
.wms-footer-box { display: inline-block; width: 0; white-space: nowrap; overflow: visible; vertical-align: top; }

/* S541 доска дня двора (/yard/visits): компактные строки — кнопка действия и чип «опоздание»
   не раздувают строку до ~46 px (критерий спеки: ≥12 строк на 1366×768). */
.wms-yard-board td { padding-top: 2px !important; padding-bottom: 2px !important; }
.wms-yard-board .mud-button-root { padding-top: 0; padding-bottom: 0; min-height: 26px; line-height: 1.4; }
/* S543: ячейки доски в одну строку; клиент/водитель/перевозчик обрезаются многоточием (полный текст — в title). */
.wms-yard-board .wms-yard-cell { white-space: nowrap; }
.wms-yard-board .wms-yard-trunc { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* S605 DT-09: Color.Dark в тёмной теме — палитра Dark ≈ фон Surface */
html.mud-dark .mud-dark-text { color: var(--mud-palette-text-secondary) !important; }
html.mud-dark .mud-button-text.mud-button-text-dark { color: var(--mud-palette-text-secondary); }
html.mud-dark .mud-button-outlined.mud-button-outlined-dark { color: var(--mud-palette-text-secondary); border-color: var(--mud-palette-lines-inputs); }
html.mud-dark .mud-button-filled.mud-button-filled-dark { background-color: #4A4A5C; color: #E0E0E0; }
html.mud-dark .mud-chip-filled.mud-chip-color-dark { background-color: #4A4A5C; color: #E0E0E0; }
html.mud-dark .mud-chip-outlined.mud-chip-color-dark { color: var(--mud-palette-text-secondary); border-color: var(--mud-palette-lines-inputs); }
html.mud-dark .mud-chip-text.mud-chip-color-dark { color: var(--mud-palette-text-secondary); }

/* S606 DT-16: hover/active Color.Dark в тёмной теме — светлее базы, а не --mud-palette-dark-darken */
html.mud-dark .mud-button-text.mud-button-text-dark:hover,
html.mud-dark .mud-button-outlined.mud-button-outlined-dark:hover { background-color: var(--mud-palette-action-default-hover); }
html.mud-dark .mud-button-text.mud-button-text-dark:active,
html.mud-dark .mud-button-outlined.mud-button-outlined-dark:active { background-color: color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent); }
html.mud-dark .mud-button-filled.mud-button-filled-dark:hover,
html.mud-dark .mud-chip-filled.mud-chip-color-dark:hover { filter: brightness(1.2); }
html.mud-dark .mud-button-filled.mud-button-filled-dark:active,
html.mud-dark .mud-chip-filled.mud-chip-color-dark:active { filter: brightness(1.35); }

/* S606 DT-18: низ коротких страниц в тёмной теме — фон основной области, не surface.
   Под коротким контентом виден сам <html> (layout кончается раньше низа экрана).
   Признак темы `mud-dark` на <html> совпадает с утилитой MudBlazor `.mud-dark`
   (Color.Dark: `background-color: var(--mud-palette-dark) !important` = #27272f),
   поэтому для <html> нужен !important — (0,1,1) бьёт утилиту (0,1,0). */
html.mud-dark { background-color: var(--mud-palette-background) !important; }
html.mud-dark body,
html.mud-dark .mud-layout,
html.mud-dark .mud-main-content { background-color: var(--mud-palette-background); }

/* S606 DT-20а: плейсхолдер поиска в шапке (светлая тема) — контрастнее */
html:not(.mud-dark) .mud-appbar .mud-input-control input::placeholder {
    color: var(--mud-palette-appbar-text);
    opacity: 0.7;
}

/* S606 DT-20б: бейдж «Погрузки» в шапке — без uppercase, компактнее */
.wms-lpp-badge { text-transform: none; white-space: nowrap; padding-left: 6px; padding-right: 6px; min-width: 0; }