/* MODAL STYLES */
  /* Auto-extracted on 11/13/2025, 10:46:44 PM */
  /* From: index.ejs */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #2d2d2d;
  margin: 2% auto;
  padding: 0;
  border: 1px solid #444;
  border-radius: 8px;
  width: 95%;
  max-width: 1000px;
  height: 90%;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.modal-header {
  padding: 16px 20px;
  background-color: #3a3a3a;
  border-bottom: 1px solid #555;
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  margin: 0;
}

.modal-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.modal-content {
  width: 98%;
  height: 85vh;
  margin: 1% auto;
}

.modal-body {
  padding: 12px;
  gap: 12px;
}

.modal-header {
  padding: 12px 16px;
}

.modal-title {
  font-size: 16px;
}

#chart {
  width: 100%;
  flex: 1;
  background: #1a1a1a;
  border-radius: 6px;
  border: 1px solid #333;
  position: relative;
  min-height: 400px;
}

#chart {
  min-height: 300px;
}

#candle-info-panel {
  background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%);
  border: 1px solid #555;
  border-radius: 8px;
  padding: 16px;
  font-size: 13px;
  display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.candle-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.candle-info-item {
  display: flex;
  flex-direction: column;
}

.candle-info-label {
  font-size: 11px;
  color: #aaa;
  margin-bottom: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.candle-info-value {
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.candle-info-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.candle-info-grid {
  grid-template-columns: 1fr;
}

#y-axis-label {
  position: absolute;
  right: 12px;
  background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%);
  border: 1px solid #555;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #fff;
  pointer-events: none;
  z-index: 10;
  min-width: 90px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.3;
  display: none;
  backdrop-filter: blur(10px);
}

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%);
  padding: 16px 24px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  z-index: 100;
  border: 1px solid #555;
  display: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  font-weight: 500;
}

#debug-info {
  font-size: 12px;
  color: #888;
  padding: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  display: none;
}

/* public/css/modal.css */

/* Существующие стили для .modal, .modal-content, ... остаются без изменений */

/* Добавляем стили для диагностического модального окна */
.diagnosis-modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8); /* Используем тот же стиль фона, что и .modal */
    align-items: center; /* Используем flex для центрирования */
    justify-content: center;
}

.diagnosis-modal-content {
    background-color: #2d2d2d; /* Используем тот же фон, что и .modal-content */
    margin: 2% auto; /* Отступы */
    padding: 0; /* Внутренние отступы */
    border: 1px solid #444; /* Граница */
    border-radius: 8px; /* Скругление углов */
    width: 95%; /* Ширина */
    max-width: 1200px; /* Максимальная ширина, возможно, больше, чем у обычного модального окна */
    height: 90vh; /* Высота */
    max-height: 95vh; /* Максимальная высота */
    display: flex; /* Используем flex */
    flex-direction: column; /* Основное направление: сверху вниз */
    box-shadow: 0 8px 32px rgba(0,0,0,0.3); /* Тень */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Шрифт */
    overflow: hidden; /* Скрываем любые вылезающие элементы за границы */
}

.diagnosis-modal-header {
    padding: 16px 20px; /* Отступы */
    background-color: #3a3a3a; /* Цвет фона заголовка */
    border-bottom: 1px solid #555; /* Граница снизу */
    border-radius: 8px 8px 0 0; /* Скругление только сверху */
    display: flex; /* Flex для заголовка и кнопки */
    justify-content: space-between; /* Заголовок слева, кнопка справа */
    align-items: center; /* Центрирование по вертикали */
    flex-shrink: 0; /* Не сжимаем заголовок */
}

.diagnosis-modal-title {
    font-weight: 600; /* Жирность */
    font-size: 18px; /* Размер шрифта */
    color: #fff; /* Цвет текста */
    margin: 0; /* Внешние отступы */
}

.diagnosis-close {
    background: none; /* Прозрачный фон */
    border: none; /* Без границы */
    font-size: 24px; /* Размер крестика */
    cursor: pointer; /* Курсор указатель */
    color: #999; /* Цвет крестика */
}

