/* =====================================================================
   FoodTrace — общий стиль интерфейса.
   Цвета, шрифты и скругления приходят из темы FoodTraceTheme через CSS-переменные MudBlazor,
   поэтому одинаково работают в светлой и тёмной теме.
   ===================================================================== */

/* Шрифт Inter, шкала размеров, радиусы, цели касания и палитра графиков — в tokens.css (подключается раньше).
   Здесь — только то, что связано с MudBlazor. */
:root {
    --ft-content-max: 1440px;
    --ft-primary-soft: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    --ft-primary-soft-strong: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
    --ft-focus: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    --ft-card-shadow-hover: 0 8px 24px rgba(16, 24, 20, 0.08);
}

html, body {
    background: var(--mud-palette-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1:focus {
    outline: none;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ---------- Шапка ---------- */

.mud-appbar.app-bar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 6px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.brand-mark {
    flex: none;
    display: block;
}

.brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brand-name {
    font-size: var(--ft-text-md);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.brand-tenant {
    max-width: 240px;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-date {
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    padding: 6px 12px;
    border-radius: var(--ft-radius-pill);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
    font-weight: 500;
}

/* Кнопка поиска в шапке (Ctrl+K): на телефоне — только значок. */
.search-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 44px;
    height: 40px;
    margin-right: 8px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--ft-radius-sm);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: var(--ft-text-sm);
    cursor: pointer;
}

.search-button:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

.search-button-text {
    min-width: 7rem;
    text-align: left;
}

.search-button kbd,
.search-footer kbd {
    padding: 1px 6px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 5px;
    font-family: inherit;
    font-size: var(--ft-text-xs);
}

@media (max-width: 959.98px) {
    .search-button {
        justify-content: center;
        padding: 0;
    }

    .search-button-text,
    .search-button-kbd {
        display: none;
    }
}

/* Окно поиска: поле сверху, результаты группами, подсказка клавиш внизу. */
.search-dialog .mud-dialog-content {
    padding: 0;
}

.search-input {
    padding: 8px 16px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.search-input .mud-input {
    font-size: var(--ft-text-md);
}

.search-results {
    max-height: min(60vh, 520px);
    overflow-y: auto;
    padding: 6px 0;
}

.search-hint {
    padding: 14px 20px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
    line-height: 1.6;
}

.search-group {
    padding: 10px 20px 4px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.search-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 20px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.search-hit.active {
    background: var(--ft-primary-soft-strong);
}

.search-hit-icon {
    color: var(--mud-palette-text-secondary);
}

.search-hit-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-hit-title {
    font-weight: 500;
}

.search-hit-sub {
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
}

.search-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 10px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
}

.user-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 8px 3px 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius-pill);
    background: var(--mud-palette-surface);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.user-button:hover {
    background: var(--ft-primary-soft);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default));
}

.user-button-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: left;
}

.user-name {
    font-size: var(--ft-text-sm);
    font-weight: 600;
}

.user-role {
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
}

.user-caret {
    color: var(--mud-palette-text-secondary);
}

.user-menu-header {
    min-width: 220px;
    max-width: 300px;
    padding: 12px 16px;
}

.user-menu-item {
    display: flex;
    align-items: center;
    /* «Выйти» — кнопка: без этого MudBlazor ставит её содержимое по центру, а ссылки над ней — слева. */
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.user-menu-item:hover {
    background: var(--ft-primary-soft);
}

@media (max-width: 599.98px) {
    .user-button-text,
    .user-caret,
    .brand-tenant {
        display: none;
    }
}

/* ---------- Меню ---------- */

.mud-drawer.app-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.nav {
    padding: 8px 10px 24px;
}

.nav-section {
    padding: 18px 12px 6px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nav .mud-nav-link {
    min-height: 40px;
    margin: 1px 0;
    padding: 8px 12px;
    border-radius: var(--ft-radius-sm);
    color: var(--mud-palette-drawer-text);
    font-weight: 500;
}

.nav .mud-nav-link .mud-nav-link-icon {
    color: var(--mud-palette-drawer-icon);
}

.nav .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: var(--ft-primary-soft);
}

.nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--ft-primary-soft-strong);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

