/**
 * @file: overrides.css
 * @description: Временные точечные перекрытия на период миграции (минимизировать).
 */

@layer overrides {
  /* ===== ВРЕМЕННАЯ СОВМЕСТИМОСТЬ НА ПЕРИОД МИГРАЦИИ ШАБЛОНОВ ===== */
  /* 1) Bootstrap утилиты (dark) */
  [data-theme="dark"] .text-dark,
  [data-theme="dark"] .text-black {
    color: var(--text-primary) !important;
  }

  /* Bootstrap muted/secondary — в dark должны быть читаемыми на surface */
  [data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
  }

  [data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
  }

  /* 2) «warning + text-dark» должно быть читабельным */
  [data-theme="dark"] .bg-warning.text-dark,
  [data-theme="dark"] .card-header.bg-warning.text-dark,
  [data-theme="dark"] .badge.bg-warning.text-dark {
    background-color: var(--warning) !important;
    color: var(--on-warning) !important;
  }

  /* 3) «primary + text-white» (например, заголовки) */
  [data-theme="dark"] .bg-primary.text-white,
  [data-theme="dark"] .card-header.bg-primary.text-white {
    background: var(--header-primary-bg) !important;
    color: var(--on-header-primary) !important;
  }

  /* УДАЛЕНО: color: inherit для дочерних элементов .bg-primary.text-white */
  /* Это правило вызывало наследование белого цвета для всех дочерних элементов */
  /* Вместо этого используем явные правила ниже для элементов внутри карточек */
  
  /* Принудительно устанавливаем правильный цвет для event-car-tag даже внутри элементов с белым текстом */
  [data-theme="dark"] .event-car-tag,
  [data-theme="dark"] .event-car-tag * {
    color: var(--text-primary) !important;
  }
  
  /* УДАЛЕНО: Агрессивные правила для всех элементов внутри карточек */
  /* Эти правила вызывали конфликты и перекрытие шрифта. Вместо этого используются специфичные правила в dark.css */
  /* В светлой теме таких правил нет, поэтому там все работает нормально */
  
  /* КРИТИЧЕСКОЕ: Перекрываем класс .text-white для элементов внутри card-body и event-card-body */
  /* Также перекрываем для всех элементов внутри .card, кроме .card-header (где белый текст уместен) */
  [data-theme="dark"] .card-body .text-white,
  [data-theme="dark"] .event-card-body .text-white,
  [data-theme="dark"] .card-body .text-white *,
  [data-theme="dark"] .event-card-body .text-white *,
  [data-theme="dark"] .card .text-white:not(.card-header):not(.card-header *):not(.event-card-header):not(.event-card-header *),
  [data-theme="dark"] .event-card .text-white:not(.card-header):not(.card-header *):not(.event-card-header):not(.event-card-header *),
  [data-theme="dark"] .championship-card .text-white:not(.card-header):not(.card-header *):not(.event-card-header):not(.event-card-header *),
  [data-theme="dark"] .standalone-race-card .text-white:not(.card-header):not(.card-header *):not(.event-card-header):not(.event-card-header *) {
    color: var(--text-primary) !important;
  }

}

/* ===== КРИТИЧЕСКОЕ: ЦВЕТ ТЕКСТА КНОПОК В ТЕМНОЙ ТЕМЕ ===== */
/* Правила ВНЕ слоя имеют приоритет над всеми слоями, включая Bootstrap */
/* Кнопки с цветным фоном должны иметь белый текст для контраста */

[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn.btn-success,
[data-theme="dark"] a.btn-success,
[data-theme="dark"] a.btn.btn-success,
[data-theme="dark"] a.btn.btn-success.btn-sm,
[data-theme="dark"] button.btn-success,
[data-theme="dark"] button.btn.btn-success {
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-success *,
[data-theme="dark"] .btn-success i,
[data-theme="dark"] .btn-success i.bi,
[data-theme="dark"] .btn-success span,
[data-theme="dark"] a.btn.btn-success *,
[data-theme="dark"] a.btn.btn-success i,
[data-theme="dark"] a.btn.btn-success i.bi,
[data-theme="dark"] a.btn.btn-success span {
  color: #ffffff !important;
}

/* btn-secondary в темной теме тоже должен иметь белый текст */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn.btn-secondary,
[data-theme="dark"] a.btn-secondary,
[data-theme="dark"] a.btn.btn-secondary,
[data-theme="dark"] a.btn.btn-secondary.btn-sm,
[data-theme="dark"] button.btn-secondary,
[data-theme="dark"] button.btn.btn-secondary {
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary *,
[data-theme="dark"] .btn-secondary i,
[data-theme="dark"] .btn-secondary i.bi,
[data-theme="dark"] .btn-secondary span,
[data-theme="dark"] a.btn.btn-secondary *,
[data-theme="dark"] a.btn.btn-secondary i,
[data-theme="dark"] a.btn.btn-secondary i.bi,
[data-theme="dark"] a.btn.btn-secondary span {
  color: #ffffff !important;
}

/* btn-primary в темной теме тоже должен иметь белый текст */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn.btn-primary,
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] a.btn.btn-primary,
[data-theme="dark"] a.btn.btn-primary.btn-sm,
[data-theme="dark"] button.btn-primary,
[data-theme="dark"] button.btn.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-primary *,
[data-theme="dark"] .btn-primary i,
[data-theme="dark"] .btn-primary i.bi,
[data-theme="dark"] .btn-primary span,
[data-theme="dark"] a.btn.btn-primary *,
[data-theme="dark"] a.btn.btn-primary i,
[data-theme="dark"] a.btn.btn-primary i.bi,
[data-theme="dark"] a.btn.btn-primary span {
  color: #ffffff !important;
}

/* ===== КРИТИЧЕСКОЕ: КАРТОЧКИ С bg-warning text-dark В ТЕМНОЙ ТЕМЕ ===== */
/* Правила ВНЕ слоя имеют приоритет над dark.css */
/* Карточки с желтым фоном должны иметь БЕЛЫЙ текст для контраста в темной теме */

[data-theme="dark"] .card.bg-warning.text-dark {
  background-color: var(--warning) !important;
  color: #ffffff !important;
}

/* Все дочерние элементы внутри карточек с bg-warning.text-dark должны иметь белый текст */
[data-theme="dark"] .card.bg-warning.text-dark *,
[data-theme="dark"] .card.bg-warning.text-dark .card-body,
[data-theme="dark"] .card.bg-warning.text-dark .card-body *,
[data-theme="dark"] .card.bg-warning.text-dark .card-title,
[data-theme="dark"] .card.bg-warning.text-dark p,
[data-theme="dark"] .card.bg-warning.text-dark h1,
[data-theme="dark"] .card.bg-warning.text-dark h2,
[data-theme="dark"] .card.bg-warning.text-dark h3,
[data-theme="dark"] .card.bg-warning.text-dark h4,
[data-theme="dark"] .card.bg-warning.text-dark h5,
[data-theme="dark"] .card.bg-warning.text-dark h6 {
  color: #ffffff !important;
}