.diagnosis-close:hover {
    color: #fff; /* Цвет крестика при наведении */
}

.diagnosis-modal-body {
    padding: 20px; /* Отступы внутри тела */
    flex: 1; /* Занимает всё доступное пространство под заголовком */
    display: flex; /* Flex для содержимого */
    flex-direction: column; /* Направление содержимого: сверху вниз */
    gap: 16px; /* Отступ между элементами (например, загрузка и контент) */
    min-height: 0; /* ВАЖНО: Позволяет flex-элементу скроллиться, если overflow задан */
    overflow: hidden; /* Скрываем скролл на этом уровне, если он не нужен */
    position: relative; /* Для корректного позиционирования дочерних элементов */
    box-sizing: border-box; /* Учитываем padding в расчёте высоты */
}

#diagnosis-loading {
    display: flex; /* Flex для центрирования содержимого */
    align-items: center; /* Центрирование по вертикали */
    justify-content: center; /* Центрирование по горизонтали */
    flex-grow: 1; /* Занимает всё пространство при загрузке */
}

/* Контейнер для вставленного HTML диагностики */
#diagnosis-content {
    flex-grow: 1; /* Позволим ему расти и занимать оставшееся место */
    /* ВАЖНО: Установить overflow-y: auto для скролла */
    overflow-y: auto; /* Добавляет вертикальный скролл, если контент превышает высоту */
    /* Убедимся, что он не выходит за границы родителя */
    max-height: 100%; /* Максимальная высота = высоте родителя (.diagnosis-modal-body) */
    /* Убираем padding или margin, которые могут мешать */
    padding: 0;
    margin: 0;
    /* Убедимся, что внутренние элементы не ломают layout */
    box-sizing: border-box;
    /* Убедимся, что display block */
    display: block;
}

/* Убедимся, что .diagnosis-page (корневой элемент из diagnosis-content.ejs) не мешает скроллу */
#diagnosis-content .diagnosis-page {
    width: 100%; /* Занимает всю ширину контейнера */
    /* Убираем высоту, которая может мешать скроллу */
    height: auto; /* ВАЖНО */
    min-height: auto; /* ВАЖНО */
    margin: 0; /* Убираем внешние отступы */
    padding: 0; /* Убираем внутренние отступы, если они дублируются в .diagnosis-modal-body */
    /* Убедимся, что box-sizing */
    box-sizing: border-box;
    /* Убедимся, что display block */
    display: block;
}

/* public/css/modal.css */

/* ... (остальные стили из modal.css остаются без изменений) ... */

/* Добавляем стили для диагностического модального окна */
.diagnosis-modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Изменим фон оверлея на светлый с низкой непрозрачностью для контраста */
    background-color: rgba(0, 0, 0, 0.5); /* Было: rgba(0,0,0,0.8) */
    align-items: center; /* Используем flex для центрирования */
    justify-content: center;
}

.diagnosis-modal-content {
    /* Изменим фон на светлый */
    background-color: #ffffff; /* Было: #2d2d2d */
    margin: 2% auto; /* Отступы */
    padding: 0; /* Внутренние отступы */
    border: 1px solid #d0d0d0; /* Более светлая граница, соответствующая светлому фону */
    border-radius: 8px; /* Скругление углов */
    width: 95%; /* Ширина */
    max-width: 1200px; /* Максимальная ширина */
    height: 90vh; /* Высота */
    max-height: 95vh; /* Максимальная высота */
    display: flex; /* Используем flex */
    flex-direction: column; /* Основное направление: сверху вниз */
    /* Убираем градиентную тень */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* Было: 0 8px 32px rgba(0,0,0,0.3) */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Шрифт */
    overflow: hidden; /* Скрываем любые вылезающие элементы за границы */
}

