/* assets/custom.css */

/* --- UPDATED SWITCH STYLES --- */
.exchange-toggles .form-check {
  padding-left: 0;
  margin-right: 5px;
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  vertical-align: middle;
  position: relative; /* Добавляем для позиционирования псевдоэлементов */
}

.exchange-toggles .form-check-input {
  /* Оставляем скрытым */
  opacity: 0;
  position: absolute;
  width: 1.75rem; /* Задаем размер, чтобы клик работал */
  height: 1rem;
  z-index: 1; /* Ставим поверх псевдоэлемента */
  cursor: pointer; /* Показываем курсор */
  margin: 0; /* Убираем отступы */
  top: 50%; /* Центрируем */
  left: 0;
  transform: translateY(-50%);
}

.exchange-toggles .form-check-label {
   padding-left: 2.1em;
   font-size: 0.7rem;
   font-weight: 500;
   line-height: 1.25rem;
   position: relative;
   cursor: pointer;
   user-select: none;
   display: inline-block;
   min-width: 2.5em;
   color: var(--text-primary);
   z-index: 0; /* Ниже инпута */
}

/* Style the track - рисуем под инпутом */
.exchange-toggles .form-check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1rem;
  background-color: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 9999px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  z-index: 0; /* Под инпутом и thumb */
}

/* Style the thumb - рисуем под инпутом */
.exchange-toggles .form-check::after {
  content: "";
  position: absolute;
  left: 1.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  background-color: #fff;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  transition: transform 0.2s ease;
  z-index: 0; /* Под инпутом */
}

.theme-dark .exchange-toggles .form-check::after {
  background-color: hsl(210 40% 98%);
}

/* Checked state: Thumb movement */
.exchange-toggles .form-check-input:checked ~ .form-check-label::after, /* Fallback if direct doesn't work */
.exchange-toggles .form-check-input:checked::after { /* Trying direct :checked */
  transform: translate(0.75rem, -50%);
}
/* Applying thumb movement based on input state relative to the parent */
.exchange-toggles .form-check-input:checked + label + .form-check::after { /* This might be needed if structure changes */
    transform: translate(0.75rem, -50%);
}
/* Direct targeting of parent when input is checked */
.exchange-toggles .form-check:has(.form-check-input:checked)::after {
    transform: translate(0.75rem, -50%);
}


/* --- Checked state: Track color by exchange (using parent :has) --- */
/* Это самый современный способ, может не работать в старых браузерах, но лучший для этой структуры */
.exchange-toggles .form-check.switch-binance:has(.form-check-input:checked)::before { background-color: var(--color-binance); border-color: var(--color-binance); }
.exchange-toggles .form-check.switch-bybit:has(.form-check-input:checked)::before { background-color: var(--color-bybit); border-color: var(--color-bybit); }
.exchange-toggles .form-check.switch-okx:has(.form-check-input:checked)::before { background-color: var(--color-okx); border-color: var(--color-okx); }
.exchange-toggles .form-check.switch-gateio:has(.form-check-input:checked)::before { background-color: var(--color-gateio); border-color: var(--color-gateio); }
.exchange-toggles .form-check.switch-bitget:has(.form-check-input:checked)::before { background-color: var(--color-bitget); border-color: var(--color-bitget); }
.exchange-toggles .form-check.switch-mexc:has(.form-check-input:checked)::before { background-color: var(--color-mexc); border-color: var(--color-mexc); }
.exchange-toggles .form-check.switch-kucoin:has(.form-check-input:checked)::before { background-color: var(--color-kucoin); border-color: var(--color-kucoin); }
/* --- END UPDATED SWITCH STYLES --- */

/* Orderbook Header (created in JS) */
.orderbook-header {
    display: flex;
    justify-content: space-between;
    padding: 2px 8px; /* Match JS */
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    flex-shrink: 0; /* Prevent header shrinking */
}

.book-display-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.orderbook-side-container {
/* min-height removed, flex-grow handles height */
flex-grow: 1;
}


/* assets/styles.css ИЛИ assets/custom.css */

/* Стиль для лейбла биржи на вкладке Рейтинг */
.ranking-tab-exchange-label {
  font-size: 0.9rem; /* Размер шрифта (1rem может быть великоват, подберите) */
  font-weight: 600;   /* Жирность */
  margin: 0 0.4rem;   /* Отступы слева и справа для разделения с переключателями */
  line-height: 1;     /* Убедимся, что высота строки не мешает выравниванию */
  white-space: nowrap;/* Предотвратить перенос */
  /* color задается инлайн-стилем в Python */
}

/* Дополнительно: можно немного уменьшить отступы у родительской колонки, если нужно */
/* .exchange-switch-cols > .col-auto {
  padding-left: 2px;
  padding-right: 2px;
} */

/* === Центрирование основного меню в шапке === */
/* === Центрирование основного меню в шапке (Вариант 3 - Абсолютное позиционирование) === */

