/* BIO LIFE — Boshqaruv paneli (dashboard.js) uchun uslublar.

   Ranglar, radius, oraliq va soyalar app.css dagi `:root` tokenlaridan
   olinadi — bu yerda YANGI palitra yaratilmaydi. Fayl faqat panel va
   uning ichki ekranlariga tegishli (KPI kartalar, foiz kartalari,
   bosiladigan xarita, kunlik hisobot, ko'rsatkich tafsiloti).

   Telefon (375 px) ham, ish stoli ham shu faylda hisobga olingan. */

/* ======================================================================
   0. Panel doirasidagi o'lcham tokenlari va yuklanish animatsiyasi
   ----------------------------------------------------------------------
   `.dash` — panel va uning ichki ekranlari (dashboard.js). Tokenlar FAQAT
   shu doirada qayta belgilanadi: app.css global qiymatlariga tegilmaydi.
   ====================================================================== */
.dash {
  /* Dizayn talabi: karta radiusi 14 px. Token SHU DOIRADA qayta
     belgilanadi — shunda paneldagi HAMMA karta (KPI, xarita, jadval)
     bir xil bo'ladi; app.css global qiymatiga tegilmaydi. */
  --r-card: 14px;
  --thead-h: 36px;          /* jadval sarlavhasi — ixcham */
  --trow-h: 40px;           /* qator balandligi (dizayn talabi) */
  --dash-t: 140ms;          /* barcha o'tishlar bir xil tezlikda */
  --dash-out: cubic-bezier(.22, .61, .36, 1);   /* ease-out */

  /* --- Matn pog'onasi (ma'no tashuvchi tipografika) ------------------
     Uchta daraja, uchtadan ortiq qalinlik YO'Q (400 / 600 / 700):
       1) SON        — eng yirik va eng qalin, `--ink`;
       2) YORLIQ     — mayda, katta harf, siyrak, `--dash-label`;
       3) IZOH       — yorliq bilan bir o'lchamda, lekin oddiy
                       qalinlikda va jimroq rangda (`--dash-faint`).
     Ranglar TOKENLARDAN hosil qilinadi (qat'iy HEX yo'q), shuning uchun
     mavzu (light/navy) almashganda o'zi moslashadi. Aralashtirish
     sababi: `--ink-2` mayda o'lchamda `--card-2` ustida 4,42:1 gacha
     tushadi — yorliq uchun bir qadam to'qroq rang kerak (o'lchandi). */
  --dash-label: color-mix(in srgb, var(--ink-2) 72%, var(--ink));
  --dash-faint: color-mix(in srgb, var(--ink-2) 93%, var(--ink));
  /* Mayda ko'k matn (havola, "Batafsil") — `--blue` o'zi oq ustida
     4,1:1 beradi, ya'ni 4,5:1 talabidan past. Mavzu faylida
     `--blue-ink` paydo bo'lsa o'sha ishlatiladi. */
  --dash-ink-blue: var(--blue-ink, color-mix(in srgb, var(--blue) 76%, var(--ink)));

  --dash-row-hover: var(--card-hover);
  --dash-lift: var(--shadow-hover);

  /* --- Oraliq pog'onasi (8 px shkalasi, istisnosiz) ------------------
     GURUHLAR orasida `--gap-block` (24), GURUH ichida `--gap-grid` (16).
     Tokenlar app.css dan keladi; ikkinchi qiymat — shu kabinetda hali
     integratsiya bo'lmagan holat uchun zaxira (bir xil piksel). */
  gap: var(--gap-block, var(--s6));
}
/* Guruh ichi: kartalar va qatorlar orasi */
.dash .grid { gap: var(--gap-grid, var(--s4)); }
.dash-nums { display: grid; gap: var(--gap-grid, var(--s4)); }
.dash-sec { display: grid; gap: var(--gap-grid, var(--s4)); min-width: 0; }

/* ======================================================================
   0b. Yuklanish animatsiyasi (kartalar ketma-ket chiqadi)
   ====================================================================== */
@keyframes dash-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dash-bar {
  from { max-width: 0; }
  to   { max-width: 100%; }
}

.dash-in { animation: dash-rise .34s var(--ease) both; }

