/**
 * Theme Components - Component Overrides
 * 
 * CSS правила для переопределения компонентов Bootstrap
 * Только необходимые изменения, минимум кода
 * 
 * Философия: минимализм, без декоративных эффектов
 * Используем токены из theme-tokens.css
 * 
 * Микро-отклики (subtle micro-interactions):
 * - Кнопки: translateY(-1px) при hover
 * - Интерактивные карточки (a.card, .card-clickable): lift + тень при hover
 * - Формы: легкий подъём при фокусе
 * - Dropdown/List items: сдвиг вправо при hover
 * - Close button: поворот на 90° при hover
 * - Все анимации: 0.15s ease (быстрые и незаметные)
 * 
 * Большие контейнерные карточки, таблицы, фильтры — без hover-эффектов
 */

/* ========================================
   Bootstrap CSS Variables Override
   Связываем компонентные переменные с глобальными токенами
   ======================================== */

/* Buttons */
.btn {
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Button Variants - Связываем с токенами */
.btn-primary {
  --bs-btn-color: var(--bs-btn-color-light);
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-btn-color-light);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--bs-btn-color-light);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-btn-color-light);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
  --bs-btn-color: var(--bs-btn-color-light);
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--bs-btn-color-light);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-color: var(--bs-btn-color-light);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-btn-color-light);
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-success {
  --bs-btn-color: var(--bs-btn-color-light);
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: var(--bs-btn-color-light);
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-color: var(--bs-btn-color-light);
  --bs-btn-active-bg: var(--bs-success);
  --bs-btn-active-border-color: var(--bs-success);
  --bs-btn-disabled-color: var(--bs-btn-color-light);
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}

.btn-danger {
  --bs-btn-color: var(--bs-btn-color-light);
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: var(--bs-btn-color-light);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-color: var(--bs-btn-color-light);
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-color: var(--bs-btn-color-light);
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}

.btn-warning {
  --bs-btn-color: var(--bs-btn-color-dark);
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: var(--bs-btn-color-dark);
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-active-color: var(--bs-btn-color-dark);
  --bs-btn-active-bg: var(--bs-warning);
  --bs-btn-active-border-color: var(--bs-warning);
  --bs-btn-disabled-color: var(--bs-btn-color-dark);
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-info {
  --bs-btn-color: var(--bs-btn-color-dark);
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: var(--bs-btn-color-dark);
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-active-color: var(--bs-btn-color-dark);
  --bs-btn-active-bg: var(--bs-info);
  --bs-btn-active-border-color: var(--bs-info);
  --bs-btn-disabled-color: var(--bs-btn-color-dark);
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
}

.btn-light {
  --bs-btn-color: var(--bs-btn-color-dark);
  --bs-btn-bg: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--bs-btn-color-dark);
  --bs-btn-hover-bg: var(--bs-light);
  --bs-btn-hover-border-color: var(--bs-light);
  --bs-btn-active-color: var(--bs-btn-color-dark);
  --bs-btn-active-bg: var(--bs-light);
  --bs-btn-active-border-color: var(--bs-light);
  --bs-btn-disabled-color: var(--bs-btn-color-dark);
  --bs-btn-disabled-bg: var(--bs-light);
  --bs-btn-disabled-border-color: var(--bs-light);
}

.btn-dark {
  --bs-btn-color: var(--bs-btn-color-light);
  --bs-btn-bg: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color: var(--bs-btn-color-light);
  --bs-btn-hover-bg: var(--bs-dark);
  --bs-btn-hover-border-color: var(--bs-dark);
  --bs-btn-active-color: var(--bs-btn-color-light);
  --bs-btn-active-bg: var(--bs-dark);
  --bs-btn-active-border-color: var(--bs-dark);
  --bs-btn-disabled-color: var(--bs-btn-color-light);
  --bs-btn-disabled-bg: var(--bs-dark);
  --bs-btn-disabled-border-color: var(--bs-dark);
}

/* Outline Buttons - Связываем с токенами */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-btn-color-light);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--bs-btn-color-light);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--bs-btn-color-light);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-color: var(--bs-btn-color-light);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

