// =============================================================================
// Custom Bootstrap Configuration
// =============================================================================
// Этот файл переопределяет переменные Bootstrap ДО его компиляции
// Результат: полностью кастомизированный Bootstrap с нашей системой отступов

// =============================================================================
// 1. ИМПОРТ НАШИХ ПЕРЕМЕННЫХ
// =============================================================================
// Сначала импортируем наши CSS переменные (для справки)
// Реальные значения ниже в SCSS переменных

// =============================================================================
// 2. ПЕРЕОПРЕДЕЛЕНИЕ BOOTSTRAP ПЕРЕМЕННЫХ
// =============================================================================

// ──────────────────────────────────────────────────────────────
// 2.1 Система отступов (8px grid)
// ──────────────────────────────────────────────────────────────
// Bootstrap использует $spacer для всех utility классов (.p-*, .m-* и т.д.)
// Переопределяем его на нашу 8px сетку

$spacer: 1rem !default; // 16px - базовое значение

// Переопределение всей шкалы spacing
$spacers: (
  0: 0,           // 0px
  1: 0.25rem,     // 4px  - var(--space-1)
  2: 0.5rem,      // 8px  - var(--space-2)
  3: 0.75rem,     // 12px - var(--space-3)
  4: 1rem,        // 16px - var(--space-4)
  5: 1.5rem,      // 24px - var(--space-5)
) !default;

// ──────────────────────────────────────────────────────────────
// 2.2 Grid система
// ──────────────────────────────────────────────────────────────
$grid-gutter-width: 0.5rem !default;  // 8px - var(--space-2)

// ──────────────────────────────────────────────────────────────
// 2.3 Компоненты - Padding
// ──────────────────────────────────────────────────────────────
// Переопределяем padding для всех Bootstrap компонентов

// Cards
$card-spacer-y: 1rem !default;        // var(--space-2)
$card-spacer-x: 1rem !default;        // var(--space-2)

// Alerts
$alert-padding-y: 1rem !default;      // var(--space-2)
$alert-padding-x: 1rem !default;      // var(--space-2)

// Buttons
$btn-padding-y: 0.5rem !default;      // var(--space-1)
$btn-padding-x: 1rem !default;        // var(--space-2)

$btn-padding-y-sm: 0.5rem !default;   // var(--space-1)
$btn-padding-x-sm: 0.5rem !default;   // var(--space-1)

$btn-padding-y-lg: 1rem !default;     // var(--space-2)
$btn-padding-x-lg: 1.5rem !default;   // var(--space-3)

// Form controls
$input-padding-y: 0.5rem !default;    // var(--space-1)
$input-padding-x: 1rem !default;      // var(--space-2)

$input-padding-y-sm: 0.5rem !default; // var(--space-1)
$input-padding-x-sm: 0.5rem !default; // var(--space-1)

$input-padding-y-lg: 1rem !default;   // var(--space-2)
$input-padding-x-lg: 1.5rem !default; // var(--space-3)

// Modals
$modal-inner-padding: 1rem !default;  // var(--space-2)
$modal-header-padding-y: 1rem !default; // var(--space-2)
$modal-header-padding-x: 1rem !default; // var(--space-2)

// Dropdowns
$dropdown-padding-x: 0 !default;
$dropdown-padding-y: 0.5rem !default;  // var(--space-1)
$dropdown-item-padding-y: 0.5rem !default; // var(--space-1)
$dropdown-item-padding-x: 1rem !default;   // var(--space-2)

// Navs
$nav-link-padding-y: 0.5rem !default;  // var(--space-1)
$nav-link-padding-x: 1rem !default;    // var(--space-2)

// Navbar
$navbar-padding-y: 0.5rem !default;    // var(--space-1)
$navbar-padding-x: 1rem !default;      // var(--space-2)

// Pagination
$pagination-padding-y: 0.5rem !default; // var(--space-1)
$pagination-padding-x: 1rem !default;   // var(--space-2)

$pagination-padding-y-sm: 0.5rem !default; // var(--space-1)
$pagination-padding-x-sm: 0.5rem !default; // var(--space-1)

$pagination-padding-y-lg: 1rem !default;   // var(--space-2)
$pagination-padding-x-lg: 1.5rem !default; // var(--space-3)

// List groups
$list-group-item-padding-y: 1rem !default; // var(--space-2)
$list-group-item-padding-x: 1rem !default; // var(--space-2)

// Breadcrumbs
$breadcrumb-padding-y: 0.5rem !default;    // var(--space-1)
$breadcrumb-padding-x: 1rem !default;      // var(--space-2)

