/* Buyurtmalar va Yetkazib berish ekranlari — ixcham holat paneli va
   kartochka dizayni. Faqat shu ikki ekranga tegishli sinflar; umumiy
   dizayn tizimi (app.css) tokenlaridan foydalanadi, unga tegilmaydi.

   Prefikslar:
     .ost-*  — ixcham holat segmentlari (ro'yxat ustidagi tab-panel)
     .od-*   — buyurtma/yetkazish kartochkasi
     .dl-*   — yetkazish kuni ro'yxati
*/

/* ======================================================================
   1. HOLAT SEGMENTLARI (Barchasi / Yangi / Jarayonda / …)

   Bular ro'yxatning BOSHQARUV QATORIDA (control bar) turadi: chapda
   holat, o'ngda qidiruv/filtr/eksport — bitta qator, undan keyin darhol
   jadval sarlavhasi. Avval bu panel alohida qator edi va ustida yana
   beshta KPI kartasi turardi: ikkalasi AYNAN bir xil beshta sonni
   ko'rsatib, ro'yxatgacha bir ekrandan ko'p joy egallardi.
   ====================================================================== */
.ost {
  display: flex; align-items: center; gap: var(--s3);
  padding: 7px var(--s3) 7px var(--s4);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-2) 35%, var(--card)), var(--card));
  border-radius: var(--r-card) var(--r-card) 0 0;
  /* To'ldirilgan ko'k ustidagi oq yozuv `--blue` bilan 4,1:1 beradi
     (o'lchangan) — 4,5:1 talabidan past. Shuning uchun to'ldiruvchi rang
     bir qadam chuqurlashtiriladi; mavzu faylida `--blue-strong` paydo
     bo'lsa, o'sha ishlatiladi. */
  --ost-fill: var(--blue-strong, color-mix(in srgb, var(--blue) 88%, var(--ink)));
}
/* Boshqaruv qatori ichida `.ost` ning o'z foni, chegarasi va burchagi
   kerak emas — segmentlar qatorning bir bo'lagi bo'lib qoladi.

   ⚠️ Kenglik/flex QIYMATLARI BU YERDA BERILMAYDI: `BL.listPage` ning
   `segments` uyasi `.ost` ni o'zi tekislaydi (app.css). Bu yerdagi qoida
   faqat "o'z yuzasini yechib tashlash" uchun — uya ishlamay qolgan
   zaxira holatda ham qator bir xil ko'rinsin. */
.ost--bar {
  min-width: 0; gap: var(--gap-in, var(--s4));
  padding: 0; border-bottom: 0; border-radius: 0; background: none;
}
.ost__scroll {
  flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.ost__scroll::-webkit-scrollbar { height: 0; display: none; }
.ost__track {
  position: relative; display: flex; align-items: center; gap: 2px;
  min-width: max-content; padding: 2px;
}
/* Segment = filtr tugmasi + (aktiv bo'lsa) ko'rsatkich ekraniga «›».
   Ikkalasi bitta bo'lakday ko'rinsin uchun sirg'aluvchi ko'rsatkich
   butun segmentni qoplaydi. */
.ost__seg {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; flex: 0 0 auto;
}
.ost__more {
  display: inline-grid; place-items: center;
  width: 26px; height: 32px; padding: 0; border: 0; border-radius: 9px;
  background: transparent; color: var(--on-accent); cursor: pointer;
  opacity: .8; transition: opacity .16s var(--ease), background .16s var(--ease);
}
.ost__more:hover { opacity: 1; background: color-mix(in srgb, var(--on-accent) 18%, transparent); }
.ost__more:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; opacity: 1; }
.ost__more svg { width: 13px; height: 13px; }
/* Ko'rsatkich hali o'lchanmagan (yashirin blok) — «›» ko'k fonda emas,
   shuning uchun oddiy siyoh rangida turadi */
.ost:not(.ost--ready) .ost__more { color: var(--ink-2); }
/* Sirg'aluvchi aktiv ko'rsatkich — tab almashganda silliq suriladi */
.ost__ind {
  position: absolute; top: 2px; bottom: 2px; left: 0; width: 0;
  border-radius: 9px; background: var(--ost-fill); opacity: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 30%, transparent);
  transition: transform .28s var(--ease), width .28s var(--ease),
              opacity .18s var(--ease);
  pointer-events: none;
}
.ost--ready .ost__ind { opacity: 1; }
.ost__tab {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  font-family: inherit; font-size: var(--fs-body); font-weight: 600;
  white-space: nowrap;
  transition: color .2s var(--ease), background .16s var(--ease);
}
.ost__tab:hover { color: var(--ink); background: var(--card-2); }
.ost__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ost__tab[aria-selected="true"] { color: var(--on-accent); }
/* Aktiv tab ustiga kelganda ko'k ko'rsatkich yopilib qolmasin */
.ost__tab[aria-selected="true"]:hover { background: transparent; }
/* Ko'rsatkich o'lchanmagan holat (yashirin blok, eski brauzer) — zaxira */
.ost:not(.ost--ready) .ost__tab[aria-selected="true"] { background: var(--ost-fill); }
/* Belgi rangi — MAVZU tokenidan (qattiq yozilgan rang yo'q, ikkala
   mavzuda ham to'g'ri chiqadi) */
.ost__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
  background: var(--tone, var(--ink-3));
  transition: background .2s var(--ease);
}
.ost__dot--muted { --tone: var(--ink-3); }
.ost__dot--info  { --tone: var(--blue); }
.ost__dot--warn  { --tone: var(--amber); }
.ost__dot--ok    { --tone: var(--green); }
.ost__dot--crit  { --tone: var(--red); }
.ost__tab[aria-selected="true"] .ost__dot {
  background: color-mix(in srgb, var(--on-accent) 92%, transparent);
}
.ost__count {
  font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: var(--card-2);
  color: color-mix(in srgb, var(--ink-2) 72%, var(--ink));
  transition: background .2s var(--ease), color .2s var(--ease);
  font-variant-numeric: tabular-nums;
}
/* Aktiv segmentdagi son — to'ldiruvchi fon O'RNIGA ingichka halqa.
   Avvalgi 22% oq fon ko'k ustida yorishib ketardi va oq raqam u bilan
   yorug' mavzuda 3,64:1 gina berardi (o'lchangan, talab 4,5:1). Endi
   raqam to'g'ridan-to'g'ri ko'k ustida turadi — 5,36:1. */
.ost__tab[aria-selected="true"] .ost__count {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 45%, transparent);
  color: var(--on-accent);
}
/* O'ngdagi qisqa izoh (masalan "13 ta kechikkan") */
.ost__side {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: var(--fs-meta); color: var(--ink-2); padding-right: var(--s2);
}
.ost__side b { color: var(--ink); }
.ost__side--crit, .ost__side--crit b { color: color-mix(in srgb, var(--red) 62%, var(--ink)); font-weight: 600; }

@media (max-width: 760px) {
  /* Barmoq uchun: telefonda segment va «›» balandligi 40px (avval 30px
     edi — uni aniq bosish qiyin). */
  .ost { padding: var(--s1) 6px; gap: var(--s2); }
  .ost--bar { padding: 0; flex-wrap: wrap; row-gap: var(--s2); }
  .ost__tab { height: 40px; padding: 0 10px; font-size: 12.5px; }
  .ost__more { height: 40px; width: 40px; }
  /* Kechikish tugmasi avval telefonda UMUMAN yashirilardi (qator sig'masdi).
     Endi boshqaruv qatori o'ralgani uchun u o'z satriga tushadi. */
  .ost--bar .ost__scroll { flex: 1 1 100%; }
  .ost--bar .ost__side { flex: 1 1 100%; padding: 0; }
  .ost:not(.ost--bar) .ost__side { display: none; }
}

/* ======================================================================
   1c. DINAMIKA VA KESIM — ro'yxat OSTIDAGI yopiq bo'lim

   Diagrammalar joyida qoldi, lekin ish maydonini egallamaydi: yopiq
   holatda bitta qator, ochilganda ikki ustun. Avval ular ro'yxatdan
   OLDIN, ikkita baland karta bo'lib turardi.
   ====================================================================== */
.od-an { border-top: 1px solid var(--line); }
.od-an__sum {
  padding: var(--s3) var(--s5); cursor: pointer; list-style: none;
  font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2);
}
.od-an__sum::-webkit-details-marker { display: none; }
.od-an__sum::before {
  content: "▸"; display: inline-block; width: 14px; color: var(--ink-3);
  transition: transform .16s var(--ease);
}
.od-an[open] > .od-an__sum::before { transform: rotate(90deg); }
.od-an__sum:hover { color: var(--ink); }
.od-an__sum:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.od-an__body { padding: 0 var(--s5) var(--pad-card, var(--s4)); }
.od-an__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: var(--gap-grid, var(--s4)); align-items: start;
}
.od-an__cell { min-width: 0; }
.od-an__note {
  margin: 0 0 var(--s3); font-size: var(--fs-meta); font-weight: 400;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .od-an__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .od-an__sum { padding: var(--s3) var(--s4); min-height: 40px; }
  .od-an__body { padding: 0 var(--s4) var(--s3); }
}