.btn-outline-success {
  --bs-btn-color: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: var(--bs-btn-color-light);
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-color: var(--bs-btn-color-light);
  --bs-btn-active-bg: var(--bs-success);
  --bs-btn-active-border-color: var(--bs-success);
  --bs-btn-disabled-color: var(--bs-success);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: var(--bs-btn-color-light);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-color: var(--bs-btn-color-light);
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-color: var(--bs-danger);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

.btn-outline-warning {
  --bs-btn-color: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: var(--bs-btn-color-dark);
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-active-color: var(--bs-btn-color-dark);
  --bs-btn-active-bg: var(--bs-warning);
  --bs-btn-active-border-color: var(--bs-warning);
  --bs-btn-disabled-color: var(--bs-warning);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}

.btn-outline-info {
  --bs-btn-color: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: var(--bs-btn-color-dark);
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-active-color: var(--bs-btn-color-dark);
  --bs-btn-active-bg: var(--bs-info);
  --bs-btn-active-border-color: var(--bs-info);
  --bs-btn-disabled-color: var(--bs-info);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
}

.btn-outline-light {
  --bs-btn-color: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--bs-btn-color-dark);
  --bs-btn-hover-bg: var(--bs-light);
  --bs-btn-hover-border-color: var(--bs-light);
  --bs-btn-active-color: var(--bs-btn-color-dark);
  --bs-btn-active-bg: var(--bs-light);
  --bs-btn-active-border-color: var(--bs-light);
  --bs-btn-disabled-color: var(--bs-light);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
}

.btn-outline-dark {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color: var(--bs-btn-color-light);
  --bs-btn-hover-bg: var(--bs-dark);
  --bs-btn-hover-border-color: var(--bs-dark);
  --bs-btn-active-color: var(--bs-btn-color-light);
  --bs-btn-active-bg: var(--bs-dark);
  --bs-btn-active-border-color: var(--bs-dark);
  --bs-btn-disabled-color: var(--bs-dark);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
}

/* Cards */
.card {
  --bs-card-border-radius: var(--bs-border-radius-lg);
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-box-shadow: var(--bs-box-shadow-sm);
}

/* Card Headers */
.card-header {
  --bs-card-cap-bg: var(--bs-secondary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

.card-header.bg-primary {
  --bs-card-cap-bg: var(--bs-primary);
  color: var(--bs-btn-color-light);
}

.card-header.bg-secondary {
  --bs-card-cap-bg: var(--bs-secondary);
  color: var(--bs-btn-color-light);
}

.card-header.bg-success {
  --bs-card-cap-bg: var(--bs-success);
  color: var(--bs-btn-color-light);
}

.card-header.bg-danger {
  --bs-card-cap-bg: var(--bs-danger);
  color: var(--bs-btn-color-light);
}

.card-header.bg-warning {
  --bs-card-cap-bg: var(--bs-warning);
  color: var(--bs-btn-color-dark);
}

.card-header.bg-info {
  --bs-card-cap-bg: var(--bs-info);
  color: var(--bs-btn-color-light);
}

/* Forms */
.form-control {
  border-radius: 0.5rem !important;
}

.form-select {
  border-radius: 0.5rem !important;
}

/* Микро-отклик при фокусе на формах */
.form-control:focus,
.form-select:focus {
  transform: translateY(-1px);
}

.form-check-input:hover:not(:disabled):not(:checked) {
  transform: scale(1.05);
}

.form-check-input {
  transition: transform 0.15s ease, 
              border-color 0.15s ease, 
              background-color 0.15s ease;
}

/* Form Validation */
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--bs-success);
  --bs-form-valid-border-color: var(--bs-success);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--bs-danger);
  --bs-form-invalid-border-color: var(--bs-danger);
}

.valid-feedback {
  color: var(--bs-success);
}

.invalid-feedback {
  color: var(--bs-danger);
}

.form-check-input.is-valid {
  border-color: var(--bs-success);
}

.form-check-input.is-invalid {
  border-color: var(--bs-danger);
}

