/* SynnFrameFW — раскладка полей формы.
 *
 * Раньше у `.ui-dynamic-form` и `.ui-field` не было ни одной строки CSS:
 * поля шли блоками во всю ширину, поэтому «Артикул» (A-001) растягивался
 * на 900px, а picker рядом был шириной ~180px (браузерный дефолт голого
 * <input>). Форма выглядела случайной.
 *
 * Здесь: сетка 12 колонок, ширина поля — по типу данных и объявленной длине
 * реквизита. Класс ставит UiDynamicForm (ui-f--num / --date / --ref / --str-*).
 */

.ui-dynamic-form {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3, 12px) var(--space-4, 16px);
  align-items: start;
}

/* Поле по умолчанию (в т.ч. вне сетки) занимает всю строку. */
.ui-dynamic-form > * { grid-column: span 12; }

/* Внутренний вид поля (подпись, ошибка, подсказка) — в UiField.razor.css.
   Здесь только то, что касается места поля в сетке. */
.ui-field { min-width: 0; }

/* Контролы тянутся на ширину своей ячейки сетки, а не на дефолт браузера. */
.ui-field .e-input-group,
.ui-field .e-control-wrapper,
.ui-field input { width: 100%; box-sizing: border-box; }

/* ── Ширины по типу данных ─────────────────────────────────────────── */
.ui-f--num       { grid-column: span 3; }
.ui-f--date      { grid-column: span 3; }
.ui-f--bool      { grid-column: span 12; }
.ui-f--ref       { grid-column: span 6; }
.ui-f--str-xs    { grid-column: span 3; }   /* код, артикул: до 20 символов */
.ui-f--str-sm    { grid-column: span 6; }   /* до 60 */
.ui-f--str-md    { grid-column: span 8; }   /* до 150 */
.ui-f--str-full  { grid-column: span 12; }  /* описание, неограниченный текст */

/* Числа выравниваем вправо: разряды должны совпадать по вертикали. */
.ui-f--num input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* На узком экране сетка вырождается в одну колонку. */
@media (max-width: 900px) {
  .ui-dynamic-form > * { grid-column: span 12 !important; }
}

/* ── Picker: битая ссылка ──────────────────────────────────────────── */
.ui-picker-field__display--broken { color: var(--color-danger); }

/* ── Раскладка по группам (план 30) ────────────────────────────────
 * Группа — блок с заголовком или вкладка. Сетка внутри группы всё та же,
 * 12 колонок; ширина поля приходит классом ui-f--span-N, а не выводится из
 * типа данных. Объекты без настроенной раскладки рисуются как раньше.
 */
.ui-form-layout { display: flex; flex-direction: column; gap: var(--space-4, 16px); }

.ui-form-tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 4px;
}
.ui-form-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-body); color: var(--text-secondary);
  padding: 9px 12px; border-bottom: 2px solid transparent;
}
.ui-form-tab:hover { color: var(--text-primary); }
.ui-form-tab.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); font-weight: 600; }
.ui-form-tab:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }

.ui-form-group { display: flex; flex-direction: column; gap: 10px; }
.ui-form-group + .ui-form-group { border-top: 1px solid var(--border-default); padding-top: 14px; }
.ui-form-group__title {
  margin: 0; font-size: var(--fs-subtitle); font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* Явная ширина поля. Обёртка ui-f-slot нужна там, где контрол сам не несёт
   grid-column: класс висит на обёртке, а поле занимает её целиком. */
.ui-f-slot { min-width: 0; display: flex; flex-direction: column; }
.ui-f-slot > * { width: 100%; }
.ui-f--span-1  { grid-column: span 1;  }
.ui-f--span-2  { grid-column: span 2;  }
.ui-f--span-3  { grid-column: span 3;  }
.ui-f--span-4  { grid-column: span 4;  }
.ui-f--span-5  { grid-column: span 5;  }
.ui-f--span-6  { grid-column: span 6;  }
.ui-f--span-7  { grid-column: span 7;  }
.ui-f--span-8  { grid-column: span 8;  }
.ui-f--span-9  { grid-column: span 9;  }
.ui-f--span-10 { grid-column: span 10; }
.ui-f--span-11 { grid-column: span 11; }
.ui-f--span-12 { grid-column: span 12; }
.ui-f--newrow  { grid-column-start: 1; }

/* Галочка больше не занимает строку целиком: четыре подряд вставали
   лесенкой, хотя каждая — одно слово. */
.ui-dynamic-form > .ui-f--bool { grid-column: span 3; }
@media (max-width: 1100px) { .ui-dynamic-form > .ui-f--bool { grid-column: span 4; } }

/* ── Шапка-сводка карточки ───────────────────────────────────────────
   Несколько ключевых полей, которые видно с любой вкладки. Не форма:
   только чтение, компактно, в одну строку с переносом.                */
.ui-form-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.ui-form-summary__item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ui-form-summary__label {
    font-size: var(--fs-caption);
    line-height: 16px;
    color: var(--text-secondary);
}

.ui-form-summary__value {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 20px;
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .ui-form-summary { gap: 4px 16px; padding: 8px 10px; }
}

/* ── Редактор раскладки карточки (админка метамодели) ────────────────
   Плотная таблица правки: строк много, каждая — одно поле объекта.    */
.sf-layout-editor { margin-top: 8px; }

.sf-layout-editor__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.sf-layout-editor__head h3 { margin: 0; font-size: 14px; font-weight: 600; }

.sf-layout-editor__hint { font-size: 12px; opacity: .6; }

.sf-layout-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 16px;
}

