/**
 * Дашборд-мапа підопічних. Розфарбовування — тут, а не в JS:
 * без скрипта мапа лишається кольоровою і читабельною.
 *
 * Палітра: градієнт до #11B14B, 5 ступенів. Текст поверх зеленого — #0A8037 (WCAG AA).
 */

.gar-map {
    --gar-map-1: #eef8f2;
    --gar-map-2: #c6e9d4;
    --gar-map-3: #8fd6ac;
    --gar-map-4: #4dbf7f;
    --gar-map-5: #11b14b;
    --gar-map-empty: #f2f2f2;
    --gar-map-line: #fff;
    --gar-map-accent: #11b14b;

    /* Другорядний текст і лінії — від успадкованого кольору, а не фіксовані сірі.
       Віджет не знає, на якому фоні його поставлять: у теми ГАР він темний. */
    --gar-map-muted: .72;
    --gar-map-rule: rgba(128, 128, 128, .35);

    margin: 0 0 2rem;
    color: inherit;
}

/* ── мапа ─────────────────────────────────────────────────────────────── */

.gar-map__canvas {
    position: relative;
}

.gar-map__svg {
    display: block;
    width: 100%;
    height: auto;
}

.gar-map__region {
    fill: var(--gar-map-empty);
    stroke: var(--gar-map-line);
    stroke-width: 1.4;
    /* Обводка не декоративна: вона приховує розходження меж сусідів після
       спрощення геометрії. Прибрати — отримати волосяні щілини на стиках. */
    vector-effect: non-scaling-stroke;
    transition: fill .15s ease;
}

/* Ступінь бере значення з того шару, який зараз активний. */
.gar-map[data-layer="total"] .gar-map__region[data-level-total="1"],
.gar-map[data-layer="tetra"] .gar-map__region[data-level-tetra="1"],
.gar-map[data-layer="para"]  .gar-map__region[data-level-para="1"]  { fill: var(--gar-map-1); }

.gar-map[data-layer="total"] .gar-map__region[data-level-total="2"],
.gar-map[data-layer="tetra"] .gar-map__region[data-level-tetra="2"],
.gar-map[data-layer="para"]  .gar-map__region[data-level-para="2"]  { fill: var(--gar-map-2); }

.gar-map[data-layer="total"] .gar-map__region[data-level-total="3"],
.gar-map[data-layer="tetra"] .gar-map__region[data-level-tetra="3"],
.gar-map[data-layer="para"]  .gar-map__region[data-level-para="3"]  { fill: var(--gar-map-3); }

.gar-map[data-layer="total"] .gar-map__region[data-level-total="4"],
.gar-map[data-layer="tetra"] .gar-map__region[data-level-tetra="4"],
.gar-map[data-layer="para"]  .gar-map__region[data-level-para="4"]  { fill: var(--gar-map-4); }

.gar-map[data-layer="total"] .gar-map__region[data-level-total="5"],
.gar-map[data-layer="tetra"] .gar-map__region[data-level-tetra="5"],
.gar-map[data-layer="para"]  .gar-map__region[data-level-para="5"]  { fill: var(--gar-map-5); }

/* Повна окупація: штрихування ЗАМІСТЬ заливки — числа немає й не буде.
   Селектор іде після ступенів, щоб перекрити їх незалежно від шару. */
