/* Файл: client/js/Widgets/Group.css
   Визуальный стиль виджета Group (см. Widgets/Group.js) — управляется свойством BorderVisibility:
   NoBorder (класс не добавляется — плоский контейнер, как было раньше), NormalBorder (.group-card,
   по умолчанию) или StrongBorder (.group-card.group-card-strong — усиленная тень). Та же карточка,
   что и у Table (Widgets/Table.css) и в Cerberus/admin (client/cerberus.html, admin.html) —
   рецепт padding/radius/shadow продублирован намеренно, каждый виджет отвечает за свой вид сам. */

.group-card {
    background: white;
    padding: var(--spacing, 10px);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.group-card.group-card-strong {
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.group-card > .group-caption {
    font-size: calc(var(--font-size, 14px) + 2px);
    font-weight: bold;
    color: #000;
    margin-bottom: var(--spacing, 10px);
}

/* "Align (in parent)" = Stretch (Widgets/Group.js::childAlignWrapStyle). align-self:stretch/flex:1
   на самой обёртке растягивают только НЕВИДИМЫЙ <div>-контейнер — реальный виджет внутри (button,
   input и т.п.) сам по себе в CSS не обязан заполнять родителя (у <button> нет width:100% по
   умолчанию), поэтому без этого правила обёртка становится широкой, а виджет внутри неё остаётся
   в размер своего контента, прижатый к левому краю. */
.align-stretch-wrap {
    display: block;
}
.align-stretch-wrap > * {
    width: 100%;
    box-sizing: border-box;
}

/* Align vertical = Stretch (см. Widgets/Group.js::childAlignWrapStyle) — тот же приём, что и у
   .align-stretch-wrap выше, только по высоте: align-self:stretch/flex:1 на обёртке растягивают
   только её саму, реальный виджет внутри (button, input и т.п.) сам по себе не обязан заполнять
   родителя по высоте. Обе обёртки могут стоять одновременно (Stretch и по горизонтали, и по
   вертикали разом) — независимые классы, независимые оси, конфликта нет. */
.align-stretch-wrap-v {
    display: block;
}
.align-stretch-wrap-v > * {
    height: 100%;
    box-sizing: border-box;
}

/* Orientation "Horizontal on wide screens" (Widgets/Group.js::orientationClass) — на телефоне
   (уже ветка) группа выглядит как обычный Vertical, инлайн-стиль этого добивается сам. Здесь —
   только переключение на широких экранах: инлайн-стиль всегда побеждает обычные CSS-правила
   по специфичности, поэтому важно "!important", иначе flex-direction:column из style="" никогда
   бы не переопределился. 768px — фиксированный порог "телефон/планшет", без отдельной настройки
   (см. обсуждение 2026-09-26 — выбрано ради простоты, не задаётся программистом).
   @container, а не @media — реагирует на ширину ближайшего контейнера-предка с
   container-type:inline-size (.form-container/.modal-body, см. client-form.css), а не на ширину
   всего окна браузера. Это важно в двух реальных случаях: узкое "Mobile"-превью в редакторе форм
   (обычный <div style="max-width:375px">, не отдельное окно — @media его не увидел бы, окно
   редактора всё равно широкое) и группа внутри модалки, которая может быть уже, чем весь экран. */
@container (min-width: 768px) {
    .group-orient-wide {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        /* Тот же Excel-принцип, что и у обычного 'horizontal' в Group.js::orientationStyle (см.
           комментарий там) — явный stretch, чтобы при переключении в row на широком экране высота
           строки считалась так же, как везде, а не откатывалась на branch-специфичный дефолт. */
        align-items: stretch !important;
        overflow-x: auto;
    }
    .group-orient-wide.group-orient-wide-sticky {
        overflow-x: visible;
    }
}