.diagnosis-modal-header {
    /* Изменим фон заголовка на строгий тёмный, без градиента */
    background-color: #333333; /* Было: #3a3a3a (тёмно-серый с лёгким оттенком) */
    border-bottom: 1px solid #cccccc; /* Светлая граница снизу для отделения от тела */
    border-radius: 8px 8px 0 0; /* Скругление только сверху */
    display: flex; /* Flex для заголовка и кнопки */
    justify-content: space-between; /* Заголовок слева, кнопка справа */
    align-items: center; /* Центрирование по вертикали */
    flex-shrink: 0; /* Не сжимаем заголовок */
    padding: 16px 20px; /* Отступы */
}

.diagnosis-modal-title {
    font-weight: 600; /* Жирность */
    font-size: 18px; /* Размер шрифта */
    /* Цвет текста на тёмном фоне заголовка */
    color: #ffffff; /* Было: #fff (то же самое, но #ffffff более явно) */
    margin: 0; /* Внешние отступы */
}

.diagnosis-close {
    background: none; /* Прозрачный фон */
    border: none; /* Без границы */
    font-size: 24px; /* Размер крестика */
    cursor: pointer; /* Курсор указатель */
    /* Цвет крестика на тёмном фоне */
    color: #bbbbbb; /* Светло-серый */
}

.diagnosis-close:hover {
    /* Цвет крестика при наведении */
    color: #ffffff; /* Белый */
}

.diagnosis-modal-body {
    /* Светлый фон тела модального окна */
    background-color: #fafafa; /* Светло-серый фон, чтобы отличался от .diagnosis-modal-content */
    padding: 20px; /* Отступы внутри тела */
    flex: 1; /* Занимает всё доступное пространство под заголовком */
    display: flex; /* Flex для содержимого */
    flex-direction: column; /* Направление содержимого: сверху вниз */
    gap: 16px; /* Отступ между элементами (например, загрузка и контент) */
    min-height: 0; /* ВАЖНО: Позволяет flex-элементу скроллиться, если overflow задан */
    overflow: hidden; /* Скрываем скролл на этом уровне, если он не нужен */
    position: relative; /* Для корректного позиционирования дочерних элементов */
    box-sizing: border-box; /* Учитываем padding в расчёте высоты */
}

#diagnosis-loading {
    display: flex; /* Flex для центрирования содержимого */
    align-items: center; /* Центрирование по вертикали */
    justify-content: center; /* Центрирование по горизонтали */
    flex-grow: 1; /* Занимает всё пространство при загрузке */
    /* Стили для текста "Загрузка..." и спиннера */
    color: #666666;
    font-size: 14px;
}

/* Контейнер для вставленного HTML диагностики */
#diagnosis-content {
    flex-grow: 1; /* Позволим ему расти и занимать оставшееся место */
    /* ВАЖНО: Установить overflow-y: auto для скролла */
    overflow-y: auto; /* Добавляет вертикальный скролл, если контент превышает высоту */
    /* Убедимся, что он не выходит за границы родителя */
    max-height: 100%; /* Максимальная высота = высоте родителя (.diagnosis-modal-body) */
    /* Убираем padding или margin, которые могут мешать */
    padding: 0;
    margin: 0;
    /* Убедимся, что внутренние элементы не ломают layout */
    box-sizing: border-box;
    /* Убедимся, что display block */
    display: block;
}

/* Убедимся, что .diagnosis-page (корневой элемент из diagnosis-content.ejs) не мешает скроллу */
#diagnosis-content .diagnosis-page {
    width: 100%; /* Занимает всю ширину контейнера */
    /* Убираем высоту, которая может мешать скроллу */
    height: auto; /* ВАЖНО */
    min-height: auto; /* ВАЖНО */
    margin: 0; /* Убираем внешние отступы */
    padding: 0; /* Убираем внутренние отступы, если они дублируются в .diagnosis-modal-body */
    /* Убедимся, что box-sizing */
    box-sizing: border-box;
    /* Убедимся, что display block */
    display: block;
}

/* public/css/modal.css */

/* ... (остальные стили из modal.css остаются без изменений) ... */

