/* ==========================================================================
   Общие стили всех карт MapLibre на сайте (/Map, /transport/*, вакансии).
   Подключается из Views/Shared/_MapAssets.cshtml вместе с maplibre-gl.css,
   поэтому попапы и кнопки выглядят одинаково на любой странице с картой.
   ========================================================================== */

/* ---------- Попап ---------- */
.maplibregl-popup-content {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 300px;
    background-color: #ffffff;
    color: #212529;
}

.marker-popup h6 {
    font-weight: 600;
    color: #118b8a;
    margin-bottom: 10px;
}

.marker-popup p {
    margin-bottom: 8px;
    line-height: 1.4;
    color: #212529;
}

.marker-popup a {
    color: #118b8a;
    text-decoration: none;
}

.marker-popup a:hover {
    text-decoration: underline;
}

/* Тёмная тема: без этого текст наследует светлый цвет от body,
   а фон попапа остаётся белым из maplibre-gl.css — нечитаемо. */
[data-theme="dark"] .maplibregl-popup-content {
    background-color: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-color);
}

/* «Хвостик» попапа — maplibre выбирает направление по положению маркера */
[data-theme="dark"] .maplibregl-popup-anchor-top .maplibregl-popup-tip,
[data-theme="dark"] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
[data-theme="dark"] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: var(--bg-card);
}

[data-theme="dark"] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
[data-theme="dark"] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
[data-theme="dark"] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: var(--bg-card);
}

[data-theme="dark"] .maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: var(--bg-card);
}

[data-theme="dark"] .maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: var(--bg-card);
}

[data-theme="dark"] .maplibregl-popup-close-button {
    color: var(--text-secondary);
}

[data-theme="dark"] .maplibregl-popup-close-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .marker-popup p {
    color: var(--text-primary);
}

[data-theme="dark"] .marker-popup h6,
[data-theme="dark"] .marker-popup a {
    color: var(--accent-primary);
}

[data-theme="dark"] .marker-popup a:hover {
    color: var(--accent-primary-hover);
}

/* Попапы транспорта (маршрут и остановка) */
[data-theme="dark"] .route-popup,
[data-theme="dark"] .stop-popup,
[data-theme="dark"] .route-popup p,
[data-theme="dark"] .stop-popup p {
    color: var(--text-primary);
}

[data-theme="dark"] .route-popup h6,
[data-theme="dark"] .stop-popup h6 {
    color: var(--accent-primary);
}

/* ---------- Кнопки масштаба ---------- */
.maplibregl-ctrl-group {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.maplibregl-ctrl-group button {
    width: 32px;
    height: 32px;
}

/* В тёмной теме подложка тёмная — белые кнопки на ней слепят.
   Иконки maplibre — чёрные SVG-фоны, поэтому инвертируем только их. */
[data-theme="dark"] .maplibregl-ctrl-group {
    background: var(--bg-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .maplibregl-ctrl-group button + button {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
    filter: invert(1);
}

/* ---------- Атрибуция и линейка ---------- */
.maplibregl-ctrl-attrib {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2px 8px;
    border-radius: 4px;
}

[data-theme="dark"] .maplibregl-ctrl-attrib {
    background-color: rgba(20, 24, 33, 0.8);
    color: var(--text-secondary);
}

[data-theme="dark"] .maplibregl-ctrl-attrib a {
    color: var(--text-secondary);
}

[data-theme="dark"] .maplibregl-ctrl-attrib-button {
    filter: invert(1);
}

[data-theme="dark"] .maplibregl-ctrl-scale {
    background-color: rgba(20, 24, 33, 0.75);
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}