/* Ro'yxat qatori aniq bosiladigan ko'rinsin (hover, fokus, kursor) */
.od-list .table tbody tr.clickable td { transition: background .14s var(--ease); }
.od-list .table tbody tr.clickable td:first-child {
  box-shadow: inset 3px 0 0 transparent; transition: box-shadow .16s var(--ease);
}
.od-list .table tbody tr.clickable:hover td { background: var(--blue-soft); }
.od-list .table tbody tr.clickable:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--blue);
}
.od-list .table tbody tr.clickable:hover .strong { color: var(--blue-ink, color-mix(in srgb, var(--blue) 76%, var(--ink))); }
.od-list .table tbody tr.clickable:focus-visible {
  outline: 2px solid var(--blue); outline-offset: -2px;
}
.od-list .record-card { cursor: pointer; transition: border-color .16s var(--ease); }
.od-list .record-card:hover { border-color: var(--blue); }

/* Jadval qatori — bitta o'lchamda (40px). Avval qatorlar 89px edi: ikki
   qatorli kataklar (raqam+sana, mijoz+telefon) va ikkita holat belgisi
   qatorga sig'may yana bo'linib ketardi. Endi har katak QAT'IY ikki
   satr: sig'magani "…" bilan qisqaradi, balandlik esa o'zgarmaydi. */
.od-list .table thead th {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-2) 72%, var(--ink));
}
.od-list .table tbody td { height: 30px; padding: 5px var(--s4); }
.od-list .table tbody tr:hover td { background: var(--card-hover); }
.od-list .cell-stack { gap: 0; line-height: 1.2; }
.od-list .cell-stack > * {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.od-list .cell-stack small { line-height: 1.25; }
/* Telefon kartasida matn o'raladi — bir qatorga majburlansa karta ekrandan chiqardi */
.od-list .record-card .cell-stack > * { white-space: normal; overflow: visible; }
/* Holat + kechikish belgisi bitta qatorda (o'ralmaydi) */
.od-cell-tags { display: flex; align-items: center; gap: 6px; min-width: 0; }
.od-cell-tags .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Telefondagi karta ko'rinishida esa O'RALSIN: "Haydovchiga berildi" va
   "+22 soat" belgilari yonma-yon 375px ekranga sig'masdi — kartaning eng
   kichik kengligi shu ikki belgiga tenglashib, butun sahifa ekrandan
   kengayib ketardi (ro'yxat va ko'rsatkich ekranlarida o'ngga siljitish
   paydo bo'lardi). */
.record-card .od-cell-tags { flex-wrap: wrap; }
/* Amal tugmalari qatorni cho'zmasin (30px katak ichiga sig'adi) */
.od-list .row-actions .icon-btn,
.od-list .row-actions .menu > .icon-btn {
  width: 28px !important; height: 28px !important; border-radius: 8px;
}
.od-list .row-actions svg { width: 15px; height: 15px; }
/* Raqamlar — o'ngga tekis, bir xil kenglikdagi raqamlar bilan; summa
   ikki qatorga BO'LINMAYDI (aks holda butun qator cho'ziladi) */
.od-list .table td.num, .od-list .table th.num {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
/* Raqam ustuni - qatordagi eng muhim qiymat: to'q va qalinroq */
.od-list .table tbody td.num { font-weight: 600; color: var(--ink); }

/* ======================================================================
   2. KARTOCHKA — «nega» bloki (holat + sabab + SLA)
   ====================================================================== */
.od-hero {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  --hero: var(--blue); --hero-soft: var(--blue-soft);
}
.od-hero[data-tone="ok"]    { --hero: var(--green); --hero-soft: var(--green-soft); }
.od-hero[data-tone="warn"]  { --hero: var(--amber); --hero-soft: var(--amber-soft); }
.od-hero[data-tone="crit"]  { --hero: var(--red);   --hero-soft: var(--red-soft); }
.od-hero[data-tone="muted"] { --hero: var(--ink-2); --hero-soft: var(--muted-soft); }
.od-hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--hero), transparent 85%);
}
.od-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 286px;
  gap: var(--s5); padding: var(--s4) var(--s5);
}
.od-hero__main { display: flex; gap: var(--s4); min-width: 0; }
.od-hero__icon {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--hero-soft); color: var(--hero);
}
.od-hero__icon svg { width: 22px; height: 22px; }
.od-hero__body { min-width: 0; }
/* Kartochkaning sarlavhasi — eng yirik matn shu yerda (pastdagi
   bloklar sarlavhasi undan kichik bo'lib qoladi) */
.od-hero__title {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.2px;
}
/* Sarlavhani TUSHUNTIRADI - shuning uchun undan mayda va jimroq */
.od-hero__why {
  margin-top: 4px; font-weight: 400; color: var(--ink-2);
  font-size: var(--fs-body); line-height: 1.45;
}
.od-hero__why b { color: var(--ink); font-weight: 600; }
.od-hero__note {
  margin-top: 6px; padding: 7px 10px; border-radius: 10px;
  background: var(--card-2); border-left: 3px solid var(--hero);
  font-size: var(--fs-meta); color: var(--ink); line-height: 1.45;
}
.od-hero__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* SLA bloki */
.od-sla {
  border-left: 1px solid var(--line); padding-left: var(--s5);
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
}
.od-sla__label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-2) 72%, var(--ink));
}
/* Blok SHU SON uchun bor - eng yirik va eng qalin element */
.od-sla__value {
  font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.od-sla__value--crit { color: color-mix(in srgb, var(--red) 62%, var(--ink)); }
.od-sla__value--warn { color: color-mix(in srgb, var(--amber) 52%, var(--ink)); }
.od-sla__value--ok   { color: color-mix(in srgb, var(--green) 55%, var(--ink)); }
.od-sla__hint {
  font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2); line-height: 1.4;
}
.od-sla .bar { margin-top: 2px; }

/* Bosqichlar zinapoyasi — buyurtma qayerda turganini ko'rsatadi */
.od-steps {
  display: flex; align-items: center; gap: 0; overflow-x: auto;
  padding: 0 var(--s5) var(--s4); scrollbar-width: none;
}
.od-steps::-webkit-scrollbar { height: 0; display: none; }
.od-step { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.od-step__dot {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px;
  display: grid; place-items: center;
  background: var(--card-2); color: var(--ink-3);
  border: 1px solid var(--line-strong);
  font-size: 11px; font-weight: 700;
}
.od-step__dot svg { width: 13px; height: 13px; }
.od-step__label { font-size: var(--fs-meta); color: var(--ink-2); white-space: nowrap; }
.od-step--done .od-step__dot {
  background: var(--green); color: var(--on-accent); border-color: transparent;
}
.od-step--done .od-step__label { color: var(--ink-2); }
.od-step--now .od-step__dot {
  background: var(--blue); color: var(--on-accent); border-color: transparent;
  animation: od-pulse 2.2s var(--ease) infinite;
}
.od-step--now .od-step__label { color: var(--ink); font-weight: 700; }
.od-step--stop .od-step__dot {
  background: var(--red); color: var(--on-accent); border-color: transparent;
}
.od-step--stop .od-step__label { color: color-mix(in srgb, var(--red) 62%, var(--ink)); font-weight: 700; }
.od-step__line {
  width: 26px; height: 2px; flex: 0 0 auto; margin: 0 8px;
  background: var(--line-strong); border-radius: 2px;
}
.od-step__line--done { background: var(--green); }
@keyframes od-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 40%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ======================================================================
   3. FAKT QATORI
   Avval oltita alohida ramkali plitka edi — oltita chegara, oltita soya.
   Endi BITTA yuza: fakt­lar ichkarida ingichka chiziq bilan ajratiladi.
   ====================================================================== */
.od-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
}
.od-fact {
  padding: 11px var(--pad-card, var(--s4)); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.od-fact:first-child { border-left: 0; }
.od-fact__label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-2) 72%, var(--ink));
  display: flex; align-items: center; gap: 6px;
}
.od-fact__label svg { width: 13px; height: 13px; }
.od-fact__value {
  font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.25;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis;
}
.od-fact__hint { font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2); }

/* ======================================================================
   4. KARTOCHKA USTUNLARI VA BLOKLARI

   Uch og'irlik bor va ular ATAYLAB farq qiladi:
     1) `.od-hero`  — soyali karta: "bu yetkazish joyidami" degan savolga
        javob beradigan yagona baland blok;
     2) `.od-cols .card` — soyasiz, faqat ingichka chegarali karta: kim,
        qayerga, nima va tasdiq;
     3) `.od-sec`   — ramkasiz tinch bo'lim: tarix, muammolar, fayllar,
        izoh. Sarlavha + chiziq, boshqa hech narsa.
   Avval hammasi bir xil chegara + soya edi, shuning uchun sahifa
   "kartalar to'ri" bo'lib ko'rinardi.
   ====================================================================== */
