/* ========================================================================== */
/* --- СТИЛИ СЕТКИ КАРТОЧЕК ПРИЗРАКОВ --- */
/* ========================================================================== */

/* Контейнер для сетки призраков (заменяет таблицу) */
.ghost-grid {
    display: grid;
    /* Жестко фиксируем 3 столбца. Каждый столбец будет занимать равную долю доступного пространства. */
    grid-template-columns: repeat(3, 1fr);
    gap: 5px; /* Отступы между карточками призраков сокращены в два раза */
    padding: 0 5px 7px 0px; /* Убран отступ сверху, остальные сохранены */
    justify-content: center; /* Центрирование сетки, если она не занимает всю ширину */
    align-items: start; /* Выравнивание элементов по верху */
    align-content: start; /* Выравнивает строки сетки в начале контейнера, предотвращая лишнее пространство внизу */
    /* Автоматически определяет высоту строк, основываясь на содержимом. */
    grid-auto-rows: minmax(min-content, auto);
    width: 100%; /* Занимает всю доступную ширину основного контента */
    box-sizing: border-box; /* Учитываем padding в ширине */
    overflow-y: auto; /* Позволяет вертикальную прокрутку, если содержимое превышает высоту */
    overflow-x: auto; /* Позволяет горизонтальную прокрутку, если 3 столбца не умещаются */
    /* Минимальная ширина для ghost-grid, чтобы гарантировать место для 3 колонок.
       (Примерно 3 * (120px + 10px + 1.5*Xpx) + 2 * 15px (gap) + 2 * 15px (padding)) */
    min-width: 900px; /* Убедитесь, что эта ширина подходит для вашего макета */
    /* Максимальная высота, чтобы сетка прокручивалась внутри main-content */
    max-height: calc(100vh - var(--main-content-padding-top) - var(--main-content-padding-bottom) - 5px);
}

/* Стили для каждой карточки призрака */
.ghost-card {
    background-color: var(--card-bg-color); /* Используйте вашу переменную для фона карточки */
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: grid;
    /* Левая часть (фиксированная ширина 120px) и правая часть (остальное пространство) */
    grid-template-columns: 135px 1fr;
    gap: 3px; /* Отступ между левой и правой частью внутри карточки */
    align-items: start; /* Выравнивание содержимого по верху в ячейках Grid */
    text-align: left; /* Выравнивание текста по левому краю по умолчанию */
    position: relative; /* Для позиционирования оверлеев */
    cursor: pointer; /* Указываем, что карточка кликабельна */
    transition: background-color 0.2s ease, opacity 0.3s ease, visibility 0.3s ease; /* Добавлено: Плавный переход для opacity и visibility */
    width: 100%; /* Карточка будет занимать всю ширину своей колонки */
    box-sizing: border-box; /* Учитываем padding в ширине */
    height: 100px; /* Фиксированная высота для карточки */
}

.ghost-card:hover {
    background-color: var(--hover-color);
}

/* НОВОЕ: Стиль для скрытых карточек, которые должны сохранять место в сетке */
.ghost-card.filtered-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Предотвращает взаимодействие с невидимыми карточками */
}

/* Контейнер для левой части информации о призраке (аватар, имя, улики, процент) */
.ghost-info-left {
    display: flex; /* Используем flexbox для вертикального расположения элементов */
    flex-direction: column;
    align-items: flex-start; /* Выравнивание по левому краю */
    height: 100%; /* Занимает всю высоту родителя */
    justify-content: flex-start; /* Элементы будут прижиматься к верху */
}

/* Контейнер для аватарки и имени (внутри ghost-info-left) */
.avatar-name-container {
    display: flex;
    align-items: center;
    gap: 4px; /* Уменьшено с 8px до 4px */
    margin-bottom: 0; /* Убери марджин, если он есть */
}

/* Контейнер для иконок улик и процента (внутри ghost-info-left) */
.evidence-percentage-container {
    display: flex;
    flex-direction: column; /* Элементы внутри будут располагаться вертикально */
    align-items: flex-start; /* Выравниваем по левому краю */
    width: 100%; /* Занимает всю ширину */
    margin-top: 5px; /* Отступ сверху для отделения от имени */
}

