/* --- ui/button.css: БЛОК 2 — базовые элементы ----------------------------
   Шесть видов кнопки: основная, вторичная, тихая, опасная, только-иконка,
   мелкая. Пять состояний: обычное, наведение, фокус, неактивная, в процессе.

   Раздел не объявляет своих кнопок. Нужен вид, которого здесь нет, — он
   добавляется сюда, а не рядом.

   ЧТО ИСПРАВЛЕНО ПРОТИВ СТАРОГО .btn (это одна из двух причин задачи):
   у старой кнопки было ДВА декоративных слоя — :after с непрозрачной заливкой
   под содержимым и :before с заливкой при наведении. Из-за :after кнопка
   оставалась плотной при любой попытке приглушить её, поэтому неактивная
   выглядела рабочей — замечание визуальной приёмки задачи «График работы».
   Здесь :after убран совсем: фон рисует сам элемент, :before остался только
   ради наплыва при наведении. Приглушение теперь работает как ожидается.
   ------------------------------------------------------------------------ */

.ui-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-3);
    box-sizing: border-box;
    min-height: var(--ui-control-h);
    padding: 10px 24px;
    border: none;
    border-radius: var(--ui-radius-pill);
    overflow: hidden;
    font-family: var(--ui-font-ui);
    font-size: var(--ui-text-lg);
    font-weight: var(--ui-weight-bold);
    line-height: var(--ui-line-tight);
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    color: var(--ui-color-ink-invert);
    background-color: var(--ui-color-graphite);
    transition: background-color var(--ui-dur-base), color var(--ui-dur-base),
                opacity var(--ui-dur-fast), transform var(--ui-dur-fast);
}

/* Наплыв при наведении: растёт слева направо, лежит над фоном элемента и под
   его содержимым. */
.ui-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background-color: var(--ui-color-graphite-deep);
    transition: width var(--ui-dur-base);
}

.ui-btn:hover::before { width: 100%; }
.ui-btn:active { transform: scale(.97); }

/* Фокус виден только с клавиатуры — синий, как весь интерактив проекта. */
.ui-btn:focus-visible {
    outline: 2px solid var(--ui-color-accent);
    outline-offset: 2px;
}

.ui-btn .fa, .ui-btn .fas, .ui-btn .far, .ui-btn i { font-size: var(--ui-icon-sm); }

/* ----- Вид: вторичная ---------------------------------------------------- */
.ui-btn--secondary { background-color: var(--ui-color-slate); }
.ui-btn--secondary::before { background-color: var(--ui-color-slate-deep); }

/* ----- Вид: опасная ------------------------------------------------------
   Только для необратимых действий. Кнопка «Удалить» в списке — это не опасная
   кнопка, а кнопка-иконка: опасной становится подтверждение. */
.ui-btn--danger { background-color: var(--ui-color-danger); }
.ui-btn--danger::before { background-color: var(--ui-color-danger-deep); }

/* ----- Вид: тихая --------------------------------------------------------
   Без заливки, для второстепенных действий рядом с основным («Отмена»). */
.ui-btn--ghost {
    background-color: transparent;
    color: var(--ui-color-ink-soft);
    border: 1px solid var(--ui-color-line-strong);
}
.ui-btn--ghost::before { background-color: rgba(96, 112, 148, .12); }
.ui-btn--ghost:hover { color: var(--ui-color-ink); }

/* ----- Вид: только иконка ------------------------------------------------
   Квадратная, без текста. Высота совпадает с текстовой кнопкой рядом. */
.ui-btn--icon {
    width: var(--ui-control-h);
    min-height: var(--ui-control-h);
    padding: 0;
    border-radius: var(--ui-radius-sm);
    background-color: transparent;
    color: var(--ui-color-ink-soft);
}
.ui-btn--icon::before { background-color: rgba(96, 112, 148, .12); }
.ui-btn--icon:hover { color: var(--ui-color-ink); }
.ui-btn--icon .fa, .ui-btn--icon .fas, .ui-btn--icon .far, .ui-btn--icon i {
    font-size: var(--ui-icon-md);
}

