/* _content/SynnFrameFW.BlazorUI/Components/Pages/CatalogEditor.razor.rz.scp.css */
/* Карточка справочника (этап 3) — те же принципы, что у документа:
   компактная шапка, сетка строк, сворачиваемые группы. */

.synn-form-card--wide[b-h70ou7gs3n] { max-width: 1320px; }

.synn-cmdbar--form[b-h70ou7gs3n] {
    position: sticky; top: 0; z-index: 5;
    background: var(--surface-bg);
}

.synn-form-tp[b-h70ou7gs3n] { margin: var(--space-4) 0 var(--space-2); min-width: 0; }

/* Имена на языках и «Показывать в списке» — плотной сеткой. */
.synn-cat-extra[b-h70ou7gs3n] {
    display: grid; gap: var(--space-2, 8px) var(--space-4, 16px);
    grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end;
}

/* Связанные списки (штрихкоды товара и т.п.). */
.synn-related[b-h70ou7gs3n] { margin-top: 0; max-width: 1320px; }
.synn-related__bar[b-h70ou7gs3n] { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; margin-bottom: var(--space-2, 8px); }
.synn-related__empty[b-h70ou7gs3n] { color: var(--text-secondary); margin: 0; }
.synn-related__wrap[b-h70ou7gs3n] { overflow-x: auto; }
/* Как сетка строк ТЧ: заголовки 12px обычные серые, строки по плотности. */
.synn-related-table[b-h70ou7gs3n] { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.synn-related-table th[b-h70ou7gs3n] {
    text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-default);
    background: var(--surface-subtle);
    color: var(--text-secondary); font-size: var(--fs-caption); font-weight: var(--fw-regular); white-space: nowrap;
}
.synn-related-table td[b-h70ou7gs3n] { padding: 2px 8px; height: var(--tp-row-h); border-bottom: 1px solid var(--border-subtle); }
.synn-related-table td.num[b-h70ou7gs3n] { text-align: right; font-variant-numeric: tabular-nums; }
.synn-related-table tr:hover td[b-h70ou7gs3n] { background: var(--surface-hover); }
.synn-related-table__act[b-h70ou7gs3n] { width: 44px; text-align: center; }

/* Кнопка-иконка удаления: прежде эмодзи «🗑» в залитой красным кнопке
   рисовался красным квадратом. Теперь — иконка темы, красная при наведении. */
.synn-icon-btn[b-h70ou7gs3n] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border: 1px solid transparent; border-radius: 4px;
    background: none; color: var(--text-secondary); cursor: pointer;
}
.synn-icon-btn:hover[b-h70ou7gs3n] { background: var(--surface-hover); color: var(--text-primary); }
.synn-icon-btn--danger:hover[b-h70ou7gs3n] { color: var(--color-danger); border-color: var(--color-danger); }
.synn-icon-btn:focus-visible[b-h70ou7gs3n] { outline: 2px solid var(--border-focus); outline-offset: 1px; }

.synn-dlg-col[b-h70ou7gs3n] { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.synn-dlg-error[b-h70ou7gs3n] { color: var(--color-danger); }

@media (max-width: 700px) {
    .synn-cat-extra[b-h70ou7gs3n] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/SynnFrameFW.BlazorUI/Components/Pages/DocumentEditor.razor.rz.scp.css */
/* Карточка документа (этап 3): шапка, строки, группы. Общие стили формы —
   wwwroot/css/form.css; здесь только раскладка самой страницы. */

/* Карточка шире прежних 900px: шапка в три колонки и сетка строк должны
   поместиться на 1440 без горизонтальной прокрутки. */
.synn-form-card--wide[b-8z14u6yjov] { max-width: 1320px; }

/* Командная панель формы прилипает к верху рабочей области: длинный документ
   прокручивается, а «Записать»/«Провести» остаются под рукой. */
.synn-cmdbar--form[b-8z14u6yjov] {
    position: sticky; top: 0; z-index: 5;
    background: var(--surface-bg);
}

.synn-form-tp[b-8z14u6yjov] { margin: var(--space-4) 0 var(--space-2); min-width: 0; }

/* Движения документа: простая плотная таблица. */
.synn-mov-wrap[b-8z14u6yjov] { overflow-x: auto; max-height: 60vh; }
.synn-mov-table[b-8z14u6yjov] { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 13px); }
.synn-mov-table th[b-8z14u6yjov] {
    position: sticky; top: 0; background: var(--surface-card);
    text-align: left; padding: 6px 8px; font-weight: 600; white-space: nowrap;
    color: var(--text-secondary); border-bottom: 1px solid var(--border-default);
}
.synn-mov-table td[b-8z14u6yjov] {
    padding: 5px 8px; border-bottom: 1px solid var(--border-subtle, var(--border-default));
    white-space: nowrap;
}

@media (max-width: 700px) {
    .synn-cmdbar--form[b-8z14u6yjov] { gap: 2px; }
}
/* _content/SynnFrameFW.BlazorUI/Components/Pages/ReportRunner.razor.rz.scp.css */
/* Отчёт: форма параметров и вывод (этап 5). Только токены tokens.css. */

.rpt[b-funb00nacv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--fs-md);
}

.rpt-muted[b-funb00nacv], .rpt-hint[b-funb00nacv] {
    color: var(--text-secondary);
}

.rpt-hint[b-funb00nacv] {
    padding: var(--space-4);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    text-align: center;
}

.rpt-error[b-funb00nacv] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* ── шапка ─────────────────────────────────────────────── */

.rpt-head[b-funb00nacv] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
}

.rpt-head-text[b-funb00nacv] {
    min-width: 0;
    flex: 1 1 320px;
}

.rpt-title[b-funb00nacv] {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: var(--lh-tight);
}

.rpt-desc[b-funb00nacv] {
    margin: var(--space-1) 0 0;
    max-width: 72ch;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.rpt-actions[b-funb00nacv], .rpt-result-actions[b-funb00nacv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.rpt-btn[b-funb00nacv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-md);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motion-fast), border-color var(--motion-fast);
}

.rpt-btn:hover[b-funb00nacv] {
    background: var(--surface-hover);
}

.rpt-btn:focus-visible[b-funb00nacv], .rpt-chip:focus-visible[b-funb00nacv], .rpt-pop-item:focus-visible[b-funb00nacv],
.rpt-icon-btn:focus-visible[b-funb00nacv], .rpt-params-head:focus-visible[b-funb00nacv] {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
}

.rpt-btn:disabled[b-funb00nacv] {
    opacity: .6;
    cursor: default;
}

.rpt-btn-primary[b-funb00nacv] {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: var(--text-on-brand);
}

.rpt-btn-primary:hover[b-funb00nacv] {
    background: var(--brand-primary-hover);
}

.rpt-btn-subtle[b-funb00nacv] {
    border-color: transparent;
    background: transparent;
    font-weight: 400;
}

.rpt-icon-btn[b-funb00nacv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.rpt-icon-btn:hover[b-funb00nacv] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

/* ── всплывающие меню ──────────────────────────────────── */

.rpt-pop-wrap[b-funb00nacv] {
    position: relative;
}

.rpt-pop[b-funb00nacv] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 260px;
    max-width: min(360px, calc(100vw - 32px));
    padding: var(--space-2) 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-3);
}

.rpt-pop-right[b-funb00nacv] {
    left: auto;
    right: 0;
}

.rpt-pop-scroll[b-funb00nacv] {
    max-height: 360px;
    overflow-y: auto;
    padding: var(--space-2) var(--space-3);
}

.rpt-pop-title[b-funb00nacv] {
    padding: var(--space-1) var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.rpt-pop-scroll .rpt-pop-title[b-funb00nacv] {
    padding: var(--space-2) 0 var(--space-1);
}

.rpt-pop-row[b-funb00nacv] {
    display: flex;
    align-items: center;
    padding-right: var(--space-2);
}

.rpt-pop-item[b-funb00nacv] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-2);
    min-height: 32px;
    padding: 0 var(--space-3);
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rpt-pop-item:hover[b-funb00nacv] {
    background: var(--surface-hover);
}

.rpt-pop-sep[b-funb00nacv] {
    height: 1px;
    margin: var(--space-1) 0;
    background: var(--border-default);
}

.rpt-pop-form[b-funb00nacv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
}

.rpt-pop-actions[b-funb00nacv] {
    display: flex;
    gap: var(--space-2);
}

.rpt-badge[b-funb00nacv] {
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--color-info-bg);
    color: var(--color-info);
    font-size: var(--fs-xs);
}

.rpt-check[b-funb00nacv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 28px;
    font-size: var(--fs-md);
    cursor: pointer;
}

/* ── параметры ─────────────────────────────────────────── */

.rpt-params[b-funb00nacv], .rpt-result[b-funb00nacv] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: var(--shadow-1);
}

.rpt-params-head[b-funb00nacv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rpt-params-title[b-funb00nacv] {
    font-size: var(--fs-lg);
    font-weight: 600;
}

.rpt-params-summary[b-funb00nacv] {
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
}

[b-funb00nacv] .rpt-chev {
    flex: none;
    transform: rotate(-90deg);
    transition: transform var(--motion-fast);
}

[b-funb00nacv] .rpt-chev.open {
    transform: rotate(0deg);
}

.rpt-params-body[b-funb00nacv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--border-default);
    padding-top: var(--space-4);
}

.rpt-label[b-funb00nacv] {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.rpt-period[b-funb00nacv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}

.rpt-period > .rpt-label[b-funb00nacv] {
    flex-basis: 100%;
    margin: 0;
}

.rpt-presets[b-funb00nacv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rpt-chip[b-funb00nacv] {
    height: 28px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-card);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-sm);
    white-space: nowrap;
    cursor: pointer;
}

.rpt-chip:hover[b-funb00nacv] {
    background: var(--surface-hover);
}

.rpt-chip.on[b-funb00nacv] {
    border-color: var(--brand-primary);
    background: var(--surface-selected);
    color: var(--brand-primary);
    font-weight: 600;
}

.rpt-dates[b-funb00nacv], .rpt-range[b-funb00nacv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.rpt-dash[b-funb00nacv] {
    color: var(--text-secondary);
}

.rpt-input[b-funb00nacv] {
    box-sizing: border-box;
    height: 32px;
    min-width: 0;
    padding: 0 var(--space-2);
    border: 1px solid var(--border-default);
    border-bottom-color: var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-md);
}

.rpt-input:focus[b-funb00nacv] {
    outline: none;
    border-bottom: 2px solid var(--border-focus);
}

.rpt-dates .rpt-input[b-funb00nacv] {
    width: 150px;
}

.rpt-range .rpt-input[b-funb00nacv] {
    flex: 1;
    width: 0;
}

.rpt-filters[b-funb00nacv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3) var(--space-5);
}

