/*
 * Карта: MapMarker и MarkerPanel (ТЗ ч.3, разд. 20, 99–100; ч.4, разд. 223–224).
 * Маркеры — собственный простой векторный набор: круг, один знак, цвет только
 * по категории. Никаких сотен разноцветных эмодзи и детальных иллюстраций;
 * читаемость на 20–28px обязательна.
 */

.map-marker {
    display: grid;
    place-items: center;
    width: var(--icon-xl);
    height: var(--icon-xl);
    border: 2px solid var(--bg-card);
    border-radius: var(--radius-pill);
    background: var(--marker-color, var(--status-neutral));
    color: var(--text-on-primary);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

/* Категории (ТЗ ч.4, разд. 223) */
.map-marker--mission     { --marker-color: var(--primary); }
.map-marker--property    { --marker-color: var(--accent-blue); }
.map-marker--vehicle     { --marker-color: var(--game-gta4); }
.map-marker--weapon      { --marker-color: var(--danger); }
.map-marker--collectible { --marker-color: var(--accent-purple); }
.map-marker--business    { --marker-color: var(--accent-orange); }
.map-marker--safehouse   { --marker-color: var(--game-sa); }
.map-marker--character   { --marker-color: var(--accent-pink); }
.map-marker--activity    { --marker-color: var(--game-gta3); }
.map-marker--server      { --marker-color: var(--game-fivem); }

.map-marker--sm {
    width: var(--icon-md);
    height: var(--icon-md);
    border-width: 1.5px;
}

.map-marker--lg {
    width: 34px;
    height: 34px;
}

/* Найденный объект гаснет, но не исчезает: видно, что он уже отмечен */
.map-marker.is-found {
    background: var(--bg-card);
    border-color: var(--marker-color, var(--status-neutral));
    color: var(--marker-color, var(--status-neutral));
    opacity: .75;
}

/* Выбранный маркер обводится своим же цветом — так видно, какой объект открыт */
.map-marker.is-active {
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--marker-color, var(--status-neutral));
    transform: scale(1.08);
}

button.map-marker,
a.map-marker {
    cursor: pointer;
    padding: 0;
}

button.map-marker:hover,
a.map-marker:hover {
    transform: scale(1.08);
    color: var(--text-on-primary);
}

.map-marker.is-found:hover {
    color: var(--marker-color, var(--status-neutral));
}

/* Кластер: количество вместо знака */
.map-cluster {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding-inline: var(--space-2);
    border: 2px solid var(--bg-card);
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-card);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

/* Легенда категорий */
.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
}

.map-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

/* --- MarkerPanel (ТЗ ч.3, разд. 100) --------------------------------------
   Панель объекта: кадр, тип, описание, справочные значения, отметка «Найдено»
   и маршрут. На десктопе — плавающая панель над картой, на мобилке — bottom sheet. */

.marker-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    background: var(--bg-card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-elevated);
    overflow: hidden;
}

.marker-panel__media {
    position: relative;
    aspect-ratio: var(--ratio-card);
    background: var(--bg-soft);
}

.marker-panel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marker-panel__close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
}

.marker-panel__marker {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
}

.marker-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
}

.marker-panel__title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

.marker-panel__type {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.marker-panel__text {
    color: var(--text-secondary);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-normal);
}

.marker-panel__found {
    padding-top: var(--space-2);
    border-top: var(--border-w) solid var(--border-soft);
}

.marker-panel__footer {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-w) solid var(--border-soft);
}

/* Итог по карте: «Найдено объектов: 127 / 218» + бар (ТЗ ч.3, разд. 21) */
.map-progress {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-card);
}

.map-progress__label {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    white-space: nowrap;
}

.map-progress__value {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.map-progress .progress {
    min-width: 120px;
}

@media (max-width: 768px) {
    .marker-panel {
        max-width: none;
    }

    .map-progress {
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }
}