/* Input Groups */
.input-group {
  border-radius: 0.5rem;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn {
  border-radius: 0.5rem !important;
}

.input-group > :not(:first-child) {
  margin-left: -1px;
}

.input-group > :first-child {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}

.input-group > :last-child {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

/* Modals */
.modal-content {
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-border-color: var(--bs-border-color);
  --bs-modal-box-shadow: var(--bs-box-shadow-lg);
}

/* Dropdowns */
.dropdown-menu {
  --bs-dropdown-border-radius: var(--bs-border-radius);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-box-shadow: var(--bs-box-shadow-lg);
}

.dropdown-item {
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
  --bs-dropdown-link-hover-bg: var(--bs-secondary-bg);
  --bs-dropdown-link-active-color: var(--bs-btn-color-light);
  --bs-dropdown-link-active-bg: var(--bs-primary);
}

.dropdown-divider {
  border-top: 1px solid var(--bs-border-color);
}

/* Popovers */
.popover {
  --bs-popover-border-radius: var(--bs-border-radius);
  --bs-popover-border-color: var(--bs-border-color);
  --bs-popover-box-shadow: var(--bs-box-shadow-lg);
}

/* Tooltips */
.tooltip {
  --bs-tooltip-border-radius: var(--bs-border-radius);
}

/* Toasts */
.toast {
  --bs-toast-border-radius: var(--bs-border-radius);
  --bs-toast-border-color: var(--bs-border-color);
  --bs-toast-box-shadow: var(--bs-box-shadow-lg);
}

/* Alerts */
.alert {
  --bs-alert-border-radius: var(--bs-border-radius);
}

/* Alert Variants - Связываем с токенами */
.alert-primary {
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
}

.alert-secondary {
  --bs-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-alert-color: var(--bs-secondary-text-emphasis);
  --bs-alert-border-color: var(--bs-secondary-border-subtle);
}

.alert-success {
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-color: var(--bs-success-text-emphasis);
  --bs-alert-border-color: var(--bs-success-border-subtle);
}

.alert-danger {
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-color: var(--bs-danger-text-emphasis);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
}

.alert-warning {
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-color: var(--bs-warning-text-emphasis);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
}

.alert-info {
  --bs-alert-bg: var(--bs-info-bg-subtle);
  --bs-alert-color: var(--bs-info-text-emphasis);
  --bs-alert-border-color: var(--bs-info-border-subtle);
}

.alert-light {
  --bs-alert-bg: var(--bs-light-bg-subtle);
  --bs-alert-color: var(--bs-light-text-emphasis);
  --bs-alert-border-color: var(--bs-light-border-subtle);
}

.alert-dark {
  --bs-alert-bg: var(--bs-dark-bg-subtle);
  --bs-alert-color: var(--bs-dark-text-emphasis);
  --bs-alert-border-color: var(--bs-dark-border-subtle);
}

/* List Groups */
.list-group {
  --bs-list-group-border-radius: var(--bs-border-radius);
}

.list-group-item {
  --bs-list-group-border-color: var(--bs-border-color);
}

/* List Group Item Variants - Связываем с токенами */
.list-group-item-primary {
  --bs-list-group-color: var(--bs-primary-text-emphasis);
  --bs-list-group-bg: var(--bs-primary-bg-subtle);
  --bs-list-group-border-color: var(--bs-primary-border-subtle);
}

.list-group-item-secondary {
  --bs-list-group-color: var(--bs-secondary-text-emphasis);
  --bs-list-group-bg: var(--bs-secondary-bg-subtle);
  --bs-list-group-border-color: var(--bs-secondary-border-subtle);
}

.list-group-item-success {
  --bs-list-group-color: var(--bs-success-text-emphasis);
  --bs-list-group-bg: var(--bs-success-bg-subtle);
  --bs-list-group-border-color: var(--bs-success-border-subtle);
}

.list-group-item-danger {
  --bs-list-group-color: var(--bs-danger-text-emphasis);
  --bs-list-group-bg: var(--bs-danger-bg-subtle);
  --bs-list-group-border-color: var(--bs-danger-border-subtle);
}

.list-group-item-warning {
  --bs-list-group-color: var(--bs-warning-text-emphasis);
  --bs-list-group-bg: var(--bs-warning-bg-subtle);
  --bs-list-group-border-color: var(--bs-warning-border-subtle);
}

.list-group-item-info {
  --bs-list-group-color: var(--bs-info-text-emphasis);
  --bs-list-group-bg: var(--bs-info-bg-subtle);
  --bs-list-group-border-color: var(--bs-info-border-subtle);
}

.list-group-item-light {
  --bs-list-group-color: var(--bs-light-text-emphasis);
  --bs-list-group-bg: var(--bs-light-bg-subtle);
  --bs-list-group-border-color: var(--bs-light-border-subtle);
}

.list-group-item-dark {
  --bs-list-group-color: var(--bs-dark-text-emphasis);
  --bs-list-group-bg: var(--bs-dark-bg-subtle);
  --bs-list-group-border-color: var(--bs-dark-border-subtle);
}

/* Микро-отклики для интерактивных list-group элементов */
.list-group-item-action:hover {
  transform: translateX(2px);
}

.list-group-item-action:active {
  transform: translateX(0);
}

/* Navs */
.nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
}

.nav-link {
  --bs-nav-link-color: var(--bs-body-color);
  --bs-nav-link-hover-color: var(--bs-primary);
}

/* Микро-отклик для nav-links */
.nav-pills .nav-link:hover:not(.active) {
  transform: translateY(-1px);
}

.nav-pills .nav-link.active {
  transform: scale(1.02);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-link-hover-border-color: var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color);
}

