/* ======================================================================
   LIVE GPS — TO'LIQ EKRANLI XARITA (mijoz talabi, 2026-09)
   "Live GPS'ga kirganda xarita to'liq ekranda ochilsin, mobilda ham
   kompyuterda ham qulay bo'lsin, faqat xarita qolsin."

   Shuning uchun bu ekranda sahifa sarlavhasi/KPI/pastki bloklar YO'Q:
   xarita butun ko'rinishni egallaydi, uning ustida faqat uchta narsa
   suzadi — "Orqaga" tugmasi, ixcham boshqaruv to'plami va yig'iladigan
   transport varag'i (telefonda standart holatda YOPIQ).
   Barcha rang va o'lcham app.css dagi tokenlardan olinadi.
   ====================================================================== */

/* ======================================================================
   XARITA USTIDAGI YUZALAR — ALOHIDA TOKEN OILASI
   ----------------------------------------------------------------------
   Belgi (marker), yozuv, suzuvchi tugma va tooltip sahifa fonida EMAS,
   JONLI XARITA PLITKALARI ustida turadi: plitkalar esa mavzu bilan
   birga o'zgarmaydi (oddiy xarita ham, sun'iy yo'ldosh tasviri ham
   bir xil qoladi). Shuning uchun bu yerda `--card` / `--ink` kabi
   mavzu bilan AG'DARILIB ketadigan tokenlar to'g'ri kelmaydi —
   ularning o'rniga mavzu agentidan SO'RALGAN maxsus oila ishlatiladi:

     --map-chip        — belgi/boshqaruv yuzasi (yorug' tabletka)
     --map-chip-ink    — undagi asosiy matn
     --map-chip-ink-2  — ikkinchi darajali matn
     --map-chip-line   — chegarasi
     --map-pin         — TO'Q yuza (ombor belgisi, tooltip)
     --map-pin-ink     — to'q yuzadagi matn

   Token hali berilmagan bo'lsa — mavjud tokenlarga tushadi, ya'ni
   hech qanday qat'iy rang yozilmaydi va hozirgi ko'rinish saqlanadi.
   Bu e'lon `.leaflet-container` da ham turadi: Leaflet belgilarni,
   tooltip va boshqaruvlarni SHU konteyner ichiga chizadi, demak
   buyurtma kartochkasidagi kichik xarita ham shu oiladan foydalanadi.
   ====================================================================== */
.gpsfull, .leaflet-container {
  --mc:       var(--map-chip, var(--card));
  --mc-ink:   var(--map-chip-ink, var(--ink));
  --mc-ink-2: var(--map-chip-ink-2, var(--ink-2));
  --mc-line:  var(--map-chip-line, var(--line));
  --mp:       var(--map-pin, var(--ink));
  --mp-ink:   var(--map-pin-ink, var(--card));
}

/* Sahifaning o'zi bu ekranda bo'sh qoladi — xarita fixed qatlamda */
.page--gps { padding: 0; overflow: hidden; }
body.gps-full { overflow: hidden; }

.gpsfull {
  position: fixed; inset: 0; z-index: 90;
  /* isolation: Leaflet ichki qatlamlari (z-index 400-800) shu qatlamdan
     tashqariga chiqmasin — modal oyna va toastlar ustun turishi kerak. */
  isolation: isolate;
  /* Xarita plitkalari yuklangunicha ko'rinadigan fon. Avval `--sidebar`
     edi, lekin yangi mavzuda menyu YORUG' bo'ladi — sahifa foni
     (`--bg`) ikkala mavzuda ham to'g'ri ishlaydi. */
  background: var(--bg);
  animation: gpsfull-in .26s var(--ease) both;
  /* Telefon "notch"/pastki chiziq chetlari — tugmalar ularga tushmasin */
  --gps-top: max(12px, env(safe-area-inset-top));
  --gps-left: max(12px, env(safe-area-inset-left));
  --gps-right: max(12px, env(safe-area-inset-right));
  --gps-bottom: max(12px, env(safe-area-inset-bottom));
  --gps-peek: 60px;            /* yig'ilgan varaq balandligi (telefon) */
}
@keyframes gpsfull-in {
  from { opacity: 0; transform: scale(.99); }
  to   { opacity: 1; transform: none; }
}

