/* Спортивные объекты ДНР — оформление по официальной айдентике Республики.
   Золото #b88c46 (тот же цвет, что в гербе и наборе иконок), графит #1b2026,
   шрифты KEKUR, PT Root UI и Actay — из фирменного набора. */

@font-face { font-family: 'Kekur'; src: url('vendor/fonts/kekur-bold.woff2') format('woff2');
             font-weight: 700; font-display: swap; }
@font-face { font-family: 'PT Root UI'; src: url('vendor/fonts/ptroot-regular.woff2') format('woff2');
             font-weight: 400; font-display: swap; }
@font-face { font-family: 'PT Root UI'; src: url('vendor/fonts/ptroot-medium.woff2') format('woff2');
             font-weight: 500; font-display: swap; }
@font-face { font-family: 'PT Root UI'; src: url('vendor/fonts/ptroot-bold.woff2') format('woff2');
             font-weight: 700; font-display: swap; }
@font-face { font-family: 'Actay'; src: url('vendor/fonts/actay-regular.woff2') format('woff2');
             font-weight: 400; font-display: swap; }

:root {
  /* Золото из брендбука — ровно тот цвет, что в гербе и наборе иконок.
     Шкала на светлом фоне идёт по контрасту, а не по светлоте: чем больше
     номер, тем темнее и тем лучше читается текст. Светлые оттенки золота
     живут отдельно, в --gold-bg и --gold-line: они для заливок и рамок. */
  --gold:        #b88c46;
  --gold-2:      #a4762f;
  --gold-3:      #8a6229;
  --gold-4:      #6f4e20;
  --gold-5:      #55391a;
  --gold-bg:     #f6efe2;
  --gold-line:   #e0cba4;
  --black:       #010101;
  --ink:         #1b2026;
  --gray:        #6d7681;
  --gray-2:      #d5d5d5;
  --white:       #ffffff;

  --bg:          #f6f2ea;
  --panel:       #ffffff;
  --panel-2:     #faf6ee;
  --line:        #e6dccb;
  --text:        #1b2026;
  --text-dim:    #6d7681;

  --ok:          #2e7d4f;
  --warn:        #b57812;
  --bad:         #c33a3a;
  --none:        #8b8b8b;

  --topbar-h:    64px;

  --filters-w:   306px;
  --card-w:      384px;

  --font-head:   'Kekur', 'Actay', 'PT Root UI', system-ui, sans-serif;
  --font-text:   'PT Root UI', 'Actay', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
button, input, select { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- шапка */
/* фирменный паттерн из айдентики — тонкой полосой по шапке, еле заметно,
   чтобы читались и заголовок, и счётчики */
.topbar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('vendor/pattern.png') right center / auto 100% repeat-x;
  opacity: .07;
}
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(31,42,51,.07);
  position: relative; z-index: 900;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* герб Республики — файлом из айдентики, а не нарисованный от руки */
.brand-mark { width: 26px; height: 37px; flex: none; display: block; }
.brand-abbr { font-family: var(--font-head); font-size: 11px; font-weight: 700;
              fill: var(--gold); stroke: none; letter-spacing: .5px; }
.brand-title {
  font-family: var(--font-head); font-weight: 700;
  font-size: 21px; letter-spacing: .6px; line-height: 1; color: var(--gold-5);
  text-transform: uppercase;
}
.brand-sub { font-size: 11px; color: var(--text-dim); letter-spacing: .2px; margin-top: 2px; }

.counters { display: flex; gap: 8px; margin-left: auto; overflow: hidden; }
.counter {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 11px; min-width: 74px; text-align: center;
}
.counter b {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 21px; line-height: 1.05; letter-spacing: .5px;
}
.counter span { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }
.counter.total b { color: var(--gold); }
.counter.ok b    { color: var(--ok); }
.counter.bad b   { color: var(--bad); }
.counter.warn b  { color: var(--warn); }

.topbar-actions { display: flex; gap: 8px; }
.ghost-btn {
  background: transparent; border: 1px solid var(--line); color: var(--gold-3);
  border-radius: 8px; padding: 7px 13px; cursor: pointer; white-space: nowrap;
}
.ghost-btn:hover { border-color: var(--gold); color: var(--gold-5); }
.icon-btn {
  background: transparent; border: 0; color: var(--gold-3); cursor: pointer;
  width: 34px; height: 34px; padding: 6px; border-radius: 8px; flex: none;
}
.icon-btn:hover { background: var(--panel-2); color: var(--gold-5); }
.icon-btn svg { width: 100%; height: 100%; }
.link-btn { background: none; border: 0; color: var(--gold-3); cursor: pointer;
            font-size: 12px; text-decoration: underline; padding: 0; }
.link-btn:hover { color: var(--gold-5); }
.primary-btn {
  background: var(--gold); color: var(--black); border: 0; border-radius: 8px;
  padding: 11px 16px; font-weight: 600; cursor: pointer; width: 100%;
}

/* --------------------------------------------------------------- макет */
/* Высоту карты раньше считали вычитанием: 100% минус шапка минус строка
   поиска. На узком экране строка переносится на две-три полосы, высота
   перестаёт совпадать, и карта либо вылезает за экран, либо не достаёт до низа.
   Поэтому страница — колонка на flex: шапка и поиск занимают сколько нужно,
   карта забирает остаток. */
body { display: flex; flex-direction: column; }
.topbar, .searchbar { flex: none; }
.layout { display: flex; flex: 1; min-height: 0; position: relative; }

.filters {
  width: var(--filters-w); flex: none; background: var(--panel);
  border-right: 1px solid var(--line); overflow-y: auto; padding: 14px 14px 20px;
}
.filters-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-family: var(--font-head); font-size: 17px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--gold-4);
}
.filters-head .link-btn { margin-left: auto; font-family: var(--font-text); }

