/**
 * Основные стили
 * Кастомизация Bootstrap через CSS-переменные
 */

:root {
  /* Цветовая схема — вариант 2 (бело-синий) */
  --primary-color: #1565c0;
  --primary-dark: #0d47a1;
  --secondary-color: #6c757d;
  --success-color: #198754;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --info-color: #0dcaf0;

  --app-bg: #f5f8fc;
  --app-text: #212529;
  --app-muted: #5c6b7a;
  --card-bg: #ffffff;
  --card-border: #dee2e6;
  --selected-bg: #e3f2fd;
  --selected-border: #1565c0;
  --step-number-bg: #ffffff;
  --step-number-color: #6c757d;
  --step-label-color: #6c757d;
  --step-completed-bg: #6c757d;
  --step-completed-text: #ffffff;
  --step-completed-label: #5c6b7a;
  --counter-bg: #ffffff;
  --counter-border: #dee2e6;
  --counter-text: #5c6b7a;
  --card-hover-shadow: 0 4px 12px rgba(21, 101, 192, 0.12);
  --gas-header-bg: #1565c0;
  --gas-border: #90caf9;
  --gas-card-shadow: 0 4px 12px rgba(21, 101, 192, 0.12);
  --score-thumbs: #9ca3af;

  --transition-speed: 0.3s;

  --bs-primary: #1565c0;
  --bs-primary-rgb: 21, 101, 192;
}

[data-bs-theme="dark"] {
  --bs-primary: #42a5f5;
  --bs-primary-rgb: 66, 165, 245;
  --primary-color: #42a5f5;
  --primary-dark: #1976d2;
  --app-bg: #121a24;
  --app-text: #e8eef5;
  --app-muted: #94a3b8;
  --card-bg: #1a2332;
  --card-border: #2a3544;
  --selected-bg: #1e3a5f;
  --selected-border: #42a5f5;
  --step-number-bg: #2a3544;
  --step-number-color: #94a3b8;
  --step-label-color: #94a3b8;
  --step-completed-bg: #64748b;
  --step-completed-text: #ffffff;
  --step-completed-label: #94a3b8;
  --counter-bg: #1a2332;
  --counter-border: #2a3544;
  --counter-text: #94a3b8;
  --card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --gas-header-bg: #1976d2;
  --gas-border: #42a5f5;
  --gas-card-shadow: 0 4px 16px rgba(66, 165, 245, 0.15);
  --score-thumbs: #f1f5f9;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--app-bg);
  color: var(--app-text);
  min-height: 100vh;
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* В тёмной теме стандартный text-muted от Bootstrap слишком тёмный */
[data-bs-theme="dark"] .text-muted {
  color: var(--app-muted) !important;
}

/* Светлый card-header в тёмной теме (compare cards, editor header) */
[data-bs-theme="dark"] .card-header.bg-light {
  background-color: var(--card-bg) !important;
  color: var(--app-text);
  border-bottom-color: var(--card-border);
}

/* Hide editor by default */
#editor-panel {
  display: none;
}

/* Кастомизация Bootstrap переменных */
.btn-primary {
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
}

/* Анимации */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn var(--transition-speed) ease-in-out;
}

/* Адаптивность */
@media (max-width: 768px) {
  .display-4 {
    font-size: 2rem;
  }

  .lead {
    font-size: 1rem;
  }

  .container.app-shell {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
}

@media (max-width: 576px) {
  .container.app-shell {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Переключатель темы (одна кнопка, меняет иконку) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.55rem;
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1;
}

.theme-toggle i {
  font-size: 1rem;
  transition: transform var(--transition-speed) ease;
}

.theme-toggle:hover i {
  transform: rotate(20deg);
}

@media (max-width: 576px) {
  .theme-toggle {
    margin-left: 0;
    margin-top: 8px;
  }
}

.app-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  margin-top: 2.5rem;
  padding: 0 0 1.5rem;
}

.app-footer #footer-text,
.app-footer .footer-author,
.app-footer .footer-copy {
  display: block;
  text-align: center;
}

.app-footer #footer-text {
  padding: 0 16px;
  margin-bottom: 1.25rem;
}

.app-footer .footer-author {
  margin-top: 0.5rem;
}

.footer-logos {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 5pt;
}

.footer-logo-slot {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(50% - 2.5pt);
}

.footer-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(28px, 6vw, 56px);
  object-fit: contain;
}

.footer-author,
.footer-copy {
  font-size: 0.85rem;
}

@media (max-width: 576px) {
  .app-footer {
    padding-bottom: 4rem;
  }
}