.gpsfull__canvas { position: absolute; inset: 0; }
.gpsfull__canvas .leaflet-container {
  width: 100%; height: 100%; background: var(--card-2);
}

/* ---------------------------------------------------- Yuqori chap burchak */
.gpsfull__top {
  position: absolute; z-index: 10;
  top: var(--gps-top); left: var(--gps-left);
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 2 * var(--gps-left));
}

/* "Orqaga" — ko'zga tashlanadigan, animatsiyali chiqadigan tugma */
.gpsback {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--mc-line); background: var(--mc); color: var(--mc-ink);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-body); font-weight: 600; cursor: pointer;
  white-space: nowrap; flex: 0 0 auto;
  animation: gpsback-in .34s var(--ease) both .05s;
  transition: background .16s var(--ease), color .16s var(--ease),
              transform .12s var(--ease);
}
@keyframes gpsback-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}
.gpsback svg {
  width: 18px; height: 18px; color: var(--blue);
  transition: transform .18s var(--ease), color .16s var(--ease);
}
.gpsback:hover { background: var(--blue); color: var(--on-accent, #fff); }
.gpsback:hover svg { color: var(--on-accent, #fff); transform: translateX(-3px); }
.gpsback:active { transform: scale(.97); }
.gpsback:focus-visible { outline: 3px solid var(--blue-ring); outline-offset: 2px; }

/* Jonli holat — nechta transport, nechtasi signalsiz */
.gpsstate {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--mc) 93%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-meta); font-weight: 600;
  color: color-mix(in srgb, var(--mc-ink-2) 72%, var(--mc-ink));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.gpsstate .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }

/* ============================================ O'NG CHETDAGI BITTA QATOR
   Avval bu yerda to'rtta mustaqil suzuvchi quti bor edi (qatlam
   tanlagich, "Hammasi", "Ombor", belgi tugmalari) — xarita ustida oq
   to'rtburchaklar devori. Endi BITTA yuza: ichidagilar shaffof, ular
   faqat ingichka chiziq bilan ajratiladi. Shunda ham ko'cha
   plitkalari, ham sun'iy yo'ldosh tasviri ustida o'qiladi (yuza
   xiralashtiruvchi va yetarlicha qalin). */
.gpsrail {
  position: absolute; z-index: 10;
  top: var(--gps-top); right: var(--gps-right);
  display: grid; gap: 3px; padding: 3px; border-radius: 14px;
  background: color-mix(in srgb, var(--mc) 94%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--mc-line) 70%, transparent);
  box-shadow: var(--shadow-pop);
  justify-items: stretch;
}
/* Ikki qator orasidagi ajratgich — qo'shimcha quti emas, chiziq */
.gpsrail > .gpsfull__tools {
  padding-top: 3px;
  border-top: 1px solid color-mix(in srgb, var(--mc-line) 80%, transparent);
}

/* ------------------------------------------------- Qatlam tanlash (o'ng) */
.gpslayers {
  display: flex; gap: 2px;
}
.gpslayers__btn {
  /* Pastdagi tugmalar qatori kengroq bo'lsa ham qator bo'sh qolmasin */
  flex: 1 1 auto; justify-content: center;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 11px; border: 0; border-radius: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--mc-ink-2) 72%, var(--mc-ink));
  font-size: var(--fs-meta); font-weight: 600; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.gpslayers__btn svg { width: 15px; height: 15px; }