/* Счётчик у пункта меню — что-то ждёт действия; пометка «откроется отдельно» у планшета. */
.nav .mud-nav-link-text {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nav-badge {
    flex: none;
    min-width: 22px;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: var(--ft-radius-pill);
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    color: var(--mud-palette-text-primary);
    font-size: var(--ft-text-xs);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.nav-external {
    flex: none;
    margin-left: auto;
    color: var(--mud-palette-drawer-icon);
    font-size: var(--ft-text-md) !important;
}

.nav-divider {
    margin: 14px 12px 6px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.nav .nav-settings .mud-nav-link {
    min-height: 36px;
}

/* ---------- Рабочая область ---------- */

.app-main {
    min-height: 100vh;
    background: var(--mud-palette-background);
}

.app-container {
    max-width: var(--ft-content-max);
    margin: 0 auto;
    padding: 24px 28px 48px;
}

@media (max-width: 959.98px) {
    .app-container {
        padding: 16px 16px 32px;
    }
}

/* ---------- Заголовок страницы ---------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.page-header-main {
    display: flex;
    flex: 1 1 320px;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.page-header-back {
    margin-left: -8px;
}

.page-header-text {
    min-width: 0;
}

.page-header-title {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: var(--ft-text-xl);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.page-header-subtitle {
    margin-top: 3px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.page-description {
    max-width: 92ch;
    margin: -8px 0 20px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
    line-height: 1.55;
}

@media (max-width: 599.98px) {
    .page-header-title {
        font-size: var(--ft-text-lg);
    }

    .page-header-actions {
        width: 100%;
        margin-left: 0;
    }
}

/* ---------- Карточки, таблицы, элементы управления ---------- */

.mud-paper-outlined {
    border-color: var(--mud-palette-lines-default);
}

.mud-paper.mud-paper-outlined,
.mud-table.mud-table-outlined {
    border-radius: var(--ft-radius);
}

.mud-table-head .mud-table-cell,
.mud-simple-table table thead th {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
    font-weight: 600;
    letter-spacing: .02em;
}

.mud-table-cell,
.mud-simple-table table td {
    font-variant-numeric: tabular-nums;
}

/* Числа в таблицах — по правому краю, цифры одной ширины. Селекторы с таблицами перебивают выравнивание MudBlazor. */
.num,
.mud-table-cell.num,
.mud-simple-table table td.num,
.mud-simple-table table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- Панель поиска и фильтров журнала (FilterBar) ---------- */
/* Одна на все журналы, всегда над таблицей: поиск — шире, фильтры — одной ширины; на телефоне — друг под другом. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius);
    background: var(--mud-palette-surface);
}

.filter-bar > .mud-input-control,
.filter-bar > .mud-picker,
.filter-bar > .mud-select {
    flex: 0 1 200px;
    min-width: 160px;
    margin: 0;
}

.filter-bar > .filter-search {
    flex: 1 1 320px;
}

.filter-bar > .filter-end {
    margin-left: auto;
}

@media (max-width: 599.98px) {
    .filter-bar > .mud-input-control,
    .filter-bar > .mud-picker,
    .filter-bar > .mud-select,
    .filter-bar > .filter-search {
        flex: 1 1 100%;
    }
}

/* Служебные классы вместо инлайн-стилей в разметке (style="text-align:center" и т. п.). */
.ta-center,
.mud-table-cell.ta-center,
.mud-simple-table table td.ta-center,
.mud-simple-table table th.ta-center,
.report-grid td.ta-center,
.report-grid th.ta-center {
    text-align: center;
}

.ta-left,
.mud-table-cell.ta-left,
.mud-simple-table table td.ta-left,
.mud-simple-table table th.ta-left,
.report-grid td.ta-left,
.report-grid th.ta-left {
    text-align: left;
}

.nowrap { white-space: nowrap; }
.text-xs { font-size: var(--ft-text-xs); }
.fw-semibold { font-weight: 600; }
.va-middle { vertical-align: middle; }

/* Ширина полей в шапке страниц и панелях фильтров: дата, короткий и широкий выбор. */
.w-date { max-width: 11rem; }
.w-select { min-width: 14rem; }
.w-select-wide { min-width: 18rem; }

/* Номер партии (BatchCode): моноширинный и без переноса — 26-1409-T01 не рвётся на дефисе. */
.batch-code {
    font-family: var(--ft-font-mono);
    font-size: .92em;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Вкладки — обычным регистром, как кнопки: прописные хуже читаются по-русски. */
.mud-tab {
    text-transform: none;
}

/* ---------- Статус документа (StatusChip) ---------- */
/* Тон — фоном и значком, текст — цветом основного текста: контраст не зависит от тона и темы.
   «На проверке» — единственный сплошной: документ ждёт другого человека. */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 3px 12px 3px 8px;
    border: 1.5px solid transparent;
    border-radius: var(--ft-radius-pill);
    color: var(--mud-palette-text-primary);
    font-size: var(--ft-text-sm);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
}

.status-chip .status-chip-icon {
    flex: none;
    font-size: 1.05rem;
}

.status-chip-sm {
    min-height: 24px;
    padding: 2px 10px 2px 6px;
    font-size: var(--ft-text-xs);
}

a.status-chip:hover {
    text-decoration: underline;
}

.status-draft { border-color: var(--mud-palette-text-secondary); }
.status-draft .status-chip-icon { color: var(--mud-palette-text-secondary); }
.status-inprogress { background: color-mix(in srgb, var(--mud-palette-info) 13%, transparent); }
.status-inprogress .status-chip-icon { color: var(--mud-palette-info); }
.status-review { background: var(--mud-palette-info); color: var(--mud-palette-info-text); }
.status-review .status-chip-icon { color: inherit; }
.status-done { background: color-mix(in srgb, var(--mud-palette-success) 13%, transparent); }
.status-done .status-chip-icon { color: var(--mud-palette-success); }
.status-attention { background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent); }
.status-attention .status-chip-icon { color: var(--mud-palette-warning); }
.status-error { background: color-mix(in srgb, var(--mud-palette-error) 13%, transparent); }
.status-error .status-chip-icon { color: var(--mud-palette-error); }

/* ---------- Сведения документа и строка итогов ---------- */
/* Подпись и значение рядом (колонка подписей фиксированной ширины), а не на двух концах строки. */
.doc-facts-box {
    container-type: inline-size;
}

.doc-facts {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    gap: 8px 20px;
    margin: 0;
    font-size: var(--ft-text-sm);
    line-height: 1.45;
}

.doc-facts dt {
    color: var(--mud-palette-text-secondary);
}

.doc-facts dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.doc-facts-missing {
    margin-top: 12px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
}

/* Узкий блок (левая колонка карточки партии, телефон) — подпись над значением, иначе значение сжато в столбик.
   Стоит после основных правил: иначе их margin: 0 перебил бы отступ. */
@container (max-width: 460px) {
    .doc-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .doc-facts dt {
        font-size: var(--ft-text-xs);
    }

    .doc-facts dd {
        margin-bottom: 10px;
    }
}

.summary-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.summary-strip-item {
    padding: 12px 16px;
    box-shadow: -1px 0 0 var(--mud-palette-lines-default), 0 -1px 0 var(--mud-palette-lines-default);
}

.summary-strip-label {
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
}

.summary-strip-value {
    font-size: var(--ft-text-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Отметка автосохранения: «Сохранено 16:31» вместо кнопки. */
.autosave {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
}

.autosave-error {
    color: var(--mud-palette-error);
}

/* Раскрытие строки таблицы (месяц в «Закрытии периода», продукт в «Итоге месяца») — кнопкой со стрелкой:
   доходит Tab, цель не меньше 32 px, диктор слышит «развёрнуто». */
.row-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    margin: -4px 0 -4px -6px;
    padding: 2px 8px 2px 4px;
    border: 0;
    border-radius: var(--ft-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.row-toggle:hover {
    background: var(--ft-primary-soft);
}

/* ---------- Сводка: «Требует внимания» и «Сегодня» списками ---------- */
.home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 959.98px) {
    .home-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 599.98px) {
    .home-quick {
        display: none !important;
    }
}

.list-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius);
    background: var(--mud-palette-surface);
}

.list-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 14px 18px 8px;
}

.list-card-title {
    margin: 0;
    font-size: var(--ft-text-md);
    font-weight: 600;
}

.list-card-link,
.list-row-value {
    font-size: var(--ft-text-sm);
    font-weight: 500;
}

.list-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 8px 18px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.list-row-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ft-radius-sm);
}