/* ======================================================================
   1. KPI va foiz kartalari — MAHSULOTDAGI YAGONA KARTA (`.kpi`)
   ----------------------------------------------------------------------
   Panelning o'z kartasi (`.dash-kpi`) va foiz kartasi (`.dash-gauge`)
   BUTUNLAY olib tashlandi. Sabab: bitta ekranda karta anatomiyasi uch
   marta qayta ixtiro qilingan edi — chap chetdagi rangli chiziq, boshqa
   joydagi son, boshqa strelka. Endi panel ham, kunlik hisobot ham,
   foiz kartalari ham `common.js` dagi `BL.statCard` dan chiqadi va
   uning uslubi `app.css` da BIR MARTA yozilgan.

   Bu yerda faqat panelga xos ikki qo'shimcha qoladi:
     `.kpi__unit`  — sonning yonidagi o'lchov birligi;
     `.kpi__meter` — foiz kartasi ostidagi chiziqli indikator.
   Ikkalasi ham `.dash` doirasida — boshqa ekranlarga tegmaydi.
   ====================================================================== */

/* Ohang endi CHAP CHETDAGI RANGLI SLAB bilan emas, ikonka chipi bilan
   beriladi (`BL.statCard` uni o'zi bo'yaydi). Shuning uchun panelda
   karta ohangi bo'yicha qo'shimcha fon/chegara YOZILMAYDI — faqat
   "yoqilgan" holat ko'k qoladi (app.css `.kpi--on`). */

/* Yuqoridagi to'rtlik — sahifaning ASOSIY raqamlari: bir qadam
   yirikroq son va sal balandroq karta. Boshqa hech narsa farq
   qilmaydi (bir xil ikonka chipi, yorliq, izoh, strelka). */
.dash-row--lead { --fs-kpi: 30px; }

/* O'lchov birligi — sonning o'zi emas: ikki barobar kichik, oddiy
   qalinlikda va bir qadam jimroq rangda (o'lchangan: 4,76:1). */