/* Иконка опасного действия — красная. Без этого правила сочетание
   `ui-btn--icon ui-btn--danger` не давало красного НИ В ОДНОМ состоянии:
   вид «только иконка» объявлен ниже и перекрывал у опасного и фон, и цвет,
   так что кнопка удаления выглядела обычной серой (открытый пункт вердикта,
   решение владельца от 19.08.2026 — чинить).

   Красный здесь в цвете значка, а не в заливке: залитая красным иконка в
   строке таблицы кричит громче, чем действие того стоит, — заливка остаётся
   за текстовой кнопкой в окне подтверждения.

   РАСХОЖДЕНИЕ С ПРЕЖНИМ РЕШЕНИЕМ, НАЗЫВАЮ ЯВНО (находка ревизора Р1). При
   редизайне «Сотрудников» было принято обратное: значок нейтральный, красный
   ТОЛЬКО на наведении — потому что восемь красных значков столбцом читаются
   как сплошной алярм. Здесь красный в покое, и это осознанно: решение
   владельца от 19.08.2026 звучало как «опасное должно быть заметно», а
   заметность на наведении не работает — курсор наводят уже после того, как
   выбрали кнопку.
   Дизайн-сессия видела результат на списке «Скриптов» (заход 3) и приняла.
   Захочет вернуть наведение — правится этими же тремя строками. */
.ui-btn--icon.ui-btn--danger {
    background-color: transparent;
    color: var(--ui-color-danger);
}
.ui-btn--icon.ui-btn--danger::before { background-color: var(--ui-color-danger-wash); }
.ui-btn--icon.ui-btn--danger:hover { color: var(--ui-color-danger-deep); }

/* ----- Вид: мелкая -------------------------------------------------------- */
.ui-btn--sm {
    min-height: var(--ui-control-h-sm);
    padding: 6px 16px;
    font-size: var(--ui-text-sm);
}
.ui-btn--sm.ui-btn--icon { width: var(--ui-control-h-sm); padding: 0; }
.ui-btn--sm .fa, .ui-btn--sm .fas, .ui-btn--sm .far, .ui-btn--sm i {
    font-size: var(--ui-icon-sm);
}

/* ----- Состояние: неактивная ---------------------------------------------
   Обязана читаться как неактивная. Одного атрибута disabled мало — это уже
   стоило проекту круга приёмки. Приглушение + курсор «нельзя» + отключённый
   наплыв при наведении. */
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(.35);
}
.ui-btn:disabled::before,
.ui-btn[aria-disabled="true"]::before { width: 0; }
.ui-btn:disabled:active,
.ui-btn[aria-disabled="true"]:active { transform: none; }

/* ----- Состояние: в процессе ---------------------------------------------
   Кнопка нажата, ответ ещё не пришёл. Содержимое остаётся на месте (иначе
   кнопка прыгает в ширине), поверх — крутящийся ободок. Ставится классом
   is-busy; вместе с ним обязателен disabled, иначе действие уйдёт дважды. */
.ui-btn.is-busy {
    cursor: progress;
    color: transparent;
}
.ui-btn.is-busy::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ui-icon-md);
    height: var(--ui-icon-md);
    margin: calc(var(--ui-icon-md) / -2) 0 0 calc(var(--ui-icon-md) / -2);
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: var(--ui-color-ink-invert);
    border-radius: 50%;
    animation: ui-btn-spin .7s linear infinite;
}
.ui-btn--ghost.is-busy::after,
.ui-btn--icon.is-busy::after {
    border-color: rgba(96, 112, 148, .35);
    border-top-color: var(--ui-color-ink-soft);
}

@keyframes ui-btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ui-btn, .ui-btn::before { transition: none; }
    .ui-btn.is-busy::after { animation-duration: 2s; }
}

/* ----- Группа кнопок ------------------------------------------------------ */
.ui-btn-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-4);
}
.ui-btn-row--end { justify-content: flex-end; }