.field { margin-bottom: 11px; }
.field label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 4px;
               text-transform: uppercase; letter-spacing: .4px; }
.field input, .field select, .group-body input {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; outline: none;
}
.field input:focus, .field select:focus, .group-body input:focus { border-color: var(--gold); }

.group { border-top: 1px solid var(--line); }
.group-head {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  padding: 11px 0; display: flex; align-items: center; color: var(--gold-4);
  font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
}
.group-head .chev {
  margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .18s;
}
.group.open .group-head .chev { transform: rotate(-135deg); }
.group-body { display: none; padding-bottom: 11px; }
.group.open .group-body { display: block; }
.group-body input { margin-bottom: 8px; }

.check {
  display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer;
  font-size: 13px; user-select: none;
}
.check input { appearance: none; width: 16px; height: 16px; flex: none; cursor: pointer;
               border: 1.5px solid var(--gray); border-radius: 4px; background: transparent;
               position: relative; }
.check input:checked { border-color: var(--gold); background: var(--gold); }
.check input:checked::after {
  content: ''; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px;
  border-right: 2px solid var(--black); border-bottom: 2px solid var(--black); transform: rotate(43deg);
}
.check .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.check .num { margin-left: auto; color: var(--text-dim); font-size: 11px; }
.check.off { opacity: .4; }

.switch { display: flex; align-items: flex-start; gap: 9px; padding: 13px 0 4px;
          border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.switch input { appearance: none; width: 34px; height: 19px; border-radius: 12px; flex: none;
                background: var(--panel-2); border: 1px solid var(--line); position: relative;
                cursor: pointer; transition: background .15s; }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
                       border-radius: 50%; background: var(--gray); transition: .15s; }
.switch input:checked { background: rgba(184,139,71,.28); border-color: var(--gold); }
.switch input:checked::after { left: 17px; background: var(--gold); }

.filters-foot { position: sticky; bottom: -20px; background: var(--panel); padding-top: 12px;
                margin-top: 10px; border-top: 1px solid var(--line); font-size: 12px;
                color: var(--text-dim); }
.filters-foot #found-count b { color: var(--gold); font-size: 14px; }