.list-row-body {
    flex: 1;
    min-width: 0;
}

.list-row-title {
    font-size: var(--ft-text-md);
}

.list-row-hint {
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
}

/* Группа строк одной партии в таблице смены. */
.mud-simple-table table tr.batch-group td {
    padding-top: 10px;
    background: var(--mud-palette-background-gray);
    font-weight: 600;
}

.mud-table-toolbar {
    gap: 12px;
}

.mud-button-root {
    border-radius: var(--ft-radius-sm);
}

.mud-button-filled {
    box-shadow: none;
}

.mud-button-filled:hover {
    box-shadow: 0 2px 6px rgba(16, 24, 20, 0.14);
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--ft-radius-sm);
}

.mud-chip {
    font-weight: 500;
}

.mud-alert {
    border-radius: var(--ft-radius);
}

.mud-dialog {
    border-radius: var(--ft-radius-lg);
}

.mud-dialog .mud-dialog-title {
    font-weight: 700;
}

.mud-popover.mud-popover-open {
    border-radius: var(--ft-radius);
}

.mud-link {
    font-weight: 500;
}

@media (pointer: coarse) {
    .mud-button-root:not(.mud-icon-button) {
        min-height: 42px;
    }

    .nav .mud-nav-link {
        min-height: 46px;
    }
}

/* ---------- Переключатель месяца ---------- */

.month-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius-sm);
    background: var(--mud-palette-surface);
}

.month-switcher-title {
    min-width: 140px;
    font-size: var(--ft-text-md);
    font-weight: 600;
    text-align: center;
}

/* Таблицы и карточки без собственной тени — плоские, с тонкой рамкой, как остальной интерфейс. */
.mud-table.mud-elevation-1,
.mud-paper.mud-elevation-1 {
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: none;
}

.mud-table.mud-elevation-1 {
    border-radius: var(--ft-radius);
}

/* ---------- Пустое состояние ---------- */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 16px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.empty-state-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    border-radius: var(--ft-radius-lg);
    background: var(--ft-primary-soft);
    color: var(--mud-palette-primary);
}

.empty-state-title {
    color: var(--mud-palette-text-primary);
    font-size: var(--ft-text-md);
    font-weight: 600;
}

.empty-state-text {
    max-width: 56ch;
    font-size: var(--ft-text-sm);
}

.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

/* ---------- Плитки показателей ---------- */

.section-title {
    margin: 28px 0 12px;
    color: var(--mud-palette-text-primary);
    font-size: var(--ft-text-md);
    font-weight: 600;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.stat-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius-lg);
    background: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

a.stat-card:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    box-shadow: var(--ft-card-shadow-hover);
    transform: translateY(-1px);
}

.tile-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ft-radius);
}