.gpslayers__btn:hover {
  background: color-mix(in srgb, var(--mc-ink) 8%, transparent);
  color: var(--mc-ink);
}
.gpslayers__btn[aria-pressed="true"] {
  /* To'ldirilgan ko'k ustidagi oq yozuv `--blue` bilan 4,1:1 beradi
     (o'lchangan) — shuning uchun to'ldiruvchi bir qadam chuqurroq. */
  background: var(--blue-strong, color-mix(in srgb, var(--blue) 88%, var(--ink)));
  color: var(--on-accent, #fff);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--blue) 34%, transparent);
}
.gpslayers__btn:focus-visible { outline: 2px solid var(--blue-ring); outline-offset: 1px; }

/* ------------------------------------------------ Xarita tugmalari to'plami
   Qator ichida tugmalar O'Z yuzasiga ega emas: fon ham, chegara ham,
   soya ham qatorniki. Faqat hover/faol holatda yumshoq tus chiqadi —
   xuddi qatlam tugmalaridagidek (ikkalasi bitta til bo'lsin). */
.gpsfull__tools {
  display: flex; align-items: stretch; gap: 2px;
}
.gpsfull__tools .maptool {
  flex: 1 1 auto; justify-content: center;
  height: 34px; padding: 0 11px; border-radius: 10px;
  border: 0; background: transparent; box-shadow: none;
  color: color-mix(in srgb, var(--mc-ink-2) 72%, var(--mc-ink));
  transition: background .16s var(--ease), color .16s var(--ease);
}
.gpsfull__tools .maptool svg { color: currentColor; }
.gpsfull__tools .maptool:hover {
  background: color-mix(in srgb, var(--mc-ink) 8%, transparent);
  color: var(--mc-ink);
}
.gpsfull__tools .maptool--square { flex: 0 0 34px; width: 34px; padding: 0; }
/* Yoqib-o'chiriladigan tugma (Tirbandlik) — yoniq holati qatlam
   tugmalaridagidek to'ldirilgan */
.gpsfull__tools .maptool[aria-pressed="true"] {
  background: var(--blue-strong, color-mix(in srgb, var(--blue) 88%, var(--ink)));
  color: var(--on-accent, #fff);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--blue) 34%, transparent);
}
.gpsfull__tools .maptool:disabled { opacity: .5; cursor: not-allowed; }
.gpsfull__tools .maptool:disabled:hover { background: transparent; }
.gpsfull__tools .maptool:focus-visible {
  outline: 2px solid var(--blue-ring); outline-offset: 1px;
}

/* ------------------------------------------------- Transport varag'i/paneli
   Varaq — BITTA yuza. Avval tutqich ("Avtomobillar (8)") alohida
   suzuvchi tabletka edi, ostida esa alohida karta: chap chetda ikki
   quti bir-birining ustida turardi. Endi tutqich varaqning
   SARLAVHASI (telefondagidek — ikkala ekranda bir xil). */
.gpsheet {
  position: absolute; z-index: 12;
  left: var(--gps-left); top: calc(var(--gps-top) + 52px); bottom: var(--gps-bottom);
  width: 336px; max-width: calc(100% - 2 * var(--gps-left));
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--mc); color: var(--mc-ink);
  border: 1px solid color-mix(in srgb, var(--mc-line) 70%, transparent);
  border-radius: 16px; box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.gpsfull[data-sheet="closed"] .gpsheet { bottom: auto; }

.gpsheet__handle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 42px; padding: 0 14px; border: 0; border-radius: 0;
  background: transparent; color: var(--mc-ink);
  font-size: var(--fs-meta); font-weight: 600; cursor: pointer;
  flex: 0 0 auto;
  transition: background .16s var(--ease);
}
/* Ro'yxat ochiq bo'lsa sarlavha ostida ingichka chiziq — quti emas */
.gpsfull[data-sheet="open"] .gpsheet__handle {
  border-bottom: 1px solid color-mix(in srgb, var(--mc-line) 80%, transparent);
}
/* `<b>` uchun standart `bolder` 600 li ota-element ichida 900 ga aylanadi —
   ekranda to'rtinchi qalinlik paydo bo'lardi, shuning uchun aniq yoziladi */
.gpsheet__handle b { font-weight: 700; }
.gpsheet__handle:hover { background: color-mix(in srgb, var(--mc-ink) 6%, var(--mc)); }
.gpsheet__handle:focus-visible { outline: 3px solid var(--blue-ring); outline-offset: 2px; }
.gpsheet__handle > svg { width: 16px; height: 16px; color: var(--blue); }
.gpsheet__chev { display: inline-flex; color: var(--ink-3); }
.gpsheet__chev svg { width: 14px; height: 14px; }
.gpsheet__grip { display: none; }

.gpsheet__body {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: grid; gap: 0; align-content: start;
  overflow-y: auto; overscroll-behavior: contain;
  animation: gpsheet-in .24s var(--ease) both;
}
@keyframes gpsheet-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
.gpsfull[data-sheet="closed"] .gpsheet__body { display: none; }

.gpsheet__detail:empty { display: none; }
/* Varaq ICHIDAGI kartalar endi karta emas — bo'lim: chegara, radius va
   soya varaqning o'zida. Chegarali kartaning ichida yana chegarali
   karta bo'lmaydi. */
.gpsheet .mapcard {
  width: 100%; border: 0; border-radius: 0; box-shadow: none;
  background: transparent;
}
.gpsheet__detail:not(:empty) + .gpsheet__list {
  border-top: 1px solid color-mix(in srgb, var(--mc-line) 80%, transparent);
}
.gpsheet__list .vlist { max-height: 46vh; }
/* Chiplar (Barchasi / Yo'lda / To'xtagan / Oflayn / Servis) panel eniga
   sig'masdi: oxirgisi yarmidan kesilib qolardi va surish mumkinligi
   bilinmasdi. Kompyuterda endi IKKI QATORGA tushadi — hech narsa
   yashirilmaydi; telefonning pastki varag'ida esa balandlik qimmat,
   shuning uchun u yerda bitta qator bo'lib yon tomonga suriladi va
   o'ng chetida surish mumkinligini bildiruvchi soya turadi.
   Ikki qator teng ustunlarga bo'linadi (3 + 2) — bitta chip yolg'iz
   qolib, qator osilib turmasin. */
.gpsheet .chips {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px; padding: 12px 12px 10px; overflow: visible;
}
.gpsheet .chip {
  padding: 0 6px; font-size: 10.5px; justify-content: center; min-width: 0;
}
/* Bo'lim tanlovi (Hammasi + 3 bo'lim) — 2 x 2, holat tugmalari ustida */
.gpsheet .chips--division {
  grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 0;
}

/* ------------------------------------------------- Leaflet o'z boshqaruvlari */
/* Kattalashtirish tugmalari pastki o'ngda — chapdagi varaqni to'smaydi,
   barmoq bilan ham qulay. */
.gpsfull .leaflet-top.leaflet-left {
  top: auto; left: auto;
  right: var(--gps-right); bottom: calc(var(--gps-bottom) + 34px);
}
.gpsfull .leaflet-control-zoom { border: 0; box-shadow: none; margin: 0; }
.gpsfull .leaflet-control-zoom a {
  border-radius: 10px !important; width: 34px; height: 34px; line-height: 34px;
  border: 1px solid var(--mc-line); box-shadow: var(--shadow-pop);
}
/* Masshtab chizg'ichi chapdagi panel ostida qolmasin */
.gpsfull[data-sheet="open"] .leaflet-bottom.leaflet-left { margin-left: 348px; }
.gpsfull .leaflet-control-attribution {
  background: color-mix(in srgb, var(--mc) 88%, transparent); font-size: 10px;
  border-radius: 6px 0 0 0;
  /* Leaflet bu yozuvni O'Z uslubi bilan to'q kulrang qiladi — fonni biz
     bergan ekanmiz, matn rangini ham shu oiladan berishimiz kerak,
     aks holda to'q fonda o'qilmay qoladi. */
  color: var(--mc-ink-2);
}
.gpsfull .leaflet-control-attribution a { color: var(--mc-ink); }
/* Masshtab chizg'ichi ham xarita ustida turadi */
.gpsfull .leaflet-control-scale-line {
  background: color-mix(in srgb, var(--mc) 82%, transparent);
  border-color: var(--mc-line); color: var(--mc-ink);
}

/* ======================================================================
   XARITA BELGILARI — NUQTA va YOZUV ALOHIDA

   Mijoz shikoyati (2026-09): "davlat raqamlari bir-birining ortida qolib
   ketyapti". Avval belgi bitta bo'lak edi (ikonka + yozuv bitta tabletka),
   shuning uchun ikki avtomobil yonma-yon tursa yozuvlar ham ustma-ust
   tushardi va hech narsa yordam bera olmasdi.

   Endi har belgi ikki qismdan iborat:
     · NUQTA (.vmark__dot / .dmark__dot) — haqiqiy koordinatada, qimirlamaydi;
     · YOZUV (.mark__text) — nuqtadan mustaqil, maps.js dagi joylashtiruvchi
       uni bo'sh joyga suradi (chap/o'ng/tepa/past/burchak).
   Joy topilmasa yozuv yig'iladi (.mark__text--off) va nuqtada "+N"
   (.mark__more) chiqadi. Bir nuqtaga tushgan belgilar yelpig'ich bo'lib
   yoyiladi — .mark__leader ingichka chiziq ularni haqiqiy nuqta bilan
   bog'lab turadi (ya'ni belgi qayerda turganini YASHIRMAYDI).
   ====================================================================== */

/* Belgining o'zi — o'lchamsiz langar: nuqta ham, yozuv ham unga nisbatan
   mutlaq joylashadi (Leaflet ikonkaning chap-yuqori burchagini
   koordinataga qo'yadi, iconAnchor [0,0]). */
.vmark-wrap { width: auto !important; height: auto !important; }
.vmark-wrap .vmark,
.vmark-wrap .dmark {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  display: block; padding: 0; gap: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  transform: none; white-space: nowrap;
  transition: transform .22s var(--ease);
}

/* Yelpig'ich chizig'i — yoyilgan belgidan haqiqiy nuqtagacha */
.vmark-wrap .mark__leader {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  border-top: 1px dashed color-mix(in srgb, var(--mp) 38%, transparent);
  transform-origin: 0 0; pointer-events: none;
}
.vmark-wrap .dmark .mark__leader {
  border-top-color: color-mix(in srgb, var(--mp) 50%, transparent);
}

/* -------------------------------------------------------- Avtomobil nuqtasi */
/* Mashina belgisi (2026-09, mijoz namunasi — Wialon'dagidek, lekin ixcham):
   oq doira, holat rangidagi halqa va model turidagi mashina rasmi.
   Harakatdagisi to'liq rangli — uzoqdan ham darhol ajraladi. */
.vmark-wrap .vmark__dot {
  position: absolute; left: -15px; top: -15px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--mc); color: var(--vm);
  display: grid; place-items: center; cursor: pointer;
  border: 2.5px solid var(--vm); box-shadow: 0 2px 8px rgba(8, 28, 56, .28);
  transition: transform .14s var(--ease);
}
.vmark-wrap .vmark__dot svg { width: 17px; height: 17px; }
.vmark-wrap .vmark--moving .vmark__dot {
  background: var(--vm); color: #FFFFFF; border-color: #FFFFFF;
}
.vmark-wrap .vmark--offline .vmark__dot { opacity: .8; }

