/* ============================================================
 * mcl-ui.css — единый «свой» вид интерактивных элементов.
 *
 * Bootstrap остаётся для сетки, отступов и утилит. Здесь переоформляется
 * то, что люди видят и нажимают: кнопки, поля, чекбоксы, алерты/ошибки,
 * бейджи, карточки, пагинация, списки, таблицы, прогресс, тосты.
 *
 * Подключать ПОСЛЕ theme.css. Цвета берутся из токенов --ui-*, которые для
 * светлой темы заданы ниже, а для тёмных палитр собираются из --th-*
 * (theme.css) — поэтому все 9 тем работают без отдельных правил.
 *
 * Принцип специфичности:
 *   • геометрия (отступы, радиусы, шрифт) — низкая специфичность, чтобы
 *     стили конкретных страниц/карточек (.server-card .btn и т.п.) выигрывали;
 *   • цвета — `:root:root …` (0,3,0): выигрывают у тёмных правил theme.css
 *     при равенстве, так как файл подключён позже.
 * ============================================================ */

/* ---------- 1. Токены ---------- */
:root {
    --ui-surface:      #ffffff;
    --ui-surface-2:    #f8f9fa;
    --ui-border:       #dee2e6;
    --ui-border-soft:  #e9ecef;
    --ui-text:         #212529;
    --ui-muted:        #6c757d;

    --ui-accent:       #0d6efd;
    --ui-accent-hover: #0b5ed7;
    --ui-on-accent:    #ffffff;
    --ui-accent-rgb:   13, 110, 253;

    --ui-success: #198754;
    --ui-danger:  #dc3545;
    --ui-warning: #d97706;
    --ui-info:    #0284c7;
    --ui-on-solid: #ffffff;           /* текст на залитых success/danger/warning/info */

    --ui-r-sm:   12px;
    --ui-r-md:   16px;
    --ui-r-pill: 50px;
    --ui-ring: color-mix(in srgb, var(--ui-accent) 28%, transparent);
}
:root[data-bs-theme="dark"] {
    --ui-surface:      var(--th-surface);
    --ui-surface-2:    var(--th-surface-2);
    --ui-border:       var(--th-border);
    --ui-border-soft:  var(--th-border-soft, var(--th-border));
    --ui-text:         var(--th-text-strong, #f5f7fb);
    --ui-muted:        var(--th-muted);

    --ui-accent:       var(--th-accent);
    --ui-accent-hover: var(--th-accent-hover);
    --ui-on-accent:    var(--th-on-accent, #1a1d27);
    --ui-accent-rgb:   var(--th-accent-rgb);

    --ui-success: #3fb98a;
    --ui-danger:  #f07178;
    --ui-warning: #f0b35a;
    --ui-info:    #5bb8f0;
    --ui-on-solid: #11141b;
}

/* ============================================================
 * 2. Кнопки
 * ============================================================ */
.btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-font-size: 0.95rem;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--ui-r-md);
    --bs-btn-border-width: 1px;
    line-height: 1.5;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.btn-sm {
    --bs-btn-padding-x: 0.9rem;
    --bs-btn-padding-y: 0.38rem;
    --bs-btn-font-size: 0.85rem;
    --bs-btn-border-radius: var(--ui-r-sm);
}
.btn-lg {
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-padding-y: 0.8rem;
    --bs-btn-font-size: 1.05rem;
    --bs-btn-border-radius: var(--ui-r-md);
}
.btn:active:not(:disabled):not(.disabled) { transform: scale(0.97); }
.btn:disabled, .btn.disabled { opacity: .55; }

:root:root .btn {
    --bs-btn-focus-shadow-rgb: var(--ui-accent-rgb);
    --bs-btn-focus-box-shadow: 0 0 0 .22rem var(--ui-ring);
}

/* Залитые: primary / success / danger / warning / info */
:root:root .btn-primary { --_c: var(--ui-accent);  --_on: var(--ui-on-accent); --_h: var(--ui-accent-hover); }
:root:root .btn-success { --_c: var(--ui-success); --_on: var(--ui-on-solid); }
:root:root .btn-danger  { --_c: var(--ui-danger);  --_on: var(--ui-on-solid); }
:root:root .btn-warning { --_c: var(--ui-warning); --_on: var(--ui-on-solid); }
:root:root .btn-info    { --_c: var(--ui-info);    --_on: var(--ui-on-solid); }
:root:root :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info) {
    --_hover: var(--_h, color-mix(in srgb, var(--_c) 86%, #000));
    --bs-btn-bg: var(--_c);
    --bs-btn-border-color: var(--_c);
    --bs-btn-color: var(--_on);
    --bs-btn-hover-bg: var(--_hover);
    --bs-btn-hover-border-color: var(--_hover);
    --bs-btn-hover-color: var(--_on);
    --bs-btn-active-bg: color-mix(in srgb, var(--_hover) 90%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--_hover) 90%, #000);
    --bs-btn-active-color: var(--_on);
    --bs-btn-disabled-bg: var(--_c);
    --bs-btn-disabled-border-color: var(--_c);
    --bs-btn-disabled-color: var(--_on);
    --bs-btn-focus-shadow-rgb: var(--ui-accent-rgb);
}

/* Контурные */
:root:root .btn-outline-primary   { --_c: var(--ui-accent);  --_on: var(--ui-on-accent); }
:root:root .btn-outline-success   { --_c: var(--ui-success); --_on: var(--ui-on-solid); }
:root:root .btn-outline-danger    { --_c: var(--ui-danger);  --_on: var(--ui-on-solid); }
:root:root .btn-outline-warning   { --_c: var(--ui-warning); --_on: var(--ui-on-solid); }
:root:root .btn-outline-info      { --_c: var(--ui-info);    --_on: var(--ui-on-solid); }
:root:root :is(.btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info) {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--_c);
    --bs-btn-border-color: color-mix(in srgb, var(--_c) 65%, transparent);
    --bs-btn-hover-bg: var(--_c);
    --bs-btn-hover-color: var(--_on);
    --bs-btn-hover-border-color: var(--_c);
    --bs-btn-active-bg: color-mix(in srgb, var(--_c) 88%, #000);
    --bs-btn-active-color: var(--_on);
    --bs-btn-active-border-color: color-mix(in srgb, var(--_c) 88%, #000);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-color: var(--_c);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--_c) 65%, transparent);
}

/* Нейтральные: secondary / light / outline-secondary / outline-dark */
:root:root :is(.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light) {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--ui-text);
    --bs-btn-border-color: var(--ui-border);
    --bs-btn-hover-bg: var(--ui-surface-2);
    --bs-btn-hover-color: var(--ui-text);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ui-muted) 55%, var(--ui-border));
    --bs-btn-active-bg: var(--ui-surface-2);
    --bs-btn-active-color: var(--ui-text);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ui-muted) 55%, var(--ui-border));
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-color: var(--ui-muted);
    --bs-btn-disabled-border-color: var(--ui-border);
}
:root:root .btn-secondary,
:root:root .btn-light { --bs-btn-bg: var(--ui-surface-2); }

