/* SynnFrameFW — кнопки: командная панель форм и списков, «Ещё», панель выделения.
 * Вынесено из глобального <style> MainLayout.razor (этап 4a) и переписано:
 *
 *  - одна высота во всей панели (--control-h: 28 / 32 / 40 по плотности);
 *  - главная команда — заливка основным цветом (единственная цветная кнопка);
 *  - остальные — «тихие» (subtle, как в Business Central / Fluent 2): без фона
 *    и рамки, значок основного цвета, фон только при наведении;
 *  - пёстрых кнопок нет: e-success / e-warning / e-info / e-danger в панели —
 *    такие же тихие; у опасной красный только значок (и пункт в меню).
 *
 * Без !important: специфичность выше темы за счёт `.synn-cmdbar` и `:not(...)`,
 * файл подключён после темы Syncfusion.
 */

/* ── Панель команд ─────────────────────────────────────────────────── */
.synn-cmdbar {
    display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap;
    padding: 0 0 var(--space-2);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-default);
}
.synn-cmdbar .sep {
    width: 1px; height: 20px; background: var(--border-default);
    margin: 0 var(--space-1); flex: 0 0 auto;
}

/* Общая геометрия всех кнопок панели (и SfButton, и выпадающих UiCommandMenu). */
.synn-cmdbar .e-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--control-h); min-height: var(--control-h);
    padding: 0 var(--space-3);
    font-size: var(--fs-body); line-height: 20px;
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: background-color var(--motion-fast), color var(--motion-fast);
}
.synn-cmdbar .e-btn .e-btn-icon {
    font-size: var(--fs-lg); width: 16px; margin: 0;
}

/* Тихая кнопка — всё, что не главное. */
.synn-cmdbar .e-btn:not(.e-primary):not(.synn-btn-main) {
    background: transparent; border: 1px solid transparent;
    color: var(--text-primary); font-weight: var(--fw-regular);
}
.synn-cmdbar .e-btn:not(.e-primary):not(.synn-btn-main) .e-btn-icon { color: var(--brand-2); }
.synn-cmdbar .e-btn.e-danger:not(.e-primary):not(.synn-btn-main) .e-btn-icon { color: var(--color-danger); }
.synn-cmdbar .e-btn:not(.e-primary):not(.synn-btn-main):hover:not(:disabled) {
    background: var(--surface-hover); border-color: transparent; color: var(--text-primary);
}
.synn-cmdbar .e-btn:not(.e-primary):not(.synn-btn-main):active:not(:disabled) {
    background: var(--surface-pressed);
}
.synn-cmdbar .e-btn:not(.e-primary):not(.synn-btn-main):focus:not(:focus-visible) {
    background: transparent; box-shadow: none;
}
.synn-cmdbar .e-btn:not(.e-primary):not(.synn-btn-main):disabled {
    background: transparent; border-color: transparent; color: var(--text-disabled);
}
.synn-cmdbar .e-btn:not(.e-primary):not(.synn-btn-main):disabled .e-btn-icon { color: var(--text-disabled); }

/* Главная команда формы/списка — заливка основным цветом. */
.synn-cmdbar .e-btn.e-primary,
.synn-cmdbar .e-btn.synn-btn-main {
    background: var(--brand-2); border: 1px solid var(--brand-2);
    color: var(--text-on-brand); font-weight: var(--fw-semibold);
}
.synn-cmdbar .e-btn.e-primary:hover:not(:disabled),
.synn-cmdbar .e-btn.synn-btn-main:hover:not(:disabled) {
    background: var(--brand-2-hover); border-color: var(--brand-2-hover); color: var(--text-on-brand);
}
.synn-cmdbar .e-btn.e-primary:active:not(:disabled),
.synn-cmdbar .e-btn.synn-btn-main:active:not(:disabled) {
    background: var(--brand-2-active); border-color: var(--brand-2-active);
}
.synn-cmdbar .e-btn.e-primary .e-btn-icon,
.synn-cmdbar .e-btn.synn-btn-main .e-btn-icon { color: inherit; }
.synn-cmdbar .e-btn.e-primary:disabled,
.synn-cmdbar .e-btn.synn-btn-main:disabled { opacity: .5; }

/* Фокус с клавиатуры — одно кольцо для всех кнопок панели. */
.synn-cmdbar .e-btn:focus-visible {
    outline: 2px solid var(--border-focus); outline-offset: 1px;
}

/* «Главная» кнопка вне командной панели (диалоги, нижняя панель) —
   тот же основной цвет. Раньше жёлтая с тёмным текстом (brand-1). */
.e-btn.synn-btn-main, .e-btn.btn-main {
    background: var(--brand-2); border-color: var(--brand-2);
    color: var(--text-on-brand); font-weight: var(--fw-semibold);
}
.e-btn.synn-btn-main:hover:not(:disabled), .e-btn.btn-main:hover:not(:disabled) {
    background: var(--brand-2-hover); border-color: var(--brand-2-hover); color: var(--text-on-brand);
}

/* Опасное действие в строке таблицы (удаление) — тихая кнопка с красной подписью/значком:
   цвет остаётся предупреждением, но без красной заливки в каждой строке. */
.e-btn.synn-danger-text, .e-btn.synn-danger-text .e-btn-icon { color: var(--color-danger); }
.e-btn.synn-danger-text:hover:not(:disabled) { background: var(--color-danger-bg); color: var(--color-danger); }