.dash .kpi__unit {
  margin-left: 4px;
  font-size: 13px; font-weight: 400; color: var(--dash-faint);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.dash-row--lead .kpi__unit { font-size: 14px; }

/* Chiziqli indikator — kartaning to'liq enida, eng ostida.
   `1 / -1` ATAYLAB: `.kpi` gridida nechta ustun bo'lishidan qat'i
   nazar chiziq butun kenglikni egallaydi. */
.dash .kpi__meter {
  grid-column: 1 / -1;
  display: block; height: 6px; margin-top: 12px;
  border-radius: var(--r-pill);
  background: var(--track); overflow: hidden;
}
.dash .kpi__meter-fill {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: var(--kpi-tone, var(--blue));
  animation: dash-bar .7s var(--ease) both;
}

/* ======================================================================
   2. Bo'lim sarlavhasi — KARTA EMAS, ingichka chiziq va jim yozuv
   ----------------------------------------------------------------------
   Panel uch bosqichda o'qiladi: raqamlar → jonli manzara → tafsilot.
   Guruhlash uchun yangi "quti" ochilmaydi: sarlavha + hairline yetarli.
   ====================================================================== */
.dash-band {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.dash-band__title {
  margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dash-label);
}
.dash-band__note {
  font-size: var(--fs-meta); font-weight: 400; color: var(--dash-faint);
}

/* ======================================================================
   3. Xarita kartasi — BUTUNI bosiladigan (to'liq ekranli Live GPS)
   ====================================================================== */
.dash-map { display: flex; flex-direction: column; overflow: hidden; }
.dash-map--click { cursor: pointer; }
.dash-map--click:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.dash-map { transition: transform .16s var(--ease), box-shadow .16s var(--ease),
                        border-color .16s var(--ease); }
.dash-map:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.dash-map__wrap { position: relative; margin-top: var(--pad-card, var(--s4)); }
/* Xarita va yonidagi grafik BIR XIL ichki oraliqda: ikkalasining ham
   sarlavhasi `.card__head` (16/20/0), tanasi esa shu yerdan 16 px
   pastda boshlanadi. Avval biri 8, ikkinchisi 0 px edi. */
.dash-map__canvas { height: 340px; padding: 0; }

/* Shaffof qatlam: xarita ichida "o'ynash" o'rniga butun blok bitta tugma.
   Ichida O'Z tugmachasi YO'Q — u karta sarlavhasidagi ishorani (dash-open)
   ikkinchi marta takrorlardi. Parda faqat "bu joy bosiladi" deb turadi. */
.dash-map__veil {
  position: absolute; inset: 0; z-index: 900;
  cursor: pointer;
  /* Pardaning to'qligi `--overlay` tokenidan hosil qilinadi: mavzu
     almashganda u bilan birga o'zgaradi (qat'iy rang yozilmaydi). */
  background: transparent;
  transition: background .18s var(--ease);
}
.dash-map--click:hover .dash-map__veil,
.dash-map--click:focus-visible .dash-map__veil {
  background: color-mix(in srgb, var(--overlay) 14%, transparent);
}

/* Karta sarlavhasidagi yagona ishora ("To'liq ekranda ochish") — karta
   ustiga kelganda ko'k to'ladi, ya'ni butun karta bosilishini aytadi */
.dash-open {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--blue-soft); color: var(--dash-ink-blue);
  font-size: var(--fs-meta); font-weight: 600; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.dash-open svg { width: 14px; height: 14px; }
.dash-map--click:hover .dash-open,
.dash-map--click:focus-visible .dash-open {
  background: var(--blue); color: var(--on-accent);
}

/* ======================================================================
   4. Kunlik yetkazib berish kartasi (panelda)
   ====================================================================== */
.dash-delivery { display: flex; flex-direction: column; }
.dash-delivery__head {
  cursor: pointer;
  padding-bottom: var(--s3);
  border-radius: var(--r-card) var(--r-card) 0 0;
  transition: background .16s var(--ease);
}
.dash-delivery__head:hover { background: var(--card-hover); }
.dash-delivery__head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.dash-delivery__head .card__actions { align-items: center; flex-wrap: wrap; }

/* Sarlavhaning o'zi "ochiladi" degan ishorani beradi (o'ng tomonga
   suriladigan shevron) — alohida chip qator egallamaydi */
.dash-title-link { display: inline-flex; align-items: center; gap: 6px; }
.dash-title-link__go {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
  transition: transform .16s var(--ease), background .16s var(--ease),
              color .16s var(--ease);
}
.dash-delivery__head:hover .dash-title-link__go,
.dash-delivery__head:focus-visible .dash-title-link__go {
  background: var(--blue); color: var(--on-accent); transform: translateX(2px);
}

/* Grafik tanasi xarita bilan BIR XIL oraliqda boshlanadi (16 px) */
.dash-chart { padding-top: var(--pad-card, var(--s4)); }

.dash-delivery__foot {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s5) var(--s4);
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.dash-delivery__tip { font-size: var(--fs-meta); font-weight: 400; color: var(--dash-faint); }
.dash-delivery__foot .btn { margin-left: auto; }

/* ======================================================================
   5. Ichki ekranlar: sana boshqaruvi, jadval katakchalari
   ====================================================================== */
.dash-daynav {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 3px; border: 1px solid var(--line); border-radius: var(--r-input);
  background: var(--card);
}
.dash-daynav .input { min-width: 150px; border: 0; background: transparent; }
.dash-daynav .icon-btn { width: 32px; height: 32px; }

.dash-cell-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-time { font-variant-numeric: tabular-nums; font-size: var(--fs-table); }
/* Kechikish — rang YOLG'IZ ma'no tashimaydi: qalinlik ham oshadi */
.dash-late { color: var(--red); font-weight: 600; }

.dash-note-inline { font-size: var(--fs-meta); color: var(--dash-faint); }
.dash-counts {
  font-size: var(--fs-meta); color: var(--dash-faint); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Tanlangan kesim chipi — nomi bilan turadi, × bosilsa bekor bo'ladi */
.dash-chip-clear {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: var(--s2); padding: 4px 8px 4px 12px; min-height: 26px;
  border: 1px solid var(--blue); border-radius: var(--r-pill);
  background: var(--blue-soft); color: var(--dash-ink-blue);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background 140ms var(--dash-out, ease-out),
              color 140ms var(--dash-out, ease-out);
}
.dash-chip-clear b { font-weight: 600; }
.dash-chip-clear__x {
  display: grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; font-size: 13px; line-height: 1;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}
.dash-chip-clear:hover { background: var(--blue); color: var(--on-accent); }
.dash-chip-clear:hover .dash-chip-clear__x {
  background: color-mix(in srgb, var(--on-accent) 28%, transparent);
}
.dash-chip-clear:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Diagramma ostidagi bir qatorli izoh ("bo'lakni bosing…") */
.dash-hint-row {
  display: flex; align-items: center; gap: 6px;
  padding: 0 var(--s5) var(--s4);
  font-size: 12px; font-weight: 400; color: var(--dash-faint); line-height: 1.35;
}
.dash-hint-row svg { flex: 0 0 auto; color: var(--dash-faint); }

/* Jadval ichidagi havola-tugma (haydovchi kartochkasiga o'tish) */
.link-btn {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--blue-ink, color-mix(in srgb, var(--blue) 76%, var(--ink)));
  font: inherit; font-weight: 600; text-align: left;
  border-bottom: 1px dashed color-mix(in srgb, var(--blue) 50%, transparent);
}
.link-btn:hover { border-bottom-style: solid; }
.link-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ======================================================================
   6. Ko'rsatkich tafsiloti — formula kartasi
   ====================================================================== */
.dash-formula { padding: var(--s5); display: grid; gap: var(--s4); }

.dash-formula__main {
  display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  gap: var(--s5); align-items: center;
}

/* Katta foiz — o'z QUTISISIZ: ohang faqat raqam rangida.
   Avval yumshoq rangli to'rtburchak ichida turardi, ya'ni karta ichida
   yana bitta karta ko'rinardi. */
.dash-formula__value {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px;
  color: var(--dash-tone, var(--blue));
}
/* Ohang siyohi — mayda matn ham yumshoq fon ustida 4,5:1 dan past
   tushmasligi uchun brend rangi `--ink` bilan aralashtiriladi (nisbatlar
   o'lchab tanlangan). Mavzu almashganda `--ink` bilan birga moslashadi. */
.dash-formula__value--ok {
  --dash-tone: color-mix(in srgb, var(--green) 55%, var(--ink));
  --dash-soft: var(--green-soft);
}
.dash-formula__value--warn {
  --dash-tone: color-mix(in srgb, var(--amber) 52%, var(--ink));
  --dash-soft: var(--amber-soft);
}
.dash-formula__value--crit {
  --dash-tone: color-mix(in srgb, var(--red) 62%, var(--ink));
  --dash-soft: var(--red-soft);
}
.dash-formula__value--info {
  --dash-tone: var(--blue-ink, color-mix(in srgb, var(--blue) 76%, var(--ink)));
  --dash-soft: var(--blue-soft);
}
/* Ekran SHU SON uchun ochilgan — sahifadagi eng yirik element */
.dash-formula__value b {
  font-size: 42px; font-weight: 700; letter-spacing: -1px; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.dash-formula__value small { font-size: 20px; font-weight: 600; }
.dash-formula__caption {
  flex: 1 0 100%; margin-top: 6px;
  font-size: var(--fs-meta); font-weight: 600; color: inherit;
}

.dash-formula__parts {
  display: flex; align-items: stretch; gap: var(--s3); flex-wrap: wrap;
}
/* Surat va maxraj — CHEGARASIZ, bir qadam quyi yuza (karta ichida
   chegarali karta bo'lmaydi) */
.dash-formula__part {
  flex: 1 1 200px; min-width: 0;
  padding: var(--s3) var(--s4);
  border: 0; border-radius: var(--r-input);
  background: var(--card-2);
  display: flex; flex-direction: column; gap: 3px;
}
.dash-formula__part b {
  font-size: 21px; font-weight: 700; letter-spacing: -.3px; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.dash-formula__part span {
  font-size: var(--fs-meta); font-weight: 400; color: var(--dash-faint);
  line-height: 1.4;
}
/* Ohang — chap chetdagi slab emas, izoh oldidagi kichik nuqta */
.dash-formula__part span::before {
  content: ""; display: inline-block; vertical-align: 1px;
  width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
  background: var(--dash-part, var(--blue));
}
.dash-formula__part--num { --dash-part: var(--green); }
.dash-formula__part--den { --dash-part: var(--blue); }
.dash-formula__op {
  align-self: center; font-size: 20px; font-weight: 700; color: var(--ink-3);
}

.dash-formula__bar { display: grid; gap: 7px; }
.dash-formula__bar .bar { display: block; height: 10px; }
.dash-formula__bar .bar__fill { display: block; animation: dash-bar .8s var(--ease) both; }
.dash-formula__rule { font-size: var(--fs-meta); font-weight: 400; color: var(--dash-faint); }

.dash-formula__meta {
  display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap;
  padding-top: var(--s3); border-top: 1px solid var(--line);
}
.dash-formula__period {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-meta); font-weight: 600; color: var(--dash-label);
  white-space: nowrap;
}
.dash-formula__note {
  flex: 1 1 260px; font-size: var(--fs-meta); font-weight: 400;
  color: var(--dash-faint); line-height: 1.45;
}

/* ======================================================================
   6b. Grafik va jadval sayqali (FAQAT panel doirasida — `.dash`)
   ----------------------------------------------------------------------
   To'r chiziqlari jimroq, o'q yozuvlari va afsonadagi raqamlar tabular,
   ustun/bo'lak ustiga kelganda "bosiladi" degan ishora beriladi.
   ====================================================================== */
/* Ustun ustiga kelganda TINCH ishora: soya emas, ingichka halqa.
   Avvalgi `drop-shadow` grafikni "ko'tarib" yuborardi — kartadagi eng
   baland element ustun bo'lib qolardi. */
.dash .chart-bar {
  cursor: pointer;
  transition: opacity 140ms var(--dash-out, ease-out);
}
.dash .chart-bar:hover { opacity: .82; }
.dash .chart-dot { cursor: pointer; transition: r 140ms var(--dash-out, ease-out); }

/* Diagramma: bo'lak va ro'yxat qatori bitta tugma kabi ishlaydi */
.dash .donut__arc {
  cursor: pointer;
  transition: opacity 140ms var(--dash-out, ease-out);
}
.dash .donut__arc:hover { opacity: .84; }
.dash .donut-row {
  border-radius: var(--r-input);
  transition: background 140ms var(--dash-out, ease-out);
}
.dash .donut-row:hover, .dash .donut-row:focus-visible {
  background: var(--dash-row-hover);
}
.dash .donut-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Jadval: sarlavha — YORLIQ (mayda, katta harf, jim), katak matni oddiy
   qalinlikda, raqamlar esa tabular va to'q — ko'z ustundagi songa
   birinchi tushadi. */
.dash .table thead th {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dash-label);
}
.dash .table tbody td {
  padding-top: 6px; padding-bottom: 6px;
  font-weight: 400; color: var(--dash-faint);
}
.dash .table tbody td b,
.dash .table tbody td .strong { font-weight: 600; color: var(--ink); }
.dash .table tbody tr:hover td { background: var(--dash-row-hover); }
.dash .table td.num, .dash .table th.num {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.dash .table tbody td.num { font-weight: 600; color: var(--ink); }
.dash .table tbody tr.clickable:focus-visible {
  outline: 2px solid var(--blue); outline-offset: -2px;
}

/* ======================================================================
   6b. "Birinchi kun" yo'riqnomasi — bazada hali hech narsa yo'q
   ----------------------------------------------------------------------
   Tizim topshirilgan kuni panel bir bet nol raqamga aylanadi. Shu karta
   nega bo'shligini va nimadan boshlashni aytadi. Ranglar app.css
   tokenlaridan — yangi palitra yo'q.
   ====================================================================== */
.dash-start {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, var(--blue-soft) 0%, var(--card) 78%);
}
.dash-start__body-wrap { display: grid; gap: var(--s5); }
.dash-start__head { display: flex; align-items: flex-start; gap: var(--s4); }
.dash-start__icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--blue); color: var(--on-accent);
}
.dash-start__icon svg { width: 20px; height: 20px; }
.dash-start__title {
  margin: 0 0 4px; font-size: 17px; font-weight: 700; line-height: 1.3;
  color: var(--ink);
}
.dash-start__sub {
  margin: 0; max-width: 78ch;
  font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2);
}
.dash-start__steps {
  display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none;
  counter-reset: none;
}
.dash-start__step {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4); border: 1px solid var(--line); border-radius: 12px;
  background: var(--card);
}
.dash-start__num {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-soft); color: var(--dash-ink-blue);
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dash-start__body { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.dash-start__body b { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.dash-start__body span {
  font-size: var(--fs-meta); font-weight: 400; line-height: 1.45;
  color: var(--dash-faint);
}
.dash-start__step .btn { flex: 0 0 auto; white-space: nowrap; }

/* ======================================================================
   7. Telefon va planshet
   ====================================================================== */
@media (max-width: 1150px) {
  .dash-map__canvas { height: 300px; }
}

@media (max-width: 900px) {
  .dash-formula__main { grid-template-columns: 1fr; gap: var(--s4); }
  .dash-formula__value { padding: var(--s3) var(--s4); }
  .dash-formula__value b { font-size: 36px; }
}

@media (max-width: 720px) {
  /* Telefonda asosiy qator ham oddiy KPI qatoriga tenglashadi */
  .dash-row--lead { --fs-kpi: 26px; --kpi-min-h: 100px; }
  .dash .kpi__unit, .dash-row--lead .kpi__unit { font-size: 12.5px; }
  .dash-map__canvas { height: 240px; }
  /* Tor ekranda sarlavha uch qatorga bo'linib ketmasin: davr tugmalari
     o'z qatoriga tushadi */
  .dash-delivery__head { padding-bottom: var(--s2); flex-wrap: wrap; }
  .dash-delivery__head > div:first-child { flex: 1 1 100%; }
  .dash-delivery__head .card__actions {
    width: 100%; margin-left: 0; justify-content: flex-start;
  }
  .dash-delivery__head .btn-group { width: 100%; }
  /* Barmoq uchun: telefonda tegish maydoni 40 px dan kichik bo'lmasin */
  .dash-delivery__head .btn-group .btn { flex: 1 1 0; min-height: 40px; }
  .dash-delivery__foot { padding: var(--s3) var(--s4); }
  .dash-delivery__foot .btn { margin-left: 0; width: 100%; justify-content: center; }
  .dash-daynav { width: 100%; }
  .dash-daynav .input { flex: 1 1 auto; min-width: 0; }
  .dash-formula { padding: var(--s4); }
  .dash-formula__op { display: none; }     /* ustma-ust turganda ÷ chalg'itadi */
  .dash-formula__part { flex: 1 1 100%; }
  /* "Birinchi kun" qadamlari: telefonda FAQAT tugma o'z qatoriga tushadi,
     tartib raqami esa sarlavha yonida qoladi */
  .dash-start__step { flex-wrap: wrap; align-items: flex-start; }
  .dash-start__body { flex: 1 1 60%; min-width: 150px; }
  .dash-start__step .btn { flex: 1 1 100%; justify-content: center; min-height: 40px; }
}

@media (max-width: 420px) {
  .dash-row--lead, .dash-row--sub { --fs-kpi: 23px; --kpi-min-h: 92px; }
  /* Izoh — sonning TA'RIFI. Telefonda karta tor, matn esa kesilmasligi
     kerak (yarim jumla rahbarga raqamni noto'g'ri tushuntiradi) */
  .dash .kpi__hint { display: block; overflow: visible; }
  .dash .kpi__meter { margin-top: 10px; }
  .dash-formula__value b { font-size: 32px; }
  /* Tegish maydoni 40 px dan kichik bo'lmasin */
  .dash-chip-clear { min-height: 32px; }
  .dash .donut-row { min-height: 40px; }
  .dash-hint-row { padding: 0 var(--s4) var(--s3); }
}

/* Harakatni kamaytirish rejimi — app.css global qoidasiga qo'shimcha:
   kartalar darhol ko'rinadi (animatsiya "yo'q" bo'lib qolmasin) */
@media (prefers-reduced-motion: reduce) {
  .dash-in { animation: none; opacity: 1; transform: none; }
  .dash .kpi__meter-fill, .dash-formula__bar .bar__fill {
    animation: none; max-width: 100%;
  }
  .dash-chip-clear,
  .dash .chart-bar, .dash .chart-dot, .dash .donut__arc, .dash .donut-row {
    transition: none;
  }
  .dash-map--click:hover { transform: none; }
}

/* Grafik ostidagi yig'iladigan "jadval ko'rinishi" (charts.js) telefonda
   ochilganda sahifani yon tomonga cho'zib yubormasin — o'z ichida aylanadi */
.dash .chart-alt { max-width: 100%; }
.dash .chart-alt .items-table { display: block; overflow-x: auto; white-space: nowrap; }

/* ======================================================================
   8. GRAFIK TIPOGRAFIKASI VA RANGI — BARCHA EKRAN UCHUN BIR XIL
   ----------------------------------------------------------------------
   `charts.js` butun tizimda ishlatiladi, shuning uchun uning o'q yozuvi,
   to'ri, afsonasi va izohi SHU YERDA bir marta belgilanadi: panel,
   hisobot, avtopark va buyurtma ekranlarida bir xil o'qiladi.
   Qoidalar:
     · o'q yozuvi — JIM (oddiy qalinlik, ikkinchi darajali rang);
     · to'r chizig'i — matndan ham jimroq, faqat ko'zni yo'naltiradi;
     · afsona — SARLAVHA emas, IZOH (mayda, oddiy qalinlikda);
     · raqam ko'ringan har joyda tabular.
   Ranglar faqat tokenlardan — mavzu almashsa grafik ham o'zgaradi.
   Bu blok app.css dan KEYIN yuklanadi, shuning uchun ustun turadi.
   ====================================================================== */
/* Ekranda uchtadan ortiq qalinlik bo'lmasligi uchun (400 / 600 / 700)
   karta va bo'sh holat sarlavhalari 600 da turadi: `--fw-card: 650`
   to'rtinchi, ko'zga ilinmaydigan qalinlik hosil qilardi. O'lcham
   (`--fs-card`) va rang o'zgarmaydi — sarlavha baribir yorliq va
   izohdan ustun turadi. */
.card__title, .state__title { font-weight: 600; }

.chart .chart-tick {
  font-size: 11px; font-weight: 400; fill: var(--ink-2);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  letter-spacing: .01em;
}
/* To'r — ko'zni yo'naltiradi, lekin o'zi ko'rinmaydi. Nol chizig'i esa
   boshqalardan bir qadam to'qroq: ustunlar aynan shunga o'tiradi. */
.chart .grid-line {
  stroke: color-mix(in srgb, var(--ink-3) 17%, transparent); stroke-width: 1;
}
.chart .axis-line { stroke: var(--line); stroke-width: 1; }
.chart .chart-dot { stroke: var(--card); }

/* Afsona — SARLAVHA emas, IZOH: mayda, oddiy qalinlikda, jim rangda va
   grafik bilan bir chetdan boshlanadi (markazga tekislangan afsona
   sarlavhadek ko'rinardi) */
.chart-legend {
  font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2);
  letter-spacing: .01em;
  justify-content: flex-start; gap: var(--s4);
}
.chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }

/* Diagramma markazidagi son — kartadagi eng yirik element, uning ostidagi
   yorliq esa mayda va katta harfli (tipografiya pog'onasi bir xil) */
.donut__value {
  font-size: 22px; font-weight: 700; fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.donut__label {
  font-size: 11px; font-weight: 600; fill: var(--ink-2);
  text-transform: uppercase; letter-spacing: .06em;
}
.donut-row__label { font-weight: 400; color: var(--ink); }
.donut-row__value {
  font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}
.donut-row__pct {
  font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums;
}

/* Sichqoncha ostidagi izoh (charts.js `tipHtml`): sarlavha — kesim nomi,
   ostida "yorliq — son", son eng qalin. Rang yolg'iz ma'no tashimaydi:
   seriya rangi nuqta bilan, matn esa doim o'qiladigan rangda. */
.chart-tip { display: grid; gap: 3px; line-height: 1.35; }
.chart-tip__title {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2);
}
.chart-tip__row { display: flex; align-items: baseline; gap: 6px; }
.chart-tip__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  align-self: center;
}
.chart-tip__key { font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2); }
.chart-tip__val {
  margin-left: auto; padding-left: 10px;
  font-size: var(--fs-body); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}