.od-cols {
  display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: var(--gap-grid, var(--s4)); align-items: start;
}
.od-col { display: grid; gap: var(--gap-grid, var(--s4)); align-content: start; min-width: 0; }
/* Ustun ichidagi bloklar KENGAYIB ketmasin: xarita (Leaflet) va mahsulot
   jadvali o'z tabiiy kengligini talab qiladi, `min-width: auto` esa ularni
   ustundan chiqarib yuborardi — telefonda butun sahifa o'ngga siljirdi. */
.od-col > * { min-width: 0; }
/* Kartochka bloklari ixchamroq: sarlavha hero'dan kichik, ichki
   bo'shliqlar 12/16px — hero sahifaning sarlavhasi bo'lib qolsin */
.od-cols .card__head { padding: var(--s3) var(--s4) 0; }
.od-cols .card__title { font-size: 13.5px; }
.od-cols .card__body { padding: var(--s3) var(--s4) var(--s4); }

/* 3-daraja — tinch bo'lim (ramka yo'q) */
.od-cols--quiet { gap: var(--gap-block, var(--s6)) var(--gap-block, var(--s6)); }
.od-sec { min-width: 0; }
.od-sec__head {
  display: flex; align-items: baseline; gap: var(--gap-in, var(--s3)); flex-wrap: wrap;
  padding-bottom: var(--s2); border-bottom: 1px solid var(--line);
  margin-bottom: var(--s3);
}
.od-sec__title {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-2) 72%, var(--ink));
}
.od-sec__sub { font-size: var(--fs-meta); color: var(--ink-2); }
.od-sec__actions { margin-left: auto; display: flex; gap: var(--s2); }
.od-sec__body { min-width: 0; }
/* Forma va kartochka ichidagi guruh sarlavhasi (mijoz kartochkasi) */
.od-sec__cap {
  margin: 0 0 var(--s3); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-2) 72%, var(--ink));
}

.od-kv { display: grid; gap: 7px; }
.od-kv__row {
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  gap: var(--s3); align-items: baseline;
}
.od-kv__k { font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2); }
.od-kv__v {
  font-size: var(--fs-table); font-weight: 600; color: var(--ink);
  min-width: 0; overflow-wrap: anywhere;
}
.od-kv__v .pill { vertical-align: middle; }
/* Havola mayda matn ichida: `--blue` o'zi 4,1:1 beradi (o'lchangan),
   shuning uchun o'qiladigan ko'k siyoh ishlatiladi. */
.od-kv__v a {
  color: var(--blue-ink, color-mix(in srgb, var(--blue) 76%, var(--ink)));
  text-decoration: none;
}
.od-kv__v a:hover { text-decoration: underline; }
.od-kv__v--muted { color: var(--ink-2); font-weight: 400; }

/* Ikki ustunli kartochkada jadval kataklari siqiladi — raqamlar qatorga
   bo'linib ketmasin */
.od-col .items-table td.num, .od-col .items-table th.num { white-space: nowrap; }
.od-col .items-table th { font-size: 10.5px; }
/* Keng jadval O'Z ichida siljiydi — sahifa o'ngga cho'zilmaydi */
.od-scroll { overflow-x: auto; max-width: 100%; }

.od-empty {
  border: 1px dashed var(--line-strong); border-radius: var(--r-input);
  padding: 14px; text-align: center; color: var(--ink-2);
  font-size: var(--fs-meta);
  background: color-mix(in srgb, var(--card-2) 35%, var(--card));
}
/* Tinch bo'limda "yo'q" degan gap uchun ramka ortiqcha — oddiy jumla */
.od-sec .od-empty {
  border: 0; background: none; padding: 0; text-align: left;
}

/* Xarita bloki (yetkazish nuqtasi) */
.od-map {
  width: 100%; height: 210px; background: var(--card-2);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.od-map .leaflet-container { border-radius: 0 0 var(--r-card) var(--r-card); }

/* Tasdiqlash fotosi */
.od-photo {
  display: block; width: 100%; max-height: 260px; object-fit: cover;
  border-radius: var(--r-input); border: 1px solid var(--line);
}

/* Muammolar ro'yxati */
.od-prob { display: grid; gap: var(--s2); }
.od-prob__item {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--s3);
  padding: 10px 12px; border-radius: var(--r-input);
  background: var(--card-2); border-left: 3px solid var(--ink-3);
}
.od-prob__item--crit { background: var(--red-soft); border-left-color: var(--red); }
.od-prob__item--warn { background: var(--amber-soft); border-left-color: var(--amber); }
.od-prob__item--info { background: var(--blue-soft); border-left-color: var(--blue); }
.od-prob__icon { display: grid; place-items: center; color: inherit; opacity: .75; }
.od-prob__icon svg { width: 16px; height: 16px; }
.od-prob__title { font-size: var(--fs-table); font-weight: 700; color: var(--ink); }
/* Muammo izohi rangli (yumshoq) fon ustida turadi — `--ink-2` u yerda
   3,9:1 gacha tushadi (o'lchangan), shuning uchun bir qadam to'qroq. */
.od-prob__text {
  font-size: var(--fs-meta); font-weight: 400;
  color: color-mix(in srgb, var(--ink-2) 72%, var(--ink));
  margin-top: 2px; line-height: 1.45;
}
.od-prob__item--crit .od-prob__title { color: color-mix(in srgb, var(--red) 62%, var(--ink)); }
.od-prob__item--warn .od-prob__title { color: color-mix(in srgb, var(--amber) 52%, var(--ink)); }

/* Vaqt tasmasi (status tarixi) */
.od-tl { display: grid; gap: 0; }
.od-tl__item {
  display: grid; grid-template-columns: 58px 26px minmax(0, 1fr);
  gap: var(--s3); align-items: stretch; min-height: 42px;
}
.od-tl__time {
  text-align: right; font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2);
  line-height: 1.25; padding-top: 4px; font-variant-numeric: tabular-nums;
}
.od-tl__time b { display: block; color: var(--ink); font-weight: 600; }
.od-tl__rail { display: flex; flex-direction: column; align-items: center; }
.od-tl__rail i { flex: 1 1 auto; width: 2px; background: var(--line); margin: 4px 0 0; }
.od-tl__item:last-child .od-tl__rail i { background: transparent; }
.od-tl__dot {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  display: grid; place-items: center;
  background: var(--muted-soft); color: var(--ink-2);
}
.od-tl__dot svg { width: 13px; height: 13px; }
.od-tl__dot--ok   { background: var(--green-soft); color: color-mix(in srgb, var(--green) 55%, var(--ink)); }
.od-tl__dot--info { background: var(--blue-soft);  color: var(--blue-ink, color-mix(in srgb, var(--blue) 76%, var(--ink))); }
.od-tl__dot--warn { background: var(--amber-soft); color: color-mix(in srgb, var(--amber) 52%, var(--ink)); }
.od-tl__dot--crit { background: var(--red-soft);   color: color-mix(in srgb, var(--red) 62%, var(--ink)); }
.od-tl__body { min-width: 0; padding: 2px 0 16px; }
.od-tl__item:last-child .od-tl__body { padding-bottom: 0; }
.od-tl__title {
  font-size: var(--fs-table); font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.od-tl__gap {
  font-size: 10.5px; font-weight: 600;
  color: color-mix(in srgb, var(--ink-2) 72%, var(--ink));
  background: var(--card-2); border-radius: 999px; padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.od-tl__meta {
  font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2);
  margin-top: 2px; line-height: 1.45;
}
.od-tl__note {
  margin-top: 5px; font-size: var(--fs-meta); color: var(--ink);
  background: var(--card-2); border-radius: 8px; padding: 6px 9px;
  overflow-wrap: anywhere;
}

/* ======================================================================
   5. YETKAZIB BERISH — kunlik ro'yxat

   Kun ko'rsatkichlari avval beshta baland plitka edi va ular holat
   segmentlaridagi sonlarni AYNAN takrorlardi. Endi sonlar faqat
   segmentlarda; kun bajarilishi esa sarlavha ostidagi jumla va shu
   3px li chiziq bilan beriladi.
   ====================================================================== */
.dl-day {
  height: 3px; background: var(--card-2); overflow: hidden;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.dl-day__fill {
  display: block; height: 100%; width: 0;
  background: var(--blue); transition: width .4s var(--ease);
}
.dl-day__fill--ok   { background: var(--green); }
.dl-day__fill--warn { background: var(--amber); }
.dl-day__fill--info { background: var(--blue); }


.dl-head, .dl-row {
  display: grid;
  grid-template-columns: 54px 28px minmax(0, 1fr) 138px 70px 196px 14px;
  align-items: center; gap: 12px;
}
.dl-head {
  padding: 8px var(--s5); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-2) 72%, var(--ink));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-2) 45%, var(--card));
}
/* Qator balandligi 40px atrofida: holat belgilari endi bitta qatorda
   turadi (avval ular o'ralib, qator 74px'gacha cho'zilardi) */