/* Pagination */
.pagination {
  --bs-pagination-border-radius: var(--bs-border-radius);
}

.page-link {
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
}

.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Микро-отклик для пагинации */
.page-link:hover:not(.active) {
  transform: translateY(-1px);
}

/* Badges */
.badge {
  --bs-badge-border-radius: var(--bs-border-radius);
}

/* Badge Variants - Связываем с токенами */
.badge.text-bg-primary {
  --bs-badge-color: var(--bs-btn-color-light);
  --bs-badge-bg: var(--bs-primary);
}

.badge.text-bg-secondary {
  --bs-badge-color: var(--bs-btn-color-light);
  --bs-badge-bg: var(--bs-secondary);
}

.badge.text-bg-success {
  --bs-badge-color: var(--bs-btn-color-light);
  --bs-badge-bg: var(--bs-success);
}

.badge.text-bg-danger {
  --bs-badge-color: var(--bs-btn-color-light);
  --bs-badge-bg: var(--bs-danger);
}

.badge.text-bg-warning {
  --bs-badge-color: var(--bs-btn-color-dark);
  --bs-badge-bg: var(--bs-warning);
}

.badge.text-bg-info {
  --bs-badge-color: var(--bs-btn-color-light);
  --bs-badge-bg: var(--bs-info);
}

.badge.text-bg-light {
  --bs-badge-color: var(--bs-btn-color-dark);
  --bs-badge-bg: var(--bs-light);
}

.badge.text-bg-dark {
  --bs-badge-color: var(--bs-btn-color-light);
  --bs-badge-bg: var(--bs-dark);
}

/* Progress */
.progress {
  --bs-progress-border-radius: var(--bs-border-radius-pill);
  --bs-progress-bg: var(--bs-secondary-bg);
}

/* Progress Bar Variants - Связываем с токенами */
.progress-bar {
  --bs-progress-bar-bg: var(--bs-primary);
}

.progress-bar.bg-success {
  --bs-progress-bar-bg: var(--bs-success);
}

.progress-bar.bg-info {
  --bs-progress-bar-bg: var(--bs-info);
}

.progress-bar.bg-warning {
  --bs-progress-bar-bg: var(--bs-warning);
}

.progress-bar.bg-danger {
  --bs-progress-bar-bg: var(--bs-danger);
}

/* Breadcrumbs */
.breadcrumb {
  --bs-breadcrumb-bg: var(--bs-secondary-bg);
  --bs-breadcrumb-border-radius: var(--bs-border-radius);
}

/* Accordion */
.accordion {
  --bs-accordion-border-radius: var(--bs-border-radius);
  --bs-accordion-border-color: var(--bs-border-color);
}

/* Offcanvas */
.offcanvas {
  --bs-offcanvas-border-color: var(--bs-border-color);
  --bs-offcanvas-box-shadow: var(--bs-box-shadow-lg);
}

/* ========================================
   Transitions - Точечные, оптимизированные
   ======================================== */

/* Интерактивные элементы */
.btn,
.nav-link,
.dropdown-item,
.list-group-item,
.page-link,
.accordion-button,
.alert.alert-dismissible,
#theme-toggle-mobile,
#theme-toggle-desktop {
  transition: background-color 0.15s ease, 
              border-color 0.15s ease, 
              color 0.15s ease,
              box-shadow 0.15s ease,
              transform 0.15s ease;
}

/* Формы - быстрые переходы */
.form-control,
.form-select,
.form-check-input {
  transition: border-color 0.15s ease, 
              box-shadow 0.15s ease,
              transform 0.15s ease;
}

/* Интерактивные карточки (ссылки, кликабельные) */
a.card,
.card.card-clickable {
  transition: transform 0.2s ease, 
              box-shadow 0.2s ease;
}