/* 1. Родительский контейнер должен быть position: relative */
.main-header-navbar .container-fluid {
  position: relative;
  /* Убедимся, что он растянут */
  width: 100%;
  display: flex; /* Оставляем flex для выравнивания бренда и правой части */
  justify-content: space-between; /* Разносим бренд и правую часть */
  align-items: center;
}

/* 2. Убираем стандартный поток для .navbar-collapse (если он мешает) */
.navbar-collapse {
  /* Можно оставить display: flex для мобильной версии,
     но для десктопа позиционирование меню будет важнее */
   /* position: static; /* По умолчанию */
   /* width: auto; /* Убираем width: 100% */
   /* Мы не будем использовать flexbox самого .navbar-collapse для центрирования меню */
   /* display: contents;  УБРАНО! Это ломает работу collapse */
}

/* 3. Абсолютное позиционирование для меню */
#navbar-nav-links {
  position: absolute;            /* Абсолютное позиционирование */
  left: 50%;                     /* Сдвигаем левый край на 50% ширины родителя */
  transform: translateX(-50%);   /* Сдвигаем сам блок влево на половину его ширины */
  top: 0;                        /* Прижимаем к верху */
  height: 100%;                  /* Занимаем всю высоту шапки */
  /* Убираем автоматические отступы */
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Добавляем z-index на всякий случай, хотя обычно не нужно */
  /* z-index: 1; */
  /* Сохраняем flex для внутренних элементов (ссылок) */
  display: flex;
  align-items: center;
  width: auto; /* Ширина по содержимому */
}

/* 4. Бренд и правая часть позиционируются относительно .container-fluid */
.navbar-brand {
  /* position: relative; */ /* Обычно не нужно */
  z-index: 2; /* На всякий случай, чтобы были над меню, если оно широкое */
}

.main-header-navbar .ms-auto { /* Правая часть */
   /* position: relative; */ /* Обычно не нужно */
   z-index: 2; /* На всякий случай */
   margin-left: auto !important; /* Убеждаемся, что она справа */
   /* Отступы справа для правой части, чтобы не прилипала к краю */
   /* padding-right: 1rem; /* Или настройте */
}


/* --- Конец стилей центрирования --- */

/* ... остальные стили ... */

/* ВАЖНО: Медиа-запрос для мобильной версии */
@media (max-width: 991.98px) { /* Точка перелома Bootstrap для lg */
  #navbar-nav-links {
      position: static; /* Возвращаем в поток */
      transform: none;   /* Убираем сдвиг */
      width: 100%;      /* Занимает всю ширину в мобильном меню */
      height: auto;     /* Авто-высота */
      margin-left: 0 !important; /* Убираем авто-отступы */
      margin-right: 0 !important;
      justify-content: flex-start;
    } /* Выравниваем ссылки влево */
  }
  .navbar-collapse {
      display: none;
  }
  .navbar-collapse.show {
      display: block !important;
  }

/* [ИЗМЕНЕНИЕ] Убедимся, что контейнер продаж перевернут */
.orderbook-side-container.asks-container {
  flex-direction: column-reverse;
}
/* --- СТИЛИ ДЛЯ ИНДИКАТОРА СТАТУСА --- */

.status-dot {
    width: 10px;          /* Задаем размер кружка */
    height: 10px;
    border-radius: 50%; /* Делаем его круглым */
    transition: background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    position: relative;   /* Нужно для псевдо-элемента анимации */
}

.status-dot.status-online {
    background-color: var(--green);
    /* Анимация пульсации */
    animation: pulse-green 2s infinite;
}

.status-dot.status-offline {
    background-color: var(--red);
    animation: none; /* Отключаем анимацию, когда оффлайн */
}

/* Переносим box-shadow из старой анимации сюда для лучшего вида */
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(40, 167, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* --- Market Map Chart Item Customizations --- */

.ranking-chart-item {
    position: relative; /* Needed for absolute positioning of icons */
}

/* Container for the icons */
.chart-item-controls {
    position: absolute;
    top: 2px;
    right: 5px;
    z-index: 10;
    display: flex;
    gap: 5px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease-in-out;
}

/* Show icons on hover */
.ranking-chart-item:hover .chart-item-controls {
    opacity: 1;
}

/* Individual icon style */
.chart-control-icon {
    font-size: 1rem;
    color: var(--text-secondary);
    background-color: rgba(30, 34, 42, 0.7);
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.chart-control-icon:hover {
    color: var(--text-primary);
    background-color: rgba(50, 55, 65, 0.9);
}

/* Style for the active (pinned) pin icon */
.chart-control-icon.chart-pin-icon.active {
    color: var(--bs-yellow);
}

/* Style for the pinned chart item */
.ranking-chart-item.chart-item-pinned .tv-chart-container {
    border: 2px solid var(--bs-yellow);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

/* Ensure the pinned icon is always visible on pinned charts */
.ranking-chart-item.chart-item-pinned .chart-item-controls,
.ranking-chart-item.chart-item-pinned .chart-pin-icon {
    opacity: 1;
}