// Toasts
$toast-padding-x: 1rem !default;           // var(--space-2)
$toast-padding-y: 0.5rem !default;         // var(--space-1)

// Offcanvas
$offcanvas-padding-y: 1rem !default;       // var(--space-2)
$offcanvas-padding-x: 1rem !default;       // var(--space-2)

// Badges
$badge-padding-y: 0.5rem !default;         // var(--space-1)
$badge-padding-x: 0.5rem !default;         // var(--space-1)

// ──────────────────────────────────────────────────────────────
// 2.4 Cards - переопределяем стили карточек (GLASSMORPHISM)
// ──────────────────────────────────────────────────────────────
$card-border-radius: 18px !default;
$card-border-width: 1px !default;
$card-border-color: rgba(255, 255, 255, 0.1) !default;  // Светлая граница для glassmorphism
$card-bg: rgba(255, 255, 255, 0.05) !default;  // Полупрозрачный для эффекта стекла
$card-box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !default;  // Глубокая тень

// Card header/footer
$card-cap-padding-y: 1rem !default;
$card-cap-padding-x: 1rem !default;
$card-cap-bg: transparent !default;  // Прозрачный header/footer
$card-cap-color: null !default;

// ──────────────────────────────────────────────────────────────
// 2.5 Дополнительные настройки (опционально)
// ──────────────────────────────────────────────────────────────

// Border radius (если хотите унифицировать)
// $border-radius: 10px !default;         // var(--radius-md)
// $border-radius-sm: 6px !default;       // var(--radius-sm)
// $border-radius-lg: 14px !default;      // var(--radius-lg)

// =============================================================================
// 3. ИМПОРТ BOOTSTRAP
// =============================================================================
// Импортируем Bootstrap ПОСЛЕ переопределения переменных
@import "../node_modules/bootstrap/scss/bootstrap";

// =============================================================================
// 4. КАСТОМНЫЕ СТИЛИ (если нужно)
// =============================================================================
// Здесь можно добавить дополнительные стили или переопределения

@import "components/message-inputs";
@import "components/chat-detail";
@import "components/comments";
@import "components/modals";

// =============================================================================
// 5. ПЕРЕОПРЕДЕЛЕНИЕ BOOTSTRAP КАРТОЧЕК (GLASSMORPHISM ЭФФЕКТ)
// =============================================================================
// Все стили карточек собраны здесь для удобства поддержки

// Базовые стили карточки - применяем эффект жидкого стекла
.card {
  // Прозрачный фон с лёгким оттенком для светлой темы (как в тёмной)
  --bs-card-bg: transparent;
  background: rgba(255, 255, 255, 0.1) !important;
  
  // Размытие фона (glassmorphism) - основа эффекта жидкого стекла
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  
  // Тонкая рамка для светлой темы
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  
  // Плавные переходы
  transition: all 0.3s ease;
  overflow: hidden;
  
  // Hover эффект - усиливаем эффект
  &:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(12px) saturate(200%);
    -webkit-backdrop-filter: blur(12px) saturate(200%);
    box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
}

// Поддержка тёмной темы
[data-bs-theme="dark"] {
  .card {
    // Для тёмной темы - полностью прозрачный фон и светлая рамка
    --bs-card-bg: transparent;
    --bs-card-border-color: rgba(255, 255, 255, 0.1);
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    
    &:hover {
      background: rgba(255, 255, 255, 0.03) !important;
      border-color: rgba(255, 255, 255, 0.15) !important;
    }
  }
}

// =============================================================================
// 6. ПЕРЕОПРЕДЕЛЕНИЕ КНОПОК (ЕДИНЫЙ СТИЛЬ - ПРОЗРАЧНЫЕ)
// =============================================================================
// Единый источник правды для всех кнопок
// Философия: кнопки прозрачные, сливаются с фоном, БЕЗ hover эффектов

