/* ============================================================
 * Softbook controls — единая геометрия inputs / selects / buttons.
 *
 * Подключать ПОСЛЕ всех файлов темы (core.css, theme-*.css, select2.css),
 * иначе тема перебьёт min-height/радиус.
 *
 * Меняешь дизайн — правишь токены в :root, остальное подстраивается.
 * ============================================================ */

:root {
    --sb-control-h-xs:    1.75rem;   /* 28px */
    --sb-control-h-sm:    2.25rem;   /* 36px */
    --sb-control-h:       3rem;      /* 48px — основной "пышный" размер */
    --sb-control-h-lg:    3.5rem;    /* 56px */
    --sb-control-h-xl:    4rem;      /* 64px */

    --sb-control-px:      1.25rem;
    --sb-control-px-sm:   0.875rem;
    --sb-control-px-lg:   1.5rem;

    --sb-control-fs:      0.9375rem;
    --sb-control-fs-sm:   0.8125rem;
    --sb-control-fs-lg:   1.0625rem;

    --sb-control-lh:      1.5;
    --sb-control-bw:      1px;
    --sb-control-radius:  999px;     /* pill: для одно-строчных inputs/selects/btn */
    --sb-block-radius:    1.25rem;   /* для растущих блоков: textarea, select[multiple] */
    --sb-control-radius-md: 0.75rem; /* модификатор .sb-radius-md — для табличных фильтров и плотных форм */
}

/* === Inputs / selects / textarea ===
 * Покрываем и BS-классы (.form-control / .form-select), и голые нативные элементы
 * без классов — чтобы стиль был единым везде, включая UIKit/легаси-формы.
 * Чекбоксы / радио / file / range / color / submit-кнопки исключены явно
 * через whitelist по type — иначе им сломается их собственная геометрия.
 */
.form-control,
.form-select,
select:not([multiple]):not([size]):not(.select2-hidden-accessible),
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    min-height: var(--sb-control-h);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--sb-control-px);
    padding-right: var(--sb-control-px);
    font-size: var(--sb-control-fs);
    line-height: var(--sb-control-lh);
    border-width: var(--sb-control-bw);
    border-radius: var(--sb-control-radius);
}

/* textarea — высота авто/растущая; pill-radius выглядел бы как гигантский овал,
 * поэтому используем отдельный --sb-block-radius (умеренное скругление) */
textarea,
textarea.form-control {
    min-height: calc(var(--sb-control-h) * 2);
    padding: 0.75rem var(--sb-control-px);
    font-size: var(--sb-control-fs);
    line-height: var(--sb-control-lh);
    border-width: var(--sb-control-bw);
    border-radius: var(--sb-block-radius);
}

/* select multiple — список с прокруткой, тоже блочный, не pill */
select[multiple],
select[size] {
    padding-left: var(--sb-control-px);
    padding-right: var(--sb-control-px);
    font-size: var(--sb-control-fs);
    border-width: var(--sb-control-bw);
    border-radius: var(--sb-block-radius);
}

/* === File input ===
 * Не входит в основной whitelist выше: там padding-top/bottom: 0 ломают
 * нативную кнопку ::file-selector-button (она вылезает за обёртку через
 * отрицательные вертикальные margin'ы). Здесь — собственный набор:
 * pill-radius как у текстового input, симметричный padding-y под
 * --sb-control-h (чтобы текст был ровно по центру), кнопка Browse занимает
 * всю высоту обёртки и оформляется прозрачным фоном + 1px-разделитель —
 * чтобы hover заливал весь контрол целиком, а не только левую половину. */
input[type="file"],
input[type="file"].form-control {
    min-height: var(--sb-control-h);
    padding: 0.75rem var(--sb-control-px);
    font-size: var(--sb-control-fs);
    line-height: var(--sb-control-lh);
    border-width: var(--sb-control-bw);
    border-radius: var(--sb-control-radius);
}