/* Малая «тихая» кнопка панели секции (связанные списки, ТЧ): 28px, без фона. */
.e-btn.synn-tool {
    display: inline-flex; align-items: center; gap: 4px;
    height: 28px; min-width: 28px; padding: 0 8px 0 6px;
    background: transparent; border: 1px solid transparent; box-shadow: none;
    color: var(--text-primary); font-size: var(--fs-body); font-weight: var(--fw-regular);
}
.e-btn.synn-tool .e-btn-icon { color: var(--brand-2); margin: 0; }
.e-btn.synn-tool:hover:not(:disabled) { background: var(--surface-hover); border-color: transparent; color: var(--text-primary); }
.e-btn.synn-tool:focus:not(:focus-visible) { background: transparent; box-shadow: none; }
.e-btn.synn-tool--icon { padding: 0; justify-content: center; }
.e-btn.synn-tool:disabled { background: transparent; color: var(--text-disabled); }
.e-btn.synn-tool:disabled .e-btn-icon { color: var(--text-disabled); }

/* ── Устаревшее меню «Ещё» (UiMoreMenu) — тот же вид, что у UiCommandMenu ── */
.ui-more { position: relative; display: inline-block; }
.ui-more-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 var(--space-3); height: var(--control-h);
    border: 1px solid transparent; background: transparent;
    border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-body);
    cursor: pointer; color: var(--text-primary);
}
.ui-more-btn:hover { background: var(--surface-hover); }
.ui-more-backdrop { position: fixed; inset: 0; z-index: 1000; }
.ui-more-menu {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 1001;
    background: var(--surface-card); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); box-shadow: var(--shadow-3);
    padding: var(--space-1); min-width: 200px;
    display: flex; flex-direction: column; gap: 2px;
}
.ui-more-menu .e-btn {
    width: 100%; justify-content: flex-start; text-align: left;
    background: transparent; border-color: transparent; box-shadow: none;
    font-weight: var(--fw-regular); color: var(--text-primary);
}
.ui-more-menu .e-btn:hover:not(:disabled) { background: var(--surface-hover); }

/* Нижняя командная панель формы (1С 8.5: верхняя + нижняя). */
.synn-cmdbar-bottom {
    position: sticky; bottom: 0; margin-top: var(--space-4); padding-top: var(--space-3);
    border-top: 1px solid var(--border-default); background: var(--surface-bg);
}

/* ── Панель множественного выделения (bulk action bar) ─────────────────
   Тёмная плашка снизу — как в Fluent «selection bar». Цвета — свои токены
   плашки, чтобы в тёмной теме она не становилась светлой с белым текстом. */
.synn-bulk-bar {
    position: sticky; bottom: var(--space-4); z-index: 50;
    margin-top: var(--space-4); padding: var(--space-2) var(--space-4);
    background: var(--inverse-bg); color: var(--inverse-text);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    display: flex; align-items: center; gap: var(--space-3);
    font-size: var(--fs-body);
}
.synn-bulk-bar .count { color: var(--inverse-text); }
.synn-bulk-bar .count strong { color: inherit; font-weight: var(--fw-semibold); }
.synn-bulk-bar .link {
    background: transparent; border: none; color: var(--inverse-text-muted); cursor: pointer;
    font-size: var(--fs-xs); padding: var(--space-1) var(--space-2);
}
.synn-bulk-bar .link:hover { color: var(--inverse-text); }
.synn-bulk-bar .actions { margin-left: auto; display: flex; gap: var(--space-2); }
.synn-bulk-bar .e-btn {
    height: var(--control-h); padding: 0 var(--space-3);
    background: var(--surface-card); color: var(--text-primary); border-color: transparent;
    font-size: var(--fs-body); border-radius: var(--radius-sm);
}
.synn-bulk-bar .e-btn.e-danger {
    background: var(--color-danger); color: var(--text-on-brand); border-color: var(--color-danger);
}

/* Нижняя командная панель формы (sticky) */
.synn-form-footer {
    position: sticky; bottom: 0; background: var(--surface-card);
    border-top: 1px solid var(--border-default);
    padding: var(--space-2) var(--space-4); margin: var(--space-4) calc(-1 * var(--space-6)) calc(-1 * var(--space-4));
    display: flex; gap: var(--space-2); align-items: center;
}

/* ── Узкий экран ───────────────────────────────────────────────────────
   Панель переносится по строкам, ничего не уходит за край. Пальцу нужно
   ≥ 40px — это даёт режим «Сенсорный» (--control-h: 40), а не отдельные
   размеры здесь. Тихие кнопки с классом synn-cmd-icon-sm на телефоне —
   только значок (подпись остаётся в title / aria-label). */
@media (max-width: 720px) {
    .synn-cmdbar { gap: 2px; row-gap: var(--space-1); }
    .synn-cmdbar .sep { display: none; }
    .synn-cmdbar .e-btn { padding: 0 var(--space-2); }
    .synn-cmdbar .e-btn.synn-cmd-icon-sm:not(.e-primary):not(.synn-btn-main) {
        font-size: 0; gap: 0; padding: 0 var(--space-2); min-width: var(--control-h);
    }
    .synn-cmdbar .e-btn.synn-cmd-icon-sm .e-btn-icon { font-size: var(--fs-lg); }
    /* Второстепенные команды формы на телефоне уходят в «Ещё». */
    .synn-cmdbar .synn-cmd-secondary { display: none; }
    .synn-bulk-bar { flex-wrap: wrap; padding: var(--space-2) var(--space-3); }
    .synn-bulk-bar .actions { width: 100%; justify-content: flex-end; }
}
/* Узкий телефон: главная кнопка чуть плотнее — главная, ⋮, «Перейти» и «Закрыть» в одну строку. */
@media (max-width: 420px) {
    .synn-cmdbar .e-btn.synn-btn-main { padding: 0 6px; gap: 4px; }
}