/* ===== TSS Forms (универсально для Bootstrap 5) ===== */

/* Базовые подписи/лейблы */
.form-label{
    color: var(--heading-color);
    font-weight: 600;
    margin-bottom: .35rem;
    font-size: .95rem;
}

/* Текст-подсказка под полями */
.form-text{
    color: color-mix(in srgb, var(--default-color) 70%, transparent);
    font-size: .85rem;
}

/* Инпуты и селекты */
.form-control,
.form-select,
.input-group .form-control{
    background: var(--surface-color);
    color: var(--default-color);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--heading-color) 14%, transparent);
    padding: .7rem .95rem;
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.form-control:focus,
.form-select:focus{
    background: #fff;
    border-color: var(--accent-color);
    box-shadow: var(--focus-ring-strong);
    outline: 0;
}

/* Placeholder */
.form-control::placeholder{
    color: color-mix(in srgb, var(--default-color) 48%, transparent);
    opacity: 1;
}

/* Disabled / Readonly */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly]{
    background: color-mix(in srgb, var(--surface-color) 94%, var(--heading-color) 6%);
    color: color-mix(in srgb, var(--default-color) 60%, transparent);
    border-color: color-mix(in srgb, var(--heading-color) 10%, transparent);
    box-shadow: none;
    opacity: 1;
}

/* Сглаживание для больших/малых */
.form-control-lg, .form-select-lg{ border-radius: var(--radius-lg); padding: .9rem 1.05rem; }
.form-control-sm, .form-select-sm{ border-radius: 8px; padding: .5rem .7rem; }

/* Группы полей */
.input-group-text{
    background: color-mix(in srgb, var(--surface-color) 92%, var(--heading-color) 8%);
    color: var(--heading-color);
    border: 1px solid color-mix(in srgb, var(--heading-color) 14%, transparent);
    border-radius: var(--radius-md);
}
.input-group>.form-control,
.input-group>.form-select,
.input-group .input-group-text{
    box-shadow: none;
}
.input-group .form-control:focus{
    position: relative;
    z-index: 2;
}

/* Floating labels */
.form-floating>.form-control,
.form-floating>.form-select{
    padding: 1.15rem .95rem .45rem;
}
.form-floating>label{
    color: color-mix(in srgb, var(--default-color) 65%, transparent);
}
.form-floating>.form-control:focus ~ label,
.form-floating>.form-control:not(:placeholder-shown) ~ label,
.form-floating>.form-select ~ label{
    color: var(--heading-color);
}

/* Checkbox / Radio */
.form-check-input{
    width: 1.05rem; height: 1.05rem;
    border-radius: .25rem;
    border: 1px solid color-mix(in srgb, var(--heading-color) 22%, transparent);
    background: #fff;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-check-input:focus{ box-shadow: var(--focus-ring); border-color: var(--accent-color); }
.form-check-input:checked{
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}
.form-check-label{ color: var(--default-color); }

/* Радио — круглые по дизайну */
.form-check-input[type="radio"]{ border-radius: 50%; }

/* Switch */
.form-switch .form-check-input{
    width: 2.25rem; height: 1.25rem;
    border-radius: 1.25rem;
    background-color: color-mix(in srgb, var(--heading-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--heading-color) 18%, transparent);
}
.form-switch .form-check-input:checked{
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}
.form-switch .form-check-input:focus{ box-shadow: var(--focus-ring); }

/* Select (стрелка) */
.form-select{
    background-image:
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23739d4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-size: 18px 18px;
    background-position: right .75rem center;
    background-repeat: no-repeat;
    padding-right: 2.25rem;
}

/* Textarea */
textarea.form-control{
    min-height: 140px;
    resize: vertical;
}

/* Range (слайдер) */
.form-range{
    height: 1.25rem;
}
.form-range::-webkit-slider-runnable-track{
    height: .35rem; border-radius: 999px;
    background: color-mix(in srgb, var(--heading-color) 15%, transparent);
}
.form-range::-webkit-slider-thumb{
    -webkit-appearance: none; appearance: none;
    width: 1rem; height: 1rem; border-radius: 50%;
    background: var(--accent-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--accent-color);
    margin-top: -6px;
}
.form-range:focus::-webkit-slider-thumb{
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 35%, transparent);
}
.form-range::-moz-range-track{
    height: .35rem; border-radius: 999px;
    background: color-mix(in srgb, var(--heading-color) 15%, transparent);
}
.form-range::-moz-range-thumb{
    width: 1rem; height: 1rem; border-radius: 50%;
    background: var(--accent-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--accent-color);
}

