/* ======================================================================
   ops.css — Marshrutlar va Yoqilg'i nazorati ekranlari uchun qo'shimcha
   uslublar. app.css dagi tokenlardan (rang, radius, masofa) foydalanadi,
   hech narsani qayta ta'riflamaydi.
   ====================================================================== */

/* ---------- Umumiy ---------- */
/* OLIB TASHLANDI: `.ops-card--flex` va `.ops-selfstart`. Marshrutlar
   ekranidagi ikkita alohida karta endi BITTA kompozitsiya
   (`.route-board`), yoqilg'i kartochkasidagi ikkinchi karta esa
   chegarasiz bo'lim (`rec.panel`) — ya'ni bu ikki yordamchi sinfni
   hech kim chizmaydi. */

.ops-map { min-height: 320px; }

.ops-warn-text { color: var(--amber-ink, #B45309); font-weight: 600; }
.ops-ok { color: var(--green-ink, #15803D); }

/* ---------- Holat tablari (marshrut ro'yxati ustida) ---------- */
/* Holat segmentlari — `.status-tabs` / `.status-tab` (app.css dagi
   UMUMIY komponent) ishlatiladi. Bu yerda avval `.ops-tabs` / `.ops-tab`
   degan IKKINCHI nusxa bor edi: bitta mahsulotda ikki xil ko'rinishdagi
   segment boshqaruvi turardi. Nusxa o'chirildi — marshrut ekrani ham
   xuddi «Texnik xizmat» ekranidagi segmentlarni chizadi.
   Ro'yxatga yopishib turishi uchun oraliq `records.css` da. */

/* Jadval qatoridagi asosiy amal — ikonka, lekin ko'zga tashlanadigan */
.ops-row-cta {
  background: var(--blue-soft);
  border-color: var(--blue-line, #C7DDFB);
  color: var(--blue);
}
.ops-row-cta:hover {
  background: var(--blue); border-color: var(--blue); color: var(--on-accent, #FFFFFF);
}

/* OLIB TASHLANDI: `.route-picker .route-item*` qoidalari. Chapdagi karta
   endi marshrutlar emas, AVTOMOBILLAR ro'yxatini ko'rsatadi (`.veh-list`
   va `.veh-item`, pastda) — `.route-picker` sinfi hech bir ekranda
   ishlatilmaydi, ya'ni bu uslublar o'lik edi.
   ⚠ app.css da ham `.route-picker` / `.route-item` qoidalari qolgan —
   ular ham endi hech qayerga tegmaydi (mavzu agentiga eslatma). */

/* ---------- Marshrut bosqichlari lentasi ---------- */
.ops-rail {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: var(--pad-card, var(--s4));
  /* Lenta `.ops-route` kompozitsiyasining ICHIDA turadi — o'z yuzasi,
     chegarasi va soyasi yo'q (chegarali kartaning ichidagi karta). */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ops-rail__step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--r-pill);
  flex: 0 0 auto;
}
.ops-rail__step + .ops-rail__step { margin-left: 10px; position: relative; }
.ops-rail__step + .ops-rail__step::before {
  content: "";
  position: absolute;
  left: -14px;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
}
.ops-rail__dot {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--muted-soft);
  color: var(--ink-2);
  font-size: 11px; font-weight: 700; font-style: normal;
}
.ops-rail__dot i { font-style: normal; }
.ops-rail__label { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
.ops-rail__step[data-state="done"] .ops-rail__dot {
  background: var(--green-soft); color: var(--green-ink, #15803D);
}
.ops-rail__step[data-state="done"] .ops-rail__label { color: var(--ink-2); }
.ops-rail__step[data-state="now"] { background: var(--blue-soft); }
.ops-rail__step[data-state="now"] .ops-rail__dot {
  background: var(--blue); color: var(--on-accent, #FFFFFF);
}
.ops-rail__step[data-state="now"] .ops-rail__label { color: var(--blue-ink, #0B4FA8); }

/* Lenta ostidagi izoh — "hozir qaysi bosqichdamiz va keyin nima bo'ladi".
   Bosqichlarning o'zi faqat nom beradi, ma'nosini shu qator aytadi. */
.ops-rail__hint {
  display: flex; gap: 7px; align-items: flex-start;
  margin-top: 8px;
  font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.45;
}
.ops-rail__hint svg {
  width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: var(--ink-3);
}

/* ---------- Nuqtalar ro'yxati ---------- */
.ops-stop[data-done="1"] {
  border-color: var(--ok-line, #CBEBD6); background: var(--ok-tint, #F6FEF9);
}
.ops-stop__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  font-size: var(--fs-meta);
  color: var(--ink-2);
}
.ops-stop__meta span { display: inline-flex; align-items: center; gap: 5px; }
.ops-stop__meta svg { opacity: .8; }
/* Nuqtadagi "buyurtmani ochish" tugmasi — ish stolida ixcham,
   telefonda barmoq uchun kattalashadi (pastdagi media-so'rovda). */
.ops-stop__open { width: 32px; height: 32px; }

/* ---------- Rejalashtiruvchi ---------- */
.ops-orderlist { max-height: 300px; overflow-y: auto; }
.ops-conflict { margin-bottom: 10px; }
.ops-conflict__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ops-savehint {
  font-size: var(--fs-meta);
  color: var(--ink-2);
  margin-bottom: 8px;
  line-height: 1.4;
}
.ops-savehint:empty { display: none; }

/* ---------- Yoqilg'i kartochkasi ----------
   OLIB TASHLANDI: `.ops-verdict*`, `.ops-check*`, `.ops-statline`.
   Tekshiruv xulosasi endi butun mahsulot bilan BIR XIL holat bloki
   (`rec.hero` — `records.css`): xulosa sarlavha bo'lib turadi,
   tekshiruvlar esa uning sabab qatorlari. Uch xil ko'rinishdagi
   "xulosa qutisi" o'rniga bitta til qoldi. */


/* ---------- Chek fotosi ---------- */
.ops-receipts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s3);
}
.ops-receipt {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card-2);
  text-decoration: none;
  color: inherit;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.ops-receipt:hover { border-color: var(--blue); box-shadow: var(--shadow-hover); text-decoration: none; }
.ops-receipt img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: var(--card);
}
.ops-receipt__file {
  display: flex; align-items: center; justify-content: center;
  height: 150px;
  color: var(--blue);
  background: var(--blue-soft);
}
.ops-receipt__file svg { width: 34px; height: 34px; }
.ops-receipt__name {
  display: block;
  padding: 8px 10px 0;
  font-size: var(--fs-meta);
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ops-receipt__size {
  display: block;
  padding: 0 10px 8px;
  font-size: var(--fs-meta);
  color: var(--ink-2);
}

/* ======================================================================
   Yig'ma (KPI) kartalar — Marshrutlar va Yoqilg'i ekranlarida.
   Karta bosilganda O'Z ko'rsatkich ekrani ochiladi (`?metric=...`),
   ya'ni u "yoqilgan/o'chirilgan" holatga EGA EMAS — shunchaki boshqa
   ekranga olib o'tadi. Uslublar ATAYLAB `.ops-kpis` ichiga cheklangan:
   boshqa ekranlarning umumiy `.kpi` ko'rinishiga tegmaydi.

   OLIB TASHLANDI: `[aria-pressed="true"]` ("filtr yoqilgan") qoidalari va
   o'z `::after` strelkasi. Kartalar hech qachon `aria-pressed` olmaydi
   (`BL.statCard` uni faqat `active`/`pressed` berilganda yozadi, bu
   ekranlarda esa berilmaydi), strelkani esa `statCard` ning o'z
   `.kpi__go` elementi chizadi — ya'ni ikkala blok ham hech qachon
   ishlamagan o'lik uslub edi.
   ====================================================================== */
.ops-kpis { align-items: stretch; }
.ops-kpis > .kpi { height: 100%; position: relative; }
/* Raqamlar bir xil kenglikda — ustun bo'lib tekis turadi */
.ops-kpis .kpi__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Bosilmaydigan karta (tafsilot ekranidagi oddiy fakt) --- */
.ops-kpis > div.kpi { cursor: default; }
.ops-kpis > div.kpi:hover {
  border-color: var(--line);
  background: var(--card);
  box-shadow: none;
}

/* --- Bosiladigan karta --- */
.ops-kpis > button.kpi {
  cursor: pointer;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease),
              background .14s var(--ease), transform .14s var(--ease);
}
.ops-kpis > button.kpi:hover {
  transform: translateY(-1px);
  border-color: var(--blue-line, #CFE0F7);
  background: var(--card);
  box-shadow: var(--shadow-hover);
}
.ops-kpis > button.kpi:active { transform: translateY(0); }
.ops-kpis > button.kpi:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Karta ostidagi olib tashlanadigan filtr belgisi */
.page > .ops-chips { margin-top: 12px; }
.ops-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ops-chips[hidden] { display: none; }
.ops-chips .chip { cursor: default; }
.ops-chips .chip button {
  background: var(--blue-soft);
  color: var(--blue-ink, #0B5CC0);
  cursor: pointer;
}
.ops-chips .chip button:hover { background: var(--blue-line, #C7DDFB); }
.ops-chips .chip button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Ro'yxat jadvali (ikki ekranda bir xil ritm) ---------- */
.ops-list .table tbody td { height: 40px; padding-top: 6px; padding-bottom: 6px; }
.ops-list .table thead th {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--card-2);
}
.ops-list .table tbody tr:hover td { background: var(--card-hover); }
.ops-list .table td.num, .ops-list .table th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.ops-list .table tbody tr.clickable:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* Raqam + belgisi bitta katakda (masalan "12,8" va "+9 %") — o'ngga tekis */
.ops-cell-num {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

/* ======================================================================
   Marshrut kartochkasi — bosqich lentasi, xarita, ma'lumot va nuqtalar
   UCH ALOHIDA quti emas, BITTA kompozitsiya bo'lib ko'rinadi.
   ====================================================================== */
/* Yuza/chegara/radius/soya — umumiy `.card.card--raised` dan
   (markupda shu sinflar bor). Bu yerda faqat ichki tuzilish. */
.ops-route { overflow: hidden; }
.ops-route__rail {
  padding: 12px var(--s4);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card-2), var(--card));
}
/* Lenta endi o'z kartasi ichida emas — chegara va soyasi olib tashlanadi.
   (Lenta va uning ostidagi izoh bitta o'ramda turadi, shuning uchun
   tanlagich bevosita bola emas, avlod bo'yicha yoziladi.) */
.ops-route__rail .ops-rail {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ops-route__rail > .alert { margin: 0; }
.ops-route__main { display: grid; grid-template-columns: 55fr 45fr; }
.ops-route__map {
  position: relative;
  min-height: 340px;
  border-right: 1px solid var(--line);
}
.ops-route__map > .ops-map,
.ops-route__map > .leaflet-container { position: absolute; inset: 0; height: 100%; }
.ops-route__map > .state { padding: var(--s6) var(--s4); }
.ops-route__side { padding: var(--s3) var(--s4) var(--s4); min-width: 0; }
.ops-route__stops { border-top: 1px solid var(--line); padding: var(--s3) var(--s4) var(--s4); }
.ops-route__label {
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
  margin-bottom: var(--s3);
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2);
}
.ops-route__label small {
  font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ink-2);
}
.ops-route .stops { gap: var(--s2); }
.ops-route .stop { padding: var(--s3); border-radius: 12px; }

/* Yoqilg'i kartochkasining xulosasi endi `rec.hero` (records.css) —
   bu yerdagi `.ops-verdict--lead` nusxasi o'chirildi. `.ops-detail`
   ham ishlatilmaydi: kartochka ritmi `.rec-detail` dan keladi. */

/* ======================================================================
   MARSHRUTLAR paneli: AVTOMOBILLAR + «A zonadan B zonagacha» xaritasi

   Mijoz talabi (2026-09): chapdagi kartada endi marshrutlar emas,
   AVTOMOBILLAR turadi; mashina tanlanganda uning marshruti xaritada
   A dan B gacha chiziladi, GPS ulangan bo'lsa belgi shu yo'l bo'ylab
   jonli siljiydi.

   Barcha rang — mavzu tokenidan (light/navy). Qattiq yozilgan rang yo'q:
   `var(--token, #zaxira)` ko'rinishidagi zaxira qiymat faqat token hali
   e'lon qilinmagan holat uchun.
   ====================================================================== */

/* ======================================================================
   MARSHRUTLAR: TANLASH + XARITA — BITTA KOMPOZITSIYA

   Avval bu ikkita mustaqil karta edi (chapda ro'yxat, o'ngda xarita) va
   ular bir-biriga aloqasizdek ko'rinardi. Aslida bu bitta asbob:
   chapda tanlaysan — o'ngda ko'rasan. Shuning uchun endi bitta yuza,
   ichida faqat ingichka ajratgich chiziq.
   ====================================================================== */
.route-board {
  display: grid; grid-template-columns: 316px minmax(0, 1fr);
  height: 500px; min-height: 0;
  /* Yuza/chegara/radius/soya — umumiy `.card.card--raised` dan */
  overflow: hidden;
}
.route-board__rail {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-right: 1px solid var(--line);
}
.route-board__main {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
.route-board__head { padding: var(--pad-card, var(--s4)) var(--pad-card, var(--s4)) var(--s3); }
.route-board__title { font-size: var(--fs-card); font-weight: var(--fw-card); }
.route-board__sub {
  font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px;
  line-height: 1.4;
}

/* ---------- Doimiy, rostgo'y ogohlantirish ---------- */
/* Bu qator HECH QACHON yo'qolmaydi: jonli harakat GPS qurilmasiga
   bog'liq ekanini ekranning o'zi aytib tursin (mijozning mashinalarida
   trekker hali ulanmagan). LEKIN u ro'yxatning TEPASIDA emas, PASTIDA
   turadi — avval ro'yxatning birinchi uchdan birini egallab, asosiy
   ishni pastga surib yuborardi. Quti ham emas: yuqoridan chiziq. */
.ops-gpsnote {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  flex: 0 0 auto;
  padding: var(--s3) var(--pad-card, var(--s4));
  border-top: 1px solid var(--line);
  background: var(--card-3);
}
.ops-gpsnote svg {
  width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: var(--blue);
}
.ops-gpsnote b {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink);
}
.ops-gpsnote span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ---------- Avtomobillar ro'yxati ---------- */
.veh-list { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--s2) var(--s2); min-height: 0; }
.veh-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  grid-template-areas:
    "dot  plate pill"
    ".    meta  meta"
    ".    job   job";
  align-items: center;
  column-gap: var(--s2); row-gap: 1px;
  width: 100%;
  padding: var(--s2) 10px;
  margin-bottom: 2px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.veh-item__dot   { grid-area: dot; }
.veh-item__plate { grid-area: plate; }
.veh-item__pill  { grid-area: pill; justify-self: end; }
.veh-item__meta  { grid-area: meta; }
.veh-item__job   { grid-area: job; }
/* Haydovchi va signal bitta qatorda, orasida nuqta */
.veh-item__meta {
  display: flex; gap: 6px; align-items: baseline; min-width: 0;
}
.veh-item__meta .veh-item__driver { min-width: 0; }
.veh-item__meta .veh-item__signal::before {
  content: "·"; margin-right: 6px; color: var(--ink-3);
}
.veh-item:hover { background: var(--card-2); }
.veh-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Tanlangan qator ko'zga TASHLANIB tursin — bu ekranning asosiy amali.
   Rang yolg'iz o'zi yetarli emas: chap chetda qalin ustun ham chiziladi. */
.veh-item[aria-selected="true"] {
  background: var(--card-hover);
  border-color: var(--blue-line, #C7DDFB);
  box-shadow: inset 3px 0 0 0 var(--blue);
}
.veh-item[aria-selected="true"] .veh-item__plate { color: var(--blue-ink, #0B4FA8); }

.veh-item__dot {
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--card);
}
.veh-item__plate {
  font-size: var(--fs-table);
  font-weight: 700;
  letter-spacing: -.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.veh-item__driver,
.veh-item__job,
.veh-item__signal {
  font-size: var(--fs-meta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.veh-item__driver { font-weight: 400; color: var(--ink-2); }
/* "Hozir nima qilyapti" — bo'sh mashinada xira, ishdagisida ko'k va
   qalinroq (ma'no faqat rang bilan emas, OG'IRLIK bilan ham beriladi). */
.veh-item__job { font-weight: 400; color: var(--ink-2); }
.veh-item__job--on { font-weight: 600; color: var(--blue-ink, #0B4FA8); }
.veh-item__signal {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Xarita va uning holat xabari ---------- */
/* Xarita qolgan bo'sh joyni oladi. `min-height` ATAYLAB kichik: pastdagi
   jonli qator ikki qatorli izoh bilan o'sganda ham karta ichidagi hech
   narsa kesilib qolmasin (karta `overflow: hidden`). */
/* isolation: xabar paneli (z-index 500) faqat xarita ichida ustun — aks holda
   sahifa ustidagi oyna (modal, z-index 120) ustiga chiqib, uning maydonlarini yopardi */
.route-map { position: relative; flex: 1 1 auto; min-height: 200px; isolation: isolate; }
.route-map__canvas { position: absolute; inset: 0; }
.route-map__canvas .leaflet-container { width: 100%; height: 100%; }
/* Xabar xarita USTIDA turadi (bo'sh kulrang maydon qolmasin) */
.route-map__msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s5);
  background: var(--card);
  z-index: 500;
}
.route-map__msg[hidden] { display: none; }
.route-map__msg .state { padding: 0; }

/* ---------- Jonli holat (xarita ostida) ----------
   Uchta alohida chiziq (holat · ko'rsatkichlar · tugmalar) o'rniga
   BITTA blok: yuqorisidan ajratgich, ichida bir xil ichki bo'shliq.
   Shunda "keyin yopishtirilgan" emas, xaritaning davomi bo'lib
   ko'rinadi. */
.route-foot {
  flex: 0 0 auto; border-top: 1px solid var(--line);
  background: var(--card-3);
}
.route-foot:empty { display: none; }
.route-live {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3) var(--pad-card, var(--s4));
}
.route-live:empty { display: none; }
/* Marshrut yo'q bo'lsa ko'rsatkichlar qatori ham bo'sh chiziq
   qoldirmaydi (chegara + ichki bo'shliq bilan "yarim karta" ko'rinardi) */
.route-stats:empty { display: none; }
/* Ko'rsatkichlar + asosiy amal — jonli holat bilan BIR blokda, shuning
   uchun ichki bo'shliq ham bir xil (avval 20px va 16px aralash edi). */
.route-foot .route-stats { padding: var(--s3) var(--pad-card, var(--s4)); }
.route-live__head {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: var(--fs-table);
}
.route-live__head b { font-weight: 600; }
.route-live__head .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3);
}
/* Harakatdagi mashina — nuqta "tirik" pulslaydi. Signal eskirgan yoki
   uzilgan bo'lsa pulslamaydi: harakat YO'Qligi ham ma'lumot. */
.route-live__head .dot--live { animation: route-pulse 2.2s var(--ease) infinite; }
@keyframes route-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 50%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- A -> B yo'lagi (bosib o'tilgan yo'l) ----------
   Avval bu faqat "Yo'l bo'yicha 100%" degan raqam edi — qayerda
   ekanini ko'rsatmasdi. Endi xaritadagi chiziqning ixcham aksi:
   to'lgan qism, ustida mashina belgisi, ikki uchida A va B. */
.route-track {
  display: flex; align-items: center; gap: var(--s2);
  padding: 2px 0;
}
.route-track__end {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--on-accent);
}
/* To'ldirilgan doira — usti OQ yozuv, shuning uchun `*-strong`
   (to'ldirilgan yuza) tokeni olinadi. `*-ink` — yorug'lik ustidagi
   MATN uchun: ko'k mavzuda u ochiq rangga aylanib, oq yozuv
   o'qilmay qolardi (A 1,89:1, B 1,55:1). */
.route-track__end--a { background: var(--blue-strong); }
.route-track__end--b { background: var(--green-strong); }
/* Chetlardagi 11px — mashina belgisining yarim eni: 0% va 100% da ham
   u A/B doirasining ustiga chiqib ketmaydi. */
.route-track__rail {
  position: relative; flex: 1 1 auto; height: 6px; min-width: 40px;
  margin: 0 11px;
  border-radius: var(--r-pill); background: var(--track);
}
.route-track__fill {
  display: block; height: 100%; width: 0;
  border-radius: inherit; background: var(--blue);
  transition: width .5s var(--ease);
}
.route-track__dot {
  position: absolute; top: 50%; left: 0;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: var(--blue-strong); color: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center;
  /* Halqa belgini yo'lakdan ajratadi — soya kerak emas (ekranda
     ko'tarilgan yuza faqat bitta bo'lsin). */
  border: 2px solid var(--card);
  transition: left .5s var(--ease);
}
.route-track--moving .route-track__dot {
  animation: route-pulse 2.2s var(--ease) infinite;
}
.route-live__head[data-tone="ok"] .dot { background: var(--green); }
.route-live__head[data-tone="ok"] b { color: var(--green-ink, #15803D); }
.route-live__head[data-tone="warn"] .dot { background: var(--amber); }
.route-live__head[data-tone="warn"] b { color: var(--amber-ink, #B45309); }
.route-live__head[data-tone="crit"] .dot { background: var(--red); }
.route-live__head[data-tone="crit"] b { color: var(--red-ink, #B91C1C); }
.route-live__sep { color: var(--ink-3); }
/* Marshrut kodi — ikkinchi darajali, lekin O'QILADIGAN bo'lishi shart:
   `--card-2` foni ustida `--ink-2` atigi 4,42:1 berardi, shuning uchun
   fon karta rangida qoldirilib, chegara bilan ajratildi (4,76:1). */
.route-live__code {
  font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2);
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
}
/* Nega harakat yo'qligi — sabab, har doim bir qadam pastroq ohangda */
.route-live__why {
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
}
.route-live__grid { display: flex; flex-wrap: wrap; gap: 8px var(--s5); }
.route-live__cell { display: flex; flex-direction: column; line-height: 1.25; }
.route-live__cell small {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.route-live__cell b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Ekran aynan shu raqam uchun ochiladi — eng katta va eng qalin */
.route-live__cell b.route-live__progress {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--blue-ink, #0B4FA8);
}

/* ---------- Xaritadagi A / B belgisi ---------- */
/* Marshrut boshi va oxiri HARF bilan belgilanadi — shunda xarita
   "sochilgan nuqtalar" emas, o'qiladigan SAFAR bo'lib ko'rinadi. */
.abmark { position: relative; display: flex; align-items: center; gap: 6px; }
.abmark__dot {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--on-accent, #FFFFFF);
  border: 2px solid var(--card);
  box-shadow: var(--shadow-pop);
}
/* ⚠ Harf belgidagi OQ matn uchun to'q soya olinadi: yorqin `--blue`
   ustida 4,1:1, `--green` ustida esa atigi 2,28:1 chiqardi (13 px qalin
   matnga 4,5:1 kerak). To'q ko'k/yashil bilan 8,5:1 va 5,0:1 bo'ladi —
   rang ma'nosi (ko'k = chiqish, yashil = yetib borish) saqlanadi. */
.abmark--a .abmark__dot { background: var(--blue-ink, #0B4FA8); }
.abmark--b .abmark__dot { background: var(--green-ink, #15803D); }
.abmark__text {
  display: flex; flex-direction: column; line-height: 1.2;
  max-width: 168px;
  padding: 4px 8px;
  border-radius: 8px;
  /* Yozuv jonli xarita plitkalari ustida turadi — shuning uchun sahifa
     emas, XARITA token oilasi va SUZUVCHI soya (gps.css dagi belgilar
     bilan bir xil til). */
  border: 1px solid var(--mc-line, var(--line));
  background: var(--mc, var(--card));
  box-shadow: var(--shadow-pop);
  white-space: nowrap;
}
.abmark__text b {
  font-size: 11px; font-weight: 700; color: var(--mc-ink, var(--ink));
  overflow: hidden; text-overflow: ellipsis;
}
.abmark__text i {
  font-style: normal; font-size: 9.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis;
}
.abmark--a .abmark__text i { color: var(--blue-ink, #0B4FA8); }
.abmark--b .abmark__text i { color: var(--green-ink, #15803D); }

/* ---------- Harakat kamaytirilgan rejim ---------- */
@media (prefers-reduced-motion: reduce) {
  .ops-kpis > button.kpi,
  .ops-receipt,
  .route-track__fill,
  .route-track__dot,
  .veh-item { transition: none; }
  .route-live__head .dot--live,
  .route-track--moving .route-track__dot { animation: none; }
  .ops-kpis > button.kpi:hover,
  .ops-kpis > button.kpi:active { transform: none; }
}

/* ---------- Telefon (375 px) ---------- */
@media (max-width: 1100px) {
  .ops-route__main { grid-template-columns: 1fr; }
  .ops-route__map { border-right: 0; border-bottom: 1px solid var(--line); }
  /* Tor ekranda kompozitsiya ustma-ust bo'ladi, lekin BITTA yuza
     bo'lib qolaveradi: ajratgich o'ngdan pastga ko'chadi. */
  .route-board { grid-template-columns: 1fr; height: auto; }
  .route-board__rail {
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .veh-list { max-height: 300px; }
  .route-map { min-height: 340px; }
}

@media (max-width: 760px) {
  /* Segmentlar tor ekranda yon tomonga suriladi (umumiy komponent
     `.status-tabs` — hech narsa yashirilmaydi) */
  .status-tabs.rec-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .status-tabs.rec-tabs::-webkit-scrollbar { height: 0; }
  .ops-rail { gap: 2px; padding: 10px 12px; overflow-x: auto; flex-wrap: nowrap; }
  .ops-rail__step + .ops-rail__step { margin-left: 8px; }
  .ops-rail__step + .ops-rail__step::before { left: -11px; width: 8px; }
  .ops-rail__label { white-space: nowrap; }
  .ops-receipts { grid-template-columns: 1fr; }
  .ops-receipt img, .ops-receipt__file { height: 190px; }
  .ops-route__rail,
  .ops-route__side,
  .ops-route__stops { padding-left: var(--s3); padding-right: var(--s3); }
  .ops-route__map { min-height: 260px; }
  /* Barmoq uchun kamida 40 px */
  .ops-stop__open { width: 40px; height: 40px; }
  /* Telefonda yon bo'shliqlar torroq — matn ekranga sig'sin */
  .ops-gpsnote { padding-left: var(--s3); padding-right: var(--s3); }
  .veh-list { padding-left: 6px; padding-right: 6px; }
  .veh-item { min-height: 48px; }     /* barmoq bilan bosish uchun */
  /* Marshrutlar ro'yxati 15 sahifadan oshganda sahifa tugmalari qatori
     375 px ekranga sig'may, BUTUN sahifani yon tomonga surardi.
     `.ops-list` ichida (Marshrutlar/Yoqilg'i) ular endi keyingi qatorga
     o'tadi — umumiy `.pagination` uslubiga tegilmaydi. */
  .ops-list .pagination__pages { flex-wrap: wrap; justify-content: center; }
  .route-live { padding-left: var(--s3); padding-right: var(--s3); }
  .route-live__grid { gap: 8px var(--s4); }
  .route-stats { padding-left: var(--s3); padding-right: var(--s3); gap: var(--s4); }
  .abmark__text { max-width: 120px; }
  /* Barmoq bilan bosish uchun belgidagi "×" kattalashadi */
  .ops-chips .chip { height: 34px; padding-right: 5px; }
  .ops-chips .chip button { width: 26px; height: 26px; font-size: 15px; }
}

/* Telefonda kartalar 1 ta emas, 2 tadan yonma-yon (mijoz maketidagidek) */
@media (max-width: 720px) {
  .ops-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .ops-kpis > .kpi { min-height: 78px; padding: 12px; column-gap: 10px; }
  .ops-kpis .kpi__icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; }
  .ops-kpis .kpi__icon svg { width: 16px; height: 16px; }
  .ops-kpis .kpi__value { font-size: 19px; }
  .ops-list .table tbody td { height: auto; }
}

/* ---------- Manzillar rangi izohi (xarita ostida) — 2026-10-02 ----------
   Egasi: «yashil va ko'k nima — alohida rang bilan ajralib tursin». */
.route-legend-bar { padding: 8px var(--s4); border-bottom: 1px solid var(--line-soft); }
.route-legend-bar[hidden] { display: none; }
/* Reys kartasida xarita konteyneri to'liq egallangan (absolute) — izoh xarita
   ustida, pastda (masshtab chizg'ichidan yuqorida) suzib turadi */
.ops-route__map > .route-legend-bar {
  position: absolute; left: 8px; bottom: 30px; z-index: 500; max-width: calc(100% - 16px);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: var(--shadow-card);
}
.route-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-meta); color: var(--ink-2); }
.route-legend__cap { color: var(--ink-3); font-weight: 650; }
.route-legend__item { display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.route-legend__item b { color: var(--ink); font-variant-numeric: tabular-nums; }
.route-legend__item.is-zero { opacity: .55; }
.route-legend__dot { width: 11px; height: 11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); flex: 0 0 11px; }
.route-legend__dot--gps { background: var(--green-strong); }
.route-legend__dot--delivered { background: color-mix(in srgb, var(--chart-6) 78%, #000); }
.route-legend__dot--pending { background: var(--blue-strong); }
.route-legend__dot--failed { background: var(--red-strong); }
.route-legend__dot--off { background: color-mix(in srgb, var(--muted) 70%, #000); opacity: .75; }
/* A/B belgisi ham manzil bo'lsa — nuqtasi holat rangida */
.abmark--st-gps .abmark__dot { background: var(--green-strong); }
.abmark--st-delivered .abmark__dot { background: color-mix(in srgb, var(--chart-6) 78%, #000); }
.abmark--st-pending .abmark__dot { background: var(--blue-strong); }
.abmark--st-failed .abmark__dot { background: var(--red-strong); }
.abmark--st-off .abmark__dot { background: color-mix(in srgb, var(--muted) 70%, #000); }
/* Belgi ustidagi oynada holat yozuvi */
.pinpop { display: inline-block; margin-top: 4px; font-weight: 650; }
.pinpop--gps { color: var(--green-ink); }
.pinpop--delivered { color: color-mix(in srgb, var(--chart-6) 70%, var(--ink)); }
.pinpop--pending { color: var(--blue-ink); }
.pinpop--failed { color: var(--red-ink); }
.pinpop--off { color: var(--ink-3); }