.sf-layout-table th {
    text-align: left;
    font-weight: 600;
    padding: 6px 8px;
    border-bottom: 1px solid var(--sf-border, #e1dfdd);
    white-space: nowrap;
}

.sf-layout-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--sf-border-subtle, #f3f2f1);
    vertical-align: middle;
}

.sf-layout-table--fields tbody tr:hover { background: var(--sf-surface-alt, #faf9f8); }

.sf-layout-table__field { font-weight: 600; }
.sf-layout-table__sys { font-size: 11px; opacity: .55; }
.sf-layout-table__count { text-align: right; opacity: .7; }
.sf-layout-table__flag { text-align: center; }

.sf-in {
    width: 100%;
    min-width: 90px;
    padding: 3px 6px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid var(--sf-border, #e1dfdd);
    border-radius: 4px;
    background: var(--sf-surface, #fff);
    color: inherit;
}

.sf-in--num { min-width: 64px; width: 72px; }
.sf-in--name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sf-in:disabled { opacity: .5; }

@media (max-width: 900px) {
    .sf-layout-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── Карточка объекта (документ, справочник): заголовок, ошибка записи ─── */
/* Заголовок 20px + статус-чип рядом с ним (как в BC: «Заказ … · Проведён»). */
.synn-form-head {
  display: flex; align-items: center; gap: var(--space-2) var(--space-3);
  flex-wrap: wrap; margin: 0 0 var(--space-2);
}
.synn-body .synn-form-title,
.synn-form-title {
  font-size: var(--fs-title); font-weight: var(--fw-semibold); line-height: 28px;
  margin: 0; color: var(--text-primary); overflow-wrap: anywhere;
}
/* Точка «есть несохранённые изменения» — как звёздочка в заголовке окна 1С. */
.synn-form-dirty { color: var(--color-warning); font-size: var(--fs-sm, 13px); }

/* Ошибка записи — полоса над формой; форма под ней остаётся с введённым. */
.synn-form-error {
  display: flex; align-items: flex-start; gap: var(--space-2, 8px);
  margin: 0 0 var(--space-3, 12px); padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-danger-bg); color: var(--color-danger);
  border: 1px solid var(--color-danger); border-radius: var(--radius-sm, 4px);
  font-size: var(--fs-sm, 13px); white-space: pre-line; max-width: 900px;
}
.synn-form-error__text { flex: 1; }
.synn-form-error__close {
  background: none; border: none; cursor: pointer; color: inherit;
  font-size: var(--fs-sm, 13px); padding: 0 var(--space-1, 4px);
}

/* Тело карточки — без внешней коробки: поля, строки и секции лежат прямо на
   фоне рабочей области, разделены лёгкими линиями (меньше «рамок в рамках»). */
.synn-form-card {
  background: none; border: 0; border-radius: 0;
  padding: 0; max-width: 900px;
}
.synn-form-card + .synn-form-card { margin-top: var(--space-4); }

/* Сворачиваемые группы под FastTabs карточки («Дополнительно», связанные
   списки) — тем же пунктиром секций: линия снизу, без двойных линий и отступов. */
.synn-form-card .ui-fgroup,
.synn-related .ui-fgroup {
  margin-top: 0; border-top: 0; border-bottom: 1px solid var(--border-default);
}
.synn-form-card .ui-fgroup-head,
.synn-related .ui-fgroup-head { padding: var(--space-2) var(--space-1); }

/* Табличная часть в карточке. */
.synn-form-tp__bar {
  display: flex; align-items: center; gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px); flex-wrap: wrap;
}
.synn-form-tp__count {
  min-width: 20px; padding: 0 6px; border-radius: var(--radius-full, 9999px);
  background: var(--color-neutral-bg); color: var(--color-neutral);
  font-size: var(--fs-xs, 12px); text-align: center; margin-right: var(--space-2, 8px);
}
.synn-form-tp__empty { color: var(--text-secondary); font-size: var(--fs-sm, 13px); }

/* Пустая табличная часть со «свернуть, если пусто»: одна компактная строка
 * «Заголовок — нет строк  [+ Добавить]», вместо пустой сетки с панелью. */
.ui-tp-compact {
  display: flex; align-items: center; gap: var(--space-2, 8px);
  padding: 4px var(--space-1, 4px); margin: 2px 0;
  border-bottom: 1px solid var(--border-default);
  font-size: var(--fs-sm, 13px); min-width: 0;
}
.ui-tp-compact__title {
  all: unset; cursor: pointer; font-weight: 600; color: var(--text-primary);
}
.ui-tp-compact__title:hover { text-decoration: underline; }
.ui-tp-compact__title:focus-visible,
.ui-tp-compact__add:focus-visible { outline: 2px solid var(--color-primary, #0f6cbd); outline-offset: 2px; }
.ui-tp-compact__empty { color: var(--text-secondary); }
.ui-tp-compact__add {
  all: unset; cursor: pointer; margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-primary, #0f6cbd); padding: 2px 6px; border-radius: var(--radius-sm, 4px);
}
.ui-tp-compact__add:hover { background: var(--color-neutral-bg); }

/* ── Этап 3 — карточка: шапка и FastTabs ─────────────────────────────
 * Режим Layout=Card у UiDynamicForm — карточка как в Business Central:
 * сверху шапка с главными полями, ниже сворачиваемые секции FastTabs.
 * Плотность: подписи 12px, поля той же высоты, что и везде (высоту контролов
 * не трогаем — её задаёт тема Fluent), отступы секций 12–16px.
 */
.ui-card-form {
  display: flex; flex-direction: column; gap: var(--space-3, 12px);
  min-width: 0;
}

/* Сетка полей: 3 колонки от 1200px, 2 — от 700, иначе 1. Поле занимает одну
   колонку, а не всю строку; всю строку берёт только длинный текст.
   Ритм: 12px между строками полей, 24px между колонками. */
.ui-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
  align-items: start;
}
@media (max-width: 1199px) { .ui-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px)  { .ui-card-grid { grid-template-columns: minmax(0, 1fr); } }

.ui-card-grid > * { min-width: 0; }
.ui-card-grid > .ui-card-cell--wide { grid-column: 1 / -1; }
.ui-card-grid > .ui-card-cell--newrow { grid-column-start: 1; }

/* Внутри сетки отступами управляет gap: нижний отступ UiField (16px) удвоил бы его.
   Раньше его перебивал глобальный `.ui-field { margin-bottom:14px !important }`
   из MainLayout — отсюда «разъехавшийся» ритм шапки. */
.ui-card-form .ui-card-grid .ui-field { margin-bottom: 0; }
.ui-card-form .ui-card-grid .ui-field .ui-field__label { font-size: var(--fs-caption); }
.ui-card-form .ui-card-grid .ui-field .e-input-group,
.ui-card-form .ui-card-grid .ui-field .e-control-wrapper,
.ui-card-form .ui-card-grid .ui-field input { width: 100%; box-sizing: border-box; }

/* Шапка: без заголовка, плотно. */
.ui-card-header:empty { display: none; }

/* FastTabs — секции карточки: заголовок 16px, разделитель — тонкая линия. */
.ui-fasttabs { display: flex; flex-direction: column; min-width: 0; margin-top: var(--space-2); }

.ui-fasttab { border-top: 1px solid var(--border-default); min-width: 0; }
.ui-fasttab:last-child { border-bottom: 1px solid var(--border-default); }

.ui-fasttab__head {
  appearance: none; width: 100%; min-width: 0;
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-1);
  background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: var(--text-primary);
}
.ui-fasttab__head:hover { background: var(--surface-hover); }
.ui-fasttab__head:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }

.ui-fasttab__chev { flex: 0 0 auto; font-size: var(--fs-caption); color: var(--text-secondary); }
.ui-fasttab__title {
  flex: 0 0 auto; max-width: 100%;
  font-size: var(--fs-subtitle); font-weight: var(--fw-semibold); line-height: var(--lh-tight);
}

/* Сводка свёрнутой секции — справа в заголовке, одной строкой с многоточием. */
.ui-fasttab__summary {
  flex: 1 1 0; min-width: 0; margin-left: var(--space-3, 12px);
  text-align: right;
  font-size: var(--fs-sm, 13px); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Поля секции — по той же левой кромке, что и поля шапки (без сдвига на 4px). */
.ui-fasttab__body { padding: var(--space-1) 0 var(--space-4); min-width: 0; }

.ui-fasttab__sub + .ui-fasttab__sub,
.ui-card-grid + .ui-fasttab__sub { margin-top: var(--space-3, 12px); }
.ui-fasttab__subtitle {
  margin: 0 0 var(--space-2); font-size: var(--fs-body); font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* «Показать больше (N)» — ссылка-кнопка под полями секции. */
.ui-fasttab__more {
  appearance: none; background: none; border: 0; cursor: pointer;
  margin-top: var(--space-2, 8px); padding: var(--space-1, 4px) 0;
  font: inherit; font-size: var(--fs-sm, 13px); color: var(--brand-primary);
}
.ui-fasttab__more:hover { text-decoration: underline; }
.ui-fasttab__more:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Узкий экран (мобильная ширина 390): заголовок на всю ширину, сводка уходит
   на вторую строку и переносится, но не больше двух строк — ничего не выходит за край. */
@media (max-width: 699px) {
  .ui-fasttab__head { flex-wrap: wrap; row-gap: 2px; }
  .ui-fasttab__title { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
  .ui-fasttab__summary {
    flex: 1 0 100%; margin-left: 0; text-align: left;
    white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
}

/* Окно выбора записи (UiRefInput): на узком экране не шире окна браузера. */
.ui-ref-dlg.e-dialog { max-width: calc(100vw - 24px); }