.gar-map .gar-map__region--tot-full { fill: url(#gar-map-hatch); }

.gar-map__region:hover,
.gar-map__region:focus {
    outline: none;
    stroke: currentColor;
    stroke-width: 2.5;
}

.gar-map__region:focus-visible {
    stroke: currentColor;
    stroke-width: 3;
}

/* ── тултіп ───────────────────────────────────────────────────────────── */

.gar-map__tooltip {
    position: absolute;
    z-index: 2;
    max-width: 15rem;
    padding: .5rem .65rem;
    border-radius: 4px;
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    font-size: .85rem;
    line-height: 1.35;
    pointer-events: none;
}

.gar-map__tooltip strong { display: block; }

.gar-map__tooltip-note {
    display: block;
    margin-top: .25rem;
    color: #5a5a5a;
    font-size: .8rem;
}

/* ── легенда ──────────────────────────────────────────────────────────── */

.gar-map__legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin: .5rem 0 .75rem;
    padding: 0;
    list-style: none;
    font-size: .82rem;
    opacity: var(--gar-map-muted);
}

.gar-map[data-layer="total"] .gar-map__legend:not([data-for="total"]),
.gar-map[data-layer="tetra"] .gar-map__legend:not([data-for="tetra"]),
.gar-map[data-layer="para"]  .gar-map__legend:not([data-for="para"])  { display: none; }

.gar-map__legend-item {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.gar-map__swatch {
    display: inline-block;
    width: 1.4rem;
    height: .8rem;
    border: 1px solid var(--gar-map-rule);
}

.gar-map__legend-item[data-level="1"] .gar-map__swatch { background: var(--gar-map-1); }
.gar-map__legend-item[data-level="2"] .gar-map__swatch { background: var(--gar-map-2); }
.gar-map__legend-item[data-level="3"] .gar-map__swatch { background: var(--gar-map-3); }
.gar-map__legend-item[data-level="4"] .gar-map__swatch { background: var(--gar-map-4); }
.gar-map__legend-item[data-level="5"] .gar-map__swatch { background: var(--gar-map-5); }

.gar-map__swatch--partial {
    background: repeating-linear-gradient(45deg,
        var(--gar-map-3) 0 4px, rgba(90, 90, 90, .45) 4px 6px);
}

.gar-map__swatch--full {
    background: repeating-linear-gradient(45deg,
        #e0e0e0 0 3px, #b4b4b4 3px 5px);
}

/* ── перемикач шарів ──────────────────────────────────────────────────── */

.gar-map__switcher {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .6rem;
}

.gar-map__tab {
    padding: .4rem .8rem;
    border: 1px solid var(--gar-map-rule);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.gar-map__tab:hover { border-color: var(--gar-map-accent); }

.gar-map__tab[aria-pressed="true"] {
    border-color: var(--gar-map-accent);
    background: var(--gar-map-accent);
    color: #fff;
}

.gar-map__tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.gar-map__caption {
    margin: 0 0 .4rem;
    font-size: .9rem;
    opacity: var(--gar-map-muted);
}

/* ── таблиця ──────────────────────────────────────────────────────────── */

.gar-map__details { margin-top: 1rem; }

.gar-map__details summary {
    cursor: pointer;
    font-size: .9rem;
    color: inherit;
    text-decoration: underline;
}

.gar-map__table {
    width: 100%;
    margin-top: .75rem;
    border-collapse: collapse;
    font-size: .88rem;
}

.gar-map__table caption {
    margin-bottom: .5rem;
    opacity: var(--gar-map-muted);
    font-size: .85rem;
    text-align: left;
}

.gar-map__table th,
.gar-map__table td {
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--gar-map-rule);
    text-align: right;
}

/* Числа праворуч, тож і їхні заголовки праворуч: інакше «Разом» стоїть біля
   лівого краю колонки, число — біля правого, і воно читається як чуже. */
.gar-map__table thead th { text-align: right; }

.gar-map__table thead th:first-child,
.gar-map__table thead th:last-child,
.gar-map__table th[scope="row"],
.gar-map__table tfoot th { text-align: left; }

.gar-map__cell { white-space: nowrap; }

.gar-map__table tfoot th,
.gar-map__table tfoot td {
    border-top: 2px solid var(--gar-map-rule);
    font-weight: 700;
}

.gar-map__note {
    opacity: var(--gar-map-muted);
    font-style: italic;
    font-size: .82rem;
    text-align: left;
}

.gar-map__cell--suppressed,
.gar-map__cell--nodata { opacity: var(--gar-map-muted); }

.gar-map__empty { opacity: var(--gar-map-muted); }

@media (max-width: 600px) {
    .gar-map__table { font-size: .8rem; }
    .gar-map__note  { font-size: .75rem; }
}

/* ── шар районів (drill-down) ─────────────────────────────────────────── */

.gar-map__rayons-layer {
    position: absolute;
    inset: 0;
    /* Шар лишається в DOM і після згортання деталізації, а <svg> — це блок, який
       перехоплює кліки всією своєю площею, а не лише намальованим. Без цього
       після повернення до областей вони переставали реагувати: кліки з'їдав
       порожній шар зверху. Клікабельними лишаються самі райони, нижче. */
    pointer-events: none;
}

/* Однаковий viewBox з шаром областей, тож накладається один в один.
   Див. tools/ua_projection.py: рамка зафіксована, а не рахується з даних. */
.gar-map__rayons-layer svg {
    width: 100%;
    height: auto;
    display: block;
}

.gar-map__rayon {
    pointer-events: auto;
    fill: var(--gar-map-empty);
    stroke: var(--gar-map-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transition: fill .15s ease;
}

.gar-map__rayon.is-off {
    display: none;
}

.gar-map__rayon[data-lvl="1"] { fill: var(--gar-map-1); }
.gar-map__rayon[data-lvl="2"] { fill: var(--gar-map-2); }
.gar-map__rayon[data-lvl="3"] { fill: var(--gar-map-3); }
.gar-map__rayon[data-lvl="4"] { fill: var(--gar-map-4); }
.gar-map__rayon[data-lvl="5"] { fill: var(--gar-map-5); }

/* Подавлена комірка НЕ фарбується за своїм справжнім числом — колір видав би те,
   що ховає підпис. Окремий нейтральний стан замість ступеня шкали. */
.gar-map__rayon[data-s="1"],
.gar-map__rayon[data-empty="1"] {
    fill: var(--gar-map-empty);
    opacity: .55;
}

.gar-map__rayon:hover,
.gar-map__rayon:focus {
    outline: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Поки відкрита деталізація — області гаснуть, лишаючись тлом. */
.gar-map[data-drill] .gar-map__svg:not(.gar-map__svg--rayons) .gar-map__region {
    opacity: .25;
}

.gar-map[data-loading] .gar-map__canvas {
    cursor: progress;
}

.gar-map__back {
    display: inline-block;
    margin-bottom: .5rem;
    padding: .35rem .7rem;
    border: 1px solid var(--gar-map-rule);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.gar-map__back:hover { border-color: var(--gar-map-accent); }

.gar-map__back:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.gar-map__attribution {
    margin: .4rem 0 0;
    font-size: .78rem;
    opacity: var(--gar-map-muted);
}

.gar-map__attribution a { color: inherit; }

.gar-map__table-group th {
    padding-top: .8rem;
    font-size: .9rem;
}

.gar-map__drill-error {
    margin: .5rem 0 0;
    font-size: .85rem;
    opacity: var(--gar-map-muted);
}

/* ─── Об'єднана мапа: два набори даних на одній мапі ───────────────────
 *
 * Видимістю керує атрибут data-set на контейнері, тобто чистий CSS:
 * без JS активний набір усе одно показаний правильно, а неактивний
 * лишається в DOM — скрінрідер дістає обидві таблиці.
 */
.gar-map__datasets {
    display: flex;
    gap: .25rem;
    margin-bottom: .75rem;
}

.gar-map__dataset {
    flex: 1 1 auto;
    padding: .5rem 1rem;
    font: inherit;
    color: inherit;                 /* тема темна — колір успадковуємо */
    background: transparent;
    border: 1px solid currentColor;
    border-radius: .25rem;
    opacity: .6;
    cursor: pointer;
}

.gar-map__dataset[aria-pressed="true"] {
    opacity: 1;
    font-weight: 700;
}

.gar-map__dataset:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Ряди шарів, підписи й таблиці неактивного набору ховаємо. */
.gar-map--combined[data-set="people"]   .gar-map__switcher[data-set="services"],
.gar-map--combined[data-set="people"]   .gar-map__caption[data-set="services"],
.gar-map--combined[data-set="people"]   .gar-map__tablewrap[data-set="services"],
.gar-map--combined[data-set="services"] .gar-map__switcher[data-set="people"],
.gar-map--combined[data-set="services"] .gar-map__caption[data-set="people"],
.gar-map--combined[data-set="services"] .gar-map__tablewrap[data-set="people"] { display: none; }