.dl-row {
  width: 100%; padding: 5px var(--s5); min-height: 40px; border: 0;
  border-bottom: 1px solid var(--line); background: transparent;
  text-align: left; color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: var(--fs-table);
  transition: background .14s var(--ease), box-shadow .14s var(--ease);
}
.dl-row:last-child { border-bottom: 0; }
.dl-row:hover { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.dl-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.dl-row__time {
  display: flex; flex-direction: column; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.dl-row__time b { font-size: var(--fs-table); font-weight: 600; color: var(--ink); }
.dl-row__time small { font-size: 10.5px; font-weight: 400; color: var(--ink-2); }
.dl-row__dot {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  display: grid; place-items: center; background: var(--muted-soft); color: var(--ink-2);
}
.dl-row__dot svg { width: 15px; height: 15px; }
.dl-row__dot--ok   { background: var(--green-soft); color: color-mix(in srgb, var(--green) 55%, var(--ink)); }
.dl-row__dot--info { background: var(--blue-soft);  color: var(--blue-ink, color-mix(in srgb, var(--blue) 76%, var(--ink))); }
.dl-row__dot--warn { background: var(--amber-soft); color: color-mix(in srgb, var(--amber) 52%, var(--ink)); }
.dl-row__dot--crit { background: var(--red-soft);   color: color-mix(in srgb, var(--red) 62%, var(--ink)); }
.dl-row__main, .dl-row__who {
  display: flex; flex-direction: column; gap: 0; min-width: 0; line-height: 1.2;
}
.dl-row__main b { font-size: var(--fs-table); font-weight: 600; color: var(--ink); }
.dl-row__main small, .dl-row__who small {
  font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2);
}
.dl-row__main b, .dl-row__main small,
.dl-row__who span, .dl-row__who small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.dl-row__who span { font-weight: 600; }
.dl-row__vol {
  text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* Holat belgilari bitta qatorda — qator balandligi o'zgarmasin */
.dl-row__state {
  display: flex; flex-wrap: nowrap; gap: 5px; min-width: 0; overflow: hidden;
}
.dl-row__state .pill { overflow: hidden; text-overflow: ellipsis; }
.dl-row__chev {
  color: var(--ink-3); opacity: 0; transform: translateX(-4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease);
  display: grid; place-items: center;
}
.dl-row__chev svg { width: 14px; height: 14px; }
.dl-row:hover .dl-row__chev, .dl-row:focus-visible .dl-row__chev {
  opacity: 1; transform: none; color: var(--blue);
}

@media (max-width: 1180px) {
  .dl-head, .dl-row {
    grid-template-columns: 52px 28px minmax(0, 1fr) 116px 62px 164px 14px;
    gap: 9px;
  }
}
@media (max-width: 920px) {
  .dl-head { display: none; }
  .dl-row {
    grid-template-columns: 52px 28px minmax(0, 1fr) 14px;
    grid-template-areas: "time dot main chev" ". . who who" ". . state state";
    row-gap: 4px; padding: 8px var(--s4); min-height: 44px;
  }
  /* Telefonda holat belgilari o'z qatorida — o'ralishi mumkin */
  .dl-row__state { flex-wrap: wrap; overflow: visible; }
  .dl-row__time { grid-area: time; }
  .dl-row__dot { grid-area: dot; }
  .dl-row__main { grid-area: main; }
  .dl-row__who { grid-area: who; flex-direction: row; gap: var(--s2); }
  .dl-row__state { grid-area: state; }
  .dl-row__chev { grid-area: chev; opacity: .45; transform: none; }
  .dl-row__vol { display: none; }
}

/* ======================================================================
   6. MOSLASHUV (planshet va telefon)
   ====================================================================== */
@media (max-width: 1100px) {
  .od-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .od-sla {
    border-left: 0; border-top: 1px solid var(--line);
    padding-left: 0; padding-top: var(--s4);
  }
  .od-cols { grid-template-columns: minmax(0, 1fr); }
  .od-cols--quiet { gap: var(--gap-block, var(--s5)); }
}

@media (max-width: 760px) {
  .od-hero__grid { padding: var(--s4); gap: var(--s4); }
  .od-hero__title { font-size: 17px; }
  .od-hero__icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; }
  .od-steps { padding: 0 var(--s4) var(--s4); }
  .od-facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s2); }
  .od-fact { padding: 9px var(--s3); }
  .od-fact__value { font-size: 15px; }
  .od-kv__row { grid-template-columns: 104px minmax(0, 1fr); gap: var(--s2); }
  .od-tl__item { grid-template-columns: 48px 24px minmax(0, 1fr); gap: var(--s2); }
  .od-cols .card__head { padding: var(--s3) var(--s4) 0; }
  .od-cols .card__body { padding: var(--s3) var(--s4) var(--s4); }
  }

/* Telefon (375px): gorizontal aylantirish yo'q, matn qisqaradi */
@media (max-width: 420px) {
  .od-hero__grid { padding: var(--s3); gap: var(--s3); }
  .od-hero__title { font-size: 16px; }
  .od-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-steps { padding: 0 var(--s3) var(--s3); }
  .dl-row { padding: 8px var(--s3); }
  .dl-head { padding: 8px var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  .ost__ind, .ost__tab, .ost__more, .dl-row, .dl-row__chev { transition: none; }
  .dl-day__fill, .od-an__sum::before { transition: none; }
  .od-step--now .od-step__dot { animation: none; }
  .ost__scroll { scroll-behavior: auto; }
}

/* ======================================================================
   Sozlamalar → Ma'lumot import qilish

   Uch qadam ketma-ket karta bo'lib turadi: raqamli belgi bilan qaysi
   bosqichda ekani ko'rinib turadi, hali bajarilmagan qadam xira bo'ladi.
   Ranglar, radius va harakat tezligi — umumiy dizayn tokenlaridan.
   ====================================================================== */
.imp-step { position: relative; }
.imp-step .card__head { align-items: flex-start; gap: var(--s3); }
.imp-step--off { opacity: .72; }

/* Qadam raqami — sarlavha yonidagi doira */
.imp-step__no {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-soft); color: var(--blue);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.imp-step--off .imp-step__no { background: var(--muted-soft); color: var(--ink-3); }

/* Manba turi: fayl yoki havola */
.imp-modes { display: flex; gap: var(--s2); flex-wrap: wrap; }
.imp-mode {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--ctrl-h); padding: 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r-input);
  background: var(--card); color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.imp-mode:hover { background: var(--card-hover); color: var(--ink); }
.imp-mode[aria-pressed="true"] {
  background: var(--blue-soft); border-color: var(--blue); color: var(--blue);
}
.imp-mode svg { width: 16px; height: 16px; }

/* Fayl tashlash maydoni */
.imp-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; padding: var(--s6) var(--s4);
  border: 1px dashed var(--line-strong); border-radius: var(--r-card);
  background: var(--card-2); color: var(--ink-2);
  font: inherit; text-align: center; cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.imp-drop:hover, .imp-drop--over { border-color: var(--blue); background: var(--blue-soft); }
.imp-drop__icon { color: var(--blue); }
.imp-drop__icon svg { width: 24px; height: 24px; }
.imp-drop__title { font-size: 14px; font-weight: 600; color: var(--ink); }
.imp-drop__hint { font-size: 12px; font-weight: 400; color: var(--ink-2); }
.imp-drop__name {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-input); background: var(--card-2); font-size: 13px;
}
.imp-drop__name svg { width: 15px; height: 15px; vertical-align: -2px; }

/* Ustun mosligi */
.imp-map { margin-top: var(--s4); }
.imp-map > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--blue);
  padding: var(--s2) 0;
}
.imp-map > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.imp-map__list {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.imp-map__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                gap: var(--s2); align-items: center; }
.imp-map__field { font-size: 13px; color: var(--ink); min-width: 0; }
.imp-map__row .select { min-height: var(--ctrl-h); }