/* Модальные окна и оверлеи */
.modal,
.offcanvas,
.toast {
  transition: opacity 0.15s ease;
}

/* ========================================
   Typography - Улучшенная читаемость
   ======================================== */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ========================================
   Focus - Доступность
   ======================================== */

/* Показываем outline только при навигации с клавиатуры */
:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Убираем outline для мыши */
:focus:not(:focus-visible) {
  outline: none;
}

/* ========================================
   Buttons - Минималистичные кнопки
   ======================================== */

.btn {
  font-weight: 500;
}

/* Микро-отклики для кнопок */
.btn:hover:not(:disabled):not(.disabled) {
  transform: translateY(-1px);
}

.btn:active:not(:disabled):not(.disabled) {
  transform: translateY(0);
}

/* Button Groups */
.btn-group {
  --bs-btn-border-radius: var(--bs-border-radius);
}

/* Button Link */
.btn-link {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-active-color: var(--bs-link-hover-color);
}

/* Button Icon - Layout helper для кнопок-иконок без текста */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--bs-border-radius);
  background: transparent;
  border: none;
  color: var(--bs-body-color);
}

.btn-icon.btn-sm {
  width: 2rem;
  height: 2rem;
}

.btn-icon.btn-lg {
  width: 3rem;
  height: 3rem;
}

/* Тонкий hover-эффект для чистых кнопок-иконок */
.btn-icon:hover {
  background-color: var(--bs-secondary-bg);
}

.btn-icon:active {
  background-color: var(--bs-tertiary-bg);
}

/* ========================================
   Cards - Строгие карточки
   ======================================== */

/* Все стили карточек определены через переменные выше */

/* Микро-отклики только для интерактивных карточек */
a.card:hover,
.card.card-clickable:hover {
  cursor: pointer;
  transform: translateY(-2px);
  border-color: var(--bs-primary);
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
}

/* ========================================
   Navigation - Чистая навигация
   ======================================== */

.navbar {
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

/* ========================================
   Tables - Улучшенная читаемость
   ======================================== */

.table {
  --bs-table-border-color: var(--bs-border-color);
}

.table > :not(caption) > * > * {
  padding: 0.75rem;
}

/* Table Dark */
.table-dark {
  --bs-table-color: var(--bs-btn-color-light);
  --bs-table-bg: var(--bs-dark);
  --bs-table-border-color: rgba(255, 255, 255, 0.1);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
}

thead.table-dark {
  --bs-table-bg: var(--bs-dark);
  color: var(--bs-btn-color-light);
}

/* Table Striped */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
}

/* Table Hover */
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
}

/* Table Variants - Связываем с токенами */
.table-primary {
  --bs-table-color: var(--bs-primary-text-emphasis);
  --bs-table-bg: var(--bs-primary-bg-subtle);
  --bs-table-border-color: var(--bs-primary-border-subtle);
}

.table-secondary {
  --bs-table-color: var(--bs-secondary-text-emphasis);
  --bs-table-bg: var(--bs-secondary-bg-subtle);
  --bs-table-border-color: var(--bs-secondary-border-subtle);
}

.table-success {
  --bs-table-color: var(--bs-success-text-emphasis);
  --bs-table-bg: var(--bs-success-bg-subtle);
  --bs-table-border-color: var(--bs-success-border-subtle);
}

.table-danger {
  --bs-table-color: var(--bs-danger-text-emphasis);
  --bs-table-bg: var(--bs-danger-bg-subtle);
  --bs-table-border-color: var(--bs-danger-border-subtle);
}

.table-warning {
  --bs-table-color: var(--bs-warning-text-emphasis);
  --bs-table-bg: var(--bs-warning-bg-subtle);
  --bs-table-border-color: var(--bs-warning-border-subtle);
}

.table-info {
  --bs-table-color: var(--bs-info-text-emphasis);
  --bs-table-bg: var(--bs-info-bg-subtle);
  --bs-table-border-color: var(--bs-info-border-subtle);
}

.table-light {
  --bs-table-color: var(--bs-light-text-emphasis);
  --bs-table-bg: var(--bs-light-bg-subtle);
  --bs-table-border-color: var(--bs-light-border-subtle);
}

.table-dark {
  --bs-table-color: var(--bs-dark-text-emphasis);
  --bs-table-bg: var(--bs-dark-bg-subtle);
  --bs-table-border-color: var(--bs-dark-border-subtle);
}

/* Для тёмной темы - совсем тонкий hover, чтобы не было "грязи" */