/* ---------------------------------------------------------------- карта */
.map-wrap { flex: 1; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: var(--bg); }

/* собственные подписи карты — по-русски, поверх подложки без надписей */
.map-label { position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
             pointer-events: none; }
.np-label { font-size: 12px; font-weight: 600; color: #384450;
            text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff; }
.np-label.big { font-size: 14px; }
.mo-label { font-family: var(--font-head); font-size: 17px; font-weight: 700;
            letter-spacing: .06em; text-transform: uppercase; color: var(--gold-4);
            text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #fff; }
/* на спутниковых снимках фон тёмный — подписи выворачиваем */
.on-dark-basemap .np-label { color: #fff; text-shadow: 0 0 4px #000, 0 0 8px #000; }
.on-dark-basemap .mo-label { color: var(--gold-3); text-shadow: 0 0 5px #000, 0 0 10px #000; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  background: var(--panel); border: 1px solid var(--gold);
  color: var(--gold-5); padding: 9px 16px; border-radius: 10px; font-size: 13px;
  box-shadow: 0 6px 20px rgba(31,42,51,.16);
  z-index: 1500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: 88vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.leaflet-container { background: var(--bg); font-family: inherit; }
.leaflet-control-zoom a {
  background: var(--panel) !important; color: var(--gold-3) !important;
  border-color: var(--line) !important;
}
.leaflet-control-zoom a:hover { color: var(--gold-5) !important; }
.leaflet-control-attribution {
  background: rgba(255,255,255,.82) !important; color: var(--text-dim) !important; font-size: 10px;
}
.leaflet-control-attribution a { color: var(--gold-3) !important; }

.legend {
  position: absolute; left: 12px; bottom: 22px; z-index: 500;
  background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 4px 18px rgba(31,42,51,.10);
  max-height: calc(100% - 44px); display: flex; flex-direction: column; max-width: 250px;
}
.legend-head {
  background: none; border: 0; color: var(--gold-5); cursor: pointer; text-align: left;
  padding: 9px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
}
.legend-body { display: none; padding: 0 12px 11px; overflow-y: auto; font-size: 12px;
               max-height: min(52vh, 430px); }
.legend.open .legend-body { display: block; }
.legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.legend-row .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.legend-sub { color: var(--text-dim); text-transform: uppercase; font-size: 10px;
              letter-spacing: .5px; margin: 9px 0 3px; }

/* маркеры */
.pin { position: relative; }
.pin svg.glyph { position: absolute; inset: 0; margin: auto; width: 15px; height: 15px;
                 stroke: #fff; stroke-width: 2; }
.pin .disc {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(31,42,51,.35);
}
.pin.dead .disc { border-style: dashed; opacity: .62; }
.pin .badge {
  position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px;
  border-radius: 50%; border: 2px solid #fff;
}
.pin.approx .disc { border-color: rgba(31,42,51,.28); border-style: dotted; }

.cluster-icon {
  background: #fff; border: 2px solid var(--gold);
  color: var(--gold-5); border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-head); font-size: 15px;
  letter-spacing: .5px; box-shadow: 0 0 0 4px rgba(184,139,71,.16), 0 2px 8px rgba(31,42,51,.18);
}

/* ------------------------------------------------------- карточка объекта */
.card {
  width: var(--card-w); flex: none; background: var(--panel);
  border-left: 1px solid var(--line); overflow-y: auto; position: relative;
  display: none;
}
.card.open { display: block; }
.card-close { position: absolute; right: 8px; top: 8px; z-index: 3; background: rgba(255,255,255,.72); }
.card-body { padding: 16px 16px 28px; }

.card h2 {
  font-family: var(--font-head); font-weight: 700; font-size: 22px;
  line-height: 1.1; letter-spacing: .4px; margin: 0 34px 10px 0; color: var(--ink);
  text-transform: uppercase;
}
.card .kind-line { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.card .kind-line .dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.card .kind-line span { font-size: 13px; color: var(--gold-3); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tag {
  font-size: 11px; padding: 3px 9px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--text-dim); background: var(--panel-2);
}
.tag.ok   { color: var(--ok);   border-color: rgba(76,175,106,.4); }
.tag.bad  { color: var(--bad);  border-color: rgba(214,69,69,.4); }
.tag.warn { color: var(--warn); border-color: rgba(224,160,32,.4); }

.rows { border-top: 1px solid var(--line); }
.row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line);
       font-size: 13px; align-items: baseline; }
.row .k { width: 118px; flex: none; color: var(--text-dim); font-size: 11px;
          text-transform: uppercase; letter-spacing: .4px; }
.row .v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.row .v.empty { color: #98a0a8; font-style: italic; }
.row .v a { color: var(--gold-3); }

.sport-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sport-chips span { font-size: 11px; padding: 2px 8px; border-radius: 20px;
                    background: var(--gold-bg); color: var(--gold-5); }

.plan-box { margin-top: 14px; border: 1px solid rgba(181,120,18,.34); border-radius: 10px;
            padding: 11px 12px; background: rgba(181,120,18,.07); }
.plan-box h3 { margin: 0 0 8px; font-family: var(--font-head); font-size: 15px;
               letter-spacing: .5px; color: var(--warn); text-transform: uppercase; }
.plan-box .row { border-bottom: 0; padding: 4px 0; }
.plan-box .row .k { width: 104px; }

.note-box { margin-top: 12px; font-size: 12px; color: var(--text-dim);
            border-left: 2px solid var(--line); padding-left: 10px; }
.gallery { display: flex; gap: 6px; overflow-x: auto; margin: -4px -16px 14px; padding: 0 16px 4px; }
.gallery a { flex: none; }
.gallery img { height: 122px; width: auto; max-width: 210px; object-fit: cover;
               border-radius: 8px; border: 1px solid var(--line); display: block; }

.photo-btn { display: block; text-align: center; margin-top: 14px; padding: 10px;
             border: 1px dashed var(--line); border-radius: 10px; color: var(--gold-3);
             text-decoration: none; font-size: 13px; }
.photo-btn:hover { border-color: var(--gold); color: var(--gold-5); }

.loader {
  position: fixed; inset: 0; background: var(--bg); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-3); font-family: var(--font-head); font-size: 19px;
  letter-spacing: 1px; text-transform: uppercase; transition: opacity .3s;
}
.loader.hidden { opacity: 0; pointer-events: none; }

.only-mobile { display: none; }

/* ------------------------------------------------------------- телефон */
.mobile-actions { display: none; gap: 8px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.mobile-actions .ghost-btn { flex: 1; text-align: center; }

@media (max-width: 900px) {
  :root { --topbar-h: 54px; }
  .only-mobile { display: block; }
  .mobile-actions.only-mobile { display: flex; }
  .topbar { gap: 10px; padding: 0 10px; }
  .topbar-actions { display: none; }
  .brand-sub { display: none; }
  .brand-title { font-size: 15px; white-space: nowrap; }
  .brand-mark { width: 21px; height: 30px; }
  .counters { gap: 5px; }
  .counter { min-width: 50px; padding: 3px 6px; }
  .counter b { font-size: 15px; }
  .counter span { font-size: 8px; }
  .counter.warn { display: none; }
  .counter:nth-child(5) { display: none; }

  .filters {
    position: absolute; z-index: 1000; inset: 0 auto 0 0; width: min(88vw, 340px);
    transform: translateX(-101%); transition: transform .22s ease;
    box-shadow: 12px 0 30px rgba(31,42,51,.18);
  }
  .filters.open { transform: none; }
  .filters-foot { position: sticky; bottom: 0; }

  .card {
    position: absolute; display: block; inset: auto 0 0 0; width: auto;
    max-height: 78vh; border-left: 0; border-top: 1px solid var(--gold);
    border-radius: 16px 16px 0 0; transform: translateY(101%);
    transition: transform .24s ease; z-index: 1100; box-shadow: 0 -10px 30px rgba(31,42,51,.20);
  }
  .card.open { transform: none; }
  .legend { bottom: 12px; left: 8px; max-width: 62vw; }
}

@media (max-width: 460px) {
  .brand-text { display: none; }
}

/* ------------------------------------------------------------ верхний поиск
   Три главных вопроса посетителя вынесены над картой: вид спорта, округ,
   адрес. Подробные фильтры остались в панели слева — она для сотрудников,
   верхняя строка для жителей. */
.searchbar {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.sb-field { display: flex; flex-direction: column; gap: 4px; min-width: 210px; }
.sb-field.wide { flex: 1; min-width: 260px; }
.sb-field span { font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
                 color: var(--text-dim); }
.sb-field select, .sb-field input {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; font-size: 14px; color: var(--ink); width: 100%;
}
.sb-field select:focus, .sb-field input:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,139,71,.14);
}
#s-reset { padding-bottom: 10px; }


/* ------------------------------------------------------------- мини-обзор */
.mini-popup .leaflet-popup-content-wrapper {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(31,42,51,.18); padding: 0;
}
.mini-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.mini-popup .leaflet-popup-tip { background: var(--panel); border: 1px solid var(--line); }
.mini-popup a.leaflet-popup-close-button { color: var(--text-dim); padding: 6px 7px 0 0; }

.mini-photo { width: 100%; height: 132px; object-fit: cover; display: block;
              border-radius: 11px 11px 0 0; }
.mini-photo.empty { display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--text-dim); font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--line); }
.mini-body { padding: 11px 13px 13px; }
.mini-kind { display: flex; align-items: center; gap: 6px; font-size: 11px;
             color: var(--text-dim); margin-bottom: 5px; }