@media (max-width: 760px) {
  .imp-map__row { grid-template-columns: minmax(0, 1fr); }
  .imp-drop { padding: var(--s5) var(--s3); }
  /* Barmoq uchun: boshqaruvlar 40px dan past emas */
  .imp-mode { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .imp-mode, .imp-drop { transition: none; }
}

/* ======================================================================
   Linko ma'lumotlari (fakt qatori ostida; faqat Linko buyurtmasida)
   Online buyurtmaning izohdagi manzili — ko'zga tashlanadigan quti,
   qolgan faktlar — bitta ixcham qator (telefonda o'raladi).
   ====================================================================== */
.od-linko { display: grid; gap: var(--s2); min-width: 0; }
.od-linko__addr {
  padding: var(--s3) var(--s4); border-radius: var(--r-card);
  background: var(--blue-soft); border: 1px solid var(--blue-line); color: var(--ink);
}
.od-linko__addr-k {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue-ink);
}
.od-linko__addr-k svg { width: 13px; height: 13px; flex: 0 0 13px; }
.od-linko__addr-v {
  margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.od-linko__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s4);
  padding: 9px var(--s4); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.od-linko__item {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0;
  font-size: var(--fs-table); line-height: 1.4;
}
.od-linko__k {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2);
}
.od-linko__k svg { width: 13px; height: 13px; flex: 0 0 13px; }
.od-linko__v { color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.od-linko__v .pill { vertical-align: middle; }

@media (max-width: 420px) {
  .od-linko__addr { padding: var(--s3); }
  .od-linko__list { padding: 8px var(--s3); gap: 6px var(--s3); }
}

/* ======================================================================
   BUYURTMALAR RO'YXATI — bo'lim tablari, kun, reys chiplari, tanlov
   paneli va «Kuryerlar bo'yicha» ko'rinish (2026-10-01, egasi: «shahar,
   viloyat, xonadon; 1-reysga qaysilar, 2-reysga qaysilar — ixcham»).
   Prefikslar: .od-div / .od-day / .od-trips / .od-chip / .od-bulk /
   .od-board (.odb-*). Ranglar faqat mavzu tokenlaridan.
   ====================================================================== */
.od-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3); margin: 0 0 var(--s3);
}

/* Bo'lim tablari — segmentlangan boshqaruv, son bilan */
.od-div {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-card); max-width: 100%;
}
.od-div__tab {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--fs-body); font-weight: 600; white-space: nowrap;
  cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.od-div__tab[hidden] { display: none; }
.od-div__tab:hover { background: var(--card-2); color: var(--ink); }
.od-div__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.od-div__tab[aria-selected="true"] {
  background: var(--blue-strong); color: var(--on-accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 28%, transparent);
}
.od-div__n {
  min-width: 24px; padding: 1px 7px; border-radius: var(--r-pill); text-align: center;
  background: var(--muted-soft); color: var(--ink-2); font-size: 11.5px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.od-div__tab[aria-selected="true"] .od-div__n {
  background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: var(--on-accent);
}

/* Kun tanlagich: ‹ [📅 Ertaga 2-oktabr] › · Bugun | Ertaga | Hammasi */
.od-day { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.od-day__step {
  display: inline-grid; place-items: center; width: 34px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  color: var(--ink-2); cursor: pointer; transition: color var(--t) var(--ease);
}
.od-day__step:hover { color: var(--ink); border-color: var(--line-strong); }
.od-day__step svg { width: 16px; height: 16px; }
.od-day__wrap { position: relative; display: inline-flex; }
.od-day__pick {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; min-width: 176px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font: inherit; font-size: var(--fs-body);
  cursor: pointer; box-shadow: var(--shadow-card);
}
.od-day__pick:hover { border-color: var(--blue-line); }
.od-day__pick svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--blue); }
.od-day__pick b { font-weight: 650; }
.od-day__pick span { color: var(--ink-2); }
.od-day__input {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; padding: 0;
  border: 0; opacity: 0; pointer-events: none;
}
.od-day__quick {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}
.od-day__q {
  height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: var(--fs-meta); font-weight: 600; cursor: pointer;
}
.od-day__q:hover { background: var(--card-2); color: var(--ink); }
.od-day__q[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue-ink); }

/* Reys rangi: 1 — ko'k, 2 — akva, 3 — binafsha, 4+ — sariq */
.od-trip--1, .od-chip--t1 { --trip-c: var(--blue); --trip-soft: var(--blue-soft); --trip-ink: var(--blue-ink); }
.od-trip--2, .od-chip--t2 { --trip-c: var(--aqua); --trip-soft: var(--aqua-soft); --trip-ink: var(--aqua-ink); }
.od-trip--3, .od-chip--t3 {
  --trip-c: var(--chart-6); --trip-soft: color-mix(in srgb, var(--chart-6) 14%, var(--card));
  --trip-ink: color-mix(in srgb, var(--chart-6) 72%, var(--ink));
}
.od-trip--4, .od-chip--t4 { --trip-c: var(--amber); --trip-soft: var(--amber-soft); --trip-ink: var(--amber-ink); }

/* Jadvaldagi reys belgisi */
.od-trip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: var(--r-pill); background: var(--trip-soft, transparent);
  color: var(--trip-ink, var(--ink-3)); font-size: 11.5px; font-weight: 650; white-space: nowrap;
}
.od-trip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--trip-c, transparent);
}
.od-trip--none { padding: 0 4px; color: var(--ink-3); font-weight: 500; }
.od-trip--none::before { display: none; }

/* Reys chiplari qatori (boshqaruv qatori ostida) */
.od-trips {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: 8px var(--s4); border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--card-2) 45%, var(--card));
}
.od-trips__cap {
  display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3);
  font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
}
.od-trips__cap svg { width: 14px; height: 14px; }
.od-trips__chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.od-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card);
  color: var(--ink-2); font: inherit; font-size: var(--fs-meta); cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.od-chip::before {
  content: ""; display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--trip-c);
}
.od-chip--t1::before, .od-chip--t2::before, .od-chip--t3::before, .od-chip--t4::before { display: block; }
.od-chip b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.od-chip small { color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.od-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.od-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.od-chip[aria-pressed="true"] {
  border-color: var(--trip-c, var(--blue));
  background: var(--trip-soft, var(--blue-soft)); color: var(--trip-ink, var(--blue-ink));
}
.od-chip[aria-pressed="true"] b,
.od-chip[aria-pressed="true"] small { color: inherit; }
.od-chip--none[aria-pressed="true"] {
  border-color: var(--line-strong); background: var(--muted-soft); color: var(--ink);
}

/* Ro'yxat | Kuryerlar bo'yicha */
.od-view {
  display: inline-flex; gap: 2px; padding: 3px; margin-left: auto;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}
.od-view__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border: 0; border-radius: 7px; background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.od-view__btn svg { width: 14px; height: 14px; }
.od-view__btn:hover { background: var(--card-2); color: var(--ink); }
.od-view__btn[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue-ink); }

/* Jadval: tanlash katagi, tanlangan qator, to'lov izohi */
.od-list .table th.od-sel, .od-list .table td.od-sel { width: 36px; padding-right: 0; }
.od-check {
  width: 16px; height: 16px; margin: 0; vertical-align: middle;
  accent-color: var(--blue); cursor: pointer;
}
.od-list .table tbody tr.is-selected td {
  background: color-mix(in srgb, var(--blue-soft) 70%, var(--card));
}
.od-list .table .cell-stack--end { align-items: flex-end; }
.od-list .cell-stack small.od-pay--ok { color: var(--green-ink); }
.od-list .cell-stack small.od-pay--muted { color: var(--ink-3); }
.od-list .cell-stack small.od-pay--warn { color: var(--amber-ink); }
/* Faqat jadvalda bir qator (telefon kartasida matn o'raladi — aks holda karta
   ekrandan chiqib ketardi) */