/* Тёмная кнопка */
:root:root .btn-dark {
    --bs-btn-bg: var(--ui-text);
    --bs-btn-border-color: var(--ui-text);
    --bs-btn-color: var(--ui-surface);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ui-text) 85%, var(--ui-surface));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ui-text) 85%, var(--ui-surface));
    --bs-btn-hover-color: var(--ui-surface);
    --bs-btn-active-bg: color-mix(in srgb, var(--ui-text) 78%, var(--ui-surface));
    --bs-btn-active-border-color: color-mix(in srgb, var(--ui-text) 78%, var(--ui-surface));
    --bs-btn-active-color: var(--ui-surface);
}

/* Ссылка-кнопка */
:root:root .btn-link {
    --bs-btn-color: var(--ui-accent);
    --bs-btn-hover-color: var(--ui-accent-hover);
    --bs-btn-active-color: var(--ui-accent-hover);
    --bs-btn-disabled-color: var(--ui-muted);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-padding-x: 0.4rem;
    text-decoration: none;
}
:root:root .btn-link:hover { text-decoration: underline; }

/* ============================================================
 * 3. Поля ввода
 * ============================================================ */
.form-label {
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}
.form-text { font-size: 0.82rem; }

.form-control,
.form-select {
    padding: 0.62rem 0.95rem;
    font-size: 0.95rem;
    border-radius: var(--ui-r-sm);
    border-width: 1px;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.form-control-sm, .form-select-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 10px;
}
.form-control-lg, .form-select-lg {
    padding: 0.8rem 1.15rem;
    font-size: 1.05rem;
    border-radius: var(--ui-r-md);
}
textarea.form-control { min-height: 5.5rem; line-height: 1.5; }