.mini-kind .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mini-status { margin-left: auto; }
.mini-status.ok { color: var(--ok); }
.mini-status.bad { color: var(--bad); }
.mini-body h3 { font-family: var(--font-head); font-weight: 700;
  font-size: 17px; line-height: 1.12; letter-spacing: .3px; text-transform: uppercase;
  margin: 0 0 9px; color: var(--ink); }
.mini-row { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px;
            margin-bottom: 5px; color: var(--ink); }
.mini-row svg { width: 15px; height: 15px; flex: none; color: var(--gold); margin-top: 1px; }
.mini-row a { color: var(--gold); }
.mini-more { display: block; margin-top: 10px; text-align: center; padding: 8px 10px;
  background: var(--gold); color: #fff; border-radius: 9px; font-size: 13px;
  text-decoration: none; font-weight: 600; }
.mini-more:hover { filter: brightness(1.06); }

@media (max-width: 900px) {
  /* на телефоне вид спорта и округ встают в ряд по половине ширины,
     адрес — на всю: три поля занимают две полосы вместо четырёх */
  .searchbar { padding: 8px 10px; gap: 8px; }
  .sb-field { min-width: 0; flex: 1 1 calc(50% - 4px); }
  .sb-field.wide { flex: 1 1 100%; }
  .sb-field span { font-size: 9px; }
  .sb-field select, .sb-field input { padding: 8px 9px; font-size: 13px; }
  #s-reset { display: none; }            /* сброс есть в панели фильтров */

  .mini-popup .leaflet-popup-content { max-width: 78vw; }
  .mini-photo { height: 108px; }
}

@media (max-width: 460px) {
  /* два коротких поля оставляем в одной полосе даже на узком телефоне:
     иначе поиск съедает треть экрана и карты почти не видно */
  .searchbar { padding: 6px 8px; gap: 6px; }
  .sb-field span { font-size: 8px; letter-spacing: .3px; }
  .sb-field select, .sb-field input { padding: 7px 8px; font-size: 12.5px; }
}


/* Esri Light Gray сама по себе почти белая — на общем виде республики карта
   читалась как пустой лист. Лёгкий контраст возвращает реки, дороги и застройку,
   не ломая светлое оформление. */
.leaflet-tile-pane { filter: contrast(1.08) saturate(1.06); }