input[type="file"]::file-selector-button,
input[type="file"].form-control::file-selector-button {
    margin-top: calc(-0.75rem - var(--sb-control-bw));
    margin-bottom: calc(-0.75rem - var(--sb-control-bw));
    margin-inline-start: calc(-1 * var(--sb-control-px));
    margin-inline-end: var(--sb-control-px);
    padding: 0.75rem var(--sb-control-px);
    background-color: transparent;
    color: inherit;
    border: 0;
    border-inline-end: var(--sb-control-bw) solid var(--bs-border-color);
    border-radius: 0;
}

/* Hover — единый на весь контрол, без отдельного серого фона у кнопки */
input[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button,
input[type="file"].form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: transparent;
}

input[type="file"].form-control-sm {
    min-height: var(--sb-control-h-sm);
    font-size: var(--sb-control-fs-sm);
    padding: 0.422rem var(--sb-control-px-sm);
}
input[type="file"].form-control-sm::file-selector-button {
    margin-top: calc(-0.422rem - var(--sb-control-bw));
    margin-bottom: calc(-0.422rem - var(--sb-control-bw));
    margin-inline-start: calc(-1 * var(--sb-control-px-sm));
    margin-inline-end: var(--sb-control-px-sm);
    padding: 0.422rem var(--sb-control-px-sm);
}
.form-control-sm,
.form-select-sm {
    min-height: var(--sb-control-h-sm);
    padding-left: var(--sb-control-px-sm);
    padding-right: var(--sb-control-px-sm);
    font-size: var(--sb-control-fs-sm);
}
.form-control-lg,
.form-select-lg {
    min-height: var(--sb-control-h-lg);
    padding-left: var(--sb-control-px-lg);
    padding-right: var(--sb-control-px-lg);
    font-size: var(--sb-control-fs-lg);
}

/* === Buttons === */
.btn {
    --bs-btn-padding-x:     var(--sb-control-px);
    --bs-btn-padding-y:     0;
    --bs-btn-line-height:   var(--sb-control-lh);
    --bs-btn-border-radius: var(--sb-control-radius);
    min-height: var(--sb-control-h);
    gap: 0.5rem;
}
.btn-xs, .btn-group-xs > .btn {
    --bs-btn-padding-x:     var(--sb-control-px-sm);
    --bs-btn-font-size:     0.69rem;
    --bs-btn-border-radius: var(--sb-control-radius);
    min-height: var(--sb-control-h-xs);
}
.btn-sm, .btn-group-sm > .btn {
    --bs-btn-padding-x:     var(--sb-control-px-sm);
    --bs-btn-font-size:     var(--sb-control-fs-sm);
    --bs-btn-border-radius: var(--sb-control-radius);
    --bs-btn-line-height:   var(--sb-control-lh);
    min-height: var(--sb-control-h-sm);
}
.btn-lg, .btn-group-lg > .btn {
    --bs-btn-padding-x:     var(--sb-control-px-lg);
    --bs-btn-font-size:     var(--sb-control-fs-lg);
    --bs-btn-border-radius: var(--sb-control-radius);
    min-height: var(--sb-control-h-lg);
}
.btn-xl, .btn-group-xl > .btn {
    --bs-btn-padding-x:     1.75rem;
    --bs-btn-font-size:     1.25rem;
    --bs-btn-border-radius: var(--sb-control-radius);
    min-height: var(--sb-control-h-xl);
}

/* === Icon buttons: квадрат под высоту контрола, идеальный круг === */
.btn-icon {
    width:      var(--sb-control-h);
    height:     var(--sb-control-h);
    min-height: var(--sb-control-h);
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}
.btn-icon.btn-xs, .btn-group-xs > .btn-icon.btn {
    width: var(--sb-control-h-xs); height: var(--sb-control-h-xs); min-height: var(--sb-control-h-xs);
}
.btn-icon.btn-sm, .btn-group-sm > .btn-icon.btn {
    width: var(--sb-control-h-sm); height: var(--sb-control-h-sm); min-height: var(--sb-control-h-sm);
}
.btn-icon.btn-lg, .btn-group-lg > .btn-icon.btn {
    width: var(--sb-control-h-lg); height: var(--sb-control-h-lg); min-height: var(--sb-control-h-lg);
}
.btn-icon.btn-xl, .btn-group-xl > .btn-icon.btn {
    width: var(--sb-control-h-xl); height: var(--sb-control-h-xl); min-height: var(--sb-control-h-xl);
}