:root:root .form-control,
:root:root .form-select {
    background-color: var(--ui-surface-2);
    border-color: var(--ui-border);
    color: var(--ui-text);
}
:root:root .form-control::placeholder { color: var(--ui-muted); opacity: .75; }
:root:root .form-control:hover:not(:disabled):not(:focus),
:root:root .form-select:hover:not(:disabled):not(:focus) {
    border-color: color-mix(in srgb, var(--ui-muted) 55%, var(--ui-border));
}
:root:root .form-control:focus,
:root:root .form-select:focus {
    background-color: var(--ui-surface);
    border-color: var(--ui-accent);
    color: var(--ui-text);
    box-shadow: 0 0 0 .22rem var(--ui-ring);
    outline: 0;
}
:root:root .form-control:disabled,
:root:root .form-control[readonly],
:root:root .form-select:disabled {
    background-color: color-mix(in srgb, var(--ui-surface-2) 70%, var(--ui-border));
    color: var(--ui-muted);
    opacity: .85;
}
/* Автозаполнение браузера не должно красить поле в белый/жёлтый */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--ui-surface-2) inset;
    -webkit-text-fill-color: var(--ui-text);
    caret-color: var(--ui-text);
}

/* Валидация */
:root:root .form-control.is-invalid,
:root:root .form-select.is-invalid,
:root:root .was-validated .form-control:invalid,
:root:root .was-validated .form-select:invalid {
    border-color: var(--ui-danger);
}
:root:root .form-control.is-invalid:focus,
:root:root .form-select.is-invalid:focus,
:root:root .was-validated .form-control:invalid:focus {
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--ui-danger) 25%, transparent);
}
:root:root .form-control.is-valid,
:root:root .form-select.is-valid,
:root:root .was-validated .form-control:valid,
:root:root .was-validated .form-select:valid {
    border-color: var(--ui-success);
}
:root:root .form-control.is-valid:focus,
:root:root .form-select.is-valid:focus,
:root:root .was-validated .form-control:valid:focus {
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--ui-success) 25%, transparent);
}
.invalid-feedback, .valid-feedback { font-size: 0.82rem; font-weight: 500; margin-top: .35rem; }
:root:root .invalid-feedback { color: var(--ui-danger); }
:root:root .valid-feedback   { color: var(--ui-success); }

/* Группы полей */
.input-group-text {
    font-size: 0.95rem;
    border-radius: var(--ui-r-sm);
}
:root:root .input-group-text {
    background-color: var(--ui-surface-2);
    border-color: var(--ui-border);
    color: var(--ui-muted);
}
.input-group:focus-within > .input-group-text { border-color: var(--ui-accent); }

/* Чекбоксы / радио / переключатели */
.form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.15em;
    border-width: 1.5px;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.form-check-input[type="checkbox"] { border-radius: 0.4em; }