.tone-primary { background: var(--ft-primary-soft-strong); color: var(--mud-palette-primary); }
.tone-warning { background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent); color: var(--mud-palette-warning); }
.tone-error { background: color-mix(in srgb, var(--mud-palette-error) 13%, transparent); color: var(--mud-palette-error); }
.tone-info { background: color-mix(in srgb, var(--mud-palette-info) 13%, transparent); color: var(--mud-palette-info); }
.tone-neutral { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.tone-solid { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

.stat-value {
    font-size: var(--ft-text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    margin-bottom: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
    font-weight: 500;
}

.stat-hint {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
    line-height: 1.4;
}

/* ---------- Сводка: дашборд производства ---------- */

.dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 28px 0 8px;
}

.dash-title {
    margin: 0;
}

.dash-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.dash-period {
    min-width: 14rem;
    max-width: 18rem;
}

.dash-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 1700px) {
    .dash-kpis {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Планшет: три карточки в ряд — значок над цифрой, иначе цифре не хватает ширины. */
@media (max-width: 1279.98px) {
    .dash-kpi {
        flex-direction: column;
        gap: 8px;
    }
}

.dash-kpi {
    padding: 16px;
}

.dash-kpi-body {
    min-width: 0;
}

.dash-up,
.dash-down,
.dash-change {
    margin-right: 6px;
    font-weight: 600;
    white-space: nowrap;
}

/* Оценочный цвет — только у потерь против норматива; изменение объёмов — нейтральное (.dash-change). */
.dash-up { color: var(--mud-palette-success); }
.dash-down { color: var(--mud-palette-error); }
.dash-change { color: var(--mud-palette-text-primary); }

/* Норматив на графике потерь — пунктиром: MudChart рисует серию цветом ChartColors.Norm (= --ft-chart-norm). */
.dash-loss-chart path[stroke="#8A938E"] {
    stroke-dasharray: 6 4;
}

/* Панель графика (ChartPanel): вывод одной фразой и переключатель «Таблицей». */
.chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-bottom: 10px;
}

.chart-conclusion {
    flex: 1 1 16rem;
    margin: 0;
    font-size: var(--ft-text-sm);
    line-height: 1.45;
}

.chart-toggle {
    flex: none;
    margin-left: auto;
}

.chart-table {
    max-height: 340px;
    overflow: auto;
}

.chart-table .report-grid th {
    position: sticky;
    top: 0;
    z-index: 2;
}

@media print {
    .chart-table {
        max-height: none;
        overflow: visible;
    }
}

.dash-card {
    height: 100%;
    padding: 16px;
    border-radius: var(--ft-radius-lg);
}

.dash-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 10px;
    font-size: var(--ft-text-md);
    font-weight: 600;
}

.dash-card-hint {
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
    font-weight: 400;
}

.dash-card-link {
    margin-left: auto;
    font-size: var(--ft-text-sm);
    font-weight: 500;
}

.dash-empty {
    padding: 24px 0;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
    text-align: center;
}

.dash-bars {
    display: grid;
    gap: 8px;
}

.dash-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 5.5rem;
    align-items: center;
    gap: 10px;
    font-size: var(--ft-text-sm);
}

.dash-bar-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-bar-track {
    position: relative;
    height: 12px;
    border-radius: var(--ft-radius-pill);
    background: var(--mud-palette-background-gray);
}

.dash-bar-fill {
    height: 100%;
    border-radius: var(--ft-radius-pill);
    background: var(--ft-chart-1);
}

.dash-bar-fill.dash-bar-bad {
    background: var(--mud-palette-error);
}

.dash-bar-norm {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: var(--mud-palette-text-primary);
}

.dash-bar-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .dash-controls,
    .dash-period {
        width: 100%;
        max-width: none;
    }

    .dash-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dash-kpi {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }

    .dash-kpi .tile-icon {
        width: 36px;
        height: 36px;
    }

    .dash-kpi .stat-value {
        font-size: var(--ft-text-lg);
    }

    .dash-card {
        padding: 12px;
    }

    .dash-bar-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
    }

    .dash-bar-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* Двенадцать подписей периодов не помещаются в ширину телефона: график листается вбок внутри карточки
       и открывается с правого края — с последних периодов (rtl у обёртки, ltr у графика). */
    .dash-chart-scroll {
        overflow-x: auto;
        direction: rtl;
    }

    .dash-chart-scroll > .mud-chart {
        min-width: 520px;
        direction: ltr;
    }

    .dash-donut .mud-chart-legend-right {
        flex-direction: column;
        align-items: center;
    }

    .dash-donut .mud-chart-legend {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ---------- Вход ---------- */

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--mud-palette-background);
}

.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    overflow: hidden;
    padding: 48px 56px;
    background: radial-gradient(circle at 15% 10%, rgba(52, 190, 124, 0.55) 0%, transparent 42%),
                radial-gradient(circle at 90% 85%, rgba(253, 186, 116, 0.22) 0%, transparent 38%),
                linear-gradient(150deg, #11714A 0%, #0A3F29 100%);
    color: #FFFFFF;
}

.auth-brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--ft-text-lg);
    font-weight: 700;
}