/* Добавляем или обновляем стили для диагностического модального окна */
.diagnosis-modal-header {
    /* Убираем градиент и устанавливаем строгий тёмный однотонный фон */
    background-color: #333333 !important; /* Строгий тёмный однотонный фон */
    border-bottom: 1px solid #cccccc !important; /* Светлая граница снизу для отделения от тела */
    border-radius: 8px 8px 0 0 !important; /* Скругление только сверху */
    display: flex !important; /* Flex для заголовка и кнопки */
    justify-content: space-between !important; /* Заголовок слева, кнопка справа */
    align-items: center !important; /* Центрирование по вертикали */
    flex-shrink: 0 !important; /* Не сжимаем заголовок */
    padding: 16px 20px !important; /* Отступы */
    color: #ffffff !important; /* Цвет текста на тёмном фоне */
}

/* Если нужно, можно также переопределить стиль для .diagnosis-modal-title */
.diagnosis-modal-title {
    font-weight: 600 !important; /* Жирность */
    font-size: 18px !important; /* Размер шрифта */
    color: #ffffff !important; /* Цвет текста на тёмном фоне */
    margin: 0 !important; /* Внешние отступы */
}



/* Модальные окна */
.modal-content, .diagnosis-modal-content {
    font-family: var(--font-primary);
}

.modal-title, .diagnosis-modal-title {
    font-family: var(--font-primary);
    font-weight: 600;
}

/* Цифры в модальных окнах */
.candle-info-value {
    font-family: var(--font-mono), var(--font-mono-fallback);
    font-variant-numeric: tabular-nums;
}

/* Диагностика */
#diagnosis-loading {
    font-family: var(--font-primary);
}

.diagnosis-close {
    font-family: var(--font-primary);
}


/* Новое для нового дизайна */

/* Скрываем модалки по умолчанию */
.modal {
    display: none;
}

.loading {
    display: none;
}

/* Стили для контейнера графика */
#chart {
    width: 100%; 
    height: 500px;
}

/* блок Для всех модалок */

/* СИСТЕМА Z-INDEX ДЛЯ МОДАЛЬНЫХ ОКОН */
:root {
    --z-index-modal-backdrop: 10000;    /* Фон модалки */
    --z-index-modal-content: 10001;     /* Контент модалки */
    --z-index-modal-overlay: 10002;     /* Поверх обычной модалки */
    --z-index-modal-alert: 10003;       /* Алерты/подтверждения */
    --z-index-modal-tooltip: 10004;     /* Всплывающие подсказки */
    --z-index-modal-dropdown: 10005;    /* Выпадающие меню */
}

/* БАЗОВЫЕ СТИЛИ МОДАЛЬНЫХ ОКОН */
.modal {
    display: none;
    position: fixed;
    z-index: var(--z-index-modal-backdrop);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}

.modal-content {
    background-color: #1e1e1e;
    margin: 2% auto;
    padding: 0;
    border: 1px solid #333;
    width: 95%;
    max-width: 1400px;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    position: relative;
    z-index: var(--z-index-modal-content);
}

/* МОДАЛКИ ПОВЫШЕННОГО УРОВНЯ (для сложных случаев) */
.modal.overlay-modal {
    z-index: var(--z-index-modal-overlay);
}

.modal.alert-modal {
    z-index: var(--z-index-modal-alert);
}

/* СПЕЦИФИЧНЫЕ МОДАЛКИ */
#chartModal {
    /* Использует базовые z-index */
}

#bond-diagnosis-modal {
    /* Использует базовые z-index */
}

/* БУДУЩИЕ МОДАЛКИ */
#portfolio-modal,
#settings-modal,
#filter-modal {
    /* Автоматически получат правильные z-index */
}

/* ТУЛТИПЫ (если будут отдельные) */
.tooltip-modal {
    z-index: var(--z-index-modal-tooltip);
}

/* ВЫПАДАЮЩИЕ МЕНЮ */
.dropdown-modal {
    z-index: var(--z-index-modal-dropdown);
}

/* конец блока для всез модалок */