.od-list .table .od-cust small {
  display: block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* «Kuryerlar bo'yicha» rejimida jadval va sahifalash yashirinadi */
.od-mode-board .list-body,
.od-mode-board .list-footer,
.od-mode-map .list-body,
.od-mode-map .list-footer,
.od-mode-online .list-body,
.od-mode-online .list-footer,
/* Onlayn dostavka xaritasida reys chiplari ma'nosiz — faqat ko'rinish almashtirgich qoladi */
.od-mode-online .od-trips__cap,
.od-mode-online .od-trips__chips { display: none; }
.od-mode-online .od-trips { justify-content: flex-end; }

/* Pastki tanlov paneli — reysga qo'yish */
.od-bulk {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin: var(--s3); padding: 10px 12px 10px var(--s4);
  border: 1px solid var(--blue-line); border-radius: 12px;
  background: var(--card); box-shadow: var(--shadow-pop);
}
.od-bulk[hidden] { display: none; }
.od-bulk__info { display: inline-flex; align-items: baseline; gap: 10px; }
.od-bulk__info b { color: var(--ink); font-weight: 650; }
.od-bulk__info span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.od-bulk__acts {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto;
}
.od-bulk__cap { color: var(--ink-3); font-size: var(--fs-meta); font-weight: 600; margin-right: 2px; }
.od-bulk__trip {
  border-color: color-mix(in srgb, var(--trip-c) 45%, var(--line));
  background: var(--trip-soft); color: var(--trip-ink); font-weight: 650;
}
.od-bulk__trip:hover { border-color: var(--trip-c); background: var(--trip-soft); color: var(--trip-ink); }
.od-bulk__close { flex: 0 0 auto; }

/* «Kuryerlar bo'yicha» ko'rinish */
.od-board { display: grid; gap: var(--s3); padding: var(--s3) var(--s4) var(--s4); }
.od-board[hidden] { display: none; }
.od-board__note {
  display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-meta);
}
.od-board__note svg { width: 14px; height: 14px; color: var(--blue); flex: 0 0 14px; }
.od-board__pick { display: inline-flex; gap: 8px; }
.odb-grp {
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card);
  overflow: hidden;
}
.odb-grp__head {
  display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s4);
  background: color-mix(in srgb, var(--card-2) 60%, var(--card));
  border-bottom: 1px solid var(--line-soft);
}
.odb-grp__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.odb-grp__who b { color: var(--ink); font-weight: 650; }
.odb-grp__who small { color: var(--ink-2); font-size: 11.5px; }
.odb-grp__sum { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.odb-grp__sum b { color: var(--ink); font-weight: 650; }
.odb-grp__sum span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.odb-grp__body { display: grid; }
.odb-trip + .odb-trip { border-top: 1px dashed var(--line); }
.odb-trip__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px var(--s4) 4px; font-size: var(--fs-meta);
}
.odb-trip__head b { color: var(--ink); font-weight: 650; }
.odb-trip__kg { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.odb-trip__where {
  margin-left: auto; color: var(--ink-3); max-width: 50%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.odb-trip--none .odb-trip__head .od-trip--none { padding: 0 9px; background: var(--muted-soft); }
.odb-trip__rows { display: grid; padding: 0 var(--s2) 6px; }
.odb-row {
  display: grid; grid-template-columns: 20px 112px minmax(0, 1fr) 72px auto;
  align-items: center; gap: 10px; min-height: 38px; padding: 4px var(--s2);
  border-radius: 8px; cursor: pointer; font-size: var(--fs-table);
}
.odb-row--view { grid-template-columns: 112px minmax(0, 1fr) 72px auto; }
.odb-row:hover { background: var(--row-hover); }
.odb-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.odb-row.is-selected { background: color-mix(in srgb, var(--blue-soft) 70%, var(--card)); }
.odb-row__no { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.odb-row__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.odb-row__who b {
  color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.odb-row__who small {
  color: var(--ink-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.odb-row__kg { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .od-top { flex-direction: column; align-items: stretch; }
  .od-div { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .od-div::-webkit-scrollbar { display: none; }
  .od-day { justify-content: space-between; }
  .od-day__wrap { flex: 1 1 auto; }
  .od-day__pick { min-width: 0; flex: 1 1 auto; }
  .od-view { margin-left: 0; }
  .od-view__btn span { display: none; }
  .od-bulk { bottom: 8px; margin: var(--s2); }
  .od-bulk__acts { margin-left: 0; }
  .odb-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .odb-row--view { grid-template-columns: minmax(0, 1fr) auto; }
  .odb-row__no, .odb-row .pill { display: none; }
  .odb-trip__where { max-width: 100%; margin-left: 0; flex-basis: 100%; }
}

/* Kartochkadagi reys tanlovi */
.od-trip-select { height: 32px; min-height: 32px; width: auto; min-width: 136px; padding-top: 0; padding-bottom: 0; }

/* Logist qo'lda qo'ygan reys raqami — avtomatikdan (Linko) farqlansin */
.od-trip--manual { box-shadow: inset 0 0 0 1px var(--trip-c, var(--line-strong)); }

/* ======================================================================
   YUK TO'LDIRISH (5 km) — to'liqlik chizig'i, tugma, xulosa va xarita
   oynasi (2026-10-02, egasi: «mashina yarim bo'sh chiqmasin»).
   Prefikslar: .fillm (chiziq), .fillbtn, .fillsum, .fillx (oyna),
   .fillmark (xaritadagi belgi). Ranglar mavzu tokenlaridan.
   ====================================================================== */
.fillm { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--ink-2); }
.fillm__bar {
  position: relative; flex: 0 0 auto; width: 120px; height: 8px; overflow: hidden;
  border-radius: var(--r-pill); background: var(--muted-soft);
}
.fillm__bar i { position: absolute; top: 0; bottom: 0; left: 0; }
.fillm__now { background: var(--fill-c); border-radius: var(--r-pill); }
.fillm__add {
  background: repeating-linear-gradient(45deg, var(--fill-c) 0 4px,
              color-mix(in srgb, var(--fill-c) 45%, transparent) 4px 8px);
}
.fillm__txt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fillm__pct { color: var(--fill-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Yarmidan kam — binafsha (sariq faqat kuryersiz buyurtmaga; xaritada ham shunday) */
.fillm--low { --fill-c: var(--chart-6); --fill-ink: color-mix(in srgb, var(--chart-6) 72%, var(--ink)); }
.fillm--info { --fill-c: var(--blue); --fill-ink: var(--blue-ink); }
.fillm--ok { --fill-c: var(--green); --fill-ink: var(--green-ink); }
.fillm--crit { --fill-c: var(--red); --fill-ink: var(--red-ink); }
.fillm--muted { --fill-c: var(--muted); --fill-ink: var(--ink-3); }

.fillbtn { gap: 6px; white-space: nowrap; }
.fillbtn svg { width: 14px; height: 14px; }
.fillbtn--on {
  border-color: var(--amber-line); background: var(--amber-soft); color: var(--amber-ink);
  font-weight: 650;
}
.fillbtn--on:hover { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-ink); }

.fillsum {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px;
  border: 1px solid var(--amber-line); border-radius: 12px;
  background: color-mix(in srgb, var(--amber-soft) 40%, var(--card));
  font-size: var(--fs-meta); color: var(--ink-2);
}
.fillsum__cap { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; }
.fillsum__cap svg { width: 15px; height: 15px; color: var(--amber-ink); }
.fillsum__item b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fillsum__warn { color: var(--red-ink); font-weight: 600; }
.fillsum__radius { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.fillsum__radius > span { margin-right: 4px; color: var(--ink-3); font-weight: 600; }
.fillsum__r {
  height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--ink-2); font: inherit; font-size: 11.5px;
  font-weight: 600; cursor: pointer;
}
.fillsum__r:hover { color: var(--ink); border-color: var(--line-strong); }
.fillsum__r[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-ink); }

/* --- «Xarita (5 km)» ko'rinishi (rahbar: «xarita doim ko'rinib tursin») ----
   Chapda reyslar yoki tanlangan reys paneli (o'zi aylanadi), o'ngda katta
   xarita — balandligi ekranga yarasha. */
.od-mapv { display: grid; gap: var(--s3); padding: var(--s3) var(--s4) var(--s4); }
.od-mapv[hidden] { display: none; }
.od-mapv__grid {
  display: grid; grid-template-columns: 370px minmax(0, 1fr);
  height: max(560px, calc(100vh - 240px));
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card);
}
.od-mapv__side {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0;
  padding: 12px; border-right: 1px solid var(--line); overflow-y: auto;
}
.od-mapv__mapbox { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.od-mapv__canvas { flex: 1 1 auto; min-height: 360px; }
.od-mapv__cap { display: grid; gap: 3px; }
.od-mapv__cap b, .od-mapv__title b { color: var(--ink); font-size: var(--fs-body); }
.od-mapv__cap span { color: var(--ink-3); font-size: var(--fs-meta); line-height: 1.45; }
.od-mapv__list { display: grid; align-content: start; gap: 6px; }
.od-mapv__unit {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, background .12s;
}
.od-mapv__unit:hover, .od-mapv__unit.is-hot {
  border-color: var(--blue-line); background: color-mix(in srgb, var(--blue-soft) 45%, var(--card));
}
.od-mapv__unit:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.od-mapv__u-main { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
.od-mapv__u-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.od-mapv__u-top b { overflow: hidden; color: var(--ink); font-size: var(--fs-table); text-overflow: ellipsis; white-space: nowrap; }
.od-mapv__u-top .pill { flex: 0 0 auto; margin-left: auto; }
.od-mapv__gone { flex: 0 0 auto; color: var(--ink-3); font-size: 11px; }
.od-mapv__u-who { overflow: hidden; color: var(--ink-2); font-size: var(--fs-meta); text-overflow: ellipsis; white-space: nowrap; }
/* To'liqlik halqasi — ro'yxatda (mavzu ranglarida) va xaritadagi belgida bir xil */
.tripring {
  --tc: var(--blue);
  display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: conic-gradient(var(--tc) calc(var(--p, 0) * 1%), var(--muted-soft) 0);
}
.tripring b {
  display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%;
  background: var(--card); color: var(--ink); font-size: 10.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tripring--low, .tripmk--low, .lg-ring--low { --tc: var(--chart-6); }
.tripring--info, .tripmk--info, .lg-ring--info { --tc: var(--blue); }
.tripring--ok, .tripmk--ok, .lg-ring--ok { --tc: var(--green); }
.tripring--crit, .tripmk--crit, .lg-ring--crit { --tc: var(--red); }
.tripring--muted, .tripmk--muted, .lg-ring--muted { --tc: var(--muted); }

/* Xaritadagi reys belgisi (plitka ikkala mavzuda yorug' — belgi doim oq) */
.tripmk {
  --tc: var(--blue);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px;
  border: 1px solid color-mix(in srgb, var(--tc) 40%, #FFFFFF); border-radius: 999px;
  background: #FFFFFF; color: #0F1B2D; white-space: nowrap; cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 27, 45, .18); font: 600 11px/1.15 var(--font);
  transition: box-shadow .12s, transform .12s;
}
.tripmk.is-hot { transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 30%, transparent), 0 8px 18px rgba(15, 27, 45, .25); }
.tripmk__ring {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(var(--tc) calc(var(--p, 0) * 1%), #E3E8F0 0);
}
.tripmk__ring b {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: #FFFFFF; font-size: 8px; font-weight: 800; letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
}
.tripmk__txt { display: inline-flex; align-items: baseline; gap: 4px; }
.tripmk__txt b { font-size: 11.5px; font-weight: 750; letter-spacing: .1px; }
.tripmk__txt i { color: #5B6B82; font-size: 10px; font-style: normal; font-weight: 650; }
.tripmk__cand {
  display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: #F59E0B; color: #FFFFFF; font-size: 10px; font-weight: 800;
}

/* Kuryersiz buyurtmalar to'dasi: son va og'irlik */
.qclu {
  display: grid; place-content: center; justify-items: center; border: 3px solid #FFFFFF;
  border-radius: 50%; background: #F59E0B; color: #FFFFFF; cursor: pointer; line-height: 1;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .25), 0 4px 10px rgba(15, 27, 45, .2);
  font-family: var(--font);
}
.qclu b { font-size: 12.5px; font-weight: 800; }
.qclu i { margin-top: 2px; font-size: 8.5px; font-style: normal; font-weight: 700; opacity: .92; }

/* Xarita izohidagi kichik namunalar */
.od-mapv__lg-cap { color: var(--ink-3); font-weight: 650; }
.lg-ring {
  --tc: var(--blue);
  display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%;
  vertical-align: -2px; background: conic-gradient(var(--tc) 70%, var(--muted-soft) 0);
}
.lg-cand, .lg-clu {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-right: 6px;
  padding: 0 4px; border-radius: 999px; background: #F59E0B; color: #FFFFFF;
  font-size: 9.5px; font-style: normal; font-weight: 800; vertical-align: -3px;
}
.lg-clu { min-width: 18px; height: 18px; box-shadow: 0 0 0 2px rgba(245, 158, 11, .3); }
.od-mapv__back { align-self: flex-start; }
.od-mapv__title { display: grid; gap: 3px; }
.od-mapv__title small { color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.45; }
.od-mapv__side .fillx__list { flex: 0 0 auto; margin: 0; padding: 0; overflow: visible; }
/* Nusxa tugmasi panel pastida doim ko'rinadi (ro'yxat uzun bo'lsa ham) */
.od-mapv__foot {
  position: sticky; bottom: -12px; display: grid; gap: 6px; margin: auto -12px -12px;
  padding: 10px 12px 12px; border-top: 1px solid var(--line-soft); background: var(--card);
}
.od-mapv__foot .btn { justify-content: center; }
.od-mapv__foot small { color: var(--ink-3); font-size: var(--fs-meta); line-height: 1.45; }
.fillx__legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px;
  border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--ink-2);
}
.fillx__dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; }
.fillx__dot--stop { background: var(--blue); }
.fillx__dot--queue { background: var(--amber); }
.fillx__dot--vehicle { background: var(--chart-6); }
.fillx__dot--zone {
  border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent);
  background: color-mix(in srgb, var(--blue) 20%, transparent);
}
.fillx__dot--far { width: 8px; height: 8px; background: var(--muted); }
/* Xaritadagi mayda kulrang nuqta bilan bir xil (rang qat'iy — plitka doim yorug') */
.fillx__dot--other { width: 8px; height: 8px; background: #8A97AB; }
.fillx__ctx-btn { height: 22px; margin-left: 2px; padding: 0 6px; font-size: 11.5px; vertical-align: 0; }
/* Zonadagi boshqa reyslar do'konlari soni (o'ng panel) */
.fillx__ctx { margin: 0; font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.45; }
/* Reys manzillarida nuqta yo'q — xarita ustida izoh */
.od-mapv__nomap[hidden] { display: none; }
.od-mapv__nomap {
  position: absolute; top: 40%; left: 50%; z-index: 2; transform: translate(-50%, -50%);
  max-width: min(420px, 86%); padding: 12px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); box-shadow: var(--shadow-card);
  color: var(--ink-2); font-size: var(--fs-body); line-height: 1.5; text-align: center;
}
.fillx__gauge {
  display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card-2);
}
.fillx__g-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--ink-3); }
/* Oynadagi chiziq moslashuvchan: tor ekranda siqiladi (oyna kengayib ketmasin) */
.fillx__g-row .fillm { flex-wrap: wrap; min-width: 0; }
.fillx__g-row .fillm__bar { flex: 1 1 80px; width: auto; min-width: 60px; }
.fillx__g-sum { font-size: var(--fs-meta); color: var(--ink-2); }
.fillx__g-sum b { color: var(--ink); }
.fillx__g-sum.is-over, .fillx__g-sum.is-over b { color: var(--red-ink); }
.fillx__note { margin: 0; font-size: var(--fs-meta); }
.fillx__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-body); color: var(--ink); }
.fillx__links { display: inline-flex; gap: 2px; }
.fillx__list { display: grid; align-content: start; gap: 5px; flex: 1 1 auto; min-height: 0; margin: 0 -4px; padding: 0 4px 4px; overflow-y: auto; }
.fillx__row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 9px;
  padding: 8px 9px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card);
}
.fillx__row.is-on { border-color: var(--blue-line); background: color-mix(in srgb, var(--blue-soft) 55%, var(--card)); }
.fillx__row.is-nofit { opacity: .72; }
.fillx__row .od-check { margin-top: 2px; }
.fillx__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; cursor: pointer; }
.fillx__who:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.fillx__who b, .fillx__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fillx__who b { color: var(--ink); font-size: var(--fs-table); font-weight: 600; }
.fillx__who small { color: var(--ink-2); font-size: 11.5px; }
.fillx__who small.fillx__from { color: color-mix(in srgb, var(--chart-6) 75%, var(--ink)); font-weight: 600; }
.fillx__who small.fillx__from--queue { color: var(--amber-ink); }
.fillx__num { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fillx__num b { color: var(--ink); font-size: var(--fs-table); }
.fillx__num small { color: var(--ink-3); font-size: 11.5px; }
.fillx__empty { padding: 14px 4px; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.5; }

/* Xaritadagi belgilar: kuryersiz — sariq, boshqa mashinada — binafsha;
   tanlangani to'liq rangli, sig'maydigani uzuq chiziqli */
.fillmark {
  display: inline-flex; align-items: baseline; gap: 2px; padding: 2px 7px;
  border: 2px solid var(--mk); border-radius: 999px; background: var(--card); color: var(--mk-ink);
  font: 700 11px/1.15 var(--font); white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 27, 45, .2);
}
.fillmark i { font-size: 9.5px; font-style: normal; font-weight: 600; opacity: .8; }
.fillmark--queue { --mk: var(--amber); --mk-ink: var(--amber-ink); }
.fillmark--vehicle { --mk: var(--chart-6); --mk-ink: color-mix(in srgb, var(--chart-6) 75%, var(--ink)); }
.fillmark--on { background: var(--mk); color: var(--on-accent); }
.fillmark--nofit { border-style: dashed; opacity: .78; }
.fillmark--depot { --mk: var(--ink); --mk-ink: var(--ink); border-width: 1px; cursor: default; }