:root:root .form-check-input {
    background-color: var(--ui-surface);
    border-color: color-mix(in srgb, var(--ui-muted) 55%, var(--ui-border));
}
:root:root .form-check-input:checked,
:root:root .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--ui-accent);
    border-color: var(--ui-accent);
}
:root:root .form-check-input:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 .22rem var(--ui-ring);
}
:root:root .form-check-input:disabled { opacity: .5; }
.form-check-label { cursor: pointer; }
.form-switch .form-check-input { width: 2.3em; height: 1.3em; border-radius: 2em; }

/* Закрывающий крестик (вне модалок): тот же круглый вид */
.btn-close { border-radius: 50%; transition: opacity .2s, transform .2s; }
.btn-close:hover { transform: scale(1.06); }

/* ============================================================
 * 4. Алерты / ошибки
 *    Мягкая подложка в цвет типа, тонкая рамка, цветной значок слева.
 * ============================================================ */
.alert {
    --bs-alert-padding-x: 1.1rem;
    --bs-alert-padding-y: 0.9rem;
    --bs-alert-border-radius: var(--ui-r-md);
    --bs-alert-border-width: 1px;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.5;
    box-shadow: none;
}
.alert-heading { font-weight: 600; font-size: 1.05rem; color: inherit; }
.alert p:last-child { margin-bottom: 0; }

:root:root .alert-success   { --_c: var(--ui-success); --_ic: var(--ui-success); }
:root:root .alert-danger    { --_c: var(--ui-danger);  --_ic: var(--ui-danger); }
:root:root .alert-warning   { --_c: var(--ui-warning); --_ic: var(--ui-warning); }
:root:root .alert-info,
:root:root .alert-primary   { --_c: var(--ui-info);    --_ic: var(--ui-info); }
:root:root .alert-primary   { --_c: var(--ui-accent);  --_ic: var(--ui-accent); }
:root:root .alert-secondary,
:root:root .alert-light,
:root:root .alert-dark      { --_c: var(--ui-muted);   --_ic: var(--ui-muted); }

:root:root :is(.alert-success, .alert-danger, .alert-warning, .alert-info, .alert-primary, .alert-secondary, .alert-light, .alert-dark) {
    --bs-alert-bg: color-mix(in srgb, var(--_c) 9%, var(--ui-surface));
    --bs-alert-border-color: color-mix(in srgb, var(--_c) 32%, var(--ui-border));
    --bs-alert-color: var(--ui-text);
    --bs-alert-link-color: var(--ui-text);
    box-shadow: inset 3px 0 0 var(--_c);
}
.alert-link { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Значок типа — маской, чтобы красился в цвет алерта (шрифт иконок не нужен).
   Если внутри уже есть собственная иконка первым элементом — свой значок не рисуем. */
:root:root .alert:not(.alert-noicon):not(:has(> i:first-child)):not(:has(> .bi:first-child)):not(:has(> svg:first-child)) {
    padding-left: 3rem;
}
:root:root .alert:not(.alert-noicon):not(:has(> i:first-child)):not(:has(> .bi:first-child)):not(:has(> svg:first-child))::before {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: 0.95rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--_ic);
    -webkit-mask: var(--_mask) center / contain no-repeat;
            mask: var(--_mask) center / contain no-repeat;
}
:root:root .alert-success {
    --_mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E");
}
:root:root .alert-danger {
    --_mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3E%3C/svg%3E");
}
:root:root .alert-warning {
    --_mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}
:root:root :is(.alert-info, .alert-primary, .alert-secondary, .alert-light, .alert-dark) {
    --_mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
}
/* крестик закрытия внутри алерта */
.alert-dismissible .btn-close { padding: 1.15rem 1.1rem; }

/* ============================================================
 * 5. Бейджи
 * ============================================================ */
.badge {
    --bs-badge-padding-x: 0.65em;
    --bs-badge-padding-y: 0.38em;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: 10px;
    letter-spacing: 0.01em;
}
.badge.rounded-pill { border-radius: var(--ui-r-pill); }

/* ============================================================
 * 6. Карточки, списки, таблицы
 * ============================================================ */