/* Yo'nalish strelkasi — doira chetida, harakat tomonga (0° — shimol) */
.vmark-wrap .vmark__dir {
  position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none;
  transition: transform .6s var(--ease);
}
.vmark-wrap .vmark__dir::before {
  content: ""; position: absolute; left: -6px; top: -28px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 10px solid var(--vm);
  filter: drop-shadow(0 0 1.2px #FFFFFF) drop-shadow(0 1px 1px rgba(8, 28, 56, .35));
}

/* Uzoq masshtab — belgilar kichrayadi, yozuvlar chiqmaydi (tartibsiz
   bo'lmasin); yaqinlashtirilganda to'liq ko'rinishga qaytadi */
.map--far .vmark-wrap .vmark__dot { transform: scale(.74); }
.map--far .vmark-wrap .vmark__dir::before { top: -23px; }
.vmark-wrap .vmark:hover .vmark__dot { transform: scale(1.12); }
.vmark-wrap .vmark--on .vmark__dot {
  box-shadow: 0 0 0 3px var(--mc), 0 0 0 5px var(--vm), var(--shadow-pop);
}
.vmark-wrap .vmark--moving .vmark__dot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--vm); opacity: .5;
  animation: vmark-ping 2.2s ease-out infinite;
}
@keyframes vmark-ping { to { transform: scale(2.1); opacity: 0; } }