@media (max-width: 900px) {
  .od-mapv { padding: var(--s3); }
  .od-mapv__grid { grid-template-columns: minmax(0, 1fr); height: auto; }
  .od-mapv__mapbox { order: -1; border-bottom: 1px solid var(--line); }
  .od-mapv__canvas { height: 380px; flex: 0 0 auto; }
  .od-mapv__side { border-right: 0; overflow: visible; }
  .od-mapv__foot { position: static; margin: 0; padding: 10px 0 0; }
  .fillsum__radius { margin-left: 0; }
}

/* --- «Onlayn dostavka» xaritasi (static/js/views/online.js) ------------------
   Tepada jami va masofa oraliqlari, chapda buyurtmalar (yaqinidan), o'ngda xarita:
   zavod, km halqalari, har buyurtma — masofasi bilan. Rang — masofa oralig'i. */
.onl { display: grid; gap: var(--s3); padding: var(--s3) var(--s4) var(--s4); }
.onl[hidden] { display: none; }
.onl__head { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.onl-stat {
  display: grid; align-content: start; gap: 2px; flex: 1 1 170px; min-width: 0; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.onl-stat__label { color: var(--ink-3); font-size: var(--fs-meta); font-weight: 600; }
.onl-stat__value { color: var(--ink); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.onl-stat__sub { overflow: hidden; color: var(--ink-2); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.onl-stat--warn { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber-soft) 55%, var(--card)); }
.onl-stat--muted .onl-stat__value { color: var(--ink-2); }
.onl__refresh { align-self: center; }
.onl__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.onl__bands { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.onl-band {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2);
  font: 600 12.5px/1 var(--font); cursor: pointer; transition: border-color .12s, background .12s;
}
.onl-band b { color: var(--ink); font-variant-numeric: tabular-nums; }
.onl-band:hover:not(:disabled) { border-color: var(--blue-line); }
.onl-band[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-ink); }
.onl-band:disabled { opacity: .45; cursor: default; }
.onl-band__dot { width: 10px; height: 10px; border-radius: 50%; }
/* Linko holati: tasdiqlanmagan — sariq, tasdiqlangan — yashil (xaritadagi belgi bilan bir xil) */
.onl-band__dot--draft { background: #F59E0B; }
.onl-band__dot--ok { background: var(--green); }
.onl__conf { flex: 0 0 auto; }
.lg-onl-dot { display: inline-block; margin-right: 6px; vertical-align: -1px; }
.onl__tools { display: flex; gap: 8px; }
.onl__search { width: 230px; }
.onl__sort { width: 170px; }
.onl__grid {
  display: grid; grid-template-columns: 400px minmax(0, 1fr);
  height: max(560px, calc(100vh - 300px));
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card);
}
.onl__side {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0;
  padding: 12px; border-right: 1px solid var(--line); overflow-y: auto;
}
.onl__list { display: grid; align-content: start; gap: 6px; }
.onl__rest-cap { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--amber-ink); font-size: var(--fs-body); }
.onl__rest-cap svg { width: 15px; height: 15px; }
.onl__mapbox { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.onl__canvas { flex: 1 1 auto; min-height: 360px; }
.onl__canvas.is-pinning, .onl__canvas.is-pinning .leaflet-interactive { cursor: crosshair; }

.onl-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px;
  border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.onl-row:hover, .onl-row.is-hot { border-color: var(--blue-line); background: color-mix(in srgb, var(--blue-soft) 40%, var(--card)); }
.onl-row.is-on { border-color: var(--blue); background: color-mix(in srgb, var(--blue-soft) 70%, var(--card)); }
.onl-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.onl-row__km {
  --bc: var(--blue);
  display: grid; flex: 0 0 auto; place-content: center; justify-items: center; width: 52px; height: 46px;
  border: 2px solid var(--bc); border-radius: 12px; background: color-mix(in srgb, var(--bc) 12%, var(--card));
  line-height: 1;
}
.onl-row__km b { color: var(--ink); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.onl-row__km small { margin-top: 2px; color: var(--ink-2); font-size: 10px; font-weight: 700; }
.onl-row__km--none { border-style: dashed; border-color: var(--line-strong); background: var(--card-2); color: var(--ink-3); }
.onl-row__km--none svg { width: 18px; height: 18px; }
.onl-row__main { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
.onl-row__top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.onl-row__top b { overflow: hidden; color: var(--ink); font-size: var(--fs-table); text-overflow: ellipsis; white-space: nowrap; }
.onl-row__top .pill { flex: 0 0 auto; margin-left: auto; }
.onl-row__rank {
  display: inline-grid; flex: 0 0 auto; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--card-3); color: var(--ink-2); font-size: 10.5px; font-style: normal; font-weight: 800;
}
.onl-row__addr { overflow: hidden; color: var(--ink-2); font-size: var(--fs-meta); text-overflow: ellipsis; white-space: nowrap; }
.onl-row__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.onl-row__approx { color: var(--amber-ink); font-weight: 650; }
.onl-row__near { color: var(--blue-ink); font-weight: 700; }
.onl-row__why { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 3px; color: var(--amber-ink); font-size: var(--fs-meta); }

/* Xaritadagi belgilar (plitka ikkala mavzuda yorug' — belgi doim oq fonda) */
.onlmk {
  --bc: #0C63E4;
  position: relative; display: inline-flex; align-items: baseline; gap: 2px; padding: 3px 8px;
  border: 2px solid var(--bc); border-radius: 999px; background: #FFFFFF; color: #0F1B2D;
  font: 800 11.5px/1.1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
  box-shadow: 0 3px 8px rgba(15, 27, 45, .22); transition: transform .12s, box-shadow .12s;
}
.onlmk i { color: #5B6B82; font-size: 9.5px; font-style: normal; font-weight: 700; }
.onlmk--approx { border-style: dashed; }
/* Linko'da tasdiqlanmagan — chap tomonda sariq nuqta */
.onlmk--draft { padding-left: 17px; }
.onlmk--draft::before {
  content: ""; position: absolute; top: 50%; left: 6px; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: #F59E0B; box-shadow: 0 0 0 1.5px #FFFFFF;
}
.onlmk.is-hot { transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc) 30%, transparent), 0 6px 14px rgba(15, 27, 45, .25); }
.onlmk.is-on { background: var(--bc); color: #FFFFFF; transform: scale(1.12); }
.onlmk.is-on i { color: rgba(255, 255, 255, .85); }
.onlmk__near {
  position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 17px; height: 17px;
  padding: 0 4px; border: 2px solid #FFFFFF; border-radius: 999px; background: #0C63E4; color: #FFFFFF;
  font-size: 9.5px; font-weight: 800;
}
.onl-ringlabel {
  --bc: #64748B;
  padding: 1px 6px; border: 1px solid var(--bc); border-radius: 999px; background: rgba(255, 255, 255, .92);
  color: #0F1B2D; font: 700 10.5px/1.3 var(--font); white-space: nowrap;
}
.onlclu {
  --bc: #0C63E4;
  display: grid; place-content: center; justify-items: center; border: 3px solid #FFFFFF; border-radius: 50%;
  background: var(--bc); color: #FFFFFF; cursor: pointer; line-height: 1; font-family: var(--font);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bc) 28%, transparent), 0 4px 10px rgba(15, 27, 45, .22);
}
.onlclu b { font-size: 13px; font-weight: 800; }
.onlclu i { margin-top: 2px; font-size: 8.5px; font-style: normal; font-weight: 700; white-space: nowrap; opacity: .95; }
.lg-onl-near, .lg-onl-clu {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-right: 6px; padding: 0 4px;
  border-radius: 999px; background: #0C63E4; color: #FFFFFF; font-size: 9.5px; font-style: normal; font-weight: 800;
  vertical-align: -3px;
}
.lg-onl-clu { min-width: 18px; height: 18px; background: var(--chart-1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--chart-1) 30%, transparent); }
.lg-onl-approx {
  display: inline-block; width: 16px; height: 10px; margin-right: 6px; border: 2px dashed var(--ink-3);
  border-radius: 999px; vertical-align: -1px;
}
/* Qo'yilayotgan nuqta — tomchi belgi */
.onlpin { position: relative; width: 28px; height: 34px; }
.onlpin span {
  position: absolute; top: 0; left: 2px; width: 24px; height: 24px; border: 3px solid #FFFFFF;
  border-radius: 50% 50% 50% 0; background: #EF4444; transform: rotate(-45deg);
  box-shadow: 0 4px 10px rgba(15, 27, 45, .35);
}
.onl__banner {
  position: absolute; top: 12px; left: 50%; z-index: 500; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 14px; width: min(560px, calc(100% - 24px)); padding: 10px 14px; transform: translateX(-50%);
  border: 1px solid var(--blue-line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-card);
}
.onl__banner[hidden] { display: none; }
.onl__banner-text { display: grid; flex: 1 1 260px; gap: 2px; min-width: 0; }
.onl__banner-text b { color: var(--ink); font-size: var(--fs-body); }
.onl__banner-text small { color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.4; }
.onl__banner-acts { display: flex; gap: 6px; }

/* Buyurtma oynachasi (Leaflet popup — ilova mavzusida) */
.onlpop-wrap .leaflet-popup-content { margin: 12px 14px; }
.onlpop { display: grid; gap: 8px; color: var(--ink); font: 12.5px/1.4 var(--font); }
.onlpop header { display: grid; gap: 1px; }
.onlpop header b { font-size: 14px; }
.onlpop header small { color: var(--ink-3); font-size: 11.5px; }
.onlpop__addr { margin: 0; color: var(--ink-2); }
.onlpop__grid { display: grid; gap: 3px; }
.onlpop__grid div { display: flex; justify-content: space-between; gap: 12px; }
.onlpop__grid span { color: var(--ink-3); }
.onlpop__grid b { text-align: right; font-variant-numeric: tabular-nums; }
.onlpop__geo { margin: 0; color: var(--ink-3); font-size: 11px; }
.onlpop__acts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.onlpop__acts .btn { height: 28px; text-decoration: none; }

@media (max-width: 900px) {
  .onl { padding: var(--s3); }
  .onl__grid { grid-template-columns: minmax(0, 1fr); height: auto; }
  .onl__mapbox { order: -1; border-bottom: 1px solid var(--line); }
  .onl__canvas { height: 400px; flex: 0 0 auto; }
  .onl__side { border-right: 0; overflow: visible; }
  .onl__tools { width: 100%; }
  .onl__search { flex: 1 1 auto; width: auto; }
}