.auth-brand-title {
    max-width: 18ch;
    margin: 0 0 16px;
    font-size: var(--ft-text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.auth-brand-text {
    max-width: 46ch;
    margin: 0;
    font-size: var(--ft-text-md);
    line-height: 1.6;
    opacity: .86;
}

.auth-features {
    display: grid;
    gap: 12px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.auth-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.auth-feature-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ft-radius);
    background: rgba(255, 255, 255, 0.14);
}

.auth-footer {
    font-size: var(--ft-text-sm);
    opacity: .72;
}

.auth-panel {
    display: grid;
    place-items: center;
    padding: 32px 20px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
}

.auth-mobile-logo {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    font-size: var(--ft-text-lg);
    font-weight: 700;
}

.auth-card-title {
    margin: 0 0 6px;
    font-size: var(--ft-text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.auth-card-subtitle {
    margin: 0 0 28px;
    color: var(--mud-palette-text-secondary);
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.auth-label {
    color: var(--mud-palette-text-primary);
    font-size: var(--ft-text-sm);
    font-weight: 600;
}

.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--ft-radius-sm);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: var(--ft-text-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-input:hover {
    border-color: var(--mud-palette-text-secondary);
}

.auth-input:focus {
    border-color: var(--mud-palette-primary);
    outline: none;
    box-shadow: var(--ft-focus);
}

.auth-input.invalid {
    border-color: var(--mud-palette-error);
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 24px;
    font-size: var(--ft-text-sm);
    cursor: pointer;
}

.auth-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--mud-palette-primary);
}

.validation-message {
    color: var(--mud-palette-error);
    font-size: var(--ft-text-sm);
}

@media (max-width: 959.98px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-brand {
        display: none;
    }

    .auth-mobile-logo {
        display: flex;
    }
}

/* ---------- Администрирование ---------- */

.role-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
}

.role-option {
    padding: 2px 10px 2px 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius);
    transition: border-color .15s ease, background-color .15s ease;
}

.role-option.selected {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    background: var(--ft-primary-soft);
}

.role-option-title,
.permission-title {
    display: block;
    font-size: var(--ft-text-sm);
    font-weight: 600;
    line-height: 1.3;
}

.role-option-hint,
.permission-hint {
    display: block;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
    line-height: 1.35;
}

.temp-password {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 16px;
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--ft-radius);
    background: var(--mud-palette-background-gray);
}

.temp-password code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--ft-text-xl);
    font-weight: 600;
    letter-spacing: .08em;
}

.role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.role-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius-lg);
    background: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

a.role-card:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    box-shadow: var(--ft-card-shadow-hover);
    transform: translateY(-1px);
}

.role-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.role-card-title {
    font-size: var(--ft-text-md);
    font-weight: 600;
}

.role-card-text {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
    line-height: 1.45;
}

.role-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
}

.role-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.permission-group {
    margin-bottom: 14px;
    padding: 4px 8px 10px;
}

.permission-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 10px 8px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.permission-row {
    padding: 2px 0;
}

.auth-hint {
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-xs);
}

a.user-menu-item {
    text-decoration: none;
}

/* ---------- Сбой соединения и ошибки ---------- */

#blazor-error-ui {
    position: fixed;
    bottom: 16px;
    left: 50%;
    z-index: 1000;
    display: none;
    box-sizing: border-box;
    max-width: calc(100% - 32px);
    padding: 12px 44px 12px 16px;
    border-radius: var(--ft-radius);
    background: #FFF4E5;
    box-shadow: 0 10px 30px rgba(16, 24, 20, 0.18);
    color: #5C3B00;
    font-size: var(--ft-text-sm);
    transform: translateX(-50%);
    color-scheme: light only;
}

#blazor-error-ui .reload {
    margin-left: 8px;
    color: inherit;
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 6px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--ft-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--ft-text-lg);
    line-height: 1;
    cursor: pointer;
}

#blazor-error-ui .dismiss:hover {
    background: rgba(92, 59, 0, 0.08);
}

.blazor-error-boundary {
    padding: 1rem 1.25rem;
    border-radius: var(--ft-radius);
    background: #B42318;
    color: #FFFFFF;
}

.blazor-error-boundary::after {
    content: "Произошла ошибка при отображении раздела.";
}

/* ---------- Печатные формы: на бумагу уходит только бланк, без меню и шапки ---------- */

@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    .mud-appbar,
    .mud-drawer,
    .mud-snackbar-provider,
    .mud-snackbar,
    .no-print,
    #blazor-error-ui,
    #components-reconnect-modal {
        display: none !important;
    }

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

    .app-container {
        max-width: none;
        padding: 0 !important;
    }

    body,
    .mud-layout,
    .mud-main-content,
    .app-main {
        background: #FFFFFF !important;
        color: #000000;
    }

    /* Журнал Ф-123 широкий — по два столбца на продукт, — печатается на альбомном листе. */
    @page f123 {
        size: A4 landscape;
        margin: 8mm;
    }

    @page traceability {
        size: A4 landscape;
        margin: 6mm;
    }
}

/* Бланк, который виден только при печати: на экране вместо него форма заполнения. */
.print-only {
    display: none;
}

@media print {
    .print-only {
        display: block !important;
    }
}

