@charset "UTF-8";
/* ==========================================================
   UI FORMS — инпуты, селекты, лейблы, Select2
   ========================================================== */

/* ----------------------------------------------------------
   Form control (input, textarea)
   ---------------------------------------------------------- */

.form-control {
    border-radius:    var(--ui-radius);
    border:           1px solid var(--c-border);
    font-size:        0.875rem;
    padding:          0.44rem 0.8rem;
    color:            var(--c-text);
    background-color: var(--c-bg);
    box-shadow:       none;
    line-height:      1.5;
    transition:
        border-color var(--ui-transition),
        box-shadow   var(--ui-transition);
}

.form-control:hover:not(:focus):not(:disabled) {
    border-color: #b0bac8;
}

.form-control:focus {
    border-color:     var(--c-border-focus);
    box-shadow:       var(--ui-focus-ring) var(--c-primary-ring);
    outline:          none;
    color:            var(--c-text);
    background-color: var(--c-bg);
}

.form-control::placeholder {
    color: var(--c-placeholder);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f8fafc;
    border-color:     #e2e8f0;
    color:            #94a3b8;
    cursor:           not-allowed;
}

textarea.form-control {
    resize:     vertical;
    min-height: 80px;
}


/* ----------------------------------------------------------
   Селект — кастомная стрелка
   ---------------------------------------------------------- */

select.form-control,
select.form-control-sm {
    appearance:          none;
    -webkit-appearance:  none;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2364748b' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 0.65rem center;
    padding-right:       2rem;
    cursor:              pointer;
}

select.form-control:focus,
select.form-control-sm:focus {
    border-color: var(--c-border-focus);
    box-shadow:   var(--ui-focus-ring) var(--c-primary-ring);
}


/* ----------------------------------------------------------
   form-control-sm
   ---------------------------------------------------------- */

.form-control-sm {
    height:        calc(1.5em + 0.5rem + 2px);
    padding:       0.25rem 0.6rem;
    font-size:     0.8125rem;
    border-radius: var(--ui-radius-sm);
    border:        1px solid var(--c-border);
    color:         var(--c-text);
    background-color: var(--c-bg);
    line-height:   1.5;
    transition:    border-color var(--ui-transition), box-shadow var(--ui-transition);
}

.form-control-sm:focus {
    border-color: var(--c-border-focus);
    box-shadow:   var(--ui-focus-ring) var(--c-primary-ring);
    outline:      none;
}

.form-control-sm::placeholder {
    color: var(--c-placeholder);
}


/* ----------------------------------------------------------
   Input group
   ---------------------------------------------------------- */

.input-group > .form-control:not(:first-child) {
    border-top-left-radius:    0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child) {
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
}

.input-group-append > .btn {
    border-top-left-radius:    0;
    border-bottom-left-radius: 0;
}

.input-group-prepend > .btn {
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
}

.input-group-text {
    background-color: var(--c-surface);
    border-color:     var(--c-border);
    color:            var(--c-text-muted);
    font-size:        0.875rem;
    border-radius:    0;
}

.input-group > .input-group-prepend > .input-group-text {
    border-top-left-radius:    var(--ui-radius);
    border-bottom-left-radius: var(--ui-radius);
}

.input-group > .input-group-append > .input-group-text {
    border-top-right-radius:    var(--ui-radius);
    border-bottom-right-radius: var(--ui-radius);
}


/* ----------------------------------------------------------
   Labels и form-group
   ---------------------------------------------------------- */

.form-group {
    margin-bottom: 1rem;
}

.form-group > label {
    font-size:     0.78rem;
    font-weight:   600;
    color:         var(--c-label);
    margin-bottom: 0.3rem;
    display:       block;
}

.form-check-label {
    font-size: 0.875rem;
    color:     var(--c-text);
}


/* ----------------------------------------------------------
   Select2 — согласование с основными стилями
   ---------------------------------------------------------- */

/* Растягиваем контейнер на всю ширину как block-элемент */
.select2-container--bootstrap4 {
    display: block;
}

/* Основной блок одиночного выбора */
.select2-container--bootstrap4 .select2-selection--single {
    border-radius:    var(--ui-radius) !important;
    border-color:     var(--c-border) !important;
    background-color: var(--c-bg) !important;
    height:           calc(1.5em + 0.88rem + 2px) !important;
    font-size:        0.875rem;
    transition:       border-color var(--ui-transition), box-shadow var(--ui-transition);
}

/* Focus и открытое состояние */
.select2-container--bootstrap4.select2-container--focus .select2-selection--single,
.select2-container--bootstrap4.select2-container--open  .select2-selection--single {
    border-color: var(--c-border-focus) !important;
    box-shadow:   var(--ui-focus-ring) var(--c-primary-ring) !important;
}

/* Убираем "пропадание" нижней рамки при открытом dropdown */
.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection {
    border-bottom-color: var(--c-border-focus) !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius:  0 !important;
}