/* ------------------------------------------------------- Ombor/filial nuqtasi */
.vmark-wrap .dmark__dot {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px;
  border-radius: 9px; background: var(--mp); color: var(--mp-ink);
  display: grid; place-items: center;
  border: 2px solid color-mix(in srgb, var(--mc) 90%, transparent);
  box-shadow: var(--shadow-pop);
}
.vmark-wrap .dmark__dot svg { width: 13px; height: 13px; }
/* Ombor belgisi — akva yuza. Unga tushadigan ikonka DOIM to'q bo'lishi
   kerak (akva ikkala mavzuda ham yorug' qoladi va xarita plitkasi
   ham o'zgarmaydi), shuning uchun to'q siyoh `--map-pin` dan olinadi. */
.vmark-wrap .dmark--depot .dmark__dot {
  background: var(--aqua);
  color: color-mix(in srgb, var(--aqua) 18%, var(--mp));
}

/* ------------------------------------------------------------------ Yozuv */
.vmark-wrap .mark__text {
  position: absolute; left: 15px; top: -11px;
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.15; min-width: 0; padding: 3px 8px;
  border-radius: 9px; white-space: nowrap;
  transition: left .18s var(--ease), top .18s var(--ease), opacity .14s linear;
}
/* Joy topilmadi — yozuv yig'iladi (o'lchash uchun DOM'da qoladi) */
.vmark-wrap .mark__text--off {
  opacity: 0; visibility: hidden; pointer-events: none; transition: none;
}