/* История изменений: прежнее значение приглушено, правки закрытого месяца выделены фоном. */
.history-table td { vertical-align: top; }
/* Ключи файлов и длинные значения без пробелов переносятся, иначе столбец «Изменения» распирает таблицу. */
.history-change { line-height: 1.5; overflow-wrap: anywhere; }
.history-old { color: var(--mud-palette-text-secondary); text-decoration: line-through; }
.history-correction { background: rgba(var(--mud-palette-warning-rgb), 0.08); }

/* Таблицы сводных отчётов: широкие матрицы прокручиваются, первый столбец закреплён. */
.report-scroll { overflow-x: auto; max-width: 100%; }
.report-grid { border-collapse: collapse; font-size: .82rem; min-width: 100%; }
.report-grid th, .report-grid td { border: 1px solid var(--mud-palette-lines-default); padding: 4px 8px; text-align: right; white-space: nowrap; }
.report-grid th { background: var(--mud-palette-background-gray); font-weight: 600; text-align: center; white-space: normal; min-width: 5.5rem; }
.report-grid .report-first { text-align: left; position: sticky; left: 0; background: var(--mud-palette-surface); z-index: 1; }
.report-grid th.report-first { background: var(--mud-palette-background-gray); }
.report-grid tfoot td { font-weight: 700; background: var(--mud-palette-background-gray); }
.report-grid .report-bad { color: var(--mud-palette-error); font-weight: 700; }
.report-grid tr.report-weekend td { color: var(--mud-palette-text-secondary); }
.report-grid tr.report-selected td { background: rgba(var(--mud-palette-primary-rgb), 0.08); font-weight: 600; }

/* Снимки поставки: сетка миниатюр с подписями. */
.receipt-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.receipt-photo { margin: 0; font-size: .8rem; }
.receipt-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ft-radius-sm); border: 1px solid var(--mud-palette-lines-default); display: block; }
.receipt-photo figcaption { margin-top: 4px; }

/* Закрытие периода: месяц раскрывается в недели (кнопкой .row-toggle в первой ячейке). */
tr.period-month td { background: rgba(var(--mud-palette-primary-rgb), 0.04); }
td.period-week { padding-left: 1.25rem !important; }

/* Итог месяца: карточки итогов, раскрываемые строки продуктов и дней. */
.totals-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.report-grid tr.totals-group td { background: rgba(var(--mud-palette-primary-rgb), 0.04); }
.report-grid .totals-indent { padding-left: 1.6rem; }
.report-grid tr.totals-detail td { color: var(--mud-palette-text-secondary); }