/* === Input-group: pill только на крайних, внутренние без скругления === */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text,
.input-group > .btn {
    min-height: var(--sb-control-h);
}
.input-group > :not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > :first-child {
    border-top-left-radius: var(--sb-control-radius);
    border-bottom-left-radius: var(--sb-control-radius);
}
.input-group > :last-child:not(.dropdown-menu) {
    border-top-right-radius: var(--sb-control-radius);
    border-bottom-right-radius: var(--sb-control-radius);
}
.input-group-text {
    min-height: var(--sb-control-h);
    padding-left: var(--sb-control-px);
    padding-right: var(--sb-control-px);
    border-width: var(--sb-control-bw);
}

/* === Input-group merge: визуально слитный composite (поле + иконка/крестик)
 *    Раньше эти правила жили в rtl/core.css под селектором html:not([dir=rtl])
 *    и были потеряны при сборке core.ltr-merged.css. Возвращаем точечно —
 *    срабатывает ТОЛЬКО при наличии класса .input-group-merge, обычные
 *    input-group со своими разделителями не трогаем. === */
.input-group-merge .input-group-text:first-child {
    border-right: 0;
}
.input-group-merge .input-group-text:last-child {
    border-left: 0;
}
.input-group-merge .form-control:not(:first-child) {
    padding-left: 0;
    border-left: 0;
}
.input-group-merge .form-control:not(:last-child) {
    padding-right: 0;
    border-right: 0;
}

/* === Select2 single (light theme) === */
:is(.light-style, .dark-style) .select2-container--default .select2-selection--single {
    height: var(--sb-control-h);
    border-width: var(--sb-control-bw);
    border-radius: var(--sb-control-radius);
}
:is(.light-style, .dark-style) .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 calc(var(--sb-control-px) + 1.25rem) 0 var(--sb-control-px);
    line-height: calc(var(--sb-control-h) - 2 * var(--sb-control-bw));
    font-size: var(--sb-control-fs);
}
:is(.light-style, .dark-style) .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0.75rem; /* "чуть правее" — ближе к правому краю pill */
}
:is(.light-style, .dark-style) .select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

/* === Select2 multiple (light theme) ===
 * Высота — ровно как у обычных inputs (--sb-control-h). Тема Sneat вешает
 * чипам float: left + margin-top: 0.375rem — без клиерфикса родитель UL
 * получает height: 0, чип "приклеивается" к верху, под ним остаётся пустота,
 * и визуально поле кажется ниже инпута. Лечим flex-row контейнером с
 * align-items: center, отменяем float у чипа и убираем его margin-top —
 * так чип всегда вертикально центрирован, а высота поля стабильно равна
 * --sb-control-h независимо от того, есть выбор или нет.
 */
:is(.light-style, .dark-style) .select2-container--default .select2-selection--multiple {
    min-height: var(--sb-control-h);
    border-width: var(--sb-control-bw);
    /* Multi-row chips превращают pill в "яйцо" при переносе строк — используем
     * умеренный radius. Pill (var(--sb-control-radius)) оставляем только single. */
    /*border-radius: var(--sb-control-radius-md);*/
    border-radius: 1.3rem;
    /* Вертикальный padding = chip-gap (0.375rem), чтобы ритм между чипами
     * совпадал с зазорами до верхней/нижней рамки контейнера. */
    padding: 0.375rem 0.5rem;
    display: flex;
    align-items: center;
}
:is(.light-style, .dark-style) .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
:is(.light-style, .dark-style) .select2-container--default .select2-selection--multiple .select2-selection__choice {
    float: none;
    margin: 0;
}
:is(.light-style, .dark-style) .select2-container--default .select2-selection--multiple .select2-search--inline,
:is(.light-style, .dark-style) .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    float: none;
    margin: 0;
    line-height: 1;
    height: auto;
}