/* Отображаемый выбранный текст */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height:   calc(1.5em + 0.88rem) !important;
    padding-left:  0.8rem !important;
    padding-right: 2rem !important;
    color:         var(--c-text) !important;
    font-size:     0.875rem;
}

/* Плейсхолдер */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color:       var(--c-placeholder) !important;
    line-height: calc(1.5em + 0.88rem) !important;
}

/* Стрелка — заменяем CSS-треугольник на SVG, как у нативного select */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height:   calc(1.5em + 0.88rem) !important;
    width:    2rem !important;
    right:    0 !important;
    top:      0 !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border:            none !important;
    width:             14px !important;
    height:            9px !important;
    margin-top:        -4px !important;
    margin-left:       -7px !important;
    background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2364748b' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Выпадающий список */
.select2-container--bootstrap4 .select2-dropdown {
    border-color:     var(--c-border-focus);
    border-radius:    0 0 var(--ui-radius) var(--ui-radius);
    box-shadow:       0 8px 24px rgba(0, 0, 0, 0.08);
    font-size:        0.875rem;
    background-color: var(--c-bg);
}

/* Dropdown открывается вверх */
.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above {
    border-radius:   var(--ui-radius) var(--ui-radius) 0 0;
}

/* Строка поиска внутри dropdown */
.select2-search--dropdown .select2-search__field {
    border:           1px solid var(--c-border) !important;
    border-radius:    var(--ui-radius-sm) !important;
    color:            var(--c-text) !important;
    background-color: var(--c-bg) !important;
    font-size:        0.875rem !important;
    padding:          0.3rem 0.6rem !important;
    outline:          none !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--c-border-focus) !important;
    box-shadow:   var(--ui-focus-ring) var(--c-primary-ring) !important;
}

/* Опции в списке */
.select2-container--bootstrap4 .select2-results__option {
    color:   var(--c-text);
    padding: 0.375rem 0.8rem;
}

/* Уже выбранный элемент в списке */
.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected="true"] {
    color:            var(--c-text);
    background-color: var(--c-surface);
}

/* Hover/подсветка */
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected="true"] {
    background-color: var(--c-primary);
    color:            #fff;
}


/* ----------------------------------------------------------
   Select2 — sm-вариант (когда исходный select имеет form-control-sm)
   ---------------------------------------------------------- */

select.form-control-sm + .select2-container--bootstrap4 .select2-selection--single {
    height:        calc(1.5em + 0.5rem + 2px) !important;
    font-size:     0.8125rem !important;
    border-radius: var(--ui-radius-sm) !important;
}

select.form-control-sm + .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height:  calc(1.5em + 0.5rem) !important;
    font-size:    0.8125rem !important;
    padding-left: 0.6rem !important;
}

select.form-control-sm + .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    line-height: calc(1.5em + 0.5rem) !important;
    font-size:   0.8125rem !important;
}

select.form-control-sm + .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.5rem) !important;
}


/* ----------------------------------------------------------
   Тёмная тема
   ---------------------------------------------------------- */

.dark-mode .form-control {
    background-color: var(--c-bg);
    border-color:     var(--c-border);
    color:            var(--c-text);
}

.dark-mode .form-control:hover:not(:focus):not(:disabled) {
    border-color: #4e5f74;
}

.dark-mode .form-control:focus {
    background-color: var(--c-bg);
    color:            var(--c-text);
}

.dark-mode .form-control:disabled,
.dark-mode .form-control[readonly] {
    background-color: #222b3a;
    border-color:     #2e3a4e;
    color:            #5a6a7e;
}

.dark-mode select.form-control,
.dark-mode select.form-control-sm {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238fa3be' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dark-mode .input-group-text {
    background-color: #222b3a;
    border-color:     var(--c-border);
    color:            var(--c-label);
}

.dark-mode .form-group > label {
    color: var(--c-label);
}

.dark-mode .form-check-label {
    color: var(--c-text);
}

.dark-mode .form-control-sm {
    background-color: var(--c-bg);
    border-color:     var(--c-border);
    color:            var(--c-text);
}

.dark-mode select.form-control-sm {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238fa3be' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dark-mode .select2-container--bootstrap4 .select2-selection--single {
    background-color: var(--c-bg) !important;
    border-color:     var(--c-border) !important;
}

.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: var(--c-text) !important;
}

.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: var(--c-placeholder) !important;
}

.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238fa3be' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.dark-mode .select2-container--bootstrap4 .select2-dropdown {
    background-color: #2a3244;
    border-color:     var(--c-border-focus);
    box-shadow:       0 8px 24px rgba(0, 0, 0, 0.3);
}

.dark-mode .select2-container--bootstrap4 .select2-results__option {
    color: var(--c-text);
}

.dark-mode .select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected="true"] {
    background-color: #1d2b3e;
    color:            var(--c-text);
}

.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted,
.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected="true"] {
    background-color: #1e4080;
    color:            #fff;
}

.dark-mode .select2-search--dropdown .select2-search__field {
    background-color: var(--c-bg) !important;
    border-color:     var(--c-border) !important;
    color:            var(--c-text) !important;
}