.card {
    --bs-card-border-radius: var(--ui-r-md);
    --bs-card-inner-border-radius: calc(var(--ui-r-md) - 1px);
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-cap-padding-y: 0.9rem;
}
:root:root .card {
    --bs-card-bg: var(--ui-surface);
    --bs-card-border-color: var(--ui-border-soft);
    --bs-card-cap-bg: transparent;
    --bs-card-color: var(--ui-text);
}
:root:root .card-header,
:root:root .card-footer {
    background-color: transparent;
    border-color: var(--ui-border-soft);
}
.card-header { font-weight: 600; }

.list-group {
    --bs-list-group-border-radius: var(--ui-r-md);
    --bs-list-group-item-padding-x: 1.1rem;
    --bs-list-group-item-padding-y: 0.75rem;
}
:root:root .list-group {
    --bs-list-group-bg: var(--ui-surface);
    --bs-list-group-color: var(--ui-text);
    --bs-list-group-border-color: var(--ui-border-soft);
    --bs-list-group-action-hover-bg: var(--ui-surface-2);
    --bs-list-group-action-hover-color: var(--ui-text);
    --bs-list-group-action-active-bg: var(--ui-surface-2);
    --bs-list-group-active-bg: var(--ui-accent);
    --bs-list-group-active-border-color: var(--ui-accent);
    --bs-list-group-active-color: var(--ui-on-accent);
}

.table > :not(caption) > * > * { padding: 0.8rem 0.9rem; }
:root:root .table {
    --bs-table-border-color: var(--ui-border-soft);
    --bs-table-hover-bg: color-mix(in srgb, var(--ui-accent) 6%, transparent);
    --bs-table-striped-bg: color-mix(in srgb, var(--ui-surface-2) 70%, transparent);
}
.table > thead > tr > th {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    border-bottom-width: 1px;
}

/* ============================================================
 * 7. Пагинация
 * ============================================================ */
.pagination { gap: 0.35rem; --bs-pagination-border-radius: 10px; }
.pagination .page-item .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: 10px;
    margin-left: 0;
    padding: 0.45rem 0.85rem;
    font-weight: 500;
    transition: background-color .2s, border-color .2s, color .2s;
}
:root:root .pagination {
    --bs-pagination-bg: var(--ui-surface);
    --bs-pagination-color: var(--ui-text);
    --bs-pagination-border-color: var(--ui-border);
    --bs-pagination-hover-bg: var(--ui-surface-2);
    --bs-pagination-hover-color: var(--ui-text);
    --bs-pagination-hover-border-color: color-mix(in srgb, var(--ui-muted) 55%, var(--ui-border));
    --bs-pagination-focus-bg: var(--ui-surface-2);
    --bs-pagination-focus-color: var(--ui-text);
    --bs-pagination-focus-box-shadow: 0 0 0 .22rem var(--ui-ring);
    --bs-pagination-active-bg: var(--ui-accent);
    --bs-pagination-active-color: var(--ui-on-accent);
    --bs-pagination-active-border-color: var(--ui-accent);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--ui-muted);
    --bs-pagination-disabled-border-color: var(--ui-border-soft);
}

/* ============================================================
 * 8. Прогресс, тосты
 * ============================================================ */
.progress {
    --bs-progress-height: 0.6rem;
    --bs-progress-border-radius: var(--ui-r-pill);
}
:root:root .progress {
    --bs-progress-bg: var(--ui-surface-2);
    --bs-progress-bar-bg: var(--ui-accent);
}
.toast {
    --bs-toast-border-radius: var(--ui-r-md);
    --bs-toast-padding-x: 1rem;
    --bs-toast-padding-y: 0.75rem;
}
:root:root .toast {
    --bs-toast-bg: var(--ui-surface);
    --bs-toast-color: var(--ui-text);
    --bs-toast-border-color: var(--ui-border);
}
:root:root .toast-header {
    background-color: transparent;
    color: var(--ui-text);
    border-color: var(--ui-border-soft);
}