/* === Select2 open state ===
 * Тема Sneat в open-state обнуляет нижний (или верхний при above) радиус
 * у .select2-selection и красит соответствующий бордер в transparent,
 * чтобы поле "склеивалось" с дропдауном. На pill-форме получается обрезанный
 * полукруг — возвращаем pill и держим дропдаун отдельным элементом с зазором.
 */
:is(.light-style, .dark-style) .select2-container--default.select2-container--open .select2-selection--single {
    border-radius: var(--sb-control-radius);
    border-color: #dbdade;
}
:is(.light-style, .dark-style) .select2-container--default.select2-container--open .select2-selection--multiple {
    border-radius: var(--sb-control-radius-md);
    border-color: #dbdade;
}

/* select2 рендерит глобальный "clear all" крест слева сверху при allowClear.
 * На чипованной multi-форме он вылезает наружу строки и выглядит мусором —
 * у каждого чипа уже есть свой ×, поэтому глобальный скрываем. */
.select2-container--default .select2-selection__clear,
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    display: none;
}
:is(.light-style, .dark-style) .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
:is(.light-style, .dark-style) .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-color: #dbdade;
}
:is(.light-style, .dark-style) .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
:is(.light-style, .dark-style) .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-color: #dbdade;
}

/* Dropdown — отдельный «карточный» элемент с собственным border-radius и зазором. */
.select2-container--default .select2-dropdown,
.select2-container--default .select2-dropdown.select2-dropdown--below,
.select2-container--default .select2-dropdown.select2-dropdown--above {
    border: 1px solid #dbdade;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 1rem rgba(165, 163, 174, 0.45);
}
.select2-container--default .select2-dropdown.select2-dropdown--below {
    margin-top: 4px;
}
.select2-container--default .select2-dropdown.select2-dropdown--above {
    margin-top: -4px;
}

/* ============================================================
 * Modifier .sb-radius-md — умеренное скругление вместо pill.
 *
 * Для табличных фильтров и плотных форм, где capsule (999px) выглядит
 * избыточным. Регулировка размера — через --sb-control-radius-md в :root.
 *
 * Применять можно двумя способами:
 *   1) на самом контроле:
 *        <input class="form-control sb-radius-md">
 *        <select class="form-select sb-radius-md">
 *        <button class="btn btn-primary sb-radius-md">
 *
 *   2) на родительском контейнере — все form-control / form-select /
 *      select2 / btn / textarea / input-group-text внутри получают modifier:
 *        <form class="sb-radius-md"> ... </form>
 *        <div class="row sb-radius-md"> ... </div>
 *
 * Select2 рендерит свою обёртку через JS, прямого класса на .select2-selection
 * повесить нельзя — поэтому select2 покрывается ТОЛЬКО вариантом 2.
 * ============================================================ */

.form-control.sb-radius-md,
.form-select.sb-radius-md,
.btn.sb-radius-md,
.input-group-text.sb-radius-md,
textarea.sb-radius-md,
.sb-radius-md .form-control,
.sb-radius-md .form-select,
.sb-radius-md .btn,
.sb-radius-md .input-group-text,
.sb-radius-md textarea,
.sb-radius-md select,
.sb-radius-md input[type="text"],
.sb-radius-md input[type="email"],
.sb-radius-md input[type="number"],
.sb-radius-md input[type="search"],
.sb-radius-md input[type="tel"],
.sb-radius-md input[type="url"],
.sb-radius-md input[type="password"],
.sb-radius-md input[type="date"],
.sb-radius-md input[type="time"],
.sb-radius-md input[type="datetime-local"] {
    border-radius: var(--sb-control-radius-md);
}