/* Стиль для аватарки призрака */
.ghost-card .ghost-avatar {
    display: none; /* Скрывает аватарку */
}

/* Стиль для имени призрака */
.ghost-card .ghost-name {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-color);
    white-space: nowrap; /* Предотвращает перенос строк */
    overflow: hidden; /* Скрывает текст, если он выходит за границы */
    text-overflow: ellipsis; /* Добавляет многоточие */
    max-width: 100%; /* Ограничиваем ширину имени */
    width: 100%; /* Имя занимает всю доступную ширину */
}

/* Контейнер для иконок улик */
.ghost-card .evidence-icons {
    display: flex;
    justify-content: flex-start; /* Выравниваем иконки улик по левому краю */
    gap: 5px; /* Отступы между иконками улик */
    margin-bottom: 5px; /* Уменьшен отступ */
    flex-wrap: wrap; /* Позволяет иконкам переноситься на новую строку, если их много */
}

/* Стиль для иконок улик внутри карточки */
.ghost-card .evidence-icons img {
    width: 24px; /* Размер иконок улик внутри карточки */
    height: 24px;
    filter: grayscale(0%); /* Улики в карточке всегда цветные */
}

/* Стиль для процента рассудка */
.ghost-card .sanity-percentage {
    font-size: 1em;
    color: var(--text-color); /* Пример цвета для процента рассудка */
    margin-top: auto; /* Прижимает процент к низу контейнера */
    margin-bottom: 0; /* Удален нижний отступ */
}


/* Контейнер для правой части информации (сильные/слабые стороны) */
.ghost-info-right {
    display: flex; /* Используем flexbox для вертикального расположения */
    flex-direction: column;
    height: 100%; /* Занимает всю доступную высоту ячейки Grid */
    padding: 5px; /* Внутренний отступ текстового поля */
    padding-top: 0px;
    border-radius: 4px; /* Скругление углов */
    background-color: var(--background-color-darker); /* Более темный фон */
    border: 1px solid var(--border-color); /* Возвращена рамка */
    color: var(--text-color); /* Цвет текста */
    font-size: 0.85em; /* Размер шрифта */
    line-height: 1.25; /* Межстрочный интервал */
    overflow-y: auto; /* Появляется полоса прокрутки, если содержимое превышает высоту */
    min-height: 0; /* Важно для flex-элементов с overflow */
    box-sizing: border-box; /* Учитываем padding в высоте */
    gap: 8px; /* Добавлено для компактного вертикального расположения между элементами */
}

/* Стиль для сильных и слабых сторон */
.zero-evidence-list, .strong-side, .weak-side {
    font-size: 1em; /* Размер шрифта внутри текстового поля */
    text-align: left; /* Текст сильных/слабых сторон выровнен по левому краю */
    padding: 0; /* Удаляем внутренний padding */
    width: 100%; /* Занимает всю доступную ширину своей колонки */
    box-sizing: border-box;
    line-height: 1.25;
    flex-shrink: 0; /* Предотвращает сжатие этих элементов */
}
.strong-side{
    color: var(--red-text-color);
}
.weak-side {
    color: var(--green-text-color);
}

.zero-evidence-list
 {
    color: var(--text-color);
}

.zero-evidence-list p {
    margin-bottom: 0;
	margin-top: 2px; /* Удалено, чтобы не добавлять лишний отступ */
}

