/* --- ОБЩИЕ СТИЛИ --- */
body, html {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #e9ecef; /* Фон для всей страницы */
    color: #2c3e50;
}

/* --- ОСНОВНОЙ МАКЕТ --- */
.main-container {
    display: flex;
    max-width: 1600px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-height: calc(100vh - 40px);
}

/* Левая колонка (сайдбар с фильтрами) */
.filter-sidebar {
    width: 320px;
    min-width: 320px; /* Предотвращает "схлопывание" колонки при загрузке */
    flex-shrink: 0; /* Запрещаем сжиматься */
    background-color: #f8f9fa;
    padding: 25px;
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
}

.filter-sidebar h1 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
    color: #2980b9;
}

/* Правая колонка (карта и результаты) */
.results-panel {
    flex: 1; /* Позволяем колонке занимать все оставшееся место */
    padding: 25px;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Не дает таблице растягивать блок. */
}

/* --- ЭЛЕМЕНТЫ ФОРМЫ --- */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #495057;
}

.form-group select,
.form-group input[type="number"],
.form-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box; /* Важно для корректной ширины */
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
    font-family: inherit;
    font-size: inherit;
}

.form-group select:focus,
.form-group input:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.input-range {
    display: flex;
    gap: 10px;
}

.form-buttons {
    margin-top: auto; /* Прижимает кнопки к низу */
    display: flex;
    gap: 10px;
}

.action-btn, #reset-btn {
    flex: 1;
    padding: 12px;
    border-radius: 4px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.action-btn {
    background-color: #007bff;
    color: white;
}

.action-btn:hover {
    background-color: #0056b3;
}

#reset-btn {
    background-color: #6c757d;
    color: white;
}

#reset-btn:hover {
    background-color: #5a6268;
}

/* --- КАРТА --- */
#map-container {
    height: 450px;
    border-radius: 8px;
    overflow: hidden; /* Скрывает выходящие за рамки части карты */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-bottom: 15px;
}

#map {
    height: 100%;
}

.map-instruction {
    text-align: center;
    font-style: italic;
    color: #6c757d;
    margin-bottom: 20px;
}

/* --- РЕЗУЛЬТАТЫ --- */
#results-summary {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

#results-table-container {
    overflow-x: auto; /* Добавляем горизонтальный скролл для таблицы, если она не помещается */
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}

th {
    background-color: #f8f9fa;
    font-weight: 600;
}

tbody tr:hover {
    background-color: #f1f3f5;
}

/* Скрытый класс */
.hidden {
    display: none !important;
}

/* --- ПАГИНАЦИЯ --- */
#pagination-controls {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pagination button {
    background: #fff;
    border: 1px solid #dee2e6;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 4px;
}

.pagination button:hover:not([disabled]) {
    background-color: #e9ecef;
}

.pagination button.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    cursor: default;
}

.pagination button[disabled] {
    color: #6c757d;
    cursor: not-allowed;
}

.pagination .ellipsis {
    padding: 8px 12px;
    font-size: 16px;
    color: #6c757d;
}

/* --- СТИЛИ ДЛЯ СЛАЙДЕРА --- */
.range-display {
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    color: #333;
}

.slider {
    margin: 0 10px 15px 10px;
}

.noUi-target {
    border-radius: 4px;
    border: 1px solid #ced4da;
    background: #e9ecef;
    box-shadow: none;
}

.noUi-connect {
    background: #007bff;
}

.noUi-handle {
    border: 1px solid #D9D9D9;
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: grab;
}

.noUi-handle:focus {
    outline: none;
}

/* НОВЫЙ СТИЛЬ для подсветки строки таблицы */
tr.highlighted-row {
    background-color: #d1e7ff !important;
    transition: background-color 0.5s ease;
}

/* --- НОВЫЕ СТИЛИ ДЛЯ ЧЕКБОКСОВ --- */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px; /* Расстояние между элементами по вертикали и горизонтали */
    padding-top: 5px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px; /* Расстояние между чекбоксом и текстом */
    /* Делаем весь блок кликабельным */
    cursor: pointer;
    /* Предотвращаем выделение текста при клике */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

/* Стилизуем label, т.к. сам чекбокс будет скрыт */
.checkbox-item label {
    font-weight: normal; /* Убираем жирность, унаследованную от .form-group label */
    margin-bottom: 0;
    cursor: pointer;
}

/* Скрываем стандартный чекбокс */
.checkbox-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.1em solid #ced4da;
    border-radius: 0.25em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Рисуем "галочку" */
.checkbox-item input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #fff; /* Цвет галочки */
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* Показываем галочку при выборе */
.checkbox-item input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* Меняем фон и границу при выборе */
.checkbox-item input[type="checkbox"]:checked {
    background: #007bff;
    border-color: #007bff;
}

/* Состояние фокуса для доступности */
.checkbox-item input[type="checkbox"]:focus {
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}


/* =====================================================
=== СТИЛИ ДЛЯ ФИЛЬТРОВ С ПОИСКОМ (CHOICES.JS) ===
=====================================================
*/
.choices__inner {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 5px 7.5px;
    min-height: auto;
    font-size: inherit;
    width: 100%;
}

.choices.is-focused .choices__inner {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.choices__list--single .choices__item {
    padding: 4px 10px;
    font-size: inherit;
}

.choices {
    position: relative;
    z-index: 1;
}

.choices.is-open {
    z-index: 10;
}

.choices__list--dropdown {
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 4px 4px;
    margin-top: -1px;
}

.choices__input {
    font-size: inherit;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 3px;
    margin: 10px 10px 5px 10px;
    width: calc(100% - 20px);
}

.choices__button {
    margin-top: 2px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.choices__button:hover {
    opacity: 1;
}

.choices__inner::after {
    border-color: #333 transparent transparent;
    margin-top: -6px;
    right: 12px;
}

.choices.is-open .choices__inner::after {
    border-color: transparent transparent #333;
    margin-top: -3px;
}


/* --- СТИЛИ ДЛЯ ПАНЕЛИ ПОЛЬЗОВАТЕЛЯ --- */
.user-panel {
    text-align: center;
    margin-bottom: 25px;
}

/* Убираем верхний отступ у h1 внутри панели */
.user-panel h1 {
    margin-top: 0;
}

.user-info {
    font-size: 0.9rem;
    background-color: #e9ecef;
    padding: 8px 12px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.user-info span {
    font-weight: 600;
    color: #495057;
    /* Предотвращает перенос длинного email */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
}

/* НАЧАЛО ИЗМЕНЕНИЙ */
.user-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Расстояние между ссылками */
}

.user-actions a {
    text-decoration: none;
    font-weight: bold;
    flex-shrink: 0; /* Предотвращает сжатие текста */
    transition: color 0.2s;
}

.welcome-link {
    color: #007bff; /* Синий цвет */
}

.welcome-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

.logout-link {
    color: #c82333; /* Красный цвет */
}

.logout-link:hover {
    color: #a71d2a;
    text-decoration: underline;
}
/* КОНЕЦ ИЗМЕНЕНИЙ */

/* Стиль для подсветки строки в таблице */
tr.highlighted td {
    background-color: #fff8e1; /* Светло-желтый фон */
    transition: background-color 0.3s ease;
}

.access-denied {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-style: italic;
}

.access-denied .fa-lock {
    color: #ff9800; /* оранжевый цвет для замка */
}

.access-denied a {
    color: #2196F3; /* синий цвет для ссылки */
    text-decoration: none;
    font-style: normal;
}

.access-denied a:hover {
    text-decoration: underline;
}