.vmark-wrap .vmark__text {
  background: color-mix(in srgb, var(--mc) 97%, transparent); color: var(--mc-ink);
  border: 1px solid var(--mc-line);
  box-shadow: var(--shadow-pop);
  cursor: pointer;
}
.vmark-wrap .vmark__text b {
  font-size: 11px; font-weight: 700; color: var(--mc-ink);
  font-variant-numeric: tabular-nums;
}
/* Birinchi qator: kichik model nomi + davlat raqami («GAZEL 01 852 CGA») */
.vmark-wrap .vmark__line { display: inline-flex; align-items: baseline; gap: 5px; }
.vmark-wrap .vmark__text em {
  font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--vm) 72%, var(--mc-ink));
}
.vmark-wrap .vmark__text i {
  font-style: normal; font-size: 9.5px; font-weight: 600;
  color: color-mix(in srgb, var(--vm) 76%, var(--mc-ink));
}
.vmark-wrap .vmark--on .vmark__text {
  border-color: var(--vm);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--vm) 35%, transparent);
}
/* Avtomobil yozuvidagi ikkinchi qator — QAYERDA ekani (geozona nomi yoki
   koordinata). */
.vmark-wrap .vmark__text i.vmark__place {
  /* Ikkinchi qator — QAYERDA ekani: raqamni tushuntiradi, shuning uchun
     oddiy qalinlikda (ekranda 400/600/700 dan boshqa qalinlik yo'q) */
  font-weight: 400; color: var(--mc-ink-2);
  display: block; max-width: 140px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* Ombor/filial yozuvi — avtomobilnikidan ATAYLAB boshqacha (to'q fon).
   Joylashtiruvchida eng oxirgi o'rinda: avtomobil raqamini bosmaydi. */
.vmark-wrap .dmark__text {
  background: var(--mp);
  border: 1px solid color-mix(in srgb, var(--mp-ink) 16%, transparent);
  box-shadow: var(--shadow-pop);
}
.vmark-wrap .dmark__text b {
  font-size: 11px; font-weight: 700; color: var(--mp-ink);
  max-width: 154px; overflow: hidden; text-overflow: ellipsis;
}
.vmark-wrap .dmark__text i {
  font-style: normal; font-size: 9.5px; font-weight: 400;
  color: color-mix(in srgb, var(--mp-ink) 74%, var(--mp));
}

/* --------------------------------------------------------------- "+N" belgi */
.vmark-wrap .mark__more {
  position: absolute; left: 12px; top: -25px;
  min-width: 22px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--mp-ink) 28%, transparent);
  background: var(--mp); color: var(--mp-ink);
  font-size: 10px; font-weight: 700; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-pop); cursor: pointer;
  transition: transform .14s var(--ease), background .14s var(--ease);
}
.vmark-wrap .mark__more[hidden] { display: none; }
.vmark-wrap .mark__more:hover {
  background: var(--blue); color: var(--on-accent, #fff); transform: scale(1.1);
}

/* Bir nuqtadagi transport ro'yxati ("+N" bosilganda, eng yaqin masshtabda) */
.leaflet-popup.gpsgroup-pop .leaflet-popup-content { margin: 10px 12px; }
.gpsgroup__head {
  font-size: var(--fs-meta); font-weight: 600;
  color: color-mix(in srgb, var(--mc-ink-2) 72%, var(--mc-ink));
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.gpsgroup__row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 8px; background: transparent;
  font-size: var(--fs-body); color: var(--mc-ink); cursor: pointer; text-align: left;
  transition: background .14s var(--ease);
}
.gpsgroup__row:hover { background: color-mix(in srgb, var(--mc-ink) 7%, transparent); }
.gpsgroup__row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Ombor/filial qatori — ochiladigan kartasi yo'q, shuning uchun
   bosilmaydi va shunday ko'rinadi ham */
.gpsgroup__row:disabled { cursor: default; opacity: .72; }
.gpsgroup__row:disabled:hover { background: transparent; }
.gpsgroup__row .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.gpsgroup__row span { color: var(--mc-ink-2); font-size: var(--fs-meta); margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .vmark-wrap .vmark,
  .vmark-wrap .dmark,
  .vmark-wrap .mark__text,
  .vmark-wrap .mark__more,
  .vmark-wrap .vmark__dot { transition: none; }
  .vmark-wrap .vmark--moving .vmark__dot::after { animation: none; }
}

/* Sichqoncha olib borilganda — bosmasdan ko'rinadigan ma'lumot */
.leaflet-tooltip.vtip {
  background: var(--mp); color: var(--mp-ink); border: 0; border-radius: 10px;
  padding: 7px 10px; box-shadow: var(--shadow-pop);
  font-size: 11px; line-height: 1.4; white-space: nowrap;
}
/* Sarlavha - transport raqami (eng qalin), ostida esa izoh: mayda,
   oddiy qalinlikda va jimroq (matn pog'onasi hamma ekranda bir xil). */
.leaflet-tooltip.vtip b {
  display: block; font-size: 12px; font-weight: 700; margin-bottom: 2px;
}
.leaflet-tooltip.vtip span {
  display: block; font-weight: 400;
  color: color-mix(in srgb, var(--mp-ink) 74%, var(--mp));
}
.leaflet-tooltip.vtip.leaflet-tooltip-top::before { border-top-color: var(--mp); }
.leaflet-tooltip.vtip.leaflet-tooltip-bottom::before { border-bottom-color: var(--mp); }
.leaflet-tooltip.vtip.leaflet-tooltip-left::before { border-left-color: var(--mp); }
.leaflet-tooltip.vtip.leaflet-tooltip-right::before { border-right-color: var(--mp); }

/* ======================================================================
   PLANSHET VA TELEFON — varaq pastdan chiqadi, tugmalar barmoq ostida
   ====================================================================== */
@media (max-width: 900px) {
  /* Pastki varaqda balandlik qimmat: chiplar bitta qatorda, yon
     tomonga suriladi. O'ng chetdagi soya — "davomi bor" belgisi. */
  .gpsheet .chips {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .gpsheet .chips::-webkit-scrollbar { display: none; }
  .gpsheet {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none;
    align-items: stretch;
    background: var(--card); border: 0; border-radius: 18px 18px 0 0;
    box-shadow: var(--shadow-pop);
    max-height: 74vh; padding-bottom: env(safe-area-inset-bottom);
  }
  .gpsfull[data-sheet="closed"] .gpsheet { bottom: 0; }
  .gpsheet__handle {
    position: relative; width: 100%; height: var(--gps-peek);
    padding: 8px 16px 0; border-radius: 18px 18px 0 0;
    box-shadow: none; margin: 0; font-size: var(--fs-body);
  }
  .gpsfull[data-sheet="open"] .gpsheet__handle { border-bottom: 0; }
  .gpsheet__body { gap: 12px; }
  .gpsheet__detail:not(:empty) + .gpsheet__list { border-top: 0; }
  .gpsheet__chev { margin-left: auto; }
  .gpsheet__grip {
    display: block; position: absolute; top: 7px; left: 50%;
    width: 44px; height: 4px; margin-left: -22px;
    border-radius: 2px; background: var(--line-strong);
  }
  .gpsheet__body {
    padding: 0 12px 12px; gap: 12px;
    animation-name: gpsheet-up;
  }
  @keyframes gpsheet-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  /* Varaq ichida karta soyasi keraksiz — varaqning o'zi allaqachon karta */
  .gpsheet .mapcard { box-shadow: none; border-color: var(--line); }
  .gpsheet__list .vlist { max-height: 42vh; }

  /* Qator pastki o'ngda — bosh barmoq yetadigan joyda */
  .gpsrail {
    top: auto; bottom: calc(var(--gps-peek) + 12px);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  /* Varaq ochilganda qator uning ostida qolmasin — yumshoq yo'qoladi
     (varaq yopilishi bilan qaytadi). */
  .gpsfull[data-sheet="open"] .gpsrail {
    opacity: 0; transform: translateY(10px); pointer-events: none;
  }
  /* Telefonda barmoq bilan kattalashtiriladi — +/- tugmalari yo'q */
  .gpsfull .leaflet-control-zoom { display: none; }
  .gpsfull .leaflet-control-scale { display: none; }
  .gpsfull[data-sheet="open"] .leaflet-bottom.leaflet-left { margin-left: 0; }
  /* Manba yozuvi yig'ilgan varaq ustida ko'rinib tursin */
  .gpsfull .leaflet-bottom.leaflet-right { bottom: calc(var(--gps-peek) - 4px); }
}

@media (max-width: 600px) {
  /* Tepada joy tor: holat qatori "Orqaga" ostiga tushadi */
  .gpsfull__top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .gpsback { height: 38px; padding: 0 14px 0 10px; font-size: var(--fs-meta); }
  .gpsstate { max-width: 56vw; height: 28px; padding: 0 10px; }
  .gpsrail { padding: 2px; gap: 2px; border-radius: 12px; }
  .gpsrail > .gpsfull__tools { padding-top: 2px; }
  .gpslayers__btn { height: 30px; padding: 0 8px; gap: 4px; font-size: 10px; }
  .gpslayers__btn svg { width: 13px; height: 13px; }
  .gpsfull__tools .maptool { height: 30px; padding: 0 8px; gap: 4px; font-size: 10px; }
  .gpsfull__tools .maptool svg { width: 13px; height: 13px; }
  .gpsfull__tools .maptool--square { flex: 0 0 30px; width: 30px; padding: 0; }
  /* Marker yozuvi tor ekranda qisqaroq — tor ekranda joy kam, uzun yozuv
     boshqa raqamlarni siqib chiqaradi */
  .vmark-wrap .vmark__text i.vmark__place { max-width: 96px; }
  .vmark-wrap .dmark__text b { max-width: 112px; }
  .vmark-wrap .mark__text { padding: 2px 7px; }
}

/* --------------------------------------------- Yurgan yo'li (tafsilot kartasi) */
.vtrack {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  display: grid; gap: 8px;
}
.vtrack__head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); }
.vtrack__swatch {
  width: 24px; height: 6px; border-radius: 3px; background: var(--track);
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--line);
}
/* Beshta davr bitta qatorda — tugmalar teng bo'linadi (ikki qatorga tushib
   qolmasin) */
.vtrack__periods { display: flex; flex-wrap: nowrap; gap: 4px; }
.vtrack__periods .btn { flex: 1 1 0; min-width: 0; padding: 0 4px; justify-content: center;
                        white-space: nowrap; }
.vtrack__periods .btn[aria-pressed="true"] {
  background: var(--blue); border-color: var(--blue); color: var(--on-accent, #FFFFFF);
}
.vtrack__stats { font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.45; }

/* Xarita surilayotganda suzuvchi panellar xiralashtirilmaydi (har kadrda
   orqa fonni qayta xiralashtirish kuchsiz kompyuterda xaritani qotirardi) */
.map-moving .gpsrail, .map-moving .gpsstate { backdrop-filter: none; }