/* ========================================================================== */
/* --- СТИЛИ ДЛЯ ОВЕРЛЕЕВ КАРТОЧЕК --- */
/* ========================================================================== */
.ghost-card[data-overlay-state="gray"] {
    opacity: 0.5; /* Или filter: grayscale(100%); */
    /* Добавьте transition для плавного эффекта */
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Серый полупрозрачный оверлей для карточки призрака */
.ghost-card[data-overlay-state="gray"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 4px; /* Скругление углов трека */
    height: 100%;
    z-index: 5; /* Поверх содержимого карточки */
    pointer-events: none; /* Позволяет кликам проходить сквозь оверлей */
    background-color: var(--gray-overlay-color);
    transition: background-color 0.2s ease;
}

/* Зеленый полупрозрачный оверлей для карточки призрака */
.ghost-card[data-overlay-state="green"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px; /* Скругление углов трека */
    z-index: 5;
    pointer-events: none;
    background-color: var(--green-overlay-color);
    transition: background-color 0.2s ease;
}

/* Стиль для сообщения "Призраки не найдены" */
.no-results-message {
    text-align: center;
    font-style: italic;
    padding: 20px;
    color: var(--text-color);
    grid-column: 1 / -1; /* Сообщение занимает всю ширину сетки */
}

/* ========================================================================== */
/* --- НОВЫЕ СТИЛИ ДЛЯ ИКОНКИ СКОРОСТИ И ЕЁ ОТОБРАЖЕНИЯ --- */
/* ========================================================================== */

.ghost-speed {
    display: flex; /* Используем flexbox для выравнивания элементов в одну строку */
    align-items: center; /* Выравнивание по центру по вертикали */
    gap: 3px; /* Небольшой отступ между элементами */
    font-size: 0.9em; /* Размер шрифта для значений скорости */
    color: var(--text-color); /* Цвет текста */
    white-space: nowrap; /* Предотвращает перенос строки */
}

.ghost-speed .speed-icon {
    width: 18px; /* Уменьшаем размер иконки на 20% от 24px */
    height: 18px;
    vertical-align: middle; /* Выравнивание по центру с текстом */
    margin-right: 2px; /* Небольшой отступ справа от иконки */
    filter: invert(1) sepia(0.5) saturate(2) hue-rotate(20deg) brightness(1.1); /* Фильтр для цвета слоновой кости */
}

/* ========================================================================== */
/* --- СТИЛИ ДЛЯ ИКОНКИ РАССУДКА ВНУТРИ КАРТОЧКИ --- */
/* ========================================================================== */
.sanity-display-container {
    display: flex; /* Используем flexbox для выравнивания иконки и текста в одну строку */
    align-items: center; /* Выравнивание по центру по вертикали */
    gap: 3px; /* Небольшой отступ между элементами */
    margin-top: auto; /* Прижимает контейнер к низу, если evidence-icons не занимает все место */
    margin-bottom: 0;
}

.sanity-icon { /* Новый класс для иконки рассудка */
    width: 17px; 
    height: 17px;
    vertical-align: middle;
    margin-right: 2px;
    /* filter: none; - Фильтр цвета не применяется, так как он не нужен для этой иконки */
}

/* ========================================================================== */
/* --- СТИЛИ ТАБЛИЦЫ (ИЗ style.css) --- */
/* ========================================================================== */

/* Общие стили для элемента таблицы */
table {
    border-collapse: collapse; /* Схлопываем границы ячеек */
    margin: 0;
    table-layout: fixed; /* Фиксированная ширина колонок */
    width: 100%;
    min-width: 900px; /* Минимальная ширина таблицы */
}

/* Стили для заголовков таблицы (thead) */
thead {
    display: table; /* Позволяет управлять шириной как у таблицы */
    width: calc(100% - var(--scrollbar-width, 0px)); /* Учитываем ширину скроллбара tbody */
    background-color: var(--header-bg-color);
    table-layout: fixed; /* Для соответствия ширине колонок tbody */
    position: sticky; /* Фиксированный заголовок при прокрутке */
    top: 0;
    z-index: 100;
}

/* Стили для ячеек заголовков (th) */
th {
    border: 1px solid var(--border-color);
    padding: 2px 5px;
    text-align: center;
    word-wrap: break-word; /* Перенос слов, если текст не помещается */
    box-sizing: border-box;
    font-weight: bold;
    white-space: normal;
}

/* Стили для тела таблицы (tbody) - отвечает за вертикальную прокрутку */
tbody {
    display: block; /* Позволяет управлять высотой и прокруткой */
    /* Формула для максимальной высоты tbody: