/*
 * Единые кольца фокуса (клавиатура / :focus-visible).
 * Новые компоненты — через эти переменные, без дублирования outline в каждом файле.
 */

:root {
    --crm-focus-outline-width: 2px;
    --crm-focus-outline-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.55);
    --crm-focus-outline-offset: 2px;
    --crm-focus-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.18);
}

/* Таблицы дашборда / ЗН: статус, категория */
.table tbody button.status-select-btn:focus-visible,
.table tbody select.form-select.status-select:focus-visible,
.table tbody select.form-select.category-select:focus-visible {
    outline: var(--crm-focus-outline-width) solid var(--crm-focus-outline-color);
    outline-offset: var(--crm-focus-outline-offset);
    box-shadow: var(--crm-focus-shadow);
}

.table tbody .choices.choices--table-cell:focus-within .choices__inner,
.table tbody .choices.choices--table-cell .choices__inner:focus-visible {
    outline: var(--crm-focus-outline-width) solid var(--crm-focus-outline-color);
    outline-offset: var(--crm-focus-outline-offset);
    box-shadow: var(--crm-focus-shadow);
}

/* Фильтры, чипы, вкладки workspace */
.wo-filter-chip:focus-visible,
.crm-workspace-tab:focus-visible,
#myTab .nav-link:focus-visible,
.nav-tabs .nav-link:focus-visible {
    outline: var(--crm-focus-outline-width) solid var(--crm-focus-outline-color);
    outline-offset: var(--crm-focus-outline-offset);
    box-shadow: var(--crm-focus-shadow);
}

/* Канбан: карточка заявки */
.dashboard-kanban-card:focus-visible,
.dashboard-kanban-card__badge-btn:focus-visible {
    outline: var(--crm-focus-outline-width) solid var(--crm-focus-outline-color);
    outline-offset: var(--crm-focus-outline-offset);
    box-shadow: var(--crm-focus-shadow);
}

/* Поля форм CRM — усиление поверх Bootstrap */
.crm-dashboard-page .form-control:focus-visible,
.crm-dashboard-page .form-select:focus-visible,
.work-orders-page .form-control:focus-visible,
.work-orders-page .form-select:focus-visible,
.money-page .form-control:focus-visible,
.money-page .form-select:focus-visible {
    outline: var(--crm-focus-outline-width) solid var(--crm-focus-outline-color);
    outline-offset: var(--crm-focus-outline-offset);
    border-color: color-mix(in srgb, var(--bs-border-color) 45%, rgba(var(--bs-primary-rgb), 0.6) 55%);
    box-shadow: var(--crm-focus-shadow);
}

.btn:focus-visible:not(.btn-link) {
    outline: var(--crm-focus-outline-width) solid var(--crm-focus-outline-color);
    outline-offset: var(--crm-focus-outline-offset);
    box-shadow: var(--crm-focus-shadow);
}