/* ── Палитра тем ───────────────────────────────────────────────
   По умолчанию — тёмная. body.light переопределяет на светлую.
   Цвета статусов (зелёный/жёлтый/красный) общие — читаются на обоих фонах. */
:root {
  --bg:        #0f1115;   /* фон страницы/карты */
  --surface:   #15181e;   /* шапка, шторка */
  --surface-2: #1c2027;   /* чипы, кнопки, карточки */
  --border:    #23262d;
  --border-2:  #2a2e36;
  --text:      #e8eaed;
  --text-dim:  #8b909a;
  --text-mid:  #cfd3da;
  --text-addr: #c2c7d0;   /* адрес АЗС — выше контраст, чем у dim (тонул в тёмной) */
  --grip:      #3a3f48;
  --attr-bg:   rgba(15,17,21,.7);
  --shadow:    rgba(0,0,0,.5);
}
body.light,
html.pre-light body {   /* pre-light: светлый ставится до загрузки JS — против тёмной вспышки */
  --bg:        #f2f4f7;
  --surface:   #ffffff;
  --surface-2: #eef1f5;
  --border:    #e2e6eb;
  --border-2:  #d4d9e0;
  --text:      #1a1d22;
  --text-dim:  #6b7280;
  --text-mid:  #4b5563;
  --text-addr: #3a4250;   /* адрес АЗС */
  --grip:      #c4ccd6;
  --attr-bg:   rgba(255,255,255,.8);
  --shadow:    rgba(0,0,0,.18);
}
html.pre-light body { background: #f2f4f7; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
}