.rpt-field[b-funb00nacv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rpt-field > .rpt-input[b-funb00nacv], .rpt-field[b-funb00nacv]  .ui-refinput {
    width: 100%;
}

.rpt-field-head[b-funb00nacv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.rpt-field-head .rpt-label[b-funb00nacv] {
    margin-bottom: var(--space-1);
}

.rpt-tools[b-funb00nacv] {
    display: flex;
}

.rpt-add[b-funb00nacv] {
    width: auto;
    min-width: 220px;
    border-style: dashed;
    color: var(--brand-primary);
    cursor: pointer;
}

.rpt-group[b-funb00nacv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
}

.rpt-group-col[b-funb00nacv] {
    display: flex;
    flex-direction: column;
    min-width: 260px;
}

.rpt-group-measures[b-funb00nacv] {
    flex: 1;
}

/* ── результат ─────────────────────────────────────────── */

.rpt-result[b-funb00nacv] {
    min-width: 0;
    overflow: hidden;
}

.rpt-result-bar[b-funb00nacv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-4);
    border-bottom: 1px solid var(--border-default);
}

.rpt-result-info[b-funb00nacv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.rpt-warn[b-funb00nacv] {
    color: var(--color-warning);
}

.rpt-error-text[b-funb00nacv] {
    color: var(--color-danger);
}

.rpt-empty[b-funb00nacv] {
    padding: var(--space-7) var(--space-4);
    color: var(--text-secondary);
    text-align: center;
}

.rpt-grid[b-funb00nacv] {
    min-width: 0;
}

.rpt-grid[b-funb00nacv]  .e-grid {
    border: 0;
    border-radius: 0;
}

.rpt-grid[b-funb00nacv]  .e-grid .e-headercell {
    background: var(--surface-bg);
}

.rpt-grid[b-funb00nacv]  .e-grid .e-headercelldiv,
.rpt-grid[b-funb00nacv]  .e-grid .e-headercell .e-headertext {
    /* Шапка отчёта — полужирная тёмная (общее правило grid.css для таблиц — 12 px серым). */
    font-weight: 600;
    color: var(--text-primary);
}

.rpt-grid[b-funb00nacv]  .e-grid .e-rowcell {
    font-variant-numeric: tabular-nums;
}

.rpt-grid[b-funb00nacv]  .e-grid .e-summaryrow .e-summarycell {
    background: var(--surface-bg);
    border-top: 1px solid var(--border-strong);
}

[b-funb00nacv] .rpt-total {
    display: block;
    width: 100%;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── телефон ───────────────────────────────────────────── */

/* Обычная таблица с прокруткой по горизонтали внутри результата (страница при этом
   не уезжает вбок). Общее превращение SfGrid в карточки на узком экране убрано
   в этапе 4b, правила ниже оставлены как страховка от стилей темы. */
@media (max-width: 720px) {
    .rpt-grid[b-funb00nacv]  .e-grid .e-gridheader {
        display: block !important;
    }

    .rpt-grid[b-funb00nacv]  .e-grid .e-gridpager {
        display: block !important;
    }

    .rpt-grid[b-funb00nacv]  .e-grid .e-content > .e-table,
    .rpt-grid[b-funb00nacv]  .e-grid .e-gridcontent .e-table {
        display: table !important;
        width: auto !important;
        min-width: 100%;
    }

    .rpt-grid[b-funb00nacv]  .e-grid .e-gridcontent tbody {
        display: table-row-group !important;
        width: auto !important;
    }

    .rpt-grid[b-funb00nacv]  .e-grid .e-row {
        display: table-row !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .rpt-grid[b-funb00nacv]  .e-grid .e-rowcell {
        display: table-cell !important;
        padding: 6px 8px !important;
        border-bottom: 1px solid var(--border-default) !important;
        font-size: var(--fs-sm) !important;
        white-space: nowrap !important;
    }

    .rpt-grid[b-funb00nacv]  .e-grid .e-row .e-rowcell:first-child {
        font-weight: 400 !important;
        font-size: var(--fs-sm) !important;
    }
}

@media (max-width: 600px) {
    .rpt[b-funb00nacv] {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .rpt-actions[b-funb00nacv] {
        width: 100%;
    }

    .rpt-actions > .rpt-btn-primary[b-funb00nacv] {
        flex: 1;
        justify-content: center;
    }

    .rpt-params-head[b-funb00nacv] {
        padding: 0 var(--space-3);
    }

    .rpt-params-body[b-funb00nacv] {
        padding: var(--space-3);
    }

    .rpt-dates[b-funb00nacv] {
        width: 100%;
    }

    .rpt-dates .rpt-input[b-funb00nacv] {
        flex: 1;
        width: 0;
    }

    .rpt-filters[b-funb00nacv] {
        grid-template-columns: 1fr;
    }

    .rpt-group-col[b-funb00nacv] {
        min-width: 0;
        width: 100%;
    }

    .rpt-add[b-funb00nacv] {
        width: 100%;
    }

    .rpt-pop[b-funb00nacv] {
        position: fixed;
        top: auto;
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
        max-width: none;
    }
}

/* JSON в ячейках результата и окно просмотра */
.rpt-json-cell[b-funb00nacv] { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; }
.rpt-json-btn[b-funb00nacv] {
    flex: 0 0 auto;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--brand-primary);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 0 6px;
    cursor: pointer;
}
.rpt-json-btn:hover[b-funb00nacv] { background: var(--surface-hover); }
.rpt-json-preview[b-funb00nacv] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 12px; }
.rpt-json-modal[b-funb00nacv] {
    position: fixed; inset: 0; z-index: 1200;
    background: var(--overlay, rgba(0, 0, 0, .45));
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-5);
}
.rpt-json-modal__box[b-funb00nacv] {
    width: min(1100px, 100%);
    background: var(--surface-elevated, var(--surface-card));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    padding: var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.rpt-json-modal__head[b-funb00nacv] { display: flex; align-items: center; justify-content: space-between; }
.rpt-json-modal__title[b-funb00nacv] { font-weight: var(--fw-semibold); }
/* _content/SynnFrameFW.BlazorUI/Components/Pages/Reports.razor.rz.scp.css */
/* Раздел «Отчёты»: карточки с поиском (этап 5). Только токены tokens.css. */

.rl[b-prbmn4pfxn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    color: var(--text-primary);
    font-size: var(--fs-md);
}

.rl-head[b-prbmn4pfxn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
}

.rl-title[b-prbmn4pfxn] {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: var(--lh-tight);
}

.rl-sub[b-prbmn4pfxn] {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.rl-tools[b-prbmn4pfxn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.rl-search[b-prbmn4pfxn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 300px;
    max-width: 100%;
    height: 32px;
    padding: 0 var(--space-2);
    border: 1px solid var(--border-default);
    border-bottom-color: var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-secondary);
}

.rl-search:focus-within[b-prbmn4pfxn] {
    border-bottom: 2px solid var(--border-focus);
}

.rl-search-input[b-prbmn4pfxn] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
}

.rl-btn[b-prbmn4pfxn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.rl-btn:hover[b-prbmn4pfxn] {
    background: var(--surface-hover);
}

.rl-btn-primary[b-prbmn4pfxn] {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: var(--text-on-brand);
}

.rl-btn-primary:hover[b-prbmn4pfxn] {
    background: var(--brand-primary-hover);
}

.rl-btn-subtle[b-prbmn4pfxn] {
    height: 28px;
    border-color: transparent;
    background: transparent;
    font-weight: 400;
    font-size: var(--fs-sm);
}

.rl-btn-danger[b-prbmn4pfxn] {
    height: 28px;
    border-color: var(--color-danger);
    background: var(--color-danger);
    color: var(--text-on-brand);
    font-size: var(--fs-sm);
}

.rl-muted[b-prbmn4pfxn], .rl-empty[b-prbmn4pfxn] {
    color: var(--text-secondary);
}

.rl-empty[b-prbmn4pfxn] {
    padding: var(--space-7);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    text-align: center;
}

.rl-error[b-prbmn4pfxn] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.rl-grid[b-prbmn4pfxn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rl-card[b-prbmn4pfxn] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.rl-card:hover[b-prbmn4pfxn] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-2);
}

.rl-card.off[b-prbmn4pfxn] {
    opacity: .7;
}

.rl-card-link[b-prbmn4pfxn] {
    display: flex;
    flex: 1;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
}

.rl-card-link:focus-visible[b-prbmn4pfxn] {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
}

.rl-card-icon[b-prbmn4pfxn] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--surface-selected);
    color: var(--brand-primary);
}

.rl-card-body[b-prbmn4pfxn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.rl-card-title[b-prbmn4pfxn] {
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: var(--lh-tight);
}

.rl-card-link:hover .rl-card-title[b-prbmn4pfxn] {
    color: var(--brand-primary);
}

.rl-card-desc[b-prbmn4pfxn] {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.rl-card-meta[b-prbmn4pfxn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.rl-badge[b-prbmn4pfxn] {
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.rl-card-actions[b-prbmn4pfxn] {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3) var(--space-2);
    border-top: 1px solid var(--border-default);
}

@media (max-width: 600px) {
    .rl[b-prbmn4pfxn] {
        padding: var(--space-3);
    }

    .rl-tools[b-prbmn4pfxn], .rl-search[b-prbmn4pfxn] {
        width: 100%;
    }

    .rl-grid[b-prbmn4pfxn] {
        grid-template-columns: 1fr;
    }
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/PrinterCheckPanel.razor.rz.scp.css */
.pcp[b-j3oj1b7rxb] { margin-top: var(--space-4); max-width: 720px; }
.pcp__title[b-j3oj1b7rxb] { margin: 0 0 var(--space-1); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.pcp__intro[b-j3oj1b7rxb], .pcp__note[b-j3oj1b7rxb] { margin: 0 0 var(--space-2); color: var(--text-secondary); font-size: var(--fs-caption); }
.pcp__bar[b-j3oj1b7rxb] { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-2); }
.pcp__busy[b-j3oj1b7rxb] { color: var(--text-secondary); font-size: var(--fs-caption); }

.pcp__result[b-j3oj1b7rxb] {
    margin-top: var(--space-2); padding: var(--space-3);
    border: 1px solid var(--border-default); border-left-width: 4px; border-radius: var(--radius-md, 4px);
}
.pcp__result--ok[b-j3oj1b7rxb]   { border-left-color: var(--color-success); background: var(--color-success-bg); }
.pcp__result--fail[b-j3oj1b7rxb] { border-left-color: var(--color-danger);  background: var(--color-danger-bg); }
.pcp__headline[b-j3oj1b7rxb] { display: flex; align-items: center; gap: var(--space-2); }
.pcp__dot[b-j3oj1b7rxb] { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pcp__result--ok .pcp__dot[b-j3oj1b7rxb]   { background: var(--color-success); }
.pcp__result--fail .pcp__dot[b-j3oj1b7rxb] { background: var(--color-danger); }
.pcp__facts[b-j3oj1b7rxb] { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--space-3); margin: var(--space-2) 0 0; font-size: var(--fs-caption); }
.pcp__facts dt[b-j3oj1b7rxb] { color: var(--text-secondary); }
.pcp__facts dd[b-j3oj1b7rxb] { margin: 0; }
.pcp__hint[b-j3oj1b7rxb] { margin: var(--space-2) 0 0; }
.pcp__error[b-j3oj1b7rxb] { margin: var(--space-1) 0 0; font-size: var(--fs-caption); color: var(--text-secondary); overflow-wrap: anywhere; }
.pcp__error span[b-j3oj1b7rxb] { font-weight: var(--fw-semibold); }
/* _content/SynnFrameFW.BlazorUI/Components/Ui/RecordPhotos.razor.rz.scp.css */
.rphotos[b-axiwwtxnmd] { margin-top: var(--space-4); max-width: 1320px; }
.rphotos__title[b-axiwwtxnmd] { margin: 0 0 var(--space-2); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.rphotos__count[b-axiwwtxnmd] { color: var(--text-secondary); font-weight: normal; }
.rphotos__row[b-axiwwtxnmd] { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.rphotos__thumb[b-axiwwtxnmd] {
    width: 120px; height: 120px; padding: 0; overflow: hidden; cursor: pointer;
    border: 1px solid var(--border-default); border-radius: var(--radius-md, 4px);
    background: var(--surface-card); display: flex; align-items: center; justify-content: center;
}
.rphotos__thumb:hover[b-axiwwtxnmd] { border-color: var(--color-primary, var(--border-default)); }
.rphotos__thumb img[b-axiwwtxnmd] { width: 100%; height: 100%; object-fit: cover; display: block; }
.rphotos__thumb--wait[b-axiwwtxnmd] {
    cursor: default; padding: var(--space-2); text-align: center;
    color: var(--text-secondary); font-size: var(--fs-caption); border-style: dashed;
}
.rphotos__more[b-axiwwtxnmd] {
    margin-top: var(--space-2); padding: 4px 12px; cursor: pointer;
    border: 1px solid var(--border-default); border-radius: var(--radius-md, 4px);
    background: var(--surface-card); color: inherit;
}

.rphotos__overlay[b-axiwwtxnmd] {
    position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .7);
    display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
.rphotos__dialog[b-axiwwtxnmd] {
    position: relative; max-width: min(96vw, 1200px); max-height: 94vh;
    background: var(--surface-card); border-radius: var(--radius-md, 4px); padding: var(--space-2);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.rphotos__big[b-axiwwtxnmd] { max-width: 100%; max-height: calc(94vh - 80px); object-fit: contain; display: block; margin: 0 auto; }
.rphotos__caption[b-axiwwtxnmd] { color: var(--text-secondary); font-size: var(--fs-caption); text-align: center; }
.rphotos__close[b-axiwwtxnmd] {
    position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; cursor: pointer;
    border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 16px;
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiBadge.razor.rz.scp.css */
.ui-badge[b-gkbfeq8ed6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    /* Статус-чип: 12px, высота 20px — рядом с заголовком формы и в списках. */
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--fs-caption);
    line-height: 16px;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.ui-badge__icon[b-gkbfeq8ed6] {
    display: inline-flex;
    line-height: 1;
}

.ui-badge--neutral[b-gkbfeq8ed6] {
    background: var(--color-neutral-bg);
    color: var(--color-neutral);
}

.ui-badge--success[b-gkbfeq8ed6] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.ui-badge--warning[b-gkbfeq8ed6] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.ui-badge--danger[b-gkbfeq8ed6] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.ui-badge--info[b-gkbfeq8ed6] {
    background: var(--color-info-bg);
    color: var(--color-info);
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiBulkActionBar.razor.rz.scp.css */
.ui-bulk-bar[b-vpndt6twx4] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--surface-selected);
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    animation: ui-bulk-bar-in-b-vpndt6twx4 var(--motion-normal) ease-out;
}

.ui-bulk-bar__count[b-vpndt6twx4] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--fs-md);
}

.ui-bulk-bar__count strong[b-vpndt6twx4] {
    font-size: var(--fs-lg);
    color: var(--brand-primary);
}

.ui-bulk-bar__count-label[b-vpndt6twx4] {
    color: var(--text-secondary);
}

.ui-bulk-bar__actions[b-vpndt6twx4] {
    flex: 1;
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.ui-bulk-bar__clear[b-vpndt6twx4] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-md);
    border-radius: var(--radius-sm);
    transition: background-color var(--motion-fast);
}

.ui-bulk-bar__clear:hover[b-vpndt6twx4] {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

@keyframes ui-bulk-bar-in-b-vpndt6twx4 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiCard.razor.rz.scp.css */
.ui-card[b-d0t5n5g7rg] {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    border: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ui-card__header[b-d0t5n5g7rg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-card);
}

.ui-card__title[b-d0t5n5g7rg] {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: var(--lh-tight);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.ui-card__header-actions[b-d0t5n5g7rg] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.ui-card__body[b-d0t5n5g7rg] {
    padding: var(--space-5);
    color: var(--text-primary);
}

.ui-card__footer[b-d0t5n5g7rg] {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-default);
    background: var(--surface-card);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiCollapsibleFormCard.razor.rz.scp.css */
[b-w7wjq95hde] .ui-collapsible-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

[b-w7wjq95hde] .ui-collapsible-card__toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    padding: var(--space-1);
    transition: color var(--motion-fast);
}

[b-w7wjq95hde] .ui-collapsible-card__toggle:hover {
    color: var(--text-primary);
}

[b-w7wjq95hde] .ui-collapsible-card__title {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: var(--lh-tight);
    font-weight: 600;
    color: var(--text-primary);
}

[b-w7wjq95hde] .ui-collapsible-card__summary {
    flex: 1;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin-left: var(--space-3);
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiCommandMenu.razor.rz.scp.css */
/* Выпадающая команда панели формы («Ещё», «Перейти») — как в Business Central:
   та же «тихая» кнопка, что и соседние в .synn-cmdbar (buttons.css): одна
   высота (--control-h), без фона и рамки, значок основного цвета, ˅ справа. */
.ucm[b-iu7gur516e] { position: relative; display: inline-block; }

.ucm-btn[b-iu7gur516e] {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--control-h); padding: 0 var(--space-2) 0 var(--space-3);
    font: inherit; font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: 20px;
    color: var(--text-primary);
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--motion-fast);
}
.ucm-btn:hover:not(:disabled)[b-iu7gur516e] { background: var(--surface-hover); }
.ucm-btn:active:not(:disabled)[b-iu7gur516e] { background: var(--surface-pressed); }
.ucm-btn:disabled[b-iu7gur516e] { color: var(--text-disabled); cursor: default; }
.ucm-btn:disabled .ucm-ico[b-iu7gur516e] { color: var(--text-disabled); }
.ucm-btn[aria-expanded="true"][b-iu7gur516e] { background: var(--surface-hover); }
.ucm-btn:focus-visible[b-iu7gur516e] { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.ucm-ico[b-iu7gur516e] { font-size: var(--fs-subtitle); color: var(--brand-2); }
.ucm-btn[b-iu7gur516e]  .ucm-caret { flex: none; color: var(--text-secondary); }

.ucm-backdrop[b-iu7gur516e] { position: fixed; inset: 0; z-index: 1000; }

.ucm-menu[b-iu7gur516e] {
    position: absolute; left: 0; top: calc(100% + 4px); z-index: 1001;
    min-width: 240px; max-width: min(420px, calc(100vw - 32px));
    max-height: 60vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0; padding: var(--space-1);
    background: var(--surface-card); color: var(--text-primary);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
}

/* Пункты меню — разметка хозяина (кнопки/подписи), поэтому ::deep. */
.ucm-menu[b-iu7gur516e]  .ucm-item {
    display: flex; align-items: center; gap: var(--space-2); width: 100%;
    min-height: var(--control-h); padding: 0 var(--space-3) 0 var(--space-2);
    border: 0; border-radius: var(--radius-sm);
    background: none; color: inherit; font: inherit; font-size: var(--fs-body);
    text-align: left; cursor: pointer; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.ucm-menu[b-iu7gur516e]  .ucm-item:hover:not(:disabled) { background: var(--surface-hover); }
.ucm-menu[b-iu7gur516e]  .ucm-item:disabled { color: var(--text-disabled); cursor: default; }
.ucm-menu[b-iu7gur516e]  .ucm-item:disabled .e-icons { color: var(--text-disabled); }
.ucm-menu[b-iu7gur516e]  .ucm-item .e-icons { font-size: var(--fs-subtitle); width: 18px; color: var(--brand-2); }
/* Значки UiIcon (SVG) в пунктах — тот же цвет и место, что у шрифтовых. */
.ucm-menu[b-iu7gur516e]  .ucm-item .ucm-svg { flex: none; width: 18px; color: var(--brand-2); }
.ucm-menu[b-iu7gur516e]  .ucm-item:disabled .ucm-svg { color: var(--text-disabled); }
/* Опасное действие — единственный красный в меню. */
.ucm-menu[b-iu7gur516e]  .ucm-item--danger,
.ucm-menu[b-iu7gur516e]  .ucm-item--danger .e-icons { color: var(--color-danger); }
/* Клавиша команды в пункте меню (этап 2 — список): «клавиша» справа. */
.ucm-menu[b-iu7gur516e]  .ucm-item kbd {
    margin-left: auto; padding: 0 5px;
    border: 1px solid var(--border-default); border-radius: 3px;
    font: inherit; font-size: var(--fs-caption); line-height: 16px;
    color: var(--text-secondary); background: var(--surface-subtle);
}
.ucm-menu[b-iu7gur516e]  .ucm-head {
    padding: var(--space-2) var(--space-2) 2px; font-size: var(--fs-caption); font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}
.ucm-menu[b-iu7gur516e]  .ucm-note { padding: 6px var(--space-2); font-size: var(--fs-caption); color: var(--text-secondary); }
.ucm-menu[b-iu7gur516e]  .ucm-sep { height: 1px; margin: var(--space-1) 2px; background: var(--border-default); }
/* Пункты, дублирующие кнопки панели, — только на телефоне (кнопки там спрятаны). */
.ucm-menu[b-iu7gur516e]  .ucm-item--mobile { display: none; }

@media (max-width: 720px) {
    .ucm-menu[b-iu7gur516e]  .ucm-item--mobile { display: flex; }
    .ucm-menu[b-iu7gur516e] { left: auto; right: 0; }
    .ucm-btn[b-iu7gur516e] { padding: 0 var(--space-2); }
    .ucm-btn[b-iu7gur516e]  .ucm-caret { display: none; }
    .ucm.synn-cmd-icon-sm .ucm-label[b-iu7gur516e],
    .ucm.synn-cmd-icon-sm[b-iu7gur516e]  .ucm-caret { display: none; }
    .ucm.synn-cmd-icon-sm .ucm-btn[b-iu7gur516e] { padding: 0 var(--space-2); min-width: var(--control-h); justify-content: center; }
}

/* Узкий телефон (≤ 420): «Ещё» формы — только значком ⋮ (подпись — в aria-label),
   иначе «Перейти» и «Закрыть» уходили на вторую строку панели. */
@media (max-width: 420px) {
    .ucm.synn-cmd-icon-xs .ucm-label[b-iu7gur516e] { display: none; }
    .ucm.synn-cmd-icon-xs .ucm-btn[b-iu7gur516e] { padding: 0 var(--space-2); min-width: var(--control-h); justify-content: center; }
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiDatePicker.razor.rz.scp.css */
/* Поля даты: одинаковая высота с остальными контролами, не растягиваются на всю ширину в строке периода. */
[b-oyv7fos07t] .ui-datepicker.e-input-group,
[b-oyv7fos07t] .ui-datepicker.e-control-wrapper {
    min-height: var(--control-h, 32px);
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiDateRange.razor.rz.scp.css */
.ui-daterange[b-df6pjez39s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.ui-daterange__fields[b-df6pjez39s] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ui-daterange__fields[b-df6pjez39s]  .ui-daterange__pick {
    flex: 1 1 0;
    min-width: 120px;
}

.ui-daterange__dash[b-df6pjez39s] {
    color: var(--text-secondary);
}

.ui-daterange__presets[b-df6pjez39s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.ui-daterange__chip[b-df6pjez39s] {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    padding: 1px var(--space-3);
    font-size: var(--fs-caption);
    line-height: 18px;
    cursor: pointer;
    font-family: inherit;
}

.ui-daterange__chip:hover:not(:disabled)[b-df6pjez39s] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.ui-daterange__chip.is-active[b-df6pjez39s] {
    background: var(--surface-selected);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    font-weight: var(--fw-semibold);
}

.ui-daterange__chip--custom[b-df6pjez39s] {
    cursor: default;
    border-style: dashed;
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiDynamicForm.razor.rz.scp.css */
/* Поле с настроенным штрихкодом: сам контрол + кнопка показа справа.
   Кнопка компактная, чтобы не ломать сетку формы. */
.ui-f-with-barcode[b-uwv7tumdwc] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.ui-f-with-barcode > :first-child[b-uwv7tumdwc] {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-barcode-btn[b-uwv7tumdwc] {
    flex: 0 0 auto;
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
    margin-bottom: 2px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    color: var(--color-text-secondary, #555);
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-default, #ccc);
    border-radius: 4px;
}

.ui-barcode-btn:hover:not(:disabled)[b-uwv7tumdwc] {
    color: var(--color-text-primary, #111);
    border-color: var(--color-primary, #2b6cb0);
}

.ui-barcode-btn:disabled[b-uwv7tumdwc] {
    opacity: .4;
    cursor: default;
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiEmpty.razor.rz.scp.css */
.ui-empty[b-r5h087dvmz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 56px 24px;
    border: 1px dashed var(--border-default);
    border-radius: 8px;
    background: var(--surface-card);
}

.ui-empty__icon[b-r5h087dvmz] {
    font-size: 28px;
    line-height: 1;
    opacity: .5;
    margin-bottom: 2px;
}

.ui-empty__title[b-r5h087dvmz] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.ui-empty__desc[b-r5h087dvmz] {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 420px;
}

.ui-empty__actions[b-r5h087dvmz] {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiField.razor.rz.scp.css */
.ui-field[b-3uoc5hf0s5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

/* Подпись над полем: 12px, серая, обычного начертания — как в Business
   Central / Fluent 2 (полужирные подписи спорили со значениями). */
.ui-field__label[b-3uoc5hf0s5] {
    display: block;
    font-size: var(--fs-caption);
    color: var(--text-secondary);
    font-weight: var(--fw-regular);
    line-height: 16px;
}

.ui-field__required[b-3uoc5hf0s5] {
    color: var(--color-danger);
    margin-right: 2px;
    font-weight: var(--fw-semibold);
}

.ui-field__control[b-3uoc5hf0s5] {
    /* Дочерний компонент сам управляет своими размерами; обёртка только
       выравнивает гутер. */
    position: relative;
}

/* 1С 8.5: контейнер с иконкой слева внутри поля ввода. Иконка не
   перекрывает текст — добавляем padding слева у вложенного input. */
.ui-field__control--with-icon[b-3uoc5hf0s5] { position: relative; }
.ui-field__icon[b-3uoc5hf0s5] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-subtitle);
    line-height: 1;
    pointer-events: none;
    color: var(--text-secondary);
    z-index: 1;
}
.ui-field__control--with-icon[b-3uoc5hf0s5]  input.e-input {
    padding-left: 36px;
}

.ui-field__hint[b-3uoc5hf0s5] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    line-height: var(--lh-tight);
}

.ui-field__error[b-3uoc5hf0s5] {
    font-size: var(--fs-xs);
    color: var(--color-danger);
    line-height: var(--lh-tight);
}

/* S1.A.47 — кнопка «i» (длинная подсказка) — 1С 8.5 стр. 95. */
.ui-field__help[b-3uoc5hf0s5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--surface-selected);
    color: var(--brand-2);
    font-size: var(--fs-caption);
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    cursor: help;
    user-select: none;
    vertical-align: middle;
}
.ui-field__help:hover[b-3uoc5hf0s5] { background: var(--brand-2); color: var(--text-on-brand); }
.ui-field__help--inline[b-3uoc5hf0s5] {
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
}

/* S1.A.50 — Боковые кнопки справа от поля (1С 8.5 гл. 66, 67, 68).
   Кнопки регулирования, замок, kebab — вне границ input, в одной строке. */
.ui-input-with-buttons[b-3uoc5hf0s5] {
    display: flex;
    align-items: stretch;
    gap: 4px;
    position: relative;
}
.ui-input-with-buttons__field[b-3uoc5hf0s5] { flex: 1; min-width: 0; }
.ui-side-btn[b-3uoc5hf0s5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-h);
    height: var(--control-h);
    padding: 0 8px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-body);
    line-height: 1;
    color: var(--text-secondary);
    transition: background .15s, border-color .15s;
}
.ui-side-btn:hover[b-3uoc5hf0s5] { background: var(--surface-hover); border-color: var(--border-strong); }
.ui-side-btn--lock[b-3uoc5hf0s5] { font-size: var(--fs-subtitle); }
.ui-side-menu[b-3uoc5hf0s5] {
    position: absolute;
    right: 0; top: 100%;
    margin-top: 4px;
    min-width: 180px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    z-index: 10;
    padding: 4px 0;
}

/* HintPosition=right — подсказка справа от поля, в одной строке. */
.ui-field__row[b-3uoc5hf0s5] { display: flex; align-items: center; gap: 12px; }
.ui-field--hint-right .ui-field__row[b-3uoc5hf0s5] { align-items: center; }
/* Контрол занимает всю ширину поля. Раньше flex:1 стоял только у варианта
   с подсказкой справа, поэтому в обычном поле контрол сжимался по контенту:
   в ячейке шириной 442px поле было 196px и ширина не читалась как осмысленная.
   min-width:0 — иначе длинное значение растягивает flex-элемент. */
.ui-field__control[b-3uoc5hf0s5] { flex: 1; min-width: 0; }
.ui-field__hint--right[b-3uoc5hf0s5] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    line-height: var(--lh-tight);
    flex: 0 0 auto;
    max-width: 40%;
}

/* S1.A.52 — UiRadioGroup */
.ui-radio-group[b-3uoc5hf0s5] { display: flex; flex-direction: column; gap: 6px; }
.ui-radio-group--inline[b-3uoc5hf0s5] { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.ui-radio[b-3uoc5hf0s5] { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--fs-body); }
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiFormCard.razor.rz.scp.css */
/* Падение паддинга на body карточки в зависимости от Padding. Применяем
   через ::deep чтобы пробить scoped CSS Blazor — селектор должен достать
   внутрь Razor-вложения UiCard. */
[b-w4q9tb229v] .ui-form-card--tight .ui-card__body {
    padding: var(--space-3);
}

[b-w4q9tb229v] .ui-form-card--none .ui-card__body {
    padding: 0;
}

/* Highlighted-вариант — жёлтая акцентная полоска слева, как у выделенной
   строки списка в 1С. */
[b-w4q9tb229v] .ui-form-card--highlighted {
    border-left: 4px solid var(--accent-bar);
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiJsonField.razor.rz.scp.css */
.ui-jsonfield[b-j7csp9dq7r] { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.ui-jsonfield__head[b-j7csp9dq7r] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

.ui-jsonfield__label[b-j7csp9dq7r] { font-size: var(--fs-caption); color: var(--text-secondary); }

.ui-jsonfield__mode[b-j7csp9dq7r] { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; }

.ui-jsonfield__tab[b-j7csp9dq7r] {
    border: 0;
    background: var(--surface-card);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-caption);
    padding: 1px var(--space-3);
    cursor: pointer;
}
.ui-jsonfield__tab.is-on[b-j7csp9dq7r] { background: var(--surface-selected); color: var(--brand-primary); font-weight: var(--fw-semibold); }
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiJsonViewer.razor.rz.scp.css */
/* Палитра подсветки: светлая тема по умолчанию, тёмная — по data-theme. */
.ujv[b-r5dmq8ni7s] {
    --ujv-key: #0b4f9c;
    --ujv-str: #1a7f37;
    --ujv-num: #b35900;
    --ujv-bool: #8250df;
    --ujv-null: #6e7781;
    --ujv-pun: #57606a;
    --ujv-no: #8c959f;
    --ujv-hit: #fff1a8;
    --ujv-cur: #ffcf33;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    overflow: hidden;
}

[data-theme="dark"] .ujv[b-r5dmq8ni7s] {
    --ujv-key: #79b8ff;
    --ujv-str: #7ee787;
    --ujv-num: #ffa657;
    --ujv-bool: #d2a8ff;
    --ujv-null: #8b949e;
    --ujv-pun: #9aa4ae;
    --ujv-no: #6e7681;
    --ujv-hit: #5c4b00;
    --ujv-cur: #9a6700;
}

.ujv__bar[b-r5dmq8ni7s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
    font-size: var(--fs-caption);
}

.ujv__sp[b-r5dmq8ni7s] { flex: 1 1 auto; }

.ujv__meta[b-r5dmq8ni7s] { color: var(--text-secondary); white-space: nowrap; }

.ujv__copied[b-r5dmq8ni7s] { color: var(--color-success); }

.ujv__btn[b-r5dmq8ni7s] {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 1px var(--space-2);
    font: inherit;
    font-size: var(--fs-caption);
    cursor: pointer;
}
.ujv__btn:hover[b-r5dmq8ni7s] { background: var(--surface-hover); }
.ujv__btn--ico[b-r5dmq8ni7s] { padding: 1px 6px; }

.ujv__search[b-r5dmq8ni7s] { display: inline-flex; align-items: center; gap: var(--space-1); }

.ujv__q[b-r5dmq8ni7s] {
    height: 24px;
    width: 180px;
    padding: 0 var(--space-2);
    font: inherit;
    font-size: var(--fs-caption);
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    outline: none;
}
.ujv__q:focus[b-r5dmq8ni7s] { border-color: var(--border-focus); }

.ujv__cnt[b-r5dmq8ni7s] { color: var(--text-secondary); min-width: 40px; text-align: center; }

.ujv__note[b-r5dmq8ni7s] {
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-caption);
    color: var(--color-warning);
    background: var(--color-warning-bg);
}

.ujv__body[b-r5dmq8ni7s] {
    overflow: auto;
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
    font-size: 12.5px;
    line-height: 20px;
    outline: none;
}

.ujv__empty[b-r5dmq8ni7s] { padding: var(--space-3); color: var(--text-secondary); font-family: var(--font-family); }

.ujv__line[b-r5dmq8ni7s] {
    display: flex;
    height: 20px;
    white-space: pre;
    min-width: max-content;
}
.ujv__line:hover[b-r5dmq8ni7s] { background: var(--surface-hover); }
.ujv__line.is-hit[b-r5dmq8ni7s] { background: var(--ujv-hit); }
.ujv__line.is-cur[b-r5dmq8ni7s] { background: var(--ujv-cur); }

.ujv__no[b-r5dmq8ni7s] {
    flex: 0 0 52px;
    text-align: right;
    padding-right: var(--space-2);
    color: var(--ujv-no);
    user-select: none;
    border-right: 1px solid var(--border-subtle);
    margin-right: var(--space-2);
    position: sticky;
    left: 0;
    background: var(--surface-card);
}

.ujv__code[b-r5dmq8ni7s] { display: inline-flex; align-items: center; }

.ujv__tg[b-r5dmq8ni7s], .ujv__sp-tg[b-r5dmq8ni7s] {
    display: inline-block;
    width: 16px;
    flex: 0 0 16px;
    text-align: center;
}
.ujv__tg[b-r5dmq8ni7s] {
    border: 0;
    background: transparent;
    color: var(--ujv-pun);
    cursor: pointer;
    padding: 0;
    font: inherit;
    line-height: 20px;
}
.ujv__tg:hover[b-r5dmq8ni7s] { color: var(--text-primary); }

.ujv__key[b-r5dmq8ni7s] { color: var(--ujv-key); }
.ujv__idx[b-r5dmq8ni7s] { color: var(--ujv-no); }
.ujv__str[b-r5dmq8ni7s] { color: var(--ujv-str); }
.ujv__num[b-r5dmq8ni7s] { color: var(--ujv-num); }
.ujv__bool[b-r5dmq8ni7s] { color: var(--ujv-bool); }
.ujv__null[b-r5dmq8ni7s] { color: var(--ujv-null); }
.ujv__pun[b-r5dmq8ni7s] { color: var(--ujv-pun); }
.ujv__dots[b-r5dmq8ni7s] { color: var(--ujv-null); padding: 0 4px; }

.ujv__cntbadge[b-r5dmq8ni7s] {
    margin-left: var(--space-2);
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--surface-selected);
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: 11px;
    line-height: 16px;
}

.ujv__more[b-r5dmq8ni7s] { color: var(--text-secondary); font-family: var(--font-family); }

.ujv__link[b-r5dmq8ni7s] {
    border: 0;
    background: transparent;
    color: var(--brand-primary);
    cursor: pointer;
    font: inherit;
    padding: 0 var(--space-1);
    text-decoration: underline;
}

.ujv__mark[b-r5dmq8ni7s] {
    background: var(--ujv-cur);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiListForm.razor.rz.scp.css */
/* Единая форма списка (этапы 2, 2b; визуальная система — этап 4b).
 * Тот же язык, что у панели команд формы (css/buttons.css, этап 4a):
 *  - одна высота элементов панели — --control-h (Плотный 28 / Обычный 32 / Сенсорный 40);
 *  - главная команда — заливка основным цветом, остальные «тихие» (без фона и рамки,
 *    значок основного цвета, фон при наведении), отключённые — без подложки;
 *  - чипы представлений, отборов и группировки — одной строкой с переносом;
 *  - таблица без рамки-в-рамке: шапка 12 px обычным регистром, тонкие линии строк,
 *    высота строки по плотности (css/density.css), выделенная строка — мягкая подсветка.
 * Внутренности Syncfusion и разметка владельца — через ::deep, без !important
 * (специфичность — за счёт .ulf-… + классов темы). */
.ulf[b-jndgu0cyvm] { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

/* ── Панель команд ─────────────────────────────────────────────────── */
.ulf-bar[b-jndgu0cyvm] {
    display: flex; align-items: center; gap: var(--space-1); flex-wrap: nowrap; min-width: 0;
    min-height: var(--control-h);
}
.ulf-bar__cmds[b-jndgu0cyvm] { flex: 1 1 auto; min-width: 0; }

/* SfToolbar: прозрачная полоса без своей высоты 36/48 — высота по кнопкам. */
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar {
    height: auto; min-height: var(--control-h);
    background: transparent; border: 0; box-shadow: none;
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items {
    height: auto; min-height: var(--control-h); background: transparent;
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-item {
    height: auto; min-height: var(--control-h); padding: 0; margin: 0 2px 0 0;
    background: transparent;
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-item:first-child { margin-left: 0; }

/* Тихая кнопка (всё, кроме главной). */
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--control-h); min-height: var(--control-h); padding: 0 var(--space-3);
    font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: 20px;
    color: var(--text-primary); background: transparent;
    border: 1px solid transparent; border-radius: var(--radius-sm); box-shadow: none;
    transition: background-color var(--motion-fast);
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-btn-icon {
    font-size: var(--fs-subtitle); width: 16px; min-width: 16px; padding: 0; margin: 0; color: var(--brand-2);
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
    padding: 0; font-size: var(--fs-body); color: inherit;
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-overlay) .e-tbar-btn.e-btn:hover { background: var(--surface-hover); }
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-overlay) .e-tbar-btn.e-btn:active { background: var(--surface-pressed); }
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus:not(:focus-visible) { background: transparent; box-shadow: none; }
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus-visible {
    outline: 2px solid var(--border-focus); outline-offset: 1px; box-shadow: none;
}

/* Отключённая — без подложки темы (у Fluent 2 там белый прямоугольник), только серый текст. */
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-item.e-overlay { background: transparent; opacity: 1; }
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay .e-tbar-btn.e-btn,
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay .e-tbar-btn.e-btn .e-btn-icon {
    background: transparent; color: var(--text-disabled);
}

/* Главная команда — заливка основным цветом (единственная цветная кнопка). */
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.ulf-primary .e-tbar-btn.e-btn {
    background: var(--brand-2); border-color: var(--brand-2);
    color: var(--text-on-brand); font-weight: var(--fw-semibold);
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.ulf-primary .e-tbar-btn.e-btn .e-btn-icon,
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.ulf-primary .e-tbar-btn.e-btn .e-tbar-btn-text { color: var(--text-on-brand); }
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.ulf-primary:not(.e-overlay) .e-tbar-btn.e-btn:hover {
    background: var(--brand-2-hover); border-color: var(--brand-2-hover);
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.ulf-primary:not(.e-overlay) .e-tbar-btn.e-btn:active {
    background: var(--brand-2-active); border-color: var(--brand-2-active);
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.ulf-primary.e-overlay .e-tbar-btn.e-btn { opacity: .5; }

/* «⋯» переполнения и его выпадающий список — как «Ещё» (UiCommandMenu). */
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-hor-nav {
    height: var(--control-h); min-height: var(--control-h); width: var(--control-h);
    background: transparent; border: 0; border-radius: var(--radius-sm);
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-hor-nav:hover,
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-hor-nav.e-nav-active { background: var(--surface-hover); }
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar.e-toolbar .e-hor-nav .e-popup-down-icon { color: var(--text-primary); }
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar .e-toolbar-pop {
    padding: var(--space-1); background: var(--surface-card);
    border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-3);
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar .e-toolbar-pop .e-toolbar-item { height: auto; min-height: var(--control-h); min-width: max-content; margin: 0; background: transparent; opacity: 1; }
/* В выпадающем списке все команды — пунктами меню, без заливки (и главная тоже). */
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
    display: flex; align-items: center; gap: var(--space-2); width: 100%; justify-content: flex-start;
    height: var(--control-h); padding: 0 var(--space-3) 0 var(--space-2);
    font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--text-primary);
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); box-shadow: none;
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-btn-icon {
    font-size: var(--fs-subtitle); width: 18px; min-width: 18px; padding: 0; margin: 0; color: var(--brand-2);
}
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text { padding: 0; color: inherit; font-size: var(--fs-body); white-space: nowrap; text-align: left; }
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-overlay) .e-tbar-btn.e-btn:hover { background: var(--surface-hover); }
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar .e-toolbar-pop .e-toolbar-item.e-overlay .e-tbar-btn.e-btn,
.ulf-bar[b-jndgu0cyvm]  .ulf-toolbar .e-toolbar-pop .e-toolbar-item.e-overlay .e-tbar-btn.e-btn .e-btn-icon { color: var(--text-disabled); }

/* «Отбор» — та же тихая кнопка; с отбором — основным цветом и счётчиком. */
.ulf-filter-btn[b-jndgu0cyvm] {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    height: var(--control-h); padding: 0 var(--space-3);
    font: inherit; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--text-primary);
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
    cursor: pointer; white-space: nowrap; transition: background-color var(--motion-fast);
}
.ulf-filter-btn[b-jndgu0cyvm]  .ui-ico { color: var(--brand-2); }
.ulf-filter-btn:hover[b-jndgu0cyvm] { background: var(--surface-hover); }
.ulf-filter-btn:active[b-jndgu0cyvm] { background: var(--surface-pressed); }
.ulf-filter-btn:focus-visible[b-jndgu0cyvm] { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.ulf-filter-btn.is-open[b-jndgu0cyvm] { background: var(--surface-selected); }
.ulf-filter-btn.has-filter[b-jndgu0cyvm] { color: var(--brand-2); font-weight: var(--fw-semibold); }
.ulf-badge[b-jndgu0cyvm] {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full);
    font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 18px;
    text-align: center; background: var(--brand-2); color: var(--text-on-brand);
}

.ulf-count[b-jndgu0cyvm] {
    flex: none; white-space: nowrap; padding: 0 var(--space-1);
    font-size: var(--fs-caption); color: var(--text-secondary); font-variant-numeric: tabular-nums;
}

/* Поиск списка — поле той же высоты, что кнопки, в стиле полей Fluent 2 (fields.css). */
.ulf-search[b-jndgu0cyvm] { position: relative; flex: 0 1 260px; min-width: 120px; display: flex; align-items: center; }
.ulf-search[b-jndgu0cyvm]  .ulf-search__ico { position: absolute; left: var(--space-2); color: var(--text-secondary); pointer-events: none; }
.ulf-search-input[b-jndgu0cyvm] {
    width: 100%; height: var(--control-h); padding: 0 28px 0 30px;
    font: inherit; font-size: var(--fs-body); color: var(--text-primary); background: var(--surface-card);
    border: 1px solid var(--border-default); border-radius: var(--radius-sm); outline: none;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.ulf-search-input[b-jndgu0cyvm]::placeholder { color: var(--text-secondary); }
.ulf-search-input:hover[b-jndgu0cyvm] { border-color: var(--border-strong); }
.ulf-search-input:focus[b-jndgu0cyvm] { border-color: var(--border-focus); box-shadow: inset 0 -1px 0 0 var(--border-focus); }
.ulf-search__clear[b-jndgu0cyvm] {
    position: absolute; right: 4px; width: 24px; height: 24px; display: inline-flex; align-items: center;
    justify-content: center; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-secondary); cursor: pointer;
}
.ulf-search__clear:hover[b-jndgu0cyvm] { background: var(--surface-hover); color: var(--text-primary); }

/* Полнотекстовый поиск: отдельная строка под панелью команд. */
.ulf-ftsbar[b-jndgu0cyvm] {
    position: relative; display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2);
}
.ulf-ftsbar[b-jndgu0cyvm]  .ulf-fts__ico { position: absolute; left: var(--space-2); color: var(--text-secondary); pointer-events: none; }
.ulf-fts-box[b-jndgu0cyvm] { position: relative; flex: 1 1 auto; min-width: 140px; display: flex; align-items: center; }
.ulf-fts-input[b-jndgu0cyvm] {
    width: 100%; height: var(--control-h); padding: 0 30px 0 30px;
    font: inherit; font-size: var(--fs-body); color: var(--text-primary); background: var(--surface-card);
    border: 1px solid var(--border-default); border-radius: var(--radius-sm); outline: none;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.ulf-fts-input[b-jndgu0cyvm]::placeholder { color: var(--text-secondary); }
.ulf-fts-input:hover[b-jndgu0cyvm] { border-color: var(--border-strong); }
.ulf-fts-input:focus[b-jndgu0cyvm] { border-color: var(--border-focus); box-shadow: inset 0 -1px 0 0 var(--border-focus); }
.ulf-fts__clear[b-jndgu0cyvm] {
    position: absolute; right: 4px; width: 24px; height: 24px; display: inline-flex; align-items: center;
    justify-content: center; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-secondary); cursor: pointer;
}
.ulf-fts__clear:hover[b-jndgu0cyvm] { background: var(--surface-hover); color: var(--text-primary); }
.ulf-fts-days[b-jndgu0cyvm] { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--text-secondary); font-size: var(--fs-body); }
.ulf-fts-days select[b-jndgu0cyvm] {
    height: var(--control-h); font: inherit; font-size: var(--fs-body); color: var(--text-primary); background: var(--surface-card);
    border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 0 var(--space-2);
}
.ulf-fts-go[b-jndgu0cyvm] {
    flex: none; height: var(--control-h); padding: 0 var(--space-4); font: inherit; font-size: var(--fs-body);
    color: var(--text-on-brand); background: var(--brand-2, var(--brand)); border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.ulf-fts-go:hover[b-jndgu0cyvm] { filter: brightness(1.1); }

/* «Иерархия / Список» — сегменты той же высоты. */
.ulf-modes[b-jndgu0cyvm] {
    display: inline-flex; flex: none; height: var(--control-h); box-sizing: border-box;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden;
}
.ulf-mode[b-jndgu0cyvm] {
    display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 var(--space-3);
    font: inherit; font-size: var(--fs-body); color: var(--text-secondary);
    background: var(--surface-card); border: 0; cursor: pointer; white-space: nowrap;
}
.ulf-mode + .ulf-mode[b-jndgu0cyvm] { border-left: 1px solid var(--border-default); }
.ulf-mode:hover[b-jndgu0cyvm] { background: var(--surface-hover); color: var(--text-primary); }
.ulf-mode:focus-visible[b-jndgu0cyvm] { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.ulf-mode.is-on[b-jndgu0cyvm] { background: var(--surface-selected); color: var(--brand-2); font-weight: var(--fw-semibold); }

/* ── Чипы: представления, отборы, группировка — одной строкой с переносом ── */
.ulf-chipbar[b-jndgu0cyvm] {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0;
}
.ulf-views[b-jndgu0cyvm], .ulf-fchips[b-jndgu0cyvm] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; }
/* Отборы после представлений — через тонкую черту. */
.ulf-views + .ulf-fchips[b-jndgu0cyvm], .ulf-fchips + .ulf-fchips[b-jndgu0cyvm] { padding-left: var(--space-2); border-left: 1px solid var(--border-default); }

.ulf-view[b-jndgu0cyvm] {
    display: inline-flex; align-items: center; height: max(28px, calc(var(--control-h) - 4px)); box-sizing: border-box;
    border-radius: var(--radius-full); border: 1px solid var(--border-default);
    background: var(--surface-card); transition: background-color var(--motion-fast);
}
.ulf-view > button:first-child[b-jndgu0cyvm] {
    height: 100%; padding: 0 var(--space-3); border: 0; background: none;
    font: inherit; font-size: var(--fs-body); line-height: 1; color: var(--text-primary);
    cursor: pointer; border-radius: var(--radius-full); white-space: nowrap;
}
.ulf-view > button:first-child:focus-visible[b-jndgu0cyvm] { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.ulf-view:hover[b-jndgu0cyvm] { background: var(--surface-hover); }
.ulf-view.is-active[b-jndgu0cyvm] { background: var(--surface-selected); border-color: var(--brand-2); }
.ulf-view.is-active > button:first-child[b-jndgu0cyvm] { color: var(--brand-2); font-weight: var(--fw-semibold); }
.ulf-view__del[b-jndgu0cyvm] {
    width: 20px; height: 20px; margin-right: 4px; border: 0; border-radius: var(--radius-full); background: none;
    color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ulf-view__del:hover[b-jndgu0cyvm] { background: var(--surface-hover); color: var(--color-danger); }

.ulf-fchip[b-jndgu0cyvm] {
    display: inline-flex; align-items: center; gap: var(--space-1); height: max(28px, calc(var(--control-h) - 4px)); box-sizing: border-box;
    padding: 0 2px 0 var(--space-3); border-radius: var(--radius-full);
    background: var(--surface-subtle); border: 1px solid var(--border-subtle);
    font-size: var(--fs-body); color: var(--text-primary); white-space: nowrap; max-width: 100%;
}
.ulf-fchip .k[b-jndgu0cyvm] { color: var(--text-secondary); }
.ulf-fchip .k[b-jndgu0cyvm]::after { content: ":"; }
.ulf-fchip .v[b-jndgu0cyvm] { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; }
.ulf-fchip button[b-jndgu0cyvm] {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-full);
    background: none; color: var(--text-secondary); cursor: pointer;
}
.ulf-fchip button:hover[b-jndgu0cyvm] { background: var(--surface-hover); color: var(--text-primary); }

.ulf-view-save[b-jndgu0cyvm], .ulf-link[b-jndgu0cyvm] {
    height: 28px; border: 0; background: none; padding: 0 var(--space-2); border-radius: var(--radius-sm);
    font: inherit; font-size: var(--fs-body); color: var(--brand-2); cursor: pointer; white-space: nowrap;
}
.ulf-view-save:hover[b-jndgu0cyvm], .ulf-link:hover[b-jndgu0cyvm] { background: var(--surface-hover); }

/* ── Панель отборов ────────────────────────────────────────────────── */
.ulf-filter-panel[b-jndgu0cyvm] {
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--surface-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-1);
}
.ulf-filter-grid[b-jndgu0cyvm] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3) var(--space-6);
}
.ulf-ff[b-jndgu0cyvm] { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ulf-ff *[b-jndgu0cyvm], .ulf-saveview *[b-jndgu0cyvm] { box-sizing: border-box; }
.ulf-ff--wide[b-jndgu0cyvm] { grid-column: span 2; }
.ulf-ff__lbl[b-jndgu0cyvm] { font-size: var(--fs-caption); color: var(--text-secondary); }
.ulf-ff input[type=text][b-jndgu0cyvm], .ulf-ff input[type=date][b-jndgu0cyvm], .ulf-ff select[b-jndgu0cyvm], .ulf-saveview input[type=text][b-jndgu0cyvm], .ulf-saveview select[b-jndgu0cyvm] {
    height: var(--control-h); padding: 0 var(--space-2); min-width: 0; width: 100%;
    font: inherit; font-size: var(--fs-body); color: var(--text-primary); background: var(--surface-card);
    border: 1px solid var(--border-default); border-radius: var(--radius-sm); outline: none;
}
.ulf-ff input:hover[b-jndgu0cyvm], .ulf-ff select:hover[b-jndgu0cyvm], .ulf-saveview input:hover[b-jndgu0cyvm], .ulf-saveview select:hover[b-jndgu0cyvm] { border-color: var(--border-strong); }
.ulf-ff input:focus[b-jndgu0cyvm], .ulf-ff select:focus[b-jndgu0cyvm], .ulf-saveview input:focus[b-jndgu0cyvm], .ulf-saveview select:focus[b-jndgu0cyvm] {
    border-color: var(--border-focus); box-shadow: inset 0 -1px 0 0 var(--border-focus);
}
.ulf-ff__row[b-jndgu0cyvm] { display: flex; align-items: center; gap: var(--space-2); }
.ulf-ff__dash[b-jndgu0cyvm] { color: var(--text-secondary); }
.ulf-ff__quick[b-jndgu0cyvm] { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ulf-ff__quick button[b-jndgu0cyvm] {
    height: 24px; padding: 0 var(--space-2); font: inherit; font-size: var(--fs-caption);
    border-radius: var(--radius-full); cursor: pointer;
    border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-primary);
}
.ulf-ff__quick button:hover[b-jndgu0cyvm] { background: var(--surface-hover); }
.ulf-ff__quick button.is-on[b-jndgu0cyvm] { border-color: var(--brand-2); color: var(--brand-2); background: var(--surface-selected); }
.ulf-ff__codes[b-jndgu0cyvm] { display: flex; flex-direction: column; gap: 2px; max-height: 140px; overflow-y: auto; }
.ulf-ff__code[b-jndgu0cyvm] { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body); cursor: pointer; min-height: 24px; }
.ulf-filter-actions[b-jndgu0cyvm] {
    display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3);
    padding-top: var(--space-3); border-top: 1px solid var(--border-subtle);
}
/* Кнопки панели и диалогов — тихие, «Применить» — главная (заливка). */
.ulf-filter-actions[b-jndgu0cyvm]  .e-btn { height: var(--control-h); padding: 0 var(--space-3); font-size: var(--fs-body); }
.ulf-filter-actions[b-jndgu0cyvm]  .e-btn.e-flat { font-weight: var(--fw-regular); color: var(--text-primary); }
.ulf-filter-actions[b-jndgu0cyvm]  .e-btn.e-flat:hover { background: var(--surface-hover); }
.ulf-spacer[b-jndgu0cyvm] { flex: 1 1 auto; }

/* ── Таблица: без рамки-в-рамке, шапка обычным регистром, тонкие линии ── */
.ulf-grid-wrap[b-jndgu0cyvm] { min-width: 0; }
.ulf-busy[b-jndgu0cyvm] { opacity: .6; transition: opacity var(--motion-fast); }

.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid {
    border: 0; border-radius: 0; background: transparent;
    border-top: 1px solid var(--border-default);
}
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid .e-gridheader {
    border-top: 0; border-bottom: 1px solid var(--border-default); background: var(--surface-subtle);
}
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid .e-gridheader .e-headercell,
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid .e-gridheader .e-headercell.e-columnheader {
    background: var(--surface-subtle); border-color: transparent;
}
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid .e-headercell .e-headertext,
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid .e-headercell .ulf-h__t {
    font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--text-secondary);
    text-transform: none; letter-spacing: 0;
}
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid .e-headercell .ulf-h:hover .ulf-h__t { color: var(--text-primary); }
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid .e-headercell .ulf-h:has(.ulf-h__sort) .ulf-h__t { color: var(--text-primary); font-weight: var(--fw-semibold); }
/* Строки: только горизонтальные тонкие линии, без вертикальных. */
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid .e-rowcell {
    border-color: var(--border-subtle); border-left-width: 0; border-right-width: 0;
    font-size: var(--fs-body); cursor: default;
}
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid .e-content { background: var(--surface-card); }
/* Наведение и выделение — мягкая подсветка без «синей полосы»; у выделенной — маяк слева. */
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
    background-color: var(--surface-hover);
}
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid td.e-active,
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid .e-rowcell.e-selectionbackground {
    background-color: var(--surface-selected); color: var(--text-primary);
}

/* Рамка фокуса ячейки темы лишняя: список ходит по строкам (выделенная строка + маяк),
   а рамка вокруг одной ячейки после щелчка читалась как «режим правки ячейки». */
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid .e-rowcell.e-focused:not(.e-menu-item):not(.e-editedbatchcell) { box-shadow: none; }

.ulf-grid-wrap[b-jndgu0cyvm]  .ulf-h { display: flex; align-items: center; gap: var(--space-1); width: 100%; cursor: pointer; user-select: none; }
.ulf-grid-wrap[b-jndgu0cyvm]  .e-headercell.e-rightalign .ulf-h { justify-content: flex-end; }
.ulf-grid-wrap[b-jndgu0cyvm]  .ulf-h__t { overflow: hidden; text-overflow: ellipsis; }
.ulf-grid-wrap[b-jndgu0cyvm]  .ulf-h__sort { font-size: 10px; color: var(--brand-2); }

/* Закреплённые флажок и первая колонка: при прокрутке вбок номер/наименование видны.
   :where — низкая специфичность, чтобы выделение и наведение грида перекрывали фон. */
.ulf-grid-wrap[b-jndgu0cyvm]  :where(.e-grid td.ulf-pin) { position: sticky; z-index: 1; background-color: var(--surface-card); }
.ulf-grid-wrap[b-jndgu0cyvm]  :where(.e-grid th.ulf-pin) { position: sticky; z-index: 1; background-color: var(--surface-subtle); }
.ulf-grid-wrap[b-jndgu0cyvm]  :where(.e-grid .ulf-pin--chk) { left: 0; }
.ulf-grid-wrap[b-jndgu0cyvm]  :where(.e-grid .ulf-pin--first) { box-shadow: 1px 0 0 var(--border-subtle); }
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid tr.e-row[aria-selected="true"] td.ulf-pin { background-color: var(--surface-selected); }

.ulf-grid-wrap[b-jndgu0cyvm]  .ulf-cell-ico { display: inline-block; flex: none; margin-right: 6px; vertical-align: -2px; color: var(--text-secondary); }
.ulf-grid-wrap[b-jndgu0cyvm]  .ulf-posted { display: inline-flex; color: var(--text-disabled); }
.ulf-grid-wrap[b-jndgu0cyvm]  .ulf-posted.is-on { color: var(--color-success); }
.ulf-grid-wrap[b-jndgu0cyvm]  .ulf-check { display: inline-flex; color: var(--color-success); }

/* Метки статусов — та же геометрия и цвета, что у UiBadge (статус-чип карточки, этап 4a). */
.ulf[b-jndgu0cyvm]  .ulf-chip {
    display: inline-block; max-width: 100%; padding: 2px var(--space-2); border-radius: var(--radius-full);
    font-size: var(--fs-caption); line-height: 16px; font-weight: var(--fw-semibold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.ulf[b-jndgu0cyvm]  .ulf-chip--neutral { background: var(--color-neutral-bg); color: var(--color-neutral); }
.ulf[b-jndgu0cyvm]  .ulf-chip--success { background: var(--color-success-bg); color: var(--color-success); }
.ulf[b-jndgu0cyvm]  .ulf-chip--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.ulf[b-jndgu0cyvm]  .ulf-chip--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.ulf[b-jndgu0cyvm]  .ulf-chip--info { background: var(--color-info-bg); color: var(--color-info); }
.ulf[b-jndgu0cyvm]  .ulf-chip--accent { background: color-mix(in srgb, var(--brand-2) 12%, transparent); color: var(--brand-2); }
.ulf[b-jndgu0cyvm]  .ulf-chip--custom { background: color-mix(in srgb, var(--chip) 14%, transparent); color: var(--chip); }

/* Группировка: строка-заголовок группы на подложке, число — серой меткой. */
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid tr.ulf-grouprow td { background: var(--surface-subtle); border-bottom-color: var(--border-default); }
/* Заголовок группы шире своей ячейки — Syncfusion обрезает её многоточием (inline-стиль
   ClipMode), здесь разрешаем выйти вправо: специфичность выше правила темы. */
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid tr.ulf-grouprow td.e-rowcell.e-ellipsistooltip,
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid tr.ulf-grouprow td.e-rowcell,
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid tr.ulf-grouprow td.e-rowcell > div { overflow: visible; text-overflow: clip; }
.ulf-grid-wrap[b-jndgu0cyvm]  .e-grid tr.ulf-grouprow .e-checkbox-wrapper { visibility: hidden; }
.ulf-grid-wrap[b-jndgu0cyvm]  .ulf-group-cap { position: relative; z-index: 2; white-space: nowrap; font-weight: var(--fw-semibold); color: var(--text-primary); }
.ulf-grid-wrap[b-jndgu0cyvm]  .ulf-group-cap__n,
.ulf-group-cap__n[b-jndgu0cyvm] {
    margin-left: var(--space-2); padding: 0 6px; border-radius: var(--radius-full);
    font-size: var(--fs-caption); font-weight: var(--fw-regular);
    background: var(--surface-pressed); color: var(--text-secondary);
}
.ulf-card-group[b-jndgu0cyvm] { padding: var(--space-2) var(--space-1) 2px; font-weight: var(--fw-semibold); color: var(--text-primary); }

.ulf-error[b-jndgu0cyvm] {
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm); color: var(--color-danger); background: var(--color-danger-bg);
}

/* Пустое состояние и скелетон — спокойно, без пунктирной коробки в списке. */
.ulf[b-jndgu0cyvm]  .ui-empty { border: 0; background: transparent; padding: var(--space-8) var(--space-6); }
.ulf[b-jndgu0cyvm]  .ui-skeleton__row { height: var(--row-h); border-radius: var(--radius-sm); }
.ulf[b-jndgu0cyvm]  .ui-skeleton__row:first-child { height: calc(var(--row-h) - 8px); }

/* ── Страницы ──────────────────────────────────────────────────────── */
.ulf-pager[b-jndgu0cyvm] {
    display: flex; align-items: center; gap: 2px;
    padding: var(--space-1) 0; font-size: var(--fs-body); color: var(--text-secondary);
}
.ulf-pager button[b-jndgu0cyvm] {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-h); height: var(--control-h); padding: 0;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--brand-2); cursor: pointer;
}
.ulf-pager button:hover:not(:disabled)[b-jndgu0cyvm] { background: var(--surface-hover); }
.ulf-pager button:focus-visible[b-jndgu0cyvm] { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.ulf-pager button:disabled[b-jndgu0cyvm] { color: var(--text-disabled); cursor: default; }
.ulf-pager .pos[b-jndgu0cyvm] { padding: 0 var(--space-2); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ulf-pager .range[b-jndgu0cyvm] { margin-left: auto; font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }

/* ── Диалоги ───────────────────────────────────────────────────────── */
.ulf-cols[b-jndgu0cyvm] { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.ulf-cols__item[b-jndgu0cyvm] { display: flex; align-items: center; gap: var(--space-2); padding: 3px 0; cursor: pointer; }
.ulf-cols__row[b-jndgu0cyvm] { display: flex; align-items: center; gap: var(--space-1); }
.ulf-cols__row .ulf-cols__item[b-jndgu0cyvm] { flex: 1; min-width: 0; }
.ulf-cols__mv[b-jndgu0cyvm] {
    width: 28px; height: 28px; padding: 0; font: inherit; line-height: 1; color: var(--brand-2);
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
}
.ulf-cols__mv:hover[b-jndgu0cyvm] { background: var(--surface-hover); }
.ulf-saveview[b-jndgu0cyvm] { display: flex; flex-direction: column; gap: var(--space-2); }
.ulf-hint[b-jndgu0cyvm] { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); }

/* ── Телефон ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ulf-bar[b-jndgu0cyvm] { flex-wrap: wrap; row-gap: var(--space-1); }
    .ulf-bar__cmds[b-jndgu0cyvm] { flex: 1 1 100%; order: 0; }
    .ulf-search[b-jndgu0cyvm] { flex: 1 1 140px; }
    .ulf-ftsbar[b-jndgu0cyvm] { flex-wrap: wrap; }
    .ulf-count[b-jndgu0cyvm] { display: none; }
    .ulf-mode span[b-jndgu0cyvm] { display: none; }
    .ulf-ff--wide[b-jndgu0cyvm] { grid-column: auto; }
    .ulf-filter-grid[b-jndgu0cyvm] { grid-template-columns: 1fr; }
    .ulf-filter-panel[b-jndgu0cyvm] { padding: var(--space-3); }
    .ulf-views + .ulf-fchips[b-jndgu0cyvm], .ulf-fchips + .ulf-fchips[b-jndgu0cyvm] { padding-left: 0; border-left: 0; }
    .ulf-pager .range[b-jndgu0cyvm] { display: none; }
}

@media print {
    .ulf-bar[b-jndgu0cyvm], .ulf-chipbar[b-jndgu0cyvm], .ulf-filter-panel[b-jndgu0cyvm], .ulf-pager[b-jndgu0cyvm] { display: none; }
}

/* Ячейка-ссылка на карточку (реквизит-ссылка или «link:…»): цвет акцента, подчёркивание при наведении. */
.ulf[b-jndgu0cyvm]  .ulf-link {
    color: var(--brand-primary);
    text-decoration: none;
    cursor: pointer;
}
.ulf[b-jndgu0cyvm]  .ulf-link:hover,
.ulf[b-jndgu0cyvm]  .ulf-link:focus-visible {
    text-decoration: underline;
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiRefInput.razor.rz.scp.css */
/* UiRefInput — ввод ссылки с подбором. Цвета и отступы — токены tokens.css,
   тёмная тема приходит вместе с ними. Scoped-стили действуют только на
   элементы этого компонента — а выпадающий список и окно выбора его и есть. */

.ui-ref-input[b-o5rhxdlvxo] {
    position: relative;
    min-width: 0;
    width: 100%;
}

.ui-ref-input__group[b-o5rhxdlvxo] {
    width: 100%;
}

/* Длинное наименование не растягивает поле — обрезается многоточием. */
.ui-ref-input__text[b-o5rhxdlvxo] {
    min-width: 0;
    text-overflow: ellipsis;
}

.ui-ref-input__btn[b-o5rhxdlvxo] {
    cursor: pointer;
    user-select: none;
}

/* «…» — текст, а не значок темы: без своих размеров он выглядел бы точкой в углу. */
.ui-ref-input__btn:not(.e-icons)[b-o5rhxdlvxo] {
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1;
    color: var(--text-secondary);
}

.ui-ref-input__btn:hover[b-o5rhxdlvxo] {
    color: var(--brand-primary);
}

.ui-ref-input__group.e-disabled .ui-ref-input__btn[b-o5rhxdlvxo] {
    cursor: default;
    pointer-events: none;
}

/* ── Compact: ячейка сетки табличной части ───────────────────────────
   Низкая, без скруглений и тени — рамку ячейки рисует сама сетка. Селекторы
   темы Fluent специфичнее наших, поэтому !important только на габаритах. */
.ui-ref-input--compact .ui-ref-input__group[b-o5rhxdlvxo] {
    min-height: 28px !important;
    height: 100%;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ui-ref-input--compact .ui-ref-input__text[b-o5rhxdlvxo] {
    height: 26px !important;
    min-height: 0 !important;
    padding: 0 var(--space-2) !important;
    font-size: var(--fs-sm);
}

.ui-ref-input--compact .ui-ref-input__btn[b-o5rhxdlvxo] {
    width: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: var(--fs-sm);
}

/* ── Выпадающий список ──────────────────────────────────────────────
   position: fixed — чтобы не обрезаться контейнером с overflow (сетка ТЧ
   прокручивается по горизонтали). Координаты и ширину ставит JS (place()),
   до этого список скрыт — иначе мелькнул бы в углу. */
.ui-ref-input__dropdown[b-o5rhxdlvxo] {
    position: fixed;
    z-index: 3000;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    max-height: 360px;
    overflow: hidden;
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
    color: var(--text-primary);
}

.ui-ref-input__list[b-o5rhxdlvxo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    position: relative;
}

.ui-ref-input__item[b-o5rhxdlvxo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px var(--space-3);
    cursor: pointer;
}

.ui-ref-input__item:hover[b-o5rhxdlvxo] {
    background: var(--surface-hover);
}

.ui-ref-input__item.is-active[b-o5rhxdlvxo],
.ui-ref-input__more.is-active[b-o5rhxdlvxo] {
    background: var(--surface-selected);
}

.ui-ref-input__item-main[b-o5rhxdlvxo],
.ui-ref-input__item-sub[b-o5rhxdlvxo] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
}

.ui-ref-input__item-name[b-o5rhxdlvxo],
.ui-ref-input__item-meta[b-o5rhxdlvxo] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-ref-input__item-sub[b-o5rhxdlvxo] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.ui-ref-input__item-num[b-o5rhxdlvxo] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.ui-ref-input__empty[b-o5rhxdlvxo] {
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
}

/* «Показать все…» закреплена под списком: она нужна и тогда, когда ничего не найдено. */
.ui-ref-input__more[b-o5rhxdlvxo] {
    flex: 0 0 auto;
    padding: 6px var(--space-3);
    border-top: 1px solid var(--border-default);
    color: var(--brand-primary);
    cursor: pointer;
}

.ui-ref-input__more:hover[b-o5rhxdlvxo] {
    background: var(--surface-hover);
}

/* ── Окно выбора ────────────────────────────────────────────────── */
.ui-ref-input__dialog[b-o5rhxdlvxo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ui-ref-input__pager[b-o5rhxdlvxo] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-caption);
}

.ui-ref-input__pager-info[b-o5rhxdlvxo] {
    padding: 0 var(--space-2);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Листание окна выбора — тихие кнопки со значком (как в списках). */
.ui-ref-input__pager[b-o5rhxdlvxo]  .e-btn.ui-ref-input__pg {
    display: inline-flex; align-items: center; gap: var(--space-1);
    height: var(--control-h); padding: 0 var(--space-2);
    font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--brand-2);
    background: transparent; border-color: transparent; box-shadow: none;
}
.ui-ref-input__pager[b-o5rhxdlvxo]  .e-btn.ui-ref-input__pg:hover:not(:disabled) { background: var(--surface-hover); }
.ui-ref-input__pager[b-o5rhxdlvxo]  .e-btn.ui-ref-input__pg:disabled { color: var(--text-disabled); background: transparent; }

/* Поиск окна — высота полей по плотности; таблица — тонкие линии без вертикальных. */
.ui-ref-input__dialog[b-o5rhxdlvxo]  .ui-picker-field__search input.e-input { height: calc(var(--control-h) - 2px); }
.ui-ref-input__dialog[b-o5rhxdlvxo]  .e-grid .e-rowcell { border-left-width: 0; border-right-width: 0; border-color: var(--border-subtle); }
.ui-ref-input__dialog[b-o5rhxdlvxo]  .e-grid .e-gridheader,
.ui-ref-input__dialog[b-o5rhxdlvxo]  .e-grid .e-gridheader .e-headercell { background: var(--surface-subtle); }

.ui-ref-input__picker-all[b-o5rhxdlvxo] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
    font-size: 12px;
    opacity: .85;
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiRowAction.razor.rz.scp.css */
.ui-row-action[b-04x10khhw8] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    line-height: 1;
    transition: background-color var(--motion-fast), color var(--motion-fast);
}

.ui-row-action:hover:not(:disabled)[b-04x10khhw8] {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

.ui-row-action:disabled[b-04x10khhw8] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiSkeleton.razor.rz.scp.css */
.ui-skeleton[b-rujn95nqpw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.ui-skeleton__row[b-rujn95nqpw] {
    height: 36px; /* высота строки грида — вёрстка не прыгает при загрузке */
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--surface-hover) 25%,
        var(--surface-bg) 37%,
        var(--surface-hover) 63%
    );
    background-size: 400% 100%;
    animation: ui-skeleton-shimmer-b-rujn95nqpw 1.4s ease infinite;
}

/* Первая строка — шапка таблицы: чуть темнее и уже. */
.ui-skeleton__row:first-child[b-rujn95nqpw] {
    height: 32px;
    opacity: .75;
}

@keyframes ui-skeleton-shimmer-b-rujn95nqpw {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Уважаем «уменьшить движение»: анимация выключается, плейсхолдер остаётся. */
@media (prefers-reduced-motion: reduce) {
    .ui-skeleton__row[b-rujn95nqpw] {
        animation: none;
        background: var(--surface-hover);
    }
}

/* Текст для скринридеров — на экране не виден. */
.ui-skeleton__sr[b-rujn95nqpw] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiTabularGrid.razor.rz.scp.css */
/* UiTabularGrid — редактируемая табличная часть (как в 1С / Business Central).
   Только токены из css/tokens.css: тёмная тема и «Оформление интерфейса» работают сами. */

.utg-root[b-0y9dqv5wu9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    max-width: 100%;
}

/* ── Панель над сеткой ──────────────────────────────────────────── */
.utg-bar[b-0y9dqv5wu9] {
    display: flex;
    flex-wrap: wrap;           /* на 390px кнопки переносятся, а не уходят за край */
    align-items: center;
    gap: var(--space-2);
}

/* Заголовок ТЧ — заголовок секции карточки: 16px полужирный. */
.utg-title[b-0y9dqv5wu9] {
    font-size: var(--fs-subtitle);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--text-primary);
}

.utg-count[b-0y9dqv5wu9] {
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-bg);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: 18px;
    text-align: center;
}

.utg-actions[b-0y9dqv5wu9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-left: var(--space-2);
}

/* Кнопки панели ТЧ — тихие, одной высоты: значок основного цвета, фон при
   наведении. «Добавить» — с подписью, остальные — квадрат со значком. */
.utg-actions[b-0y9dqv5wu9]  .e-btn.utg-tool {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    height: 28px; min-width: 28px; padding: 0 6px;
    background: transparent; border: 1px solid transparent; box-shadow: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary); font-size: var(--fs-body); font-weight: var(--fw-regular);
}
.utg-actions[b-0y9dqv5wu9]  .e-btn.utg-tool--text { padding: 0 8px 0 6px; }
.utg-actions[b-0y9dqv5wu9]  .e-btn.utg-tool .e-btn-icon { color: var(--brand-2); font-size: var(--fs-body); margin: 0; }
.utg-actions[b-0y9dqv5wu9]  .e-btn.utg-tool--danger .e-btn-icon { color: var(--color-danger); }
.utg-actions[b-0y9dqv5wu9]  .e-btn.utg-tool:hover:not(:disabled) { background: var(--surface-hover); }
.utg-actions[b-0y9dqv5wu9]  .e-btn.utg-tool:active:not(:disabled) { background: var(--surface-pressed); }
.utg-actions[b-0y9dqv5wu9]  .e-btn.utg-tool:disabled { background: transparent; color: var(--text-disabled); }
.utg-actions[b-0y9dqv5wu9]  .e-btn.utg-tool:disabled .e-btn-icon { color: var(--text-disabled); }
.utg-actions[b-0y9dqv5wu9]  .e-btn.utg-tool:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }

.utg-tools-sep[b-0y9dqv5wu9] {
    width: 1px; height: 16px; margin: 0 var(--space-1);
    background: var(--border-default);
}

/* ── Таблица ────────────────────────────────────────────────────── */
.utg-scroll[b-0y9dqv5wu9] {
    max-width: 100%;
    overflow-x: auto;          /* широкая ТЧ скроллится внутри себя, не растягивая страницу */
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
}

.utg[b-0y9dqv5wu9] {
    min-width: 100%;
    table-layout: fixed;       /* ширины задаёт colgroup; ширину самой таблицы — style */
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

.utg th[b-0y9dqv5wu9],
.utg td[b-0y9dqv5wu9] {
    height: var(--tp-row-h);
    padding: 0;
    overflow: hidden;
    vertical-align: middle;
    border-right: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
}

.utg th:last-child[b-0y9dqv5wu9],
.utg td:last-child[b-0y9dqv5wu9] {
    border-right: 0;
}

/* Нижняя граница последней строки совпала бы с рамкой контейнера (двойная линия). */
.utg tbody:last-child tr:last-child td[b-0y9dqv5wu9] {
    border-bottom: 0;
}

/* Заголовки колонок — обычное начертание, серые, 12px: без «жирного капса»,
   данные важнее подписей. */
.utg th[b-0y9dqv5wu9] {
    height: auto;
    padding: 6px 8px;
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: 16px;
    text-align: left;
    white-space: normal;       /* заголовок переносится по словам, не режется */
    overflow-wrap: anywhere;
}

.utg-th-num[b-0y9dqv5wu9] {
    text-align: right;
}

.utg-req[b-0y9dqv5wu9] {
    margin-left: 2px;
    color: var(--color-danger);
}

/* № строки: на нём живёт «строка целиком» (Delete, двойной щелчок) */
.utg td.utg-no[b-0y9dqv5wu9],
.utg th.utg-no[b-0y9dqv5wu9] {
    padding: 0 2px;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    text-align: center;
    user-select: none;
}

.utg td.utg-no[b-0y9dqv5wu9] {
    cursor: default;
}

.utg td.utg-no:focus[b-0y9dqv5wu9] {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
}

/* Строка с фокусом подсвечена, чтобы кнопки «Удалить / Вверх» было понятно к чему применяются */
.utg tbody tr:hover > td[b-0y9dqv5wu9] {
    background: var(--surface-hover);
}

.utg tbody tr.utg-cur > td[b-0y9dqv5wu9] {
    background: var(--surface-selected);
}

/* ── Ячейки-инпуты: без своей рамки, рамка только у ячейки в фокусе ─── */
.utg-in[b-0y9dqv5wu9] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(var(--tp-row-h) - 1px);
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: none;
}

.utg-in:focus[b-0y9dqv5wu9] {
    background: var(--surface-card);
    box-shadow: inset 0 0 0 2px var(--border-focus);
}

.utg-in[readonly][b-0y9dqv5wu9] {
    cursor: default;
    text-overflow: ellipsis;
}

.utg-num[b-0y9dqv5wu9] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.utg-sel[b-0y9dqv5wu9] {
    padding-right: 2px;
    text-overflow: ellipsis;
    cursor: pointer;
}

.utg-date[b-0y9dqv5wu9] {
    padding-right: 4px;
}

.utg-c-bool[b-0y9dqv5wu9] {
    text-align: center;
}

.utg-chk[b-0y9dqv5wu9] {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--brand-primary);
}

.utg-chk:focus-visible[b-0y9dqv5wu9] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Нередактируемая ячейка — обычный текст в тех же отступах */
.utg-ro[b-0y9dqv5wu9] {
    display: block;
    padding: 0 8px;
    overflow: hidden;
    line-height: calc(var(--tp-row-h) - 1px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.utg-c-num .utg-ro[b-0y9dqv5wu9] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Введено не число: значение в строке не изменилось, ячейка подсвечена */
.utg-err[b-0y9dqv5wu9],
.utg-err:focus[b-0y9dqv5wu9] {
    background: var(--color-danger-bg);
}

.utg-err[b-0y9dqv5wu9] {
    box-shadow: inset 0 0 0 1px var(--color-danger);
}

.utg-err:focus[b-0y9dqv5wu9] {
    box-shadow: inset 0 0 0 2px var(--color-danger);
}

/* Вложенные компоненты (подбор ссылки) рисуют свой <input> — растягиваем на ячейку */
.utg-c[b-0y9dqv5wu9]  input {
    min-width: 0;
}

/* ── Пусто и итог ───────────────────────────────────────────────── */
/* Пустая ТЧ: спокойная строка-подсказка, без рамки-в-рамке. */
.utg td.utg-empty[b-0y9dqv5wu9] {
    height: auto;
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    text-align: center;
    font-size: var(--fs-body);
}
.utg-empty__text[b-0y9dqv5wu9] { color: var(--text-secondary); }
.utg-empty__hint[b-0y9dqv5wu9] {
    margin-left: var(--space-2);
    color: var(--text-disabled);
    font-size: var(--fs-caption);
}

/* Итог: тонко — подложка шапки и обычная линия сверху, числа полужирные,
   подписи «Итого» — серые. */
.utg-total td[b-0y9dqv5wu9] {
    padding: 0 8px;
    background: var(--surface-subtle);
    border-top: 1px solid var(--border-default);
    border-bottom: 0;
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* «Итого» под колонкой №: она узкая, подпись мельче и без отступов */
.utg-total td.utg-no[b-0y9dqv5wu9] {
    padding: 0 2px;
    overflow: visible;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    text-align: center;
}

@media (max-width: 699px) {
    .utg-actions[b-0y9dqv5wu9] { margin-left: 0; }
    .utg-empty__hint[b-0y9dqv5wu9] { display: block; margin: 2px 0 0; }
}
/* _content/SynnFrameFW.BlazorUI/Components/Ui/UiTileButton.razor.rz.scp.css */
.ui-tile[b-u5b8r8bv3u] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--fs-md);
    transition: box-shadow var(--motion-fast), transform var(--motion-fast), border-color var(--motion-fast);
    min-width: 200px;
}

.ui-tile:hover:not(:disabled)[b-u5b8r8bv3u] {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
    border-color: var(--border-strong);
}

.ui-tile:active:not(:disabled)[b-u5b8r8bv3u] {
    transform: translateY(0);
    box-shadow: var(--shadow-1);
}

.ui-tile:disabled[b-u5b8r8bv3u] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ui-tile__icon[b-u5b8r8bv3u] {
    font-size: var(--fs-2xl);
    line-height: 1;
    color: var(--brand-primary);
}

.ui-tile__label[b-u5b8r8bv3u] {
    font-weight: 600;
    font-size: var(--fs-lg);
    color: var(--text-primary);
}

.ui-tile__description[b-u5b8r8bv3u] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}