/* File input (customize label через .form-control) */
.form-control[type="file"]{
    padding: .55rem .95rem;
}
.form-control[type="file"]::-webkit-file-upload-button{
    visibility: hidden;
}
.form-control[type="file"]::file-selector-button{
    visibility: hidden;
}
.form-control[type="file"]{
    cursor: pointer;
}
.form-control[type="file"]::before{
    content: 'Выбрать файл';
    display: inline-block;
    margin-right: .75rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--heading-color);
    font-weight: 600;
}

/* Валидация */
.is-valid.form-control,
.is-valid.form-select{ border-color: #2ecc71; }
.is-invalid.form-control,
.is-invalid.form-select{ border-color: #e74c3c; }
.valid-feedback, .invalid-feedback{
    font-size: .85rem;
}
.invalid-feedback{ color: #e74c3c; }
.valid-feedback{ color: #2e9d5b; }

/* Поля в .dark-background секциях */
.dark-background .form-label{ color: var(--contrast-color); }
.dark-background .form-text{
    color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
}
.dark-background .form-control,
.dark-background .form-select{
    background: color-mix(in srgb, var(--surface-color) 88%, black 12%);
    color: var(--contrast-color);
    border-color: color-mix(in srgb, var(--contrast-color) 22%, transparent);
}
.dark-background .form-control::placeholder{
    color: color-mix(in srgb, var(--contrast-color) 55%, transparent);
}
.dark-background .form-control:focus,
.dark-background .form-select:focus{
    background: color-mix(in srgb, var(--surface-color) 92%, black 8%);
    border-color: var(--accent-color);
    box-shadow: var(--focus-ring-strong);
}

/* Autofill (Chrome) */
input:-webkit-autofill{
    -webkit-text-fill-color: var(--default-color);
    box-shadow: 0 0 0 40px #fff inset !important;
}
.dark-background input:-webkit-autofill{
    -webkit-text-fill-color: var(--contrast-color);
    box-shadow: 0 0 0 40px color-mix(in srgb, var(--surface-color) 90%, black 10%) inset !important;
}

/* Поля поиска/номер/почта гармонизируем отступы */
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"]{
    letter-spacing: .2px;
}

/* Fieldset / legend */
fieldset{
    border: 1px dashed color-mix(in srgb, var(--heading-color) 18%, transparent);
    border-radius: var(--radius-lg);
    padding: 1rem 1.2rem;
}
legend{
    font-size: .95rem;
    font-weight: 700;
    color: var(--heading-color);
    padding: 0 .35rem;
}

/* Отступы между элементами формы по умолчанию */
.form-group, .mb-form{ margin-bottom: 1rem; }

/* Внутри модалок – чуть компактнее */
.modal .form-control,
.modal .form-select{ box-shadow: none; }
.modal .form-label{ margin-bottom: .3rem; }

/* Ссылки-помощники внутри форм */
.form-hint-link{
    font-size: .85rem;
    color: var(--accent-color);
    text-decoration: underline;
}
.form-hint-link:hover{
    color: color-mix(in srgb, var(--accent-color) 85%, black 15%);
}

/* Ошибки в блоках ajax-форм */
.form-alert{
    border: 1px solid #e74c3c22;
    background: #e74c3c0f;
    color: #e74c3c;
    border-radius: var(--radius-md);
    padding: .8rem 1rem;
}


.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--accent-color);
    border-bottom-color:  color-mix(in srgb, var(--accent-color), transparent 90%);
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    margin: auto;
    display: block;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.alert {
    --bs-alert-bg:        var(--surface-elev);
    --bs-alert-border-color: transparent;
    --bs-alert-color:     var(--default-color);

    display: flex;
    align-items: flex-start;
    gap: var(--alert-gap);
    padding: var(--alert-padding-y) var(--alert-padding-x);
    border: var(--alert-border);
    border-radius: var(--alert-radius);
    background: var(--bs-alert-bg);
    color: var(--bs-alert-color);
    line-height: 1.4;
}

.alert > .icon {
    font-size: var(--alert-icon-size);
    line-height: 1;
    margin-top: 2px;
}

/* Ссылки внутри */
.alert a,
.alert .alert-link {
    color: currentColor;
    text-decoration: var(--alert-link-underline);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Кнопка закрытия */
.alert .btn-close {
    margin-left: auto;
    filter: invert(20%) grayscale(100%) opacity(0.6);
    transition: filter .2s ease, transform .12s ease-in-out;
}
.alert .btn-close:hover { filter: invert(0%) grayscale(0%) opacity(0.9); }
.alert .btn-close:focus { outline: none; box-shadow: var(--focus-ring); transform: scale(1.02); }

/* Варианты — мэппинг к токенам */
.alert-primary  { --bs-alert-bg: var(--alert-primary-bg);  --bs-alert-border-color: var(--alert-primary-br);  --bs-alert-color: var(--alert-primary-tx); }
.alert-success  { --bs-alert-bg: var(--alert-success-bg);  --bs-alert-border-color: var(--alert-success-br);  --bs-alert-color: var(--alert-success-tx); }
.alert-info     { --bs-alert-bg: var(--alert-info-bg);     --bs-alert-border-color: var(--alert-info-br);     --bs-alert-color: var(--alert-info-tx); }
.alert-warning  { --bs-alert-bg: var(--alert-warning-bg);  --bs-alert-border-color: var(--alert-warning-br);  --bs-alert-color: var(--alert-warning-tx); }
.alert-danger   { --bs-alert-bg: var(--alert-danger-bg);   --bs-alert-border-color: var(--alert-danger-br);   --bs-alert-color: var(--alert-danger-tx); }
.alert-secondary{ --bs-alert-bg: var(--alert-secondary-bg);--bs-alert-border-color: var(--alert-secondary-br);--bs-alert-color: var(--alert-secondary-tx); }
.alert-light    { --bs-alert-bg: var(--alert-light-bg);    --bs-alert-border-color: var(--alert-light-br);    --bs-alert-color: var(--alert-light-tx); }
.alert-dark     { --bs-alert-bg: var(--alert-dark-bg);     --bs-alert-border-color: var(--alert-dark-br);     --bs-alert-color: var(--alert-dark-tx); }

/* Тонкие (subtle) версии — если используете класс .alert-subtle */
.alert.alert-subtle {
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    background: color-mix(in srgb, var(--bs-alert-bg) 65%, #fff 35%);
    box-shadow: none;
}

/* Dismissible spacing (Bootstrap .alert-dismissible) */
.alert-dismissible {
    padding-right: calc(var(--alert-padding-x) + 26px);
}
.alert-dismissible .btn-close {
    position: relative;
    margin-left: auto;
}

/* 3) Контрастные/инвертные (на цветных блоках) */
.alert--invert {
    --bs-alert-bg: color-mix(in srgb, currentColor 10%, #000 10%, #fff 80%);
    --bs-alert-color: var(--default-color);
    border-color: color-mix(in srgb, currentColor 25%, transparent);
}

/* 4) Поддержка внутри форм/карточек */
.card .alert,
.modal .alert,
.offcanvas .alert {
    box-shadow: none; /* в контейнерах обычно достаточно границы */
}

/* 5) Небольшой размер */
.alert-sm {
    --alert-padding-y: 10px;
    --alert-padding-x: 12px;
    --alert-gap: 8px;
    font-size: 0.95rem;
}

/* 6) Вариант с левым бордером-акцентом (добавочный класс) */
.alert--accent {
    border-left: 4px solid currentColor;
    padding-left: calc(var(--alert-padding-x) - 2px);
}

.nav-pills.nav-pils-micros-vert {
    border-right: 2px #739d4f solid;
}

.nav-pills.nav-pils-micros-vert .nav-link, .nav-pills.nav-pils-micros-vert  .nav-link.active  {
    border-radius: 5px 0 0 5px;
}