/* ========================================
   Modals - Модальные окна
   ======================================== */

/* Все стили модальных окон определены через переменные выше */

/* Close Button */
.btn-close {
  --bs-btn-close-color: var(--bs-body-color);
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-opacity: 1;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-close:hover {
  transform: rotate(90deg);
}

/* ========================================
   Dropdowns - Выпадающие меню
   ======================================== */

/* Все стили выпадающих меню определены через переменные выше */

/* Dropdown Items - тонкая подсветка при наведении */
.dropdown-item:hover,
.dropdown-item:focus {
  transform: translateX(2px);
}

/* ========================================
   Accordion - Аккордеоны
   ======================================== */

.accordion-button:not(.collapsed) {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-primary);
}

/* Микро-отклик для аккордеона */
.accordion-button:hover {
  transform: translateX(2px);
}

.accordion-button::after {
  transition: transform 0.2s ease;
}

/* ========================================
   Alerts - Уведомления
   ======================================== */

.alert {
  border-left-width: 4px;
}

/* ========================================
   Badges - Бейджи
   ======================================== */

.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
  transition: transform 0.15s ease;
}

/* Микро-пульсация для важных бейджей */
.badge.pulse {
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}

/* ========================================
   Breadcrumbs - Хлебные крошки
   ======================================== */

/* Все стили хлебных крошек определены через переменные выше */

/* ========================================
   Progress Bars - Прогресс-бары
   ======================================== */

/* Все стили прогресс-баров определены через переменные выше */

/* ========================================
   Toasts - Всплывающие уведомления
   ======================================== */

/* Все стили всплывающих уведомлений определены через переменные выше */

/* ========================================
   Spinners - Индикаторы загрузки
   ======================================== */

.spinner-border,
.spinner-grow {
  vertical-align: middle;
}

/* Spinner Variants - Связываем с токенами */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--bs-primary) !important;
}

.spinner-border.text-secondary,
.spinner-grow.text-secondary {
  color: var(--bs-secondary) !important;
}

.spinner-border.text-success,
.spinner-grow.text-success {
  color: var(--bs-success) !important;
}

.spinner-border.text-danger,
.spinner-grow.text-danger {
  color: var(--bs-danger) !important;
}

.spinner-border.text-warning,
.spinner-grow.text-warning {
  color: var(--bs-warning) !important;
}

.spinner-border.text-info,
.spinner-grow.text-info {
  color: var(--bs-info) !important;
}

/* ========================================
   Utility Classes - Text/BG/Border Colors
   ======================================== */

/* Микро-анимации при загрузке элементов */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Утилита для плавного появления */
.fade-in-up {
  animation: fadeInUp 0.3s ease-out;
}

/* Утилита для hover-эффекта на ссылках */
a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  text-decoration-thickness: 2px;
}