/* input-group: первое/последнее — full radius, внутренние стыки — без скругления */
.input-group.sb-radius-md > :first-child,
.sb-radius-md .input-group > :first-child {
    border-top-left-radius: var(--sb-control-radius-md);
    border-bottom-left-radius: var(--sb-control-radius-md);
}
.input-group.sb-radius-md > :last-child:not(.dropdown-menu),
.sb-radius-md .input-group > :last-child:not(.dropdown-menu) {
    border-top-right-radius: var(--sb-control-radius-md);
    border-bottom-right-radius: var(--sb-control-radius-md);
}
.input-group.sb-radius-md > :not(:first-child),
.sb-radius-md .input-group > :not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group.sb-radius-md > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.sb-radius-md .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Select2 — два варианта:
 *   1) modifier на родителе (см. шапку блока) — ловится через .sb-radius-md потомка
 *   2) modifier на самом <select> — ловим через next-sibling: оригинальный
 *      <select.select2-hidden-accessible> всегда стоит в DOM непосредственно
 *      перед своей обёрткой <span class="select2-container">. */
:is(.light-style, .dark-style) .sb-radius-md .select2-container--default .select2-selection--single,
:is(.light-style, .dark-style) .sb-radius-md .select2-container--default .select2-selection--multiple,
:is(.light-style, .dark-style) select.sb-radius-md + .select2-container .select2-selection--single,
:is(.light-style, .dark-style) select.sb-radius-md + .select2-container .select2-selection--multiple {
    border-radius: var(--sb-control-radius-md);
}

/* Иконочные кнопки внутри medium-radius блока — становятся скруглённым квадратом,
 * не идеальным кругом (соответствует "Дія"-корзине на макете табличных фильтров) */
.sb-radius-md .btn-icon,
.btn-icon.sb-radius-md {
    border-radius: var(--sb-control-radius-md);
}

/* ============================================================
 * Focus ring — универсальный, повторяет border-radius элемента.
 *
 * Браузерный outline рисуется прямоугольником и игнорирует border-radius
 * (видно у pill-инпутов как квадратные углы рамки фокуса). Заменяем
 * outline на box-shadow со spread — он всегда повторяет форму элемента,
 * поэтому работает одинаково для pill, .sb-radius-md и любых других радиусов.
 * ============================================================ */
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible,
textarea:focus,
textarea:focus-visible,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
select:focus,
.input-group:focus-within,
.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select,
.input-group:focus-within > .input-group-text,
:is(.light-style, .dark-style) .select2-container--default.select2-container--focus .select2-selection,
:is(.light-style, .dark-style) .select2-container--default.select2-container--open .select2-selection {
    outline: 0 !important;
    border-color: var(--sb-primary) !important;
    box-shadow: none !important;
}

/* Авто-синхронизация input-group: если modifier повесили только на один
 * элемент группы (например, на <input>), подхватываем и соседей —
 * .input-group-text / .btn / другие form-control — чтобы левый и правый
 * край группы имели одинаковый радиус. Через :has() — современные браузеры. */
.input-group:has(> .sb-radius-md) > .form-control,
.input-group:has(> .sb-radius-md) > .form-select,
.input-group:has(> .sb-radius-md) > .input-group-text,
.input-group:has(> .sb-radius-md) > .btn {
    border-radius: var(--sb-control-radius-md);
}
.input-group:has(> .sb-radius-md) > :first-child {
    border-top-left-radius: var(--sb-control-radius-md);
    border-bottom-left-radius: var(--sb-control-radius-md);
}
.input-group:has(> .sb-radius-md) > :last-child:not(.dropdown-menu) {
    border-top-right-radius: var(--sb-control-radius-md);
    border-bottom-right-radius: var(--sb-control-radius-md);
}
.input-group:has(> .sb-radius-md) > :not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group:has(> .sb-radius-md) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}