/* Длинный текст в ячейке таблицы — одной строкой с многоточием, полностью в подсказке. */
.cell-clip {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Печать отчётов раздела 6 ТЗ: альбомный лист, без кнопок и фильтров, все вкладки подряд, таблицы целиком. */
.print-caption {
    font-size: 12px;
    margin: -4px 0 8px;
}

.print-section {
    font-size: 15px;
    font-weight: 600;
    margin: 12px 0 6px;
}

@media print {
    @page report {
        size: A4 landscape;
        margin: 8mm;
    }

    .report-print {
        page: report;
    }

    .report-print .page-header-actions,
    .report-print .page-header-back,
    .report-print .page-description {
        display: none !important;
    }

    .report-print .mud-paper {
        box-shadow: none !important;
    }

    .report-scroll {
        overflow: visible !important;
    }

    /* Таблица занимает ширину листа: широкая матрица «дни × линии и контрагенты» сжимается, а не обрезается. */
    .report-grid {
        font-size: 8px;
        min-width: 0;
        width: 100%;
        table-layout: fixed;
    }

    .report-grid th,
    .report-grid td {
        padding: 2px 3px;
        border-color: #000 !important;
        color: #000;
    }

    .report-grid th {
        min-width: 0;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .report-grid .report-first {
        white-space: normal;
    }

    .report-grid .report-first {
        position: static;
    }

    .report-grid thead {
        display: table-header-group;
    }

    .report-grid tr,
    .report-print .mud-table-root tr {
        break-inside: avoid;
    }

    /* Вкладки месячной сводной печатаются все подряд, каждая со своим заголовком. */
    .print-all-tabs .mud-tabs-tabbar {
        display: none !important;
    }

    .print-all-tabs .mud-tab-panel {
        display: block !important;
    }

    .print-all-tabs .mud-tab-panel + .mud-tab-panel {
        break-before: page;
    }
}

/* Предупреждения приёмки — список внутри уведомления. */
.receipt-warnings {
    margin: 4px 0 0 18px;
    padding: 0;
}

/* Календарь рабочих дней: сетка месяца с понедельника. */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.calendar-head {
    text-align: center;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
}

.calendar-day {
    min-height: 76px;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius-sm);
    background: var(--mud-palette-surface);
}

/* День с правом правки — кнопка (WorkCalendar): сбрасываем оформление кнопки под клетку. MudBlazor делает всякую
   кнопку inline-flex по центру — число дня и подписи встали бы в строку, поэтому столбец от левого верхнего угла. */
button.calendar-day {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
}
.calendar-editable { cursor: pointer; }
.calendar-editable:hover { border-color: var(--mud-palette-primary); }
.calendar-number, .calendar-state, .calendar-note { display: block; }
.calendar-off { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.calendar-holiday { background: rgba(var(--mud-palette-error-rgb), 0.08); }
.calendar-override { border-style: dashed; }
.calendar-today { outline: 2px solid var(--mud-palette-primary); }
.calendar-number { font-weight: 700; }
.calendar-state { font-size: .75rem; }
.calendar-note { font-size: .7rem; color: var(--mud-palette-text-secondary); }

/* Табель ОРП-02-Ф16: сетка сотрудники × дни, итоговые графы справа. */
.timesheet-grid { border-collapse: collapse; font-size: .78rem; }
.timesheet-grid th, .timesheet-grid td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 3px 4px;
    text-align: center;
    white-space: nowrap;
}
.timesheet-grid th { background: var(--mud-palette-background-gray); font-weight: 600; white-space: normal; min-width: 2.2rem; }
.timesheet-grid .timesheet-name { text-align: left; min-width: 13rem; position: sticky; left: 0; background: var(--mud-palette-surface); z-index: 1; }
.timesheet-grid th.timesheet-name { background: var(--mud-palette-background-gray); }
.timesheet-grid .timesheet-position { text-align: left; font-size: .72rem; color: var(--mud-palette-text-secondary); max-width: 10rem; white-space: normal; }
.timesheet-grid .timesheet-off { background: var(--mud-palette-background-gray); }
.timesheet-grid .timesheet-holiday { background: rgba(var(--mud-palette-error-rgb), 0.08); }
.timesheet-grid .timesheet-absence { color: var(--mud-palette-error); font-weight: 600; }
.timesheet-grid .timesheet-editable { cursor: pointer; }
.timesheet-grid .timesheet-editable:hover { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
/* Клетка с правом правки — кнопка во всю клетку; по клеткам ходят стрелками (grid-keys.js). */
.timesheet-grid td.timesheet-editable { padding: 0; }
.timesheet-grid .grid-cell {
    display: block;
    width: 100%;
    min-height: 26px;
    padding: 3px 4px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
}
.timesheet-grid .grid-cell:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.timesheet-grid .timesheet-minus { color: var(--mud-palette-error); }
.timesheet-grid .timesheet-group td { text-align: left; font-weight: 600; background: rgba(var(--mud-palette-primary-rgb), 0.06); }
.timesheet-grid sup { font-size: .6rem; color: var(--mud-palette-info); }

/* Телефон: закреплённое Ф.И.О. уже и с переносом, должность скрыта — иначе дни месяца не видны без прокрутки. */
@media screen and (max-width: 599.98px) {
    .timesheet-grid .timesheet-name { min-width: 7.5rem; max-width: 8.5rem; white-space: normal; }
    .timesheet-grid .timesheet-position { display: none; }
    .report-grid .report-first { white-space: normal; min-width: 7.5rem; max-width: 10rem; }
}

@media print {
    .timesheet-grid { font-size: 7px; }
    .timesheet-grid th, .timesheet-grid td { padding: 1px 2px; border-color: #000 !important; color: #000; }
    .timesheet-grid th { min-width: 0; }
    .timesheet-grid .timesheet-name { position: static; min-width: 0; }
    .timesheet-grid .timesheet-position { display: none; }
    .timesheet-grid thead { display: table-header-group; }
    .timesheet-grid tr { break-inside: avoid; }
}

/* ---------- Телефон: перечни карточками ---------- */
/* Подписи ячеек (data-label) проставляет responsive-tables.js из шапки таблицы. Матрицы отчётов (.report-grid)
   остаются таблицами с прокруткой вбок и закреплённой первой колонкой. */
@media screen and (max-width: 599.98px) {
    .mud-simple-table .mud-table-container:has(> table.cards-table) {
        overflow-x: visible;
    }

    table.cards-table,
    table.cards-table > tbody,
    table.cards-table > tfoot,
    table.cards-table > tbody > tr,
    table.cards-table > tfoot > tr {
        display: block;
        width: 100%;
    }

    table.cards-table > thead {
        display: none;
    }

    table.cards-table > tbody > tr,
    table.cards-table > tfoot > tr {
        margin: 0 0 10px;
        padding: 6px 12px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--ft-radius);
        background: var(--mud-palette-surface);
    }

    /* Подпись прижата влево, значение обтекает её справа и переносится по словам — номер партии не рвётся посередине. */
    table.cards-table > tbody > tr > td,
    table.cards-table > tfoot > tr > td {
        display: block;
        width: 100%;
        min-height: 0;
        padding: 4px 0 !important;
        border: none !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: break-word;
    }

    table.cards-table > tbody > tr > td::after,
    table.cards-table > tfoot > tr > td::after {
        content: "";
        display: block;
        clear: both;
    }

    table.cards-table > tbody > tr > td::before,
    table.cards-table > tfoot > tr > td::before {
        content: attr(data-label);
        float: left;
        width: 42%;
        padding-right: 8px;
        color: var(--mud-palette-text-secondary);
        font-size: .8rem;
        text-align: left;
    }

    table.cards-table > tbody > tr > td[data-label=""]::before,
    table.cards-table > tfoot > tr > td[data-label=""]::before {
        content: none;
    }

    table.cards-table > tbody > tr > td:empty {
        display: none;
    }
}

/* Телефон: длинное название в карточке переносится, а не обрезается многоточием; чипы в ячейках тоже переносятся. */
@media screen and (max-width: 599.98px) {
    .mud-table-cell .cell-clip,
    table.cards-table .cell-clip {
        max-width: none;
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .mud-table-container td .mud-chip,
    .mud-simple-table td .mud-chip {
        max-width: 100%;
        height: auto;
        white-space: normal;
    }

    .mud-table-container td .mud-chip .mud-chip-content,
    .mud-simple-table td .mud-chip .mud-chip-content {
        white-space: normal;
    }
}

/* ---------- Планшет и узкий ноутбук: перечни без прокрутки вбок ---------- */
/* Ширина содержимого здесь 560–970 пикселей (на 1024 и шире открыто боковое меню): поля ячеек MudBlazor по 16 пикселей
   с каждой стороны съедают до четверти ширины восьмиколоночного перечня — сужаем их. */
.qc-indicator { min-width: 200px; }
.qc-norm { min-width: 140px; }
.qc-sample { min-width: 150px; }
.qc-comment { min-width: 170px; }

@media screen and (min-width: 600px) and (max-width: 1279.98px) {
    .mud-simple-table table.cards-table tr > :is(td, th),
    .mud-table .mud-table-container .mud-table-root .mud-table-cell {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Пояснения в ячейках (обход FIFO, причины) и обрезанные по ширине названия не держат столбец своей длиной. */
    table.cards-table td .mud-typography-caption {
        overflow-wrap: anywhere;
    }

    .cell-clip {
        max-width: 14rem;
        white-space: normal;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .qc-indicator { min-width: 140px; }
    .qc-norm { min-width: 95px; }
    .qc-sample { min-width: 95px; }
    .qc-comment { min-width: 110px; }
}

/* ---------- Инструкции ---------- */

.page-header-help {
    margin-left: 4px;
    vertical-align: middle;
    color: var(--mud-palette-text-secondary);
}

.help-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.help-card {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius-lg);
    background: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.help-card:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    box-shadow: var(--ft-card-shadow-hover);
}

.help-card-body {
    min-width: 0;
}

.help-card-title {
    font-weight: 600;
}

.help-card-summary {
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
    line-height: 1.45;
}

.help-note {
    margin-top: 24px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
}

.help-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

/* Уже 1500 оглавление уходит над текстом: сбоку оно отнимает у снимков ширину, и мелкие надписи на них не прочесть. */
@media (max-width: 1499.98px) {
    .help-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .help-toc {
        position: static;
    }

    .help-toc ol {
        columns: 3 220px;
        column-gap: 28px;
    }

    .help-toc li {
        break-inside: avoid;
    }
}

.help-toc {
    position: sticky;
    top: 76px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius-lg);
    background: var(--mud-palette-surface);
    font-size: var(--ft-text-sm);
}

.help-toc-title {
    margin-bottom: 6px;
    font-weight: 600;
}

.help-toc ol {
    margin: 0;
    padding-left: 1.2em;
}

.help-toc li {
    margin: 4px 0;
}

.help-toc a {
    color: inherit;
    text-decoration: none;
}

.help-toc a:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

/* Ширину текста держат абзацы, снимки — во всю колонку: экран на них должен читаться без увеличения. */
.help {
    color: var(--mud-palette-text-primary);
    font-size: var(--ft-text-md);
    line-height: 1.6;
}

.help h2 {
    margin: 36px 0 12px;
    padding-top: 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: var(--ft-text-lg);
    font-weight: 700;
    scroll-margin-top: 76px;
}

.help h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.help h3 {
    margin: 22px 0 8px;
    font-size: var(--ft-text-md);
    font-weight: 600;
}

.help p,
.help li {
    max-width: 78ch;
}

.help ol,
.help ul {
    padding-left: 1.4em;
}

.help li {
    margin: 6px 0;
}

/* Надпись на экране — `Подтвердить` — выглядит кнопкой: по ней ищут глазами. */
.help code {
    padding: 1px 7px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius-sm);
    background: var(--mud-palette-background-gray);
    font-family: inherit;
    font-size: .92em;
    font-weight: 600;
    white-space: nowrap;
}

.help table {
    margin: 12px 0;
    border-collapse: collapse;
}

.help th,
.help td {
    padding: 6px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    text-align: left;
    vertical-align: top;
}

.help th {
    background: var(--mud-palette-background-gray);
}

.help-shot {
    margin: 14px 0 22px;
}

.help-shot img {
    display: block;
    max-width: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ft-radius);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    cursor: zoom-in;
}

.help-shot figcaption {
    margin-top: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ft-text-sm);
}

.help-shot figcaption::after {
    content: " · нажмите, чтобы увеличить";
    opacity: .7;
}

.help-alert {
    max-width: 82ch;
    margin: 14px 0;
    padding: 10px 14px;
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: var(--ft-radius-sm);
    background: var(--ft-primary-soft);
}

.help-alert p {
    margin: 4px 0;
}

.help-alert-title {
    font-weight: 600;
}

.help-alert-tip {
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
}

.help-alert-warning,
.help-alert-caution {
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 9%, transparent);
}

@media (max-width: 599.98px) {
    .help code {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .help table {
        display: block;
        overflow-x: auto;
    }
}