/* Text Colors */
.text-primary {
  color: var(--bs-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.text-success {
  color: var(--bs-success) !important;
}

.text-danger {
  color: var(--bs-danger) !important;
}

.text-warning {
  color: var(--bs-warning) !important;
}

.text-info {
  color: var(--bs-info) !important;
}

.text-light {
  color: var(--bs-light) !important;
}

.text-dark {
  color: var(--bs-dark) !important;
}

/* Text Emphasis Colors */
.text-primary-emphasis {
  color: var(--bs-primary-text-emphasis) !important;
}

.text-secondary-emphasis {
  color: var(--bs-secondary-text-emphasis) !important;
}

.text-success-emphasis {
  color: var(--bs-success-text-emphasis) !important;
}

.text-danger-emphasis {
  color: var(--bs-danger-text-emphasis) !important;
}

.text-warning-emphasis {
  color: var(--bs-warning-text-emphasis) !important;
}

.text-info-emphasis {
  color: var(--bs-info-text-emphasis) !important;
}

.text-light-emphasis {
  color: var(--bs-light-text-emphasis) !important;
}

.text-dark-emphasis {
  color: var(--bs-dark-text-emphasis) !important;
}

/* Text Body Colors */
.text-body {
  color: var(--bs-body-color) !important;
}

.text-body-emphasis {
  color: var(--bs-emphasis-color) !important;
}

.text-body-secondary {
  color: var(--bs-secondary-color) !important;
}

.text-muted {
  color: var(--bs-secondary-color) !important;
}

/* Background Colors */
.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.bg-success {
  background-color: var(--bs-success) !important;
}

.bg-danger {
  background-color: var(--bs-danger) !important;
}

.bg-warning {
  background-color: var(--bs-warning) !important;
}

.bg-info {
  background-color: var(--bs-info) !important;
}

.bg-light {
  background-color: var(--bs-light) !important;
}

.bg-dark {
  background-color: var(--bs-dark) !important;
}

/* Background Subtle Colors */
.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
}

.bg-secondary-subtle {
  background-color: var(--bs-secondary-bg-subtle) !important;
}

.bg-success-subtle {
  background-color: var(--bs-success-bg-subtle) !important;
}

.bg-danger-subtle {
  background-color: var(--bs-danger-bg-subtle) !important;
}

.bg-warning-subtle {
  background-color: var(--bs-warning-bg-subtle) !important;
}

.bg-info-subtle {
  background-color: var(--bs-info-bg-subtle) !important;
}

.bg-light-subtle {
  background-color: var(--bs-light-bg-subtle) !important;
}

.bg-dark-subtle {
  background-color: var(--bs-dark-bg-subtle) !important;
}

.bg-body-secondary {
  background-color: var(--bs-secondary-bg) !important;
}

.bg-body-tertiary {
  background-color: var(--bs-tertiary-bg) !important;
}

/* Border Colors */
.border-primary {
  border-color: var(--bs-primary) !important;
}

.border-secondary {
  border-color: var(--bs-secondary) !important;
}

.border-success {
  border-color: var(--bs-success) !important;
}

.border-danger {
  border-color: var(--bs-danger) !important;
}

.border-warning {
  border-color: var(--bs-warning) !important;
}

.border-info {
  border-color: var(--bs-info) !important;
}

.border-light {
  border-color: var(--bs-light) !important;
}

.border-dark {
  border-color: var(--bs-dark) !important;
}

/* Border Default */
.border {
  border-color: var(--bs-border-color) !important;
}

/* Shadow Utilities */
.shadow-sm {
  box-shadow: var(--bs-box-shadow-sm) !important;
}

.shadow {
  box-shadow: var(--bs-box-shadow) !important;
}

.shadow-lg {
  box-shadow: var(--bs-box-shadow-lg) !important;
}

/* ========================================
   Site Logo - Переключение между темами
   ======================================== */

/* Контейнер логотипа */
.site-logo {
  display: inline-block;
  line-height: 0;
}

/* По умолчанию (светлая тема): показываем тёмный лого */
.site-logo-light {
  display: inline-block;
}

.site-logo-dark {
  display: none;
}

/* В тёмной теме: показываем светлый лого */
[data-bs-theme="dark"] .site-logo-light {
  display: none;
}

[data-bs-theme="dark"] .site-logo-dark {
  display: inline-block;
}

/* Стили для SVG внутри */
.site-logo-light svg,
.site-logo-dark svg {
  height: 40px;
  width: auto;
  display: block;
}

/* Адаптив для мобильных */
@media (max-width: 576px) {
  .site-logo-light svg,
  .site-logo-dark svg {
    height: 32px;
  }
}

/* ========================================
   Theme Toggle - Переключатель темы
   ======================================== */

/* Контейнер для кнопки переключения темы */
#theme-toggle-mobile,
#theme-toggle-desktop {
  position: relative;
  overflow: hidden;
}