// Базовые стили для ВСЕХ кнопок - полностью прозрачные без hover
.btn {
  background: transparent !important;  // Всегда прозрачный фон
  border: none !important;  // Без рамок
  color: var(--bs-secondary-color);  // Серый цвет по умолчанию
  font-weight: 500;
  transition: color 0.2s ease;  // Только цвет меняется
  
  &:hover:not(:disabled) {
    color: var(--bs-body-color);  // Только текст становится ярче, фон НЕ меняется
  }
  
  &:active:not(:disabled) {
    color: var(--bs-body-color);
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

// Primary кнопка (основное действие) - единственная с цветным фоном
.btn-primary {
  color: #fff !important;
  background: rgba(13, 110, 253, 0.7) !important;  // Лёгкий синий фон
  
  &:hover:not(:disabled) {
    background: rgba(13, 110, 253, 0.85) !important;
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.3);
  }
  
  &:active:not(:disabled) {
    background: rgba(13, 110, 253, 0.95) !important;
  }
}

// Secondary, outline, ghost - все прозрачные БЕЗ фона при hover
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-ghost {
  background: transparent !important;
  color: var(--bs-secondary-color);
  
  &:hover:not(:disabled) {
    background: transparent !important;  // Фон НЕ меняется!
    color: var(--bs-body-color);  // Только цвет текста
  }
  
  &:active:not(:disabled) {
    background: transparent !important;
  }
}

// Особый цвет для outline-primary
.btn-outline-primary {
  color: var(--bs-primary);
  
  &:hover:not(:disabled) {
    color: var(--bs-primary);
    background: transparent !important;
  }
}

// Кнопки в тёмной теме
[data-bs-theme="dark"] {
  .btn {
    &:hover:not(:disabled) {
      background: transparent !important;  // В тёмной теме тоже без фона
    }
    
    &:active:not(:disabled) {
      background: transparent !important;
    }
  }
  
  .btn-primary {
    background: rgba(13, 110, 253, 0.6) !important;
    
    &:hover:not(:disabled) {
      background: rgba(13, 110, 253, 0.75) !important;
    }
    
    &:active:not(:disabled) {
      background: rgba(13, 110, 253, 0.85) !important;
    }
  }
  
  .btn-secondary,
  .btn-outline-primary,
  .btn-outline-secondary,
  .btn-ghost {
    &:hover:not(:disabled) {
      background: transparent !important;
    }
    
    &:active:not(:disabled) {
      background: transparent !important;
    }
  }
}

// Контейнер списка карточек
.card-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

// Заголовок секции
.section-header {
  display: flex;
  align-items: center;
  gap: var(--gap-component, 1rem);
  margin-bottom: var(--space-3, 0.75rem);
  
  .title {
    font-weight: 800;
    letter-spacing: 0.2px;
    margin: 0;
  }
}

// Переопределение card-header для гибкости
.card-header {
  display: flex;
  align-items: center;
  gap: var(--gap-component, 1rem);
  padding: var(--card-padding, 1rem);
  padding-bottom: var(--space-1, 0.25rem);
  background: transparent;
  border-bottom: none;
}

// Иконка/аватар в карточке
.card-icon {
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 20%);
  background: var(--bs-tertiary-bg);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

// Метаинформация
.card-meta {
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}

// Заголовок карточки
.card-title {
  font-weight: 700;
  color: var(--bs-body-color);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}

// Подзаголовок
.card-subtitle {
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}

// Тело карточки
.card-body {
  padding: var(--space-1, 0.25rem) var(--card-padding, 1rem);
  padding-bottom: var(--space-1, 0.25rem);
  position: relative;
}

// Действия карточки
.card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  padding: var(--card-padding, 1rem);
  padding-top: var(--space-2, 0.5rem);
  border-top: 1px solid var(--bs-border-color);
  position: relative;
  z-index: 2;
  
  // Кнопки в card-actions наследуют базовые стили, только добавляем активное состояние
  .btn,
  button {
    &.active,
    &.is-liked {
      color: var(--bs-primary) !important;
      font-weight: 600;
    }
  }
}

// Вариации карточек
.card.compact {
  .card-header {
    padding: var(--space-1, 0.25rem) var(--card-padding-sm, 0.5rem);
  }
  
  .card-body {
    padding: var(--space-1, 0.25rem) var(--card-padding-sm, 0.5rem);
  }
  
  .card-icon {
    width: 32px;
    height: 32px;
  }
}

.card.borderless {
  border: none;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid var(--bs-border-color);
  
  &:hover {
    transform: none;
    box-shadow: none;
    background: var(--bs-tertiary-bg);
  }
}

.card.highlighted {
  border-left: 3px solid var(--bs-primary);
  background: color-mix(in srgb, var(--bs-primary), transparent 95%);
}

// Адаптивность
@media (max-width: 576px) {
  .section-header {
    gap: var(--space-2, 0.5rem);
    flex-wrap: wrap;
  }
  
  .card-header {
    padding: var(--space-2, 0.5rem);
    padding-bottom: var(--space-1, 0.25rem);
  }
  
  .card-icon {
    width: 36px;
    height: 36px;
  }
  
  .card-actions {
    padding: var(--space-2, 0.5rem);
  }
}

// =============================================================================
// 6. УТИЛИТАРНЫЕ КЛАССЫ
// =============================================================================

// Моноширинный шрифт для дат, цифр, кодов
.text-mono {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace;
}