/* прячем флаг/логотип Leaflet намертво */
.leaflet-control-attribution svg,
.leaflet-attribution-flag { display: none !important; }
.leaflet-control-attribution a[href*="leafletjs"] { display: none !important; }
.leaflet-control-attribution {
  background: var(--attr-bg) !important; color: #888 !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: #888 !important; }

#map { position: absolute; top: 92px; bottom: 0; left: 0; right: 0; background: var(--bg); }

/* фильтр «скрыть где нет» + счётчик статусов */
#only-available {
  position: absolute; top: 56px; left: 0; right: 0; height: 36px; z-index: 1090;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text-mid); user-select: none;
}
.oa-check { display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
#only-available input { width: 18px; height: 18px; accent-color: #2ecc71; }
/* счётчик по области: N есть · N очередь · N нет */
.tally { display: flex; gap: 6px; }
.tally-chip {
  font-size: 12px; padding: 2px 8px; border-radius: 8px; white-space: nowrap;
  background: var(--surface-2);
}
.tally-chip b { font-variant-numeric: tabular-nums; font-weight: 800; }
.t-green b  { color: #22a35a; }
.t-yellow b { color: #e08e12; }
.t-red b    { color: #d33d2f; }

/* --- Шапка --- */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 56px; z-index: 1100;
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { font-size: 16px; white-space: nowrap; flex: 0 0 auto; }
.brand span { color: #2ecc71; }
#topbar select, #topbar .pill {
  height: 38px; border-radius: 12px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--text); font-size: 14px; padding: 0 12px;
  cursor: pointer; transition: transform .1s ease, background .15s ease;
}
#topbar .pill:active { transform: scale(.95); }
/* селект топлива — приоритет ширины, выбранная марка ВСЕГДА читаема */
#topbar select { flex: 1 1 auto; min-width: 96px; font-weight: 600; }
/* «Рядом» — акцентная кнопка с фирменным зелёным градиентом */
#nearby {
  background: linear-gradient(135deg, #34d97e, #22a35a); color: #06240f;
  border: none; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(46,204,113,.35);
}

/* на узких экранах прячем длинный бренд-текст и лейбл свежести — освобождаем
   место селекту топлива (иначе он схлопывается и марку не видно) */
@media (max-width: 430px) {
  .brand b { display: none; }        /* оставляем только значок ⛽ */
  #fresh-label { display: none; }
  #topbar { gap: 6px; padding: 0 8px; }
}

/* переключатель темы ☀️/🌙 */
#theme-toggle {
  width: 36px; flex: 0 0 36px; padding: 0; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}

/* --- Маркеры-капли --- */
.pin {
  width: 34px; height: 34px; position: relative;
}
.pin-body {
  width: 34px; height: 34px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 3px 8px var(--shadow);
  display: flex; align-items: center; justify-content: center;
}
/* на светлом фоне капле нужна тёмная окантовка, иначе белый край теряется */
body.light .pin-body { border-color: rgba(0,0,0,.25); }
.pin-body span { transform: rotate(45deg); font-size: 16px; line-height: 1; }
/* объёмная заливка каплей — светлее сверху, темнее снизу (после rotate -45°
   градиент идёт по «капле», а не по колонке — 135deg визуально сверху-вниз) */
.pin-GREEN  .pin-body { background: linear-gradient(135deg, #4ade80, #22a35a); }
.pin-YELLOW .pin-body { background: linear-gradient(135deg, #fbbf4d, #e08e12); }
.pin-RED    .pin-body { background: linear-gradient(135deg, #f16a5d, #d33d2f); }
.pin-UNKNOWN .pin-body { background: linear-gradient(135deg, #9096a1, #6b7280); }
/* маркер только с данными Т-Банка (без живых отметок) — жёлтая рамка + меньше значок */
.pin-tbank .pin-body { border-color: #ffd200; box-shadow: 0 0 0 2px rgba(255,210,0,.4), 0 3px 8px var(--shadow); }
.pin-tbank .pin-body span { font-size: 13px; }

/* деградация доверия: маркер бледнеет с возрастом живой отметки.
   fresh-new — яркий (свежая), fresh-old — приглушённый (старая). */
.pin.fresh-new { opacity: 1; }
.pin.fresh-mid { opacity: 0.75; }
.pin.fresh-old { opacity: 0.5; }

/* кластеры — объёмные «капсулы» с мягким свечением по статусу */
.cluster {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.92);
  color: #fff; font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px var(--shadow), inset 0 1px 2px rgba(255,255,255,.35);
  transition: transform .12s ease;
}
.leaflet-marker-icon:active .cluster { transform: scale(.94); }

/* --- Нижняя карточка-шторка --- */
#sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1200;
  max-height: 75%; overflow-y: auto;
  background: var(--surface); border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px var(--shadow);
  padding: 8px 16px 24px; transition: transform .25s ease;
}
#sheet.hidden { transform: translateY(110%); }
.sheet-grip {
  width: 40px; height: 4px; background: var(--grip); border-radius: 2px;
  margin: 6px auto 12px;
}
#sheet-close {
  position: absolute; top: 12px; right: 14px; width: 32px; height: 32px;
  border-radius: 50%; border: none; background: var(--surface-2); color: var(--text-dim); font-size: 16px; cursor: pointer;
}
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.card-logo { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 22px; }
/* буквенный бейдж сети (свои логотипы вместо чужих товарных знаков) */
.brand-badge {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; line-height: 1;
}
.card-title { font-size: 18px; font-weight: 700; }
.card-sub { font-size: 14px; color: var(--text-addr); font-weight: 500; }

.status-box {
  border-radius: 14px; padding: 14px 14px 14px 18px; margin: 12px 0;
  border-left-width: 4px; border-left-style: solid;   /* акцентная полоса статуса */
}
.status-box.GREEN  { background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.3); border-left-color: #2ecc71; }
.status-box.YELLOW { background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.3); border-left-color: #f5a623; }
.status-box.RED    { background: rgba(231,76,60,.12); border: 1px solid rgba(231,76,60,.3); border-left-color: #e74c3c; }
.status-box.UNKNOWN{ background: var(--surface-2); border: 1px solid var(--border-2); border-left-color: var(--text-dim); }
.status-title { font-size: 20px; font-weight: 800; }
.status-title.GREEN { color: #1f9d57; } .status-title.YELLOW { color: #d68910; }
.status-title.RED { color: #d83a2b; } .status-title.UNKNOWN { color: var(--text-dim); }
.status-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
/* предупреждение «живых отметок нет» — данные только от банка/посева */
.src-warn { color: #e67e22; font-weight: 600; }

.fuel-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.fuel-chip { padding: 6px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }

/* марки с индексом уверенности + one-tap кнопки «Есть/Нет» */
.fuel-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.fuel-line {
  padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 8px;
}
.fuel-line-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.fuel-name { font-size: 14px; font-weight: 600; }
.fuel-conf { font-size: 12px; color: var(--text-dim); }
.fuel-price { font-size: 13px; font-weight: 700; color: #e67e22; }
/* ввод цены при отметке */
.price-box { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.price-input {
  flex: 1 1 100%; padding: 12px; border-radius: 10px; font-size: 16px;
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text);
}
.price-ok, .price-skip {
  flex: 1; padding: 12px; border-radius: 10px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600;
}
.price-ok { background: #2ecc71; color: #07210f; }
.price-skip { background: var(--surface-2); color: var(--text-dim); }
/* one-tap подтверждение: две кнопки в ряд */
.tap-row { display: flex; gap: 8px; }
.tap-btn {
  flex: 1; padding: 8px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600;
}
.tap-yes { background: rgba(46, 204, 113, 0.15); color: #1f9d57; }
.tap-no { background: rgba(231, 76, 60, 0.15); color: #d63c2f; }
.tap-btn:active { opacity: 0.6; }

.sec-title { font-size: 15px; font-weight: 700; margin: 16px 0 8px; }
.hist-item { display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 14px; }
.hist-item .age { color: var(--text-dim); font-size: 12px; }

.route-btn { display: block; width: 100%; text-align: center; padding: 14px;
  border-radius: 12px; background: var(--surface-2); color: #1f9d57; font-weight: 600;
  text-decoration: none; margin-top: 14px; border: 1px solid var(--border-2); }

/* --- Отметка топлива с карты --- */
.mark-btn { display: block; width: 100%; text-align: center; padding: 14px;
  border-radius: 12px; background: #2ecc71; color: #07210f; font-weight: 700;
  font-size: 15px; border: none; cursor: pointer; margin-top: 14px; }
.mark-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.mark-chip { padding: 12px 16px; border-radius: 12px; background: var(--surface-2);
  color: var(--text); border: 1px solid var(--border-2); font-size: 15px;
  font-weight: 600; cursor: pointer; flex: 1 1 calc(50% - 8px); min-width: 0; }
.mark-chip:active { background: var(--border-2); }
.mark-back { display: block; width: 100%; text-align: center; padding: 12px;
  border-radius: 12px; background: transparent; color: var(--text-dim);
  border: none; font-size: 14px; cursor: pointer; margin-top: 4px; }
.nearby-item { display: flex; align-items: center; gap: 10px;
  padding: 12px; background: var(--surface-2); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.nearby-item .brand-badge { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; font-size: 18px; }
.nearby-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nearby-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nearby-item .card-sub { font-size: 13px; }
.nearby-item .dist { color: #1f9d57; font-weight: 700; white-space: nowrap; }
.conf { font-size: 12px; color: #1f9d57; font-weight: 600; }
/* лучшая АЗС (умный подбор) — выделенная рамка + бейдж «Рекомендуем» */
.nearby-best { border: 2px solid #2ecc71; background: rgba(46, 204, 113, 0.08); }
.best-badge { font-size: 11px; font-weight: 700; color: #1f9d57;
  text-transform: uppercase; letter-spacing: 0.5px; }

/* --- Кластеры: радиальный градиент (объём) + цветное свечение по статусу --- */
.cluster-GREEN  { background: radial-gradient(circle at 35% 30%, #4ade80, #22a35a);
  box-shadow: 0 3px 12px rgba(46,204,113,.45), inset 0 1px 2px rgba(255,255,255,.4); }
.cluster-YELLOW { background: radial-gradient(circle at 35% 30%, #fbbf4d, #e08e12);
  box-shadow: 0 3px 12px rgba(245,166,35,.45), inset 0 1px 2px rgba(255,255,255,.4); }
.cluster-RED    { background: radial-gradient(circle at 35% 30%, #f16a5d, #d33d2f);
  box-shadow: 0 3px 12px rgba(231,76,60,.4), inset 0 1px 2px rgba(255,255,255,.35); }
.cluster-UNKNOWN{ background: radial-gradient(circle at 35% 30%, #9096a1, #6b7280);
  box-shadow: 0 3px 10px var(--shadow), inset 0 1px 2px rgba(255,255,255,.25); }

/* разбивка под кластером: сколько 🟢/🟡/🔴 внутри — честный расклад.
   Чипы на подложке, чтобы читались на любом фоне карты. */
.cluster-split {
  display: flex; gap: 3px; justify-content: center; margin-top: 3px;
}
.cdot {
  font-size: 10px; font-weight: 800; color: #fff; line-height: 1;
  padding: 2px 5px; border-radius: 7px; min-width: 8px; text-align: center;
  box-shadow: 0 1px 3px var(--shadow); font-variant-numeric: tabular-nums;
}
.cdot-GREEN  { background: #22a35a; }
.cdot-YELLOW { background: #e08e12; }
.cdot-RED    { background: #d33d2f; }

/* --- Свежесть данных в шапке --- */
.fresh { font-size: 11px; color: var(--text-dim); margin-left: 8px; font-weight: 400; white-space: nowrap; }

/* --- Легенда (сворачиваемая, слева снизу над шторкой) --- */
#legend {
  position: absolute; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 1150; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px 10px; font-size: 12px; color: var(--text-mid);
  box-shadow: 0 2px 10px var(--shadow); max-width: 62vw;
}
#legend summary { cursor: pointer; font-weight: 600; list-style: none; color: var(--text-mid); }
#legend summary::-webkit-details-marker { display: none; }
#legend summary::before { content: 'ℹ️ '; }
#legend[open] summary { margin-bottom: 6px; }
.legend-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; white-space: nowrap; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; }
.dot-green { background: #2ecc71; } .dot-yellow { background: #f5a623; }
.dot-red { background: #e74c3c; } .dot-gray { background: #7a7f8a; }
.legend-bank { width: 12px; text-align: center; font-size: 11px; }

/* --- Тост фоновых ошибок загрузки --- */
.map-toast {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-8px);
  bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 1300;
  background: rgba(20,22,28,.94); color: #fff; padding: 10px 16px; border-radius: 12px;
  font-size: 13px; max-width: 82vw; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.map-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Сообщения внутри шторки (загрузка/ошибка/успех) --- */
.sheet-msg { text-align: center; padding: 26px 16px; color: var(--text-dim); font-size: 15px; }
.sheet-msg b { color: var(--text); }

/* --- Safe-area для iPhone: кнопки шторки не липнут к жестовой полосе --- */
#sheet { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
#topbar { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
#only-available { top: calc(56px + env(safe-area-inset-top)); }
#map { top: calc(92px + env(safe-area-inset-top)); }
.sheet-grip { cursor: grab; touch-action: none; }

/* --- Пульсация капель со свежими отметками (класс вешается из JS при желании) --- */
@media (prefers-reduced-motion: no-preference) {
  .pin-fresh .pin-body { animation: pin-pulse 2s ease-in-out infinite; }
}
@keyframes pin-pulse {
  0%, 100% { box-shadow: 0 3px 8px var(--shadow); }
  50% { box-shadow: 0 0 0 6px rgba(46,204,113,.18), 0 3px 8px var(--shadow); }
}

/* --- Реклама разработчика (футер карты, над легендой) --- */
#dev-ad {
  position: absolute; left: 10px; bottom: calc(46px + env(safe-area-inset-bottom));
  z-index: 1140; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 5px 10px; font-size: 12px;
  color: var(--text-mid); text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 10px var(--shadow); max-width: 70vw;
  overflow: hidden; text-overflow: ellipsis;
}
#dev-ad[hidden] { display: none; }