/* По умолчанию (светлая тема): показываем луну */
.theme-icon-dark {
  display: inline-block;
  opacity: 1;
  transform: rotate(0deg);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.theme-icon-light {
  display: none;
  opacity: 0;
  transform: rotate(180deg);
}

/* В тёмной теме: показываем солнце */
[data-bs-theme="dark"] .theme-icon-dark {
  display: none;
  opacity: 0;
  transform: rotate(-180deg);
}

[data-bs-theme="dark"] .theme-icon-light {
  display: inline-block;
  opacity: 1;
  transform: rotate(0deg);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Микро-анимация при клике на кнопку темы */
#theme-toggle-mobile:active,
#theme-toggle-desktop:active {
  transform: rotate(180deg);
}

/* ========================================
   Navbar Toggler - Элегантная кнопка меню
   ======================================== */

.navbar-toggler {
  font-size: 1.25rem;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* ========================================
   Footer - Элегантный футер
   ======================================== */

.footer {
  border-top: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
}

/* Ссылки в footer */
.footer a {
  transition: color 0.15s ease, opacity 0.15s ease;
}

.footer a:hover {
  color: var(--bs-body-color) !important;
}

/* Социальные иконки - как btn-icon */
.footer .bi {
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--bs-border-radius);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.footer a:hover .bi {
  background-color: var(--bs-secondary-bg);
  transform: translateY(-2px);
}

/* ========================================
   Toast Messages - Премиальные уведомления
   ======================================== */

.toast-premium {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-left-width: 4px;
  color: var(--bs-body-color);
  box-shadow: var(--bs-box-shadow-lg);
  min-width: 320px;
  max-width: 400px;
}

/* Иконки toast */
.toast-icon {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Варианты toast с акцентной границей */
.toast-success {
  border-left-color: var(--bs-success);
}

.toast-success .toast-icon {
  color: var(--bs-success);
}

.toast-danger {
  border-left-color: var(--bs-danger);
}

.toast-danger .toast-icon {
  color: var(--bs-danger);
}

.toast-warning {
  border-left-color: var(--bs-warning);
}

.toast-warning .toast-icon {
  color: var(--bs-warning);
}

.toast-info {
  border-left-color: var(--bs-info);
}

.toast-info .toast-icon {
  color: var(--bs-info);
}

.toast-secondary {
  border-left-color: var(--bs-secondary);
}

.toast-secondary .toast-icon {
  color: var(--bs-secondary);
}

/* Анимация появления toast */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast.show {
  animation: slideInRight 0.3s ease-out;
}

/* ========================================
   Pagination - Премиальная пагинация
   ======================================== */

/* Добавляем gap между элементами */
.pagination.gap-1 {
  gap: 0.25rem;
}

/* Премиальные page-link */
.page-link {
  min-width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Disabled state */
.page-item.disabled .page-link {
  background-color: transparent;
  border-color: transparent;
  opacity: 0.5;
}

/* ========================================
   Error Pages - Премиальные страницы ошибок
   ======================================== */

/* Минимальная высота для центрирования */
.min-vh-75 {
  min-height: 75vh;
}

/* Анимация иконки ошибки */
.error-icon i {
  display: inline-block;
  animation: fadeInScale 0.5s ease-out;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 0.5;
    transform: scale(1);
  }
}

/* ========================================
   Auth Pages - Премиальные страницы аутентификации
   ======================================== */

.auth-page-wrapper {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  padding: 2rem 0;
}

/* Премиальная карточка для auth */
.auth-card {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  padding: 2rem;
  box-shadow: var(--bs-box-shadow-sm);
}

/* Разделитель "или" */
.auth-divider {
  position: relative;
  text-align: center;
  margin: 1.5rem 0;
}

.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--bs-border-color);
}

.auth-divider span {
  position: relative;
  display: inline-block;
  padding: 0 0.75rem;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-secondary);
  font-size: 0.875rem;
}

/* Password Toggle - Показать/скрыть пароль */
.password-toggle-wrapper {
  position: relative;
}

.password-toggle-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--bs-secondary-color);
  user-select: none;
  z-index: 10;
  padding: 0.25rem;
  border-radius: var(--bs-border-radius-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.password-toggle-icon:hover {
  color: var(--bs-body-color);
  background-color: var(--bs-secondary-bg);
}

.password-toggle-icon:focus {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.password-toggle-icon:active {
  background-color: var(--bs-tertiary-bg);
}

/* ========================================
   Course Detail Page - Страница курса
   ======================================== */

/* Chapter Header */
.chapter-header {
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.chapter-header:hover {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color-translucent);
}

.chapter-header[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Chapter Chevron Animation */
.chapter-chevron {
  transition: transform 0.2s ease;
}

.chapter-header[aria-expanded="true"] .chapter-chevron {
  transform: rotate(180deg);
}

/* Chapter Lessons Container */
.chapter-lessons {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-top: none;
  border-bottom-left-radius: var(--bs-border-radius-lg);
  border-bottom-right-radius: var(--bs-border-radius-lg);
}

/* Lesson Item */
.lesson-item {
  background-color: var(--bs-body-bg);
  transition: background-color 0.2s ease;
}

.lesson-item:hover {
  background-color: var(--bs-secondary-bg);
}

.lesson-item:not(:last-child) {
  border-bottom: 1px solid var(--bs-border-color);
}

/* Lesson Icon */
.lesson-icon {
  font-size: 1.25rem;
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Chapter Number Badge */
.chapter-number .badge {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}