/**
 * bootstrap-bridge.css — Bootstrap починає слухати наші токени.
 *
 * Bootstrap несе власну палітру у змінних --bs-*. Поки вони живуть самі по
 * собі, кожен його компонент — випадайка, модалка, поле, таблиця — лишається
 * у своїх кольорах. На світлій темі це майже непомітно, на темній ламається
 * одразу: список рад у випадайці території мав колір #212529 (майже чорний)
 * на тлі #101B14 і просто зникав.
 *
 * Тому не «полагодити випадайку», а перевести весь Bootstrap на ролі: один
 * раз тут — і працює скрізь, включно з компонентами, яких ми ще не бачили.
 *
 * Підключати ПІСЛЯ bootstrap.min.css і після tokens.css.
 */

:root {
  /* Шрифт. Без цього Bootstrap, підключений після base.css, ставив на body
     системний стек, і Manrope з бренд-буку не діяв ніде, де не заданий явно. */
  --bs-body-font-family:     var(--font-family);
  --bs-font-sans-serif:      var(--font-family);
  --bs-font-monospace:       var(--font-mono);

  /* Основа */
  --bs-body-bg:             var(--color-background);
  --bs-body-color:           var(--color-text);
  --bs-emphasis-color:       var(--color-text);
  --bs-secondary-color:      var(--color-text-secondary);
  --bs-tertiary-color:       var(--color-text-muted);
  --bs-border-color:         var(--color-outline);
  --bs-border-color-translucent: var(--color-outline-subtle);

  --bs-secondary-bg:         var(--color-surface-container);
  --bs-tertiary-bg:          var(--color-surface-variant);

  --bs-link-color:           var(--color-primary);
  --bs-link-hover-color:     var(--color-primary-700);

  /* Випадайки */
  --bs-dropdown-bg:               var(--color-surface);
  --bs-dropdown-color:            var(--color-text);
  --bs-dropdown-border-color:     var(--color-outline-subtle);
  --bs-dropdown-link-color:       var(--color-text);
  --bs-dropdown-link-hover-color: var(--color-text);
  --bs-dropdown-link-hover-bg:    var(--color-surface-variant);
  --bs-dropdown-link-active-color: var(--color-primary);
  --bs-dropdown-link-active-bg:   var(--color-primary-50);
  --bs-dropdown-header-color:     var(--color-text-muted);
  --bs-dropdown-divider-bg:       var(--color-outline-subtle);

  /* Модалки */
  --bs-modal-bg:           var(--color-surface);
  --bs-modal-color:        var(--color-text);
  --bs-modal-border-color: var(--color-outline-subtle);
  --bs-modal-header-border-color: var(--color-outline-subtle);
  --bs-modal-footer-border-color: var(--color-outline-subtle);

  /* Картки й таблиці */
  --bs-card-bg:            var(--color-surface);
  --bs-card-color:         var(--color-text);
  --bs-card-border-color:  var(--color-outline-subtle);
  --bs-table-bg:           transparent;
  --bs-table-color:        var(--color-text);
  --bs-table-border-color: var(--color-outline-subtle);
  --bs-table-hover-bg:     var(--color-surface-variant);

  /* Поля вводу */
  --bs-form-control-bg:    var(--color-surface);
  --bs-form-control-color: var(--color-text);
}

/* Кілька місць, де Bootstrap пише колір напряму, а не через змінну */
.dropdown-item {
  color: var(--color-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--color-text);
  background-color: var(--color-surface-variant);
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--color-primary);
  background-color: var(--color-primary-50);
}

.dropdown-menu {
  background-color: var(--color-surface);
  border-color: var(--color-outline-subtle);
}

.form-control,
.form-select {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-outline);
}

.form-control::placeholder { color: var(--color-text-muted); }

.form-control:focus,
.form-select:focus {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.modal-content {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* Кнопки. Bootstrap задає кольори кнопок змінними на самому класі, а не на
   :root, тож загальні --bs-* їх не чіпають: «Зберегти» лишалась синьою
   #0d6efd, «Видалити» — червоною з його палітри. Той самий селектор тут,
   після Bootstrap, перемагає за порядком. .btn-outlined — наш клас із
   base.css, але .btn від Bootstrap перебиває йому рамку й колір. */
/* base.css робить кнопку flex-рядком із проміжком між іконкою й текстом;
   Bootstrap повертає inline-block, і іконка прилипала до слова */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.btn-primary,
.btn-success {
  --bs-btn-color: var(--color-on-primary);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-on-primary);
  --bs-btn-hover-bg: var(--color-primary-700);
  --bs-btn-hover-border-color: var(--color-primary-700);
  --bs-btn-active-color: var(--color-on-primary);
  --bs-btn-active-bg: var(--color-primary-700);
  --bs-btn-active-border-color: var(--color-primary-700);
  --bs-btn-disabled-color: var(--color-on-primary);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
}

.btn-danger {
  --bs-btn-color: var(--color-on-error);
  --bs-btn-bg: var(--color-error);
  --bs-btn-border-color: var(--color-error);
  --bs-btn-hover-color: var(--color-on-error);
  --bs-btn-hover-bg: color-mix(in srgb, var(--color-error) 85%, var(--color-text));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--color-error) 85%, var(--color-text));
}

.btn-secondary {
  --bs-btn-color: var(--color-text);
  --bs-btn-bg: var(--color-surface-container);
  --bs-btn-border-color: var(--color-outline);
  --bs-btn-hover-color: var(--color-text);
  --bs-btn-hover-bg: var(--color-surface-variant);
  --bs-btn-hover-border-color: var(--color-outline);
}

.btn-outlined {
  --bs-btn-color: var(--color-text-secondary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--color-outline);
  --bs-btn-hover-color: var(--color-text);
  --bs-btn-hover-bg: var(--color-surface-variant);
  --bs-btn-hover-border-color: var(--color-outline);
}

/* Хрестик закриття Bootstrap — чорна картинка, на темному не видно */
:root[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.8);
}