/* BIO LIFE Logistika — dizayn tizimi
   TZ §12 UI UX va vizual dizayn talablari: korporativ «Executive Dark».
   Bu fayldagi HAR BIR qiymat TZ jadvallaridan olingan — o'zgartirilmasin. */

/* Inter — TZ §Tipografika: "Inter yoki lokal ekvivalent".
   Shrift loyiha ichida saqlanadi (tashqi CDN'ga bog'liqlik yo'q). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/vendor/fonts/inter-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/vendor/fonts/inter-var-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ======================================================================
   1. TOKENLAR — IKKI MAVZU: `light` (yorug') va `navy` (to'q ko'k)

   Butun ilovadagi YAGONA rang manbasi — shu bo'lim. Boshqa hech bir CSS
   yoki JS faylida rang to'g'ridan-to'g'ri yozilmaydi, faqat var(--token).
   Mavzu <html data-theme="light|navy"> atributi bilan tanlanadi: tanlov
   localStorage'da saqlanadi va BIRINCHI CHIZISHDAN OLDIN (templates/
   index.html ichidagi kichik skript) qo'yiladi — shuning uchun sahifa
   yangilanganda noto'g'ri rang "chaqnab" ketmaydi.

   Yangi rang kerak bo'lsa — shu yerga TOKEN qo'shiladi; boshqa faylda
   `[data-theme=...]` bo'yicha shoxlanmaydi.

   Nomlash qoidasi (har ohang uchun bir xil oila):
     --blue        aksent: chegara, ikonka, grafik chizig'i, fokus
     --blue-strong   TO'LDIRILGAN yuza — usti doim var(--on-accent) matn
     --blue-ink    yorug'/yumshoq fon USTIDAGI matn rangi (o'qiladi)
     --blue-soft   yumshoq (tonlangan) fon
     --blue-line   yumshoq fon uchun chegara
   ====================================================================== */

/* --- Mavzuga bog'liq BO'LMAGAN o'lchov, shrift va harakat ------------ */
:root {
  /* Tipografika */
  --font: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-page:   22px;   --fw-page:  600;  --lh-page: 1.25;
  --fs-card:   14px;   --fw-card:  650;
  --fs-body:   13px;
  --fs-table:  13px;
  --fs-meta:   11.5px;
  --fs-kpi:    26px;   /* KPI qiymati — katta ham, kichik ham emas */

  /* Radius — karta 14, maydon/tugma 10, tabletka 999 */
  --r-input:   10px;
  --r-card:    14px;
  --r-modal:   18px;
  --r-pill:    999px;

  /* Spacing — 4 px bazaviy grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* --- RITM: bir xil MUNOSABAT — bir xil oraliq -----------------------
     Avval bir xil munosabat uchun 16 / 18 / 20 / 24 px aralash
     ishlatilardi va sahifalar bir-biriga o'xshamasdi. Endi butun ilovada
     FAQAT shu uch qadam:
       --gap-block  sahifaning KATTA bo'laklari orasi (sarlavha → kontent,
                    KPI qatori → jadval, bo'lim → bo'lim)
       --gap-grid   bir qatordagi qo'shni kartalar orasi va ustun ichidagi
                    qo'shni bloklar orasi
       --gap-in     karta/blok ICHIDAGI elementlar orasi va ichki chekka
     4 va 8 px — faqat matn yonidagi ikonka kabi "bir qatorli" holatlar.
     ⚠️ Yangi qoidada 18/20 px yozilmaydi — shu tokenlardan biri olinadi. */
  --gap-block: 24px;
  --gap-grid:  16px;
  --gap-in:    16px;
  --pad-card:  16px;
  --pad-page:  24px;

  /* Maydon (input) ENGI — bitta joyda. Maketda "STIR" katagi 900 px
     kenglikda edi: forma tugallanmagandek ko'rinardi. Endi har bir
     boshqaruv MAZMUNIGA yarasha kenglik oladi (§7). */
  --field-w-xs: 120px;
  --field-w-sm: 200px;
  --field-w-md: 320px;
  --field-w-lg: 520px;

  /* Tuzilma */
  --sidebar-w: 224px;
  --topbar-h:  60px;
  --thead-h:   38px;
  --trow-h:    40px;
  --ctrl-h:    36px;   /* asboblar qatoridagi barcha boshqaruv elementi */

  --ease: cubic-bezier(.2, .7, .3, 1);
  --t:    140ms;       /* yagona harakat tezligi */

  /* O'chirilgan boshqaruv elementining xiraligi — BITTA joyda.
     Avval har xil edi (.35 / .45 / .5) va to'q mavzuda tugma butunlay
     o'qilmay qolardi (o'lchandi: 2.1:1). 0.6 da matn yorug'da 4.6:1,
     to'qda 5.5:1 — ko'rinadi, lekin baribir XIRA (ya'ni "bosilmaydi"
     degani darhol bilinadi). */
  --disabled-op: .6;
}

/* ======================================================================
   1a. YORUG' MAVZU (standart)

   Mijoz e'tirozi: oq ilova yonida MENYU to'q ko'k turardi — tugallanmagan
   ko'rinardi. Endi menyu ham yorug': oqqa yaqin yuza, to'q siyoh, sahifaga
   nisbatan HAQIQIY chegara; brend ko'k rangi esa faqat FAOL bandda va
   aksentlarda qoladi (fon sifatida emas).
   ====================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* --- Yuzalar --- */
  --bg:            #F5F9FE;   /* sahifa foni */
  --card:          #FFFFFF;   /* karta va kontent bloklari */
  --card-2:        #F1F6FD;   /* karta ichidagi ikkilamchi yuza, hover */
  --card-3:        #FAFCFF;   /* jadval sarlavhasi / asboblar qatori tini */
  --card-hover:    #F7FBFF;
  --row-hover:     #F4F9FF;   /* jadval/ro'yxat qatori hover */
  --field-bg:      #F4F8FE;   /* to'ldirilgan maydon (qidiruv) foni */
  --track:         #E7EEF7;   /* progress/timeline yo'lagi */
  --overlay:       rgba(9, 27, 53, .42);
  --topbar-bg:     rgba(255, 255, 255, .94);

  /* --- Chiziqlar --- */
  --line:          #E3EBF6;   /* karta va input chegarasi */
  --line-soft:     #EDF2F9;   /* qator ajratgich — eng ingichka */
  --line-strong:   #D2DFEF;   /* ta'kidlangan chegara */

  /* --- Matn --- */
  --ink:           #0F1B2D;   /* sarlavha va qiymat */
  --ink-2:         #57677E;   /* izoh va metadata */
  --ink-3:         #5D6C84;   /* uchinchi daraja: yorliq, xira izoh */
  --on-accent:     #FFFFFF;   /* to'ldirilgan aksent USTIDAGI matn */

  /* --- Brend ko'k --- */
  /* O'LCHANGAN qiymat: #1677FF (maketdagi ko'k) oq fonda atigi 4.10:1
     berardi — matn sifatida ishlatilgan har joyda (havola, "Batafsil",
     ikonka yonidagi yozuv) me'yordan past edi. Bir pog'ona chuqurroq
     ko'k: oq fonda 5.36:1, `--blue-soft` ustida 4.74:1, oq matn ostida
     5.36:1 — ya'ni HAR IKKI yo'nalishda o'tadi. Brend tusi o'zgarmadi. */
  --blue:          #0C63E4;   /* aksent: chegara, ikonka, grafik, matn */
  /* To'ldirilgan boshqaruv (ustida oq matn): tugma, faol tab, chip,
     sahifa raqami, xarita belgisi. Yorug' mavzuda `--blue` ning O'ZI
     allaqachon oq matn uchun yetarli chuqurlikda (5.36:1), shuning
     uchun qiymat bir xil; to'q mavzuda esa ular AJRALADI (aksent
     ochiqroq, to'ldirish to'qroq). */
  --blue-strong:   #0C63E4;
  --blue-ink:      #0B5CC0;   /* yorug' fon ustidagi ko'k matn */
  --blue-soft:     #E8F2FF;
  --blue-soft-2:   #D8E9FF;   /* yumshoq fonning hover holati */
  --blue-line:     #C7DDFB;
  --blue-pale:     #9CC4F5;   /* "kutilmoqda" segmenti */
  --blue-ring:     rgba(12, 99, 228, .20);
  --blue-strong-2:   #0A54C2;   /* to'ldirilgan ko'k tugmaning hover holati */
  --green-strong-2:  #126632;
  --amber-strong-2:  #96450A;
  --red-strong-2:    #B02F34;
  /* Ochiladigan ro'yxat strelkasi — data-URI ichidagi rang ham mavzuga ergashadi */
  --select-arrow:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C99B5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  /* --- Akva (brend belgisi) --- */
  --aqua:          #19C6D1;
  --aqua-2:        #1FD4DE;
  --aqua-soft:     #E0F7F9;
  --aqua-ink:      #0B7078;

  /* --- Ohanglar --- */
  --green:         #22C55E;   --green-strong: #177F3D;  --green-ink: #15803D;
  --green-soft:    #DCFCE7;   --green-line: #C7EBD3;
  --amber:         #F59E0B;   --amber-strong: #B45309;  --amber-ink: #B45309;
  --amber-soft:    #FEF3C7;   --amber-line: #F3DFA8;
  --red:           #EF4444;   --red-strong:   #C93B40;  --red-ink:   #C0272C;
  --red-soft:      #FEE2E2;   --red-line:   #F5CDCD;
  --muted:         #A9B6C9;   --muted-ink:  #55657C;
  --muted-soft:    #EEF2F8;

  /* Holat BLOKLARI uchun tin (`*-soft` dan ochiqroq: butun karta/qator
     shu fon bilan bo'yaladi, shuning uchun yumshoqroq bo'lishi kerak).
     Chegaralar mavjud `*-line` tokenlariga bog'langan — yagona manba. */
  --ok-tint:       #F2FCF6;   --ok-line:   var(--green-line);
  --warn-tint:     #FFFBF0;   --warn-line: var(--amber-line);
  --crit-tint:     #FFF6F6;   --crit-line: var(--red-line);

  /* --- Menyu (chap navigatsiya) --- */
  --sidebar:       #FFFFFF;   /* menyu yuzasi — YORUG' */
  --sidebar-2:     #FBFDFF;   /* gradient boshi */
  --sidebar-3:     #F3F8FE;   /* gradient oxiri */
  --sb-ink:        #0F1B2D;
  --sb-ink-2:      #56677E;
  --sb-item:       #EDF3FC;   /* hover foni */
  --sb-active:     #0C63E4;   /* faol band — to'ldirilgan ko'k */
  --sb-active-ink: #FFFFFF;
  --sb-line:       #E1EAF6;   /* sahifaga nisbatan haqiqiy chegara */
  --sb-badge:      #E7EDF7;   /* xira belgi foni */
  --sb-shadow:     0 6px 14px -8px rgba(12, 99, 228, .7);

  /* --- Xarita va grafik --- */
  --map-bg:        #E8EFF7;   /* Leaflet konteyneri (plitka yuklanmaguncha) */
  --track:         #7C3AED;   /* tanlangan mashinaning yurgan yo'li (xaritada) */
  --map-shell:     #E9F0F9;   /* to'liq ekranli xarita ekranining ramkasi */
  --tile-filter:   saturate(.82) brightness(1.02) contrast(.96);
  --grid-line:     rgba(15, 27, 45, .07);
  /* --- Xarita ustidagi chrome (plitkalar ustida suzuvchi elementlar) ---
     `--map-chip*`  — YORUG' tabletka: avtomobil raqami, qatlam tugmasi.
     `--map-pin*`   — ATAYLAB TO'Q yuza: ombor belgisi, tooltip. U ikkala
                      mavzuda ham to'q qoladi (ko'cha ham, sun'iy yo'ldosh
                      tasviri ham ostida bo'lishi mumkin — to'q tabletka
                      ikkalasida ham o'qiladi). */
  --map-chip:      #FFFFFF;
  --map-chip-ink:  var(--ink);
  --map-chip-ink-2: var(--ink-2);
  --map-chip-line: rgba(7, 27, 51, .10);
  --map-pin:       #0B2440;
  --map-pin-ink:   #EAF1FB;
  --map-pin-ink-2: #9FBBD8;
  /* Grafik seriyalari — BL.palette shu yerdan o'qiydi */
  --chart-1: #0C63E4;  --chart-2: #19C6D1;  --chart-3: #22C55E;
  --chart-4: #F59E0B;  --chart-5: #EF4444;  --chart-6: #7C5CFF;
  --chart-7: #0EA5E9;  --chart-8: #64748B;

  /* --- Mayda elementlar --- */
  --focus:         #0C63E4;
  --switch-track:  #CBD8E8;
  --switch-knob:   #FFFFFF;
  --scrollbar:     #C7D3E2;
  --scrollbar-hover: #AFBFD4;
  --skeleton-1:    #EAF0F7;
  --skeleton-2:    #F6F9FC;
  /* Brauzer manzil qatori / Telegram sarlavhasi (meta theme-color) */
  --browser-bar:   #FFFFFF;

  /* --- Soya: tinch holatda deyarli sezilmaydi, hover'da "ko'tariladi" --- */
  --shadow-card:  0 1px 2px rgba(16, 24, 40, .04);
  --shadow-hover: 0 10px 24px -14px rgba(16, 24, 40, .28);
  --shadow-pop:   0 14px 40px rgba(15, 27, 45, .16);

  /* --- Boshqa fayllardagi mahalliy o'zgaruvchilar (dashboard/reports) --- */
  --dash-label: #57677E;  --dash-faint: #627189;  --dash-row-hover: #F4F9FF;
  --rep-label:  #57677E;  --rep-faint:  #627189;  --rep-row-hover:  #F4F9FF;
}

/* ======================================================================
   1b. TO'Q KO'K MAVZU (`navy`)

   Qora emas, kulrang ham emas — ko'k tusli to'q shkala: mahsulot BIO LIFE
   bo'lib qolaveradi. Matn ATAYLAB sof oq EMAS (#E3EDF9): soatlab o'qishga
   qulay, ko'z charchatmaydi. Har bir yuza, chegara, matn va yumshoq fon
   shu yerda qayta e'lon qilingan — yorug' mavzudan hech narsa qolmaydi.
   ====================================================================== */
:root[data-theme="navy"] {
  color-scheme: dark;

  /* --- Yuzalar --- */
  --bg:            #0A1A2E;
  --card:          #102743;
  --card-2:        #17334F;
  --card-3:        #142E4A;
  --card-hover:    #17334F;
  --row-hover:     #17334F;
  --field-bg:      #0E2440;
  --track:         #1B3452;
  --overlay:       rgba(3, 10, 20, .62);
  --topbar-bg:     rgba(16, 39, 67, .94);

  /* --- Chiziqlar --- */
  --line:          #1F3B5C;
  --line-soft:     #19334F;
  --line-strong:   #2C4D74;

  /* --- Matn --- */
  --ink:           #E3EDF9;
  --ink-2:         #A3B8D2;
  --ink-3:         #8FA1BC;
  --on-accent:     #FFFFFF;

  /* --- Brend ko'k --- */
  --blue:          #4E9BFF;
  --blue-strong:     #1D6FE0;
  --blue-ink:      #8CC0FF;
  --blue-soft:     #14325A;
  --blue-soft-2:   #1B3F6C;
  --blue-line:     #2A5288;
  --blue-pale:     #4F7FB8;
  --blue-ring:     rgba(78, 155, 255, .32);
  --blue-strong-2:   #2A7FEE;
  --green-strong-2:  #1C9550;
  --amber-strong-2:  #CE6410;
  --red-strong-2:    #DB4C4E;
  --select-arrow:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238FA1BC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  /* --- Akva --- */
  --aqua:          #2BD3DE;
  --aqua-2:        #5FE3EA;
  --aqua-soft:     #0E3A42;
  --aqua-ink:      #63DDE7;

  /* --- Ohanglar --- */
  --green:         #35D272;   --green-strong: #177F3D;  --green-ink: #6EE79C;
  --green-soft:    #123A26;   --green-line: #235C3C;
  --amber:         #FBAE22;   --amber-strong: #B45309;  --amber-ink: #FFC65C;
  --amber-soft:    #3B2C0E;   --amber-line: #5C4516;
  --red:           #F5595A;   --red-strong:   #C93B40;  --red-ink:   #FF9192;
  --red-soft:      #3D1A1E;   --red-line:   #5E282C;
  --muted:         #6C819D;   --muted-ink:  #A3B8D2;
  --muted-soft:    #1B3350;

  --ok-tint:       #0F2E1F;   --ok-line:   var(--green-line);
  --warn-tint:     #2E2410;   --warn-line: var(--amber-line);
  --crit-tint:     #2F171A;   --crit-line: var(--red-line);

  /* --- Menyu --- */
  --sidebar:       #09192C;
  --sidebar-2:     #0C2440;
  --sidebar-3:     #06121F;
  --sb-ink:        #E3EDF9;
  --sb-ink-2:      #94ACC9;
  --sb-item:       rgba(255, 255, 255, .07);
  --sb-active:     #1D6FE0;
  --sb-active-ink: #FFFFFF;
  --sb-line:       #1B3554;
  --sb-badge:      rgba(255, 255, 255, .10);
  --sb-shadow:     0 8px 18px -8px rgba(29, 111, 224, .85);

  /* --- Xarita va grafik --- */
  --map-bg:        #0C2440;
  --track:         #A78BFA;
  --map-shell:     #071A2E;
  /* To'q mavzuda OSM plitkalari ag'dariladi: oq yo'l to'rlari sahifani
     ko'r qilib yubormasin (invert + hue-rotate — ko'k tus saqlanadi). */
  --tile-filter:   invert(1) hue-rotate(185deg) brightness(.92) contrast(.92) saturate(.72);
  --grid-line:     rgba(190, 215, 245, .12);
  --map-chip:      #142E4A;
  --map-chip-ink:  var(--ink);
  --map-chip-ink-2: var(--ink-2);
  --map-chip-line: rgba(255, 255, 255, .16);
  --map-pin:       #0B2440;
  --map-pin-ink:   #EAF1FB;
  --map-pin-ink-2: #9FBBD8;
  --chart-1: #4E9BFF;  --chart-2: #2BD3DE;  --chart-3: #35D272;
  --chart-4: #FBAE22;  --chart-5: #F5595A;  --chart-6: #A78BFF;
  --chart-7: #38BDF8;  --chart-8: #93A7C2;

  /* --- Mayda elementlar --- */
  --focus:         #6FB0FF;
  --switch-track:  #2C4D74;
  --switch-knob:   #DCE7F5;
  --scrollbar:     #2A4A70;
  --scrollbar-hover: #3A5E88;
  --skeleton-1:    #14304F;
  --skeleton-2:    #1D3E63;
  --browser-bar:   #0A1A2E;

  /* To'q fonda yumshoq soya ko'rinmaydi — chuqurroq va qoraroq */
  --shadow-card:  0 1px 2px rgba(0, 0, 0, .34);
  --shadow-hover: 0 12px 28px -16px rgba(0, 0, 0, .8);
  --shadow-pop:   0 18px 48px rgba(0, 0, 0, .55);

  /* --- Boshqa fayllardagi mahalliy o'zgaruvchilar --- */
  --dash-label: #A3B8D2;  --dash-faint: #8FA1BC;  --dash-row-hover: #17334F;
  --rep-label:  #A3B8D2;  --rep-faint:  #8FA1BC;  --rep-row-hover:  #17334F;
}

/* ======================================================================
   2. ASOS
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;          /* TZ: raqamlar tabular nums */
  font-feature-settings: "tnum" 1, "cv11" 1;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; }
p { margin: 0; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Aylantirgich ham mavzuga ergashadi. `color-scheme` (yuqorida, mavzu
   blokida) native boshqaruvlarni — tanlash ro'yxati, sana tanlagich,
   matn kursori — to'g'ri rejimga o'tkazadi; `scrollbar-color` esa
   Firefox uchun, `::-webkit-*` Chrome/Edge uchun. */
html { scrollbar-color: var(--scrollbar) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); background-clip: content-box; }

/* Fokus halqasi — klaviatura bilan yurishda doim ko'rinadi (TZ §Accessibility) */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* TUZATILDI: fokus sahifani g'alati surib yuborardi. Brauzer fokuslangan
   elementni ko'rinishga surganda uni yopishqoq topbar ORTIGA qo'yib,
   element ko'rinmay qolardi (o'lchandi: element tepasi 10px, topbar 68px).
   scroll-padding hujjat aylantirgichiga topbar bo'yi joy qoldiradi. */
html {
  scroll-padding-top: calc(var(--topbar-h) + 12px);
  scroll-padding-bottom: var(--s5);
}
/* `page.focus()` har marshrutda dasturiy chaqiriladi — bu halqa chizmasin
   (klaviaturadan "Asosiy kontentga o'tish" bilan kelinganda esa ko'rinadi) */
#page:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--blue-strong); color: var(--on-accent); padding: 10px 16px;
  border-radius: var(--r-input); font-weight: 600;
}
.skip-link:focus { top: var(--s4); text-decoration: none; }

/* ======================================================================
   3. KARKAS — sidebar 264px + topbar
   ====================================================================== */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, var(--sidebar-2) 0%, var(--sidebar) 45%, var(--sidebar-3) 100%);
  border-right: 1px solid var(--sb-line);
  color: var(--sb-ink);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 60;
}

/* Brend bloki — IXCHAM (avval topbar bo'yi, 34 px belgi va katta yozuv
   bilan menyuning eng baland bo'lagi edi; navigatsiya esa uning ostida
   yo'qolib ketardi). Endi u menyu bandlaridan atigi bir pog'ona
   kattaroq va ostida haqiqiy chegara bor. */
.brand {
  display: flex; align-items: center; gap: 10px;
  height: var(--topbar-h); padding: 0 14px; flex: 0 0 auto;
  border-bottom: 1px solid var(--sb-line);
}
.brand__mark {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  background: linear-gradient(150deg, var(--aqua-2), var(--blue));
  display: grid; place-items: center; color: var(--on-accent);
}
.brand__mark svg { width: 14px; height: 14px; }
.brand__name {
  font-size: 13.5px; font-weight: 750; letter-spacing: .2px; color: var(--sb-ink);
  line-height: 1.2;
}
.brand__sub {
  font-size: 8.5px; color: var(--sb-ink-2); letter-spacing: .9px;
  text-transform: uppercase; margin-top: 1px; line-height: 1.2;
}

/* min-height:0 — flex ustunida ro'yxat qisqara olishi uchun. */
.nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s3) 10px var(--s2); }
/* Bo'lim sarlavhasi — TINCH: mayda, xira, katta harfli. U navigatsiya
   bilan RAQOBATLASHMAYDI, faqat ro'yxatni bo'laklarga ajratadi. */
.nav__group + .nav__group { margin-top: var(--s3); }
.nav__label {
  display: block; padding: 0 10px var(--s1);
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--sb-ink-2); opacity: .7;
}
.nav__label:empty { display: none; }

.nav__item {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px; border-radius: var(--r-pill); margin-bottom: 2px;
  color: var(--sb-ink-2); font-weight: 500; font-size: var(--fs-body);
  cursor: pointer; border: 0; background: transparent; width: 100%;
  text-align: left; position: relative;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav__item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__item svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .8; }
.nav__item:hover { background: var(--sb-item); color: var(--sb-ink); }
/* Faol band — TO'LDIRILGAN tabletka. Yorqin "shu'la" (sb-shadow) olib
   tashlandi: u bandni menyudan ko'chib chiqqandek ko'rsatardi. */
.nav__item[aria-current="page"] {
  background: var(--sb-active); color: var(--sb-active-ink); font-weight: 600;
  box-shadow: none;
}
.nav__item[aria-current="page"] svg { opacity: 1; }
.nav__badge {
  margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--red-strong); color: var(--on-accent);
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
}
.nav__badge--muted { background: var(--sb-badge); color: var(--sb-ink-2); }

/* Menyu pasti. Bezak (suv tomchisi rasmi + shior) OLIB TASHLANDI —
   u ~150 px egallab, navigatsiya bilan raqobatlashardi. Qoladigani —
   FAQAT ish uchun kerak bo'lgani: aloqa uzilgani haqidagi ogohlantirish
   (hammasi joyida bo'lsa umuman ko'rinmaydi). */
.sidebar__foot { padding: 0 10px var(--s3); flex: 0 0 auto; }
/* Aloqa holati — faqat muammo bo'lganda ko'rinadi */
#conn-state {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 9px;
  background: var(--amber-soft); color: var(--amber-ink);
  font-size: 10.5px; font-weight: 600; line-height: 1.35;
}
#conn-state[data-ok="1"] { display: none; }

.main {
  flex: 1 1 auto; min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column;
}

/* --- Topbar ------------------------------------------------------------
   BITTA qator bo'lib o'qilishi kerak, to'rtta alohida "vidjet" emas.
   Shuning uchun: yagona bo'y (36 px) barcha boshqaruvda, ichki
   tugmalarda chegara yo'q (faqat hover'da yuza), o'ng tarafdagi
   guruh esa ingichka ajratgich bilan bir butun bo'lib turadi. */
.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s6);
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  min-width: 0;
}
/* Faqat qidiruv siqiladi — qolgan elementlar o'z o'lchamini saqlaydi,
   aks holda profil tugmasi topbardan tashqariga chiqib ketadi. */
.topbar > .menu, .topbar > .btn, .topbar > .icon-btn, .topbar > .clock,
.topbar__right > * {
  flex: 0 0 auto;
}

/* O'ng guruh: mavzu · soat | bildirishnoma · profil */
.topbar__right {
  margin-left: auto; display: flex; align-items: center; gap: var(--s2);
  flex: 0 0 auto; min-width: 0;
}
.topbar__div {
  width: 1px; height: 22px; background: var(--line); flex: 0 0 1px;
  margin: 0 var(--s1);
}
/* Topbar ichidagi ikonka tugmalari — "qator ichidagi" ko'rinish:
   tinch holatda chegara ham, yuza ham yo'q. */
.topbar .icon-btn {
  width: 36px; height: 36px; border-radius: 9px;
  background: transparent; border-color: transparent; box-shadow: none;
}
.topbar .icon-btn:hover { background: var(--card-2); border-color: transparent; color: var(--ink); }

/* Burger FAQAT tor ekranda. Avval `.burger` qoidasi `.icon-btn` dan
   OLDIN turgani uchun (ikkalasi ham bir xil ustunlikda) ish stolida ham
   ko'rinib qolardi — endi selektor kuchliroq. */
.icon-btn.burger { display: none; }

.search {
  position: relative; flex: 1 1 380px; max-width: 460px; min-width: 150px;
}
.search input {
  width: 100%; height: 36px; padding: 0 72px 0 36px;
  background: var(--field-bg); border: 1px solid transparent;
  border-radius: var(--r-input); color: var(--ink); font-size: var(--fs-table);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease),
              background .16s var(--ease);
}
.search input::placeholder { color: var(--ink-2); }
.search input:hover { border-color: var(--line); }
.search input:focus {
  outline: none; background: var(--card);
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring);
}
.search__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-3); pointer-events: none;
}
.search__kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; font-weight: 600; color: var(--ink-2);
  background: var(--muted-soft); border-radius: 6px; padding: 3px 7px;
  pointer-events: none; letter-spacing: .3px;
}

.search__results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop);
  max-height: 460px; overflow-y: auto; padding: var(--s2);
}
.search__group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink-2); padding: var(--s3) var(--s3) var(--s2);
}
.search__row {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: var(--s2) var(--s3); border-radius: 10px; border: 0;
  background: transparent; cursor: pointer; text-align: left;
}
.search__row:hover, .search__row:focus-visible { background: var(--card-2); }
.search__row b { font-size: 13px; font-weight: 600; }
.search__row span { font-size: var(--fs-meta); color: var(--ink-2); }

.topbar__spacer { flex: 1 1 auto; }

/* Soat — BIR QATOR. Avval ikki qatorli blok edi va topbardagi eng baland,
   eng ko'zga tashlanadigan element bo'lib qolardi. */
.clock {
  font-size: var(--fs-meta); color: var(--ink-2); font-weight: 500;
  display: flex; flex-direction: row; align-items: baseline; gap: 6px;
  line-height: 1.2; white-space: nowrap;
}
.clock b { color: var(--ink); font-weight: 650; font-size: 13.5px; letter-spacing: .2px; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
  position: relative; flex: 0 0 auto;
  transition: background .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--card-2); color: var(--ink); border-color: var(--line-strong); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn__dot {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: var(--r-pill); background: var(--red-strong);
  color: var(--on-accent); font-size: 10px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--topbar-bg);
  box-shadow: none;
}

/* Foydalanuvchi chipi: dumaloq avatar + ism (rol — menyu ichida).
   Topbardagi YAGONA chegarali element — "bu yerda profil" degan yakuniy
   nuqta; qolganlari qatorning o'zi bilan qo'shilib ketadi. */
.profile {
  display: flex; align-items: center; gap: var(--s2);
  height: 36px; padding: 0 12px 0 4px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--card); cursor: pointer;
}
.profile:hover { background: var(--card-2); border-color: var(--line-strong); }
.profile > svg { display: none; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  background: linear-gradient(140deg, var(--blue-strong), var(--blue));
  display: grid; place-items: center; color: var(--on-accent); font-weight: 700; font-size: 11px;
  letter-spacing: .3px;
}
.profile__meta { text-align: left; line-height: 1.2; min-width: 0; max-width: 150px; }
.profile__meta b { font-size: var(--fs-table); font-weight: 600; }
.profile__meta span { display: none; }
/* Uzun ism topbarni kengaytirib yubormasligi uchun kesiladi. */
.profile__meta b {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Sahifa maydoni --- */
.page { padding: var(--pad-page); flex: 1 1 auto; min-width: 0; }
/* Sahifadagi bloklar (KPI qatori, grafiklar, tablar, jadval) orasida bir
   xil oraliq — `--gap-block`. Qo'shni marginlar birlashadi (collapse),
   shuning uchun o'z marginiga ega bloklarda oraliq ikki baravar bo'lib
   ketmaydi. Xarita ekrani (to'liq maydon) bundan mustasno. */
.page:not(.page--map) > * + * { margin-top: var(--gap-block); }

.breadcrumb {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  font-size: var(--fs-meta); color: var(--ink-2); margin-bottom: var(--s3);
}
.breadcrumb__trail { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.breadcrumb button {
  background: 0; border: 0; color: var(--ink-2); cursor: pointer; padding: 0;
  font-size: var(--fs-meta);
  transition: color var(--t) var(--ease);
}
.breadcrumb button:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--ink); font-weight: 600; }
.breadcrumb__sep { color: var(--ink-3); opacity: .7; flex: 0 0 auto; }

/* Ichki sahifadagi "Orqaga" tugmasi — ko'zga tashlanadi, bosilganda va
   ustiga kelganda strelka siljiydi (TZ §Navigatsiya: har doim qaytish yo'li) */
.breadcrumb .back-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 5px 12px 5px 5px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink); cursor: pointer; text-decoration: none;
  box-shadow: none;
  animation: back-in .26s var(--ease) both;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              border-color .18s var(--ease), background .18s var(--ease);
}
.breadcrumb .back-btn:hover {
  background: var(--card-2); border-color: var(--blue);
  box-shadow: var(--shadow-hover);
  transform: translateX(-2px);
  text-decoration: none;
}
.breadcrumb .back-btn:active { transform: translateX(-2px) scale(.98); }
.breadcrumb .back-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.back-btn__icon {
  display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: 50%; background: var(--blue-soft); color: var(--blue-ink);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.back-btn__icon svg { width: 15px; height: 15px; }
.breadcrumb .back-btn:hover .back-btn__icon {
  transform: translateX(-3px); background: var(--blue-strong); color: var(--on-accent);
}
.back-btn__text { display: grid; line-height: 1.15; text-align: left; }
.back-btn__text b { font-size: var(--fs-table); font-weight: 600; }
.back-btn__text small { font-size: 11px; color: var(--ink-2); }
@keyframes back-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

.page__head {
  display: flex; align-items: flex-start; gap: var(--s4);
  flex-wrap: wrap; margin-bottom: var(--gap-block);
}
/* Sarlavha ustuni siqila olsin — uzun nom amal tugmalarini itarib
   yubormasligi uchun (min-width:0 bo'lmasa flex element qisqarmaydi) */
.page__headline { flex: 1 1 260px; min-width: 0; }
.page__title {
  font-size: var(--fs-page); font-weight: var(--fw-page); line-height: var(--lh-page);
  letter-spacing: -.2px; overflow-wrap: anywhere;
}
.page__sub { color: var(--ink-2); font-size: var(--fs-body); margin-top: var(--s1); }
.page__actions { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ======================================================================
   4. TUGMALAR — TZ §Komponent holatlari (default/hover/pressed/focus/loading/disabled)
   ====================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--ctrl-h); padding: 0 14px;
  border-radius: var(--r-input); border: 1px solid var(--line);
  background: var(--card); color: var(--ink);
  font-size: var(--fs-body); font-weight: 600; cursor: pointer;
  white-space: nowrap; position: relative;
  box-shadow: var(--shadow-card);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              color var(--t) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.btn:hover { background: var(--card-2); border-color: var(--line-strong); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: var(--disabled-op); cursor: not-allowed; transform: none;
}

/* Tugma ichidagi hisob belgisi (masalan "Filtr 2") */
.btn__count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--blue-strong); color: var(--on-accent); font-size: 10.5px; font-weight: 700;
  display: inline-grid; place-items: center;
}
/* Ikonka-menyular yonidagi matn — tor ekranda yashiriladi */
.btn__text { font-weight: 600; }

.btn--primary {
  background: var(--blue-strong); border-color: var(--blue-strong); color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px -10px rgba(22, 119, 255, .65);
}
.btn--primary:hover {
  background: var(--blue-strong-2); border-color: var(--blue-strong-2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 22px -12px rgba(22, 119, 255, .7);
}
.btn--danger { background: var(--red-strong); border-color: var(--red-strong); color: var(--on-accent); }
.btn--danger:hover { background: var(--red-strong-2); border-color: var(--red-strong-2); }
.btn--success { background: var(--green-strong); border-color: var(--green-strong); color: var(--on-accent); }
.btn--success:hover { background: var(--green-strong-2); border-color: var(--green-strong-2); }
.btn--ghost {
  background: transparent; border-color: transparent; color: var(--ink-2);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--card-2); color: var(--ink); border-color: transparent; }
.btn--sm { height: 30px; padding: 0 10px; font-size: var(--fs-meta); }
.btn--icon { width: var(--ctrl-h); padding: 0; }
.btn--block { width: 100%; }

.btn[data-loading="true"] { color: transparent !important; pointer-events: none; }
.btn[data-loading="true"]::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--on-accent); animation: spin .7s linear infinite;
}
.btn--ghost[data-loading="true"]::after, .btn:not(.btn--primary):not(.btn--danger)[data-loading="true"]::after {
  color: var(--ink);
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-group { display: inline-flex; border-radius: var(--r-input); overflow: hidden; border: 1px solid var(--line); }
.btn-group .btn { border: 0; border-radius: 0; height: 36px; background: var(--card); }
.btn-group .btn + .btn { border-left: 1px solid var(--line); }
.btn-group .btn[aria-pressed="true"] { background: var(--blue-soft); color: var(--ink); }

/* ======================================================================
   5. KARTALAR
   ====================================================================== */
/* IKKI DARAJA, bittasi emas (TZ 6-bosqich):
     · TINCH kontent — faqat `--line` chizig'i, SOYA YO'Q. Karta o'zini
       sahifadan chegara bilan ajratadi, "ko'tarilmaydi".
     · SUZUVCHI narsa (menyu, modal, toast, hover holati) — `--shadow-pop`
       yoki `--shadow-hover`.
   Avval HAMMA narsada bitta soya bor edi: "asosiy narsa" bilan "yordamchi
   tafsilot" farq qilmasdi. Ekranidagi ASOSIY blok kerak bo'lsa
   `.card--raised` oladi (bitta sahifada ko'pi bilan bitta). */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: none;
}
.card--raised { box-shadow: var(--shadow-card); }

/* ⚠️ KARTA ICHIDA KARTA CHIZILMAYDI. Ichkaridagisi chegarasiz bo'limga
   aylanadi (kerak bo'lsa — qo'shnisidan ingichka chiziq bilan ajraladi).
   Shu qoida butun ilovada "quti ichida quti" muammosini yopadi. */
.card .card, .card .card--raised {
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.card .card + .card { border-top: 1px solid var(--line-soft); }

.card__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--pad-card) var(--pad-card) 0;
}
.card__title { font-size: var(--fs-card); font-weight: var(--fw-card); }
.card__sub { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px; }
.card__actions { margin-left: auto; display: flex; gap: var(--s2); }
.card__body { padding: var(--pad-card); }
.card__head + .card__body { padding-top: var(--s3); }
.card__body--flush, .card__head + .card__body--flush { padding: 0; }

.grid { display: grid; gap: var(--gap-grid); }
.grid--kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--kpi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Karta soniga qarab ustun soni: 5 ta -> 5, 6 ta -> 3x2 (bir tekis to'ladi).
   FAQAT keng ekranda — aks holda `:has()` ning ustunligi responsive qoidalarni
   bosib ketib, tor oynada kartalar siqilib, matn ustma-ust tushib qolardi. */
@media (min-width: 1151px) {
  .grid--kpi:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid--kpi:has(> :nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--kpi:has(> :nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid--progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 55% / 45%. Yonma-yon grafik kartalari bir xil balandlikda turadi
   (pastki chegara tekis). Ro'yxat + qisqa karta juftligi uchun (masalan
   panelda "So'nggi buyurtmalar" + "Avtopark") .grid--top ishlatiladi —
   aks holda qisqa karta cho'zilib, ichi bo'sh qoladi. */
.grid--split { grid-template-columns: 55fr 45fr; }
.grid--top { align-items: start; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Yagona ustun. minmax(0,1fr) MUHIM: aks holda ichidagi keng jadval/grafik
   min-content kengligi ustunni cho'zib, kartani konteynerdan chiqarib
   yuboradi (1280px ekranda aynan shu yuz bergan edi). */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-grid); }
/* Sahifa darajasidagi ustun (bo'lim → bo'lim) — kattaroq nafas */
.stack--page { gap: var(--gap-block); }

/* ----------------------------------------------------------------------
   KPI karta (BL.statCard) — BUTUN MAHSULOTDA YAGONA yig'ma karta.

   Anatomiyasi HAMMA JOYDA bir xil va SHU tartibda:
       [ohang chipi]  YORLIQ
                      QIYMAT
                      bitta izoh qatori            (+ burchakda strelka)
   Ohangni FAQAT ikonka chipi (va "yoqilgan" holatda chegara) olib
   yuradi — kartaning chap chetidagi rangli slab (eski panel varianti)
   BEKOR QILINDI: u bir xil ma'lumotni ekranga qarab uch xil ko'rsatardi.

   Uch holat va uchalasi bir qarashda farq qiladi:
     1) oddiy karta   — tinch, tekis, soyasiz, kursor ham o'zgarmaydi;
     2) `.kpi--click` — bosiladi: qo'l kursori, hover'da KO'TARILADI
                        (suzuvchi soya), burchakda strelka chiqadi;
     3) `.kpi--on`    — filtr shu karta bo'yicha YOQILGAN: ko'k chegara,
                        ochiq ko'k fon, yorliq oldida nuqta.
   ---------------------------------------------------------------------- */
.kpi {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--pad-card);
  box-shadow: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s3); row-gap: 2px; align-content: start;
  /* Qatordagi kartalar bir xil balandlikda tursin (izoh bir yoki ikki
     qator bo'lishidan qat'i nazar) — yorliq va raqam bir chiziqda.
     Balandlik `--kpi-min-h` orqali beriladi: ekran o'z qatorini
     ixchamroq qilmoqchi bo'lsa, shu o'zgaruvchini QATOR (grid) ustida
     qayta e'lon qilsa bo'ladi — bu yerdagi qoidani bosishi shart emas. */
  min-height: var(--kpi-min-h, 104px);
  text-align: left; width: 100%; color: var(--ink); font: inherit;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease), transform var(--t) var(--ease);
}
/* Ohang — "yoqilgan" holat va strelka rangi uchun */
.kpi--info  { --kpi-tone: var(--blue);  --kpi-soft: var(--blue-soft); }
.kpi--ok    { --kpi-tone: var(--green); --kpi-soft: var(--green-soft); }
.kpi--warn  { --kpi-tone: var(--amber); --kpi-soft: var(--amber-soft); }
.kpi--crit  { --kpi-tone: var(--red);   --kpi-soft: var(--red-soft); }
.kpi--muted { --kpi-tone: var(--muted);  --kpi-soft: var(--muted-soft); }

/* --- bosiladigan karta --- */
.kpi--click { cursor: pointer; }
.kpi--click:hover {
  border-color: var(--line-strong); background: var(--card-hover);
  box-shadow: var(--shadow-hover); transform: translateY(-1px);
}
.kpi--click:active { transform: translateY(0); box-shadow: none; }
.kpi:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Karta ICHIDAGI KPI qatori — chegarasiz, yumshoq tinti bilan: "quti
   ichida quti" chizilmaydi, lekin ANATOMIYA (chip · yorliq · qiymat ·
   izoh) aynan o'sha bo'lib qoladi. Shu qoida tufayli `BL.statCard` ni
   sahifada ham, karta ichida ham bemalol ishlatish mumkin. */
.card .kpi { border-color: transparent; background: var(--card-2); }
.card .kpi--click:hover { border-color: var(--line-strong); }
.card .kpi--on { border-color: var(--blue); background: var(--blue-soft); }

/* --- yoqilgan (filtr qo'yilgan) karta ---
   Avval chegara + ichki halqa BIRGA chizilardi (ikki qavat chiziq).
   Endi bitta ko'k chegara va yumshoq fon — tinchroq, lekin baribir
   to'rtta karta orasidan darhol ajralib turadi. */
.kpi--on {
  background: var(--blue-soft); border-color: var(--blue);
  box-shadow: none;
}
.kpi--on:hover { background: var(--blue-soft-2); }
/* Yorliq oldidagi kichik nuqta — to'rtta karta orasidan darhol ko'rinadi */
.kpi--on .kpi__label::before {
  content: ""; display: inline-block; vertical-align: 1px;
  width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
  background: var(--blue);
}
.kpi--on .kpi__label { color: var(--blue-ink); }
/* Yoqilgan kartaning izohi ham ko'k tusga o'tadi: `--ink-3` yumshoq ko'k
   fonda 4.38:1 berardi, `--blue-ink` esa 5.62:1 — hamda "yoqilgan"
   holat butun karta bo'ylab bitta ohangda ko'rinadi. */
.kpi--on .kpi__hint { color: var(--blue-ink); }

/* `display: contents` — ikon va izoh kartaning o'z grid katakchalariga tushadi.
   `.kpi__top` karta TASHQARISIDA ham ishlatiladi (marshrut/texnik xizmat
   kartalari) — u yerda oddiy qator bo'lib qolsin. */
.kpi__top { display: flex; align-items: center; gap: 10px; }
.kpi > .kpi__top { display: contents; }
.kpi__icon {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px;
  display: grid; place-items: center;
  grid-column: 1; grid-row: 1 / span 3; align-self: center;
}
.kpi__icon svg { width: 17px; height: 17px; }
.kpi__label {
  grid-column: 2; grid-row: 1;
  font-size: 11px; color: var(--ink-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpi--click .kpi__label { padding-right: 22px; }   /* strelka uchun joy */
.kpi__value {
  grid-column: 2; grid-row: 2;
  font-size: var(--fs-kpi); font-weight: 700; line-height: 1.15; letter-spacing: -.4px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  /* Uzun son kartadan chiqib ketmasin, lekin qatorga ham bo'linmasin */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Juda tor kartada qiymat avtomatik kichrayadi */
@media (max-width: 1150px) {
  .grid--kpi, .grid--kpi-5 { --kpi-min-h: 98px; }
  .kpi { padding: var(--s3); column-gap: var(--s3); }
  .kpi__value { font-size: 22px; }
  .kpi__icon { width: 34px; height: 34px; flex: 0 0 34px; }
}
.kpi__foot {
  grid-column: 2; grid-row: 3;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--s1);
}
.kpi__hint {
  font-size: var(--fs-meta); color: var(--ink-3); font-weight: 400; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Ochiladi / yoqiladi" strelkasi — o'ng yuqori burchakda, hover va
   fokusda paydo bo'ladi (joyi doim band, shuning uchun sakramaydi) */
.kpi__go {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: var(--kpi-soft, var(--blue-soft)); color: var(--kpi-tone, var(--blue));
  opacity: 0; transform: translateX(-3px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
              background var(--t) var(--ease), color var(--t) var(--ease);
}
.kpi--click:hover .kpi__go,
.kpi--click:focus-visible .kpi__go { opacity: 1; transform: none; }
.kpi--on .kpi__go {
  opacity: 1; transform: none; background: var(--blue-strong); color: var(--on-accent);
}

.trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-meta); font-weight: 600; padding: 2px 7px;
  border-radius: var(--r-pill);
}
.trend svg { width: 12px; height: 12px; }
.trend--up   { background: var(--green-soft); color: var(--green-ink); }
.trend--down { background: var(--red-soft);   color: var(--red-ink); }
.trend--flat { background: var(--muted-soft); color: var(--muted-ink); }

/* Progress karta — foiz va chiziqli indikator */
.progress-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--pad-card);
  display: flex; flex-direction: column; gap: var(--s3);
}
.progress-card__top { display: flex; align-items: baseline; gap: var(--s3); }
.progress-card__label { font-size: var(--fs-table); color: var(--ink-2); font-weight: 500; }
.progress-card__value { margin-left: auto; font-size: 19px; font-weight: 700; }
.bar { height: 8px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.bar__fill { height: 100%; border-radius: var(--r-pill); transition: width .5s var(--ease); }
.bar__fill--ok { background: linear-gradient(90deg, var(--green-strong), var(--green)); }
.bar__fill--warn { background: linear-gradient(90deg, var(--amber-strong), var(--amber)); }
.bar__fill--crit { background: linear-gradient(90deg, var(--red-strong), var(--red)); }
.bar__fill--info { background: linear-gradient(90deg, var(--blue-strong), var(--blue)); }

/* ======================================================================
   6. STATUS — rang + matn + ikonka (TZ §Komponent holatlari)
   ====================================================================== */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px;                  /* maketdagi yumshoq belgi */
  border-radius: var(--r-pill);
  font-size: var(--fs-meta); font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.pill svg { width: 12px; height: 12px; flex: 0 0 12px; }
.pill--ok    { background: var(--green-soft); color: var(--green-ink); }
.pill--info  { background: var(--blue-soft);  color: var(--blue-ink); }
.pill--warn  { background: var(--amber-soft); color: var(--amber-ink); }
.pill--crit  { background: var(--red-soft);   color: var(--red-ink); }
.pill--muted { background: var(--muted-soft); color: var(--muted-ink); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; display: inline-block; }

/* ======================================================================
   7. FORMALAR — TZ §Komponent holatlari (input holatlari)
   ====================================================================== */
.form { display: grid; gap: var(--gap-block); }
.form-grid { display: grid; gap: var(--gap-in) var(--s6);
             grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--1 { grid-template-columns: 1fr; }
.field--wide { grid-column: 1 / -1; }

/* ----------------------------------------------------------------------
   FORMA BO'LIMI — o'zaro bog'liq maydonlarni CHEGARA bilan emas, mayda
   sarlavha va bo'sh joy bilan guruhlash. Avval har guruh alohida
   chegarali kartada edi va sahifa "qutilar to'plami"ga aylanardi.
   ---------------------------------------------------------------------- */
.form-section { display: grid; gap: var(--s3); min-width: 0; }
.form-section + .form-section {
  margin-top: var(--gap-block); padding-top: var(--gap-block);
  border-top: 1px solid var(--line-soft);
}
.form-section__head { display: flex; align-items: flex-start; gap: var(--s3); }
.form-section__title {
  font-size: var(--fs-card); font-weight: var(--fw-card); color: var(--ink);
  line-height: 1.3;
}
.form-section__sub {
  font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px;
  max-width: 76ch;
}
.form-section__aside { margin-left: auto; flex: 0 0 auto; }

/* Yig'iladigan bo'lim (masalan "Qo'shimcha ruxsat berish") — QUTI EMAS:
   sarlavha bosiladi, ochilganda kontent ostida paydo bo'ladi. */
.form-details > summary {
  cursor: pointer; list-style: none; display: grid; gap: 2px;
  padding: var(--s2) 0; min-width: 0;
}
.form-details > summary::-webkit-details-marker { display: none; }
.form-details > summary::after {
  content: "▾"; position: absolute; right: 0; color: var(--ink-3);
  transition: transform var(--t) var(--ease);
}
.form-details { position: relative; }
.form-details[open] > summary::after { transform: rotate(180deg); }
.form-details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-details > summary .form-section__title { color: var(--blue-ink); }
.form-details__body { padding-top: var(--s3); }
/* Faqat ko'rish uchun bo'lim — forma emasligi RANGSIZ, tinch ohangda
   bilinadi (chegarali quti ham, rangli fon ham kerak emas). */
.form-section--read .field > label { color: var(--ink-3); }

.field { display: grid; gap: 6px; min-width: 0; }
.field > label {           /* TZ: label doim ko'rinadi, placeholder uni almashtirmaydi */
  font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
}
.field .req { color: var(--red-ink); }
/* Izoh matni cheksiz cho'zilmasin — o'qish uchun eng qulay uzunlik */
.field .hint, .field .error-text { max-width: 68ch; }

/* --- MAYDON KENGLIGI --------------------------------------------------
   Mijoz e'tirozi: 1440 px ekranda «STIR» katagi 900 px kenglikda edi —
   forma tugallanmagandek ko'rinardi. Endi boshqaruvning kengligi
   MAZMUNIGA bog'liq:
     · sukut bo'yicha       — 420 px dan oshmaydi;
     · son/sana/vaqt        — 180 px (10 kunlik muddat 900 px kerak emas);
     · telefon              — 260 px;
     · matn maydoni (textarea) — 640 px.
   Ekran kerak bo'lsa `.field--xs|sm|md|lg|full` bilan aniq belgilaydi
   (yoki BL.field({ size: "sm" })). Yorliq va izoh KENGLIKDA qolaveradi. */
.field > .input, .field > .select, .field > .combo { max-width: var(--field-w, 420px); }
.field > .textarea { max-width: var(--field-w, 640px); }
.field > .input[type="number"], .field > .input[type="date"],
.field > .input[type="time"], .field > .input[type="month"] {
  max-width: var(--field-w, 180px);
}
.field > .input[type="tel"] { max-width: var(--field-w, 260px); }
.field--xs   { --field-w: var(--field-w-xs); }
.field--sm   { --field-w: var(--field-w-sm); }
.field--md   { --field-w: var(--field-w-md); }
.field--lg   { --field-w: var(--field-w-lg); }
.field--full { --field-w: none; }
/* Tor ustunda cheklov ortiqcha — maydon ustunni to'liq egallaydi */
@media (max-width: 720px) {
  .field > .input, .field > .select, .field > .combo, .field > .textarea,
  .field > .input[type="number"], .field > .input[type="date"],
  .field > .input[type="time"], .field > .input[type="month"],
  .field > .input[type="tel"] { max-width: none; }
}

.input, .select, .textarea {
  width: 100%; min-height: 38px; padding: 8px var(--s3);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-input); color: var(--ink);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease),
              background .16s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-2); opacity: .75; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring);
  background: var(--card);
}
.input[data-filled="true"] { background: var(--card); }
.input:disabled, .select:disabled, .textarea:disabled {
  opacity: var(--disabled-op); cursor: not-allowed; background: var(--muted-soft);
}
.input[readonly] { background: var(--muted-soft); color: var(--ink-2); cursor: default; }
.field[data-state="error"] .input,
.field[data-state="error"] .select,
.field[data-state="error"] .textarea { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.field[data-state="success"] .input,
.field[data-state="success"] .select { border-color: var(--green); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px;
}
.select option { background: var(--card); color: var(--ink); }

/* Tanlash + qo'lda yozish maydoni (BL.combo) — ko'rinishi .select bilan bir xil,
   ro'yxat esa oyna (modal) chegarasida kesilmasligi uchun fixed */
.combo { position: relative; min-width: 0; }
/* Qator ichida qo'shni maydonda izoh/xato chiqsa, bu maydon cho'zilmasin */
.form-grid > .field { align-content: start; }
.combo__input {
  background-image: var(--select-arrow);
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px; text-overflow: ellipsis;
}
.combo__list {
  position: fixed; z-index: 130; overflow-y: auto; padding: 4px;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-input); box-shadow: var(--shadow-pop);
}
.combo__option {
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: var(--fs-table); line-height: 1.35; color: var(--ink);
  overflow-wrap: anywhere;
}
.combo__option[data-active="true"] { background: var(--card-2); }
.combo__option[aria-selected="true"] { color: var(--blue-ink); font-weight: 600; }
.combo__option--custom { color: var(--blue-ink); font-weight: 600; }
.combo__option--custom:not(:first-child) { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.combo__more, .combo__empty { padding: 8px 10px; font-size: var(--fs-meta); color: var(--ink-2); }

.hint { font-size: var(--fs-meta); color: var(--ink-2); }
.error-text {
  font-size: var(--fs-meta); color: var(--red-ink); display: flex; align-items: center; gap: 5px;
}
.error-text svg { width: 12px; height: 12px; flex: 0 0 12px; }

.check { display: flex; align-items: center; gap: var(--s2); cursor: pointer; font-size: var(--fs-body); }
.check input { width: 17px; height: 17px; accent-color: var(--blue); cursor: pointer; }

/* ======================================================================
   8. JADVAL — TZ §Jadval dizayni
   ====================================================================== */
/* ----------------------------------------------------------------------
   RO'YXAT BOSHQARUV QATORI — BITTA qator.

   Avval ma'lumotdan oldin UCHTA qator turardi: holat chiplari, keyin
   asboblar qatori, keyin jadval sarlavhasi — bu "bosh" birinchi uch
   qator ma'lumotdan ham baland edi. Endi hammasi bitta O'RALADIGAN
   qatorda: CHAPDA holat segmentlari, O'NGDA qidiruv + filtr + ustun +
   eksport. Jadval sarlavhasi darhol shundan keyin keladi.

   `.toolbar` nomi SAQLANGAN (boshqa ekranlar shu nom bilan ishlaydi) —
   `.toolbar__lead` esa yangi: chap tarafdagi segmentlar uchun.
   ---------------------------------------------------------------------- */
.toolbar {
  display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--pad-card); border-bottom: 1px solid var(--line);
}
/* Chap katak `flex-basis: 0` bilan turadi: qator hech qachon UNING
   sababli o'ralmaydi — u qolgan joyni oladi, joy yetmasa esa
   segmentlar paneli o'zi yon tomonga sirg'aladi (`.ost__scroll`).
   Natija: boshqaruv qatori BITTA qator bo'lib qoladi. */
.toolbar__lead {
  display: flex; align-items: center; gap: var(--s1);
  min-width: 0; flex: 1 1 0%;
}
.toolbar__lead > * { min-width: 0; }
.toolbar__lead:empty { display: none; }
/* Keng ekranda chap katak O'Z enini oladi: shunda segmentlar paneli
   sirg'alishi shart emas va hamma segment ko'rinadi. Joy yetmasa qator
   o'raladi — o'ng guruh (qidiruv, filtr, eksport) pastga tushadi.
   Sabab: 1440px'da «Yetkazildi» va «Bekor qilingan» segmentlari qidiruv
   maydoni ostida qolib, ko'rinmas va bosilmas bo'lib qolgan edi. */
@media (min-width: 900px) {
  .toolbar__lead { flex: 1 1 auto; }
}
/* Ekranning o'z segment paneli (`.ost`) qator ichida — karta ko'rinishi
   (fon, chegara, burchak) olinadi, faqat segmentlar qoladi. */
.toolbar__lead .ost {
  padding: 0; border: 0; border-radius: 0; background: none;
}
/* Ekran o'zining tayyor holat-panelini (`.status-tabs`) shu yerga
   bersa — u karta ko'rinishini YO'QOTADI va qatorning bir qismiga
   aylanadi (ikkita qavat chegara chizilmaydi). */
.toolbar__lead .status-tabs {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  border-radius: 0; gap: var(--s1);
}
.toolbar__search { position: relative; flex: 1 1 160px; max-width: 280px; min-width: 0; }
.toolbar__search .input { padding-left: 36px; min-height: var(--ctrl-h); height: var(--ctrl-h); }
.toolbar__search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-2); pointer-events: none;
}
/* O'ng guruh qolgan joyni oladi va tugmalarini O'NG chetga tortadi;
   qidiruv esa guruhning CHAP chetida qoladi (`margin-right: auto`).
   Shunda segmentlar bor ekranda ham, yo'q ekranda ham qator muvozanatli
   ko'rinadi: [segmentlar] [qidiruv ……] [filtr · ustun · eksport] */
.toolbar__right {
  margin-left: auto; display: flex; align-items: center; gap: var(--s2);
  flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}
/* Segmentlar YO'Q ekranda (chap katak bo'sh) qidiruv qatorning chap
   chetida tursin — o'ng guruh qolgan joyni oladi. */
.toolbar:has(.toolbar__lead:empty) .toolbar__right { flex: 1 1 auto; }
.toolbar__right > .toolbar__search { margin-right: auto; }
.toolbar .icon-btn, .icon-btn--sm {
  width: var(--ctrl-h); height: var(--ctrl-h); border-radius: var(--r-input);
}
/* Tor ekranda ikonka yetarli — matn joy egallamasin */
@media (max-width: 1150px) {
  .toolbar .btn__text { display: none; }
}

.filters {
  display: grid; gap: var(--s3); padding: var(--s4) var(--pad-card);
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  border-bottom: 1px solid var(--line); background: var(--card-3);
}
.filters .field > label { font-size: 11px; }
.filters .input, .filters .select { min-height: var(--ctrl-h); }
/* Filtr panelida maydon katakchani to'liq egallaydi (§7 dagi kenglik
   cheklovi bu yerda ortiqcha — katakcha allaqachon tor) */
.filters .field > .input, .filters .field > .select,
.filters .field > .combo { max-width: none; }

/* ----------------------------------------------------------------------
   Chiplar. IKKI xil, lekin bitta oila:
     <span class="chip">  — yoqilgan filtr, ichida × tugmasi (ro'yxatlar);
     <button class="chip"> — yoqib-o'chiriladigan chip (GPS paneli).
   Avval ikkala ta'rif ham `.chip` deb yozilgani uchun keyingisi
   birinchisini bosib ketardi — endi element turiga qarab ajratilgan.
   ---------------------------------------------------------------------- */
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; padding: var(--s3) var(--pad-card); }
/* Yoqilgan filtr chiplari boshqaruv qatorining ICHIDA — alohida qator
   emas, o'sha qatorning keyingi satri (faqat filtr qo'yilganda ko'rinadi) */
.toolbar > .chips {
  flex: 1 0 100%; padding: 0; margin-top: var(--s1);
  align-items: center;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: var(--fs-meta); font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}
/* Yoqilgan filtr chipi */
span.chip {
  padding-right: 5px;
  background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue-line);
}
/* Kalit va qiymat orasidagi farq RANG bilan emas, SHRIFT QALINLIGI
   bilan beriladi: yarim shaffof kalit to'q mavzuda 3.6:1 ga tushardi.
   Selektor `span.chip .chip__key`: quyidagi `.chip b` qoidasi (u ham
   (0,1,1)) aks holda uni bosib ketardi va `--ink-3` yumshoq ko'k fonda
   4.38:1 ga tushardi. */
span.chip .chip__key { color: inherit; font-weight: 500; }
.chip__key::after { content: ":"; }
.chip__val { font-weight: 700; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.chip button, .chip__x {
  width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--blue-soft-2); color: inherit; display: grid; place-items: center;
  font-size: 12px; line-height: 1; flex: 0 0 18px; padding: 0;
  transition: background var(--t) var(--ease);
}
.chip button:hover, .chip__x:hover { background: var(--blue-line); }
.chip button:focus-visible, .chip__x:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 1px;
}
/* Yoqib-o'chiriladigan chip (tugma) */
button.chip { cursor: pointer; }
button.chip:hover { background: var(--card-2); border-color: var(--line-strong); }
.chip b { font-weight: 700; color: var(--ink-3); }
.chip[aria-pressed="true"] {
  background: var(--blue-strong); border-color: var(--blue-strong); color: var(--on-accent);
}
/* Chip ichidagi son — yarim shaffof oq 3.9:1 edi; to'liq oq 5.4:1.
   Ierarxiya rang bilan emas, SHRIFT QALINLIGI bilan beriladi. */
.chip[aria-pressed="true"] b { color: var(--on-accent); }
.chip--warn[aria-pressed="true"] { background: var(--amber-strong); border-color: var(--amber-strong); }
.chip--crit[aria-pressed="true"] { background: var(--red-strong); border-color: var(--red-strong); }
.chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.table-wrap { width: 100%; overflow-x: auto; }
/* Balandligi cheklangan jadval — sarlavha qatori yopishib qoladi.
   (Oddiy `.table-wrap` butun sahifa bilan aylanadi, unda yopishish
   uchun o'z aylantirgichi yo'q.) */
.table-wrap--scroll { max-height: min(62vh, 640px); overflow: auto; }
table.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-table); }

.table thead th {
  position: sticky; top: 0; z-index: 2;
  height: var(--thead-h); padding: 0 var(--s4);
  background: var(--card-3); color: var(--ink-2);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line);
  user-select: none;
}
.table thead th:first-child { padding-left: var(--pad-card); }
.table thead th:last-child { padding-right: var(--pad-card); }
.table thead th.sortable { cursor: pointer; transition: color var(--t) var(--ease); }
.table thead th.sortable:hover { color: var(--ink); }
.table thead th .sort { display: inline-flex; align-items: center; gap: 4px; }
.table thead th .sort svg { width: 12px; height: 12px; opacity: .45; }
.table thead th[aria-sort] { color: var(--ink); }
.table thead th[aria-sort] .sort svg { opacity: 1; color: var(--blue); }
.table th.num, .table td.num { text-align: right; }
.table td.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.table tbody td {
  height: var(--trow-h); padding: 8px var(--s4);
  border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-2);
}
.table tbody td:first-child { padding-left: var(--pad-card); }
.table tbody td:last-child { padding-right: var(--pad-card); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t) var(--ease); }
.table tbody tr:hover td { background: var(--row-hover); }
.table tbody tr[aria-selected="true"] td { background: var(--blue-soft); }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.table .strong { color: var(--ink); font-weight: 600; }   /* asosiy ID va nom bold */
.table .muted { color: var(--ink-2); }
.table td:last-child { text-align: right; white-space: nowrap; }

/* Ikki qatorli katak — jadvalda ham, mobil kartada ham bir xil ishlaydi
   (shu sabab `.table` ichiga cheklanmagan). */
.cell-stack { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.cell-stack small { color: var(--ink-2); font-size: 11.5px; }

.row-actions { display: inline-flex; align-items: center; gap: var(--s1); justify-content: flex-end; }

.menu { position: relative; display: inline-block; }
/* SUZUVCHI element — ikkinchi daraja (`--shadow-pop`) */
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 80;
  min-width: 208px; padding: var(--s1);
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop); text-align: left;
  animation: menu-in .14s var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu__item {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: 8px 10px; border: 0; background: transparent; color: var(--ink);
  border-radius: 9px; cursor: pointer; font-size: var(--fs-table); text-align: left;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.menu__item svg { width: 15px; height: 15px; color: var(--ink-2); flex: 0 0 15px; }
.menu__item:hover, .menu__item:focus-visible { background: var(--card-2); }
.menu__item--danger { color: var(--red-ink); }
.menu__item--danger svg { color: var(--red-ink); }
.menu__sep { height: 1px; background: var(--line); margin: 5px 0; }

/* ----------------------------------------------------------------------
   Mavzu tanlagich — profil menyusining tepasida (app.js `themeSwitch()`).
   Ikki variant yonma-yon: qaysi biri YOQILGANI bir qarashda ko'rinadi —
   tanlangani "ko'tarilgan" (oq/karta foni, chegara, qalinroq shrift).
   Rang bilan bir qatorda SHAKL ham farq qiladi: rangni ajrata olmaydigan
   foydalanuvchi ham holatni ko'radi.
   ---------------------------------------------------------------------- */
.menu__theme { display: grid; gap: 6px; padding: 7px 10px 3px; }
.menu__theme-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.theme-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  padding: 3px; border-radius: 10px; background: var(--muted-soft);
}
.theme-switch__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; min-height: 32px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--ink-2);
  font-size: var(--fs-meta); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.theme-switch__btn svg { width: 14px; height: 14px; flex: 0 0 14px; }
.theme-switch__btn span { overflow: hidden; text-overflow: ellipsis; }
.theme-switch__btn:hover { color: var(--ink); }
.theme-switch__btn[aria-pressed="true"] {
  background: var(--card); border-color: var(--line-strong);
  color: var(--ink); font-weight: 700; box-shadow: var(--shadow-card);
}
.theme-switch__btn[aria-pressed="true"] svg { color: var(--blue-ink); }
.theme-switch__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Ikki nomga joy bo'lishi uchun menyu paneli shu holatda kengroq */
.menu__panel:has(.menu__theme) { min-width: 248px; }

.pagination {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--pad-card); border-top: 1px solid var(--line);
  font-size: var(--fs-table); color: var(--ink-2);
}
/* O'lchandi (375 px): sahifa raqamlari qatori 368 px bo'lib, sahifani
   27 px yon tomonga surib yuborardi — telefonda gorizontal aylantirish
   paydo bo'lardi. Endi qator KO'CHADI (wrap). */
.pagination__pages {
  margin-left: auto; display: flex; align-items: center; gap: var(--s1);
  flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}
.page-btn {
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 10px;
  background: transparent; border: 1px solid var(--line); color: var(--ink-2);
  cursor: pointer; font-size: var(--fs-table); font-weight: 600;
}
.page-btn:hover:not(:disabled) { background: var(--card-2); color: var(--ink); }
.page-btn[aria-current="true"] {
  background: var(--blue-strong); border-color: var(--blue-strong); color: var(--on-accent);
}
.page-btn:disabled { opacity: var(--disabled-op); cursor: not-allowed; }

/* Telefon uchun card view (TZ: telefonda card view) */
.record-cards { display: none; }
.record-card {
  border-bottom: 1px solid var(--line-soft); padding: var(--s4) var(--pad-card);
  display: grid; gap: var(--s3); cursor: pointer;
}
.record-card:hover { background: var(--row-hover); }
.record-card__top { display: flex; align-items: center; gap: var(--s3); }
.record-card__title { font-weight: 700; color: var(--ink); font-size: var(--fs-body); }
.record-card__meta { display: grid; gap: 5px; font-size: var(--fs-table); }
.record-card__row { display: flex; gap: var(--s3); }
.record-card__row dt { color: var(--ink-2); min-width: 92px; flex: 0 0 92px; }
.record-card__row dd { margin: 0; color: var(--ink); flex: 1 1 auto; min-width: 0; }
/* Telefonda karta ichidagi uzun qiymat (manzil, mijoz nomi, belgilar)
   min-content kengligini oshirib, butun sahifani yon tomonga surar edi. */
.record-card__row dd > * { min-width: 0; max-width: 100%; }
.record-card__row dd .cell-stack { min-width: 0; }
.record-card__row dd .cell-stack > * { overflow-wrap: anywhere; }

/* ======================================================================
   9. HOLATLAR — skeleton, bo'sh, xato (TZ §Qabul mezonlari)
   ====================================================================== */
.skeleton {
  background: linear-gradient(90deg, var(--skeleton-1) 25%, var(--skeleton-2) 37%, var(--skeleton-1) 63%);
  background-size: 400% 100%; animation: shimmer 1.35s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton--text { height: 12px; margin: 5px 0; }
.skeleton--row { height: var(--trow-h); margin: 0; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
/* Skelet karta o'rnini aynan egallasin — yuklangach sahifa sakramaydi */
.skeleton--kpi { height: var(--kpi-min-h, 104px); border-radius: var(--r-card); }
.skeleton--block { height: 280px; border-radius: var(--r-card); }

/* Bo'sh va xato holati — tinch, markazlashgan, ortiqcha chegarasiz */
.state {
  display: grid; place-items: center; gap: var(--s2);
  padding: var(--s8) var(--pad-card); text-align: center;
}
.state__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--muted-soft); color: var(--ink-3); margin-bottom: var(--s1);
}
.state__icon svg { width: 21px; height: 21px; }
.state--error .state__icon { background: var(--red-soft); color: var(--red-ink); }
.state__title { font-size: var(--fs-card); font-weight: 650; color: var(--ink); }
.state__text { color: var(--ink-2); max-width: 52ch; font-size: var(--fs-body); }
.state .btn { margin-top: var(--s2); }

/* ======================================================================
   10. MODAL — TZ: 720–960 px, radius 20–22, focus trap, Escape
   ====================================================================== */
.modal-root {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: var(--s6);
  background: var(--overlay); backdrop-filter: blur(4px);
  animation: fade .16s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Plitka filtri FAQAT `.leaflet-tile` da (quyida, §11) — qatlamga ham,
   plitkaga ham berilsa filtr IKKI MARTA qo'llanadi va to'q mavzudagi
   `invert(1)` o'zini bekor qilib qo'yadi (xarita yana oppoq bo'lardi). */
.leaflet-tile-pane { filter: none; }

/* Masshtab chizg'ichi ilova uslubida */
.leaflet-control-scale-line {
  border: 1px solid var(--line-strong); border-top: 0;
  background: var(--topbar-bg); color: var(--ink-2);
  font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 0 0 5px 5px;
}

/* Leaflet ichki qatlamlari (z-index 400-800) sahifa darajasida turib,
   modal oynaning ustiga chiqib ketardi. Xarita konteyneriga o'z stacking
   konteksti berilsa, ular ichkarida qoladi. */
.leaflet-container { position: relative; z-index: 0; }

.modal {
  width: min(960px, 100%); max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-modal); box-shadow: var(--shadow-pop);
  animation: rise .2s var(--ease);
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal--sm { width: min(520px, 100%); }
.modal--md { width: min(720px, 100%); }
.modal--lg { width: min(1120px, 100%); }

.modal__head {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s6) var(--s6) var(--s4); border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.modal__title { font-size: 17px; font-weight: 650; letter-spacing: -.15px; }
.modal__sub { font-size: var(--fs-table); color: var(--ink-2); margin-top: 3px; }
.modal__close { margin-left: auto; }
.modal__body { padding: var(--s6); overflow-y: auto; flex: 1 1 auto; }
.modal__foot {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s6); border-top: 1px solid var(--line); flex: 0 0 auto;
}
/* Oyna ichida karta chizilmaydi — oynaning o'zi allaqachon yuza */
.modal__body > .stack > .card, .modal__body > .card {
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.modal__body > .stack > .card + .card { border-top: 1px solid var(--line-soft); }
.modal__body > .stack > .card > .card__head { padding-left: 0; padding-right: 0; }
.modal__body > .stack > .card > .card__body { padding-left: 0; padding-right: 0; }
.modal__foot .spacer { margin-left: auto; }

.alert {
  display: flex; gap: var(--s3); padding: var(--s3) var(--s4);
  border-radius: var(--r-input); border: 1px solid; font-size: var(--fs-table);
  line-height: 1.5;
}
.alert svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.alert--warn { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber-ink); }
.alert--crit { background: var(--red-soft);   border-color: var(--red-line);   color: var(--red-ink); }
.alert--info { background: var(--blue-soft);  border-color: var(--blue-line);  color: var(--blue-ink); }
.alert--ok   { background: var(--green-soft); border-color: var(--green-line); color: var(--green-ink); }

/* Toast — 3–5 soniya (TZ §Komponent holatlari) */
.toasts {
  position: fixed; right: var(--s6); bottom: var(--s6); z-index: 200;
  display: grid; gap: var(--s3); width: auto;
  /* 100vw skrollbar kengligini ham hisoblaydi va gorizontal skroll hosil
     qiladi — shuning uchun max-width konteyner kengligiga bog'lanadi. */
  max-width: min(400px, calc(100% - 32px));
}
.toast {
  display: flex; gap: var(--s3); padding: var(--s4);
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: var(--shadow-pop);
  animation: toast-in .22s var(--ease);
}
@keyframes toast-in { from { transform: translateX(22px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast__icon { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }
.toast__body { flex: 1 1 auto; min-width: 0; }
.toast__title { font-weight: 650; font-size: var(--fs-body); }
.toast__text { font-size: var(--fs-table); color: var(--ink-2); margin-top: 2px; word-break: break-word; }
/* Chap chetdagi ingichka rangli chiziq — xabar turi bir qarashda ko'rinadi */
.toast { position: relative; overflow: hidden; }
.toast::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ink-3);
}
.toast--ok::before   { background: var(--green); }
.toast--crit::before { background: var(--red); }
.toast--warn::before { background: var(--amber); }
.toast--info::before { background: var(--blue); }
/* Yopish tugmasi: ish stolida ixcham, telefonda barmoq uchun 40 px */
.toast__close { width: 32px; height: 32px; flex: 0 0 auto; align-self: flex-start; }
@media (max-width: 720px) {
  .toast__close { width: 40px; height: 40px; }
}
.toast--ok .toast__icon   { color: var(--green-ink); }
.toast--crit .toast__icon { color: var(--red-ink); }
.toast--warn .toast__icon { color: var(--amber-ink); }
.toast--info .toast__icon { color: var(--blue-ink); }

/* ======================================================================
   11. XARITA VA GRAFIK
   ====================================================================== */
.map { width: 100%; height: 100%; min-height: 320px; border-radius: 0 0 var(--r-card) var(--r-card); }
.map--full { border-radius: var(--r-card); }
.leaflet-container { background: var(--map-bg); font-family: var(--font); }
/* Yorug' mavzuda plitkalar biroz yumshatiladi, to'q mavzuda esa
   ag'dariladi (`--tile-filter`) — oq yo'l to'ri ko'zni qamashtirmasin. */
.leaflet-tile { filter: var(--tile-filter); }
/* Yandex xaritasi o'z ranglarida (mijoz: "Yandex kartadagidek") — mavzu
   filtri qo'llanmaydi */
.tiles-native .leaflet-tile { filter: none; }
/* Tirbandlik sxemada «darken» bilan qo'shiladi: sxemaning yozuvlari
   plitkaning o'zida (tirbandlik OSTIDA) — shunda to'q rangli ko'cha va
   metro nomlari chiziq ustidan ko'rinib turadi, oq yo'l ustida esa
   tirbandlik rangi o'zgarmaydi. Sputnik/gibridda ishlatilmaydi: to'q
   surat ustida chiziq yo'qolib qolardi (gibridda yozuvlar baribir
   tirbandlik ustidagi qatlamda). */
.leaflet-container[data-base="sxema"] .tiles-traffic { mix-blend-mode: darken; }
/* Yandex sharti: xarita burchagida logotip (yandex.ru/maps ga havola) */
.leaflet-control.ymaps-logo { display: block; line-height: 0; margin: 0 10px 6px 0; }
.leaflet-top .leaflet-control.ymaps-logo { margin: 10px 10px 0 0; }
.ymaps-logo img { display: block; height: 24px; width: auto; }
.leaflet-control.ymaps-logo--text {
  line-height: 1.2; padding: 3px 8px; border-radius: 6px;
  background: #FFFFFF; color: #000000; font: 600 11px/1.2 var(--font);
  text-decoration: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}
.leaflet-control-zoom a {
  background: var(--card) !important; color: var(--ink) !important;
  border-color: var(--line) !important;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop);
}
.leaflet-popup-content { margin: 12px 14px; font-size: var(--fs-table); }
/* Leaflet'ning O'Z uslublari (vendor CSS) mavzuni bilmaydi: atribut
   qatori oq fon + #333 matn bo'lib qolardi (to'q mavzuda 1.35:1).
   ⚠️ Selektor `.leaflet-container .leaflet-control-attribution` —
   `leaflet.css` foni aynan SHU ustunlikda (0,2,0) berilgan; oddiy
   `.leaflet-control-attribution` uni bosa olmaydi (o'lchab topildi). */
.leaflet-container .leaflet-control-attribution,
.leaflet-control-attribution {
  background: var(--topbar-bg); color: var(--ink-2);
}
.leaflet-control-attribution a,
.leaflet-container a.leaflet-popup-close-button { color: var(--blue-ink); }
.leaflet-popup-content-wrapper a { color: var(--blue-ink); }

/* --- Xaritadagi avtomobil belgisi (maketdagi chip) ------------------- */
.vmark-wrap { width: auto !important; height: auto !important; }
.vmark {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 3px; border-radius: var(--r-pill);
  background: var(--map-chip); border: 1px solid var(--map-chip-line);
  box-shadow: 0 5px 16px rgba(7, 27, 51, .22);
  white-space: nowrap; cursor: pointer;
  transform: translate(-14px, -14px);   /* ikonka markazi nuqtada tursin */
}
.vmark__icon {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  background: var(--vm); color: var(--on-accent); display: grid; place-items: center;
}
.vmark__text { display: flex; flex-direction: column; line-height: 1.15; }
.vmark__text b { font-size: 11px; font-weight: 700; color: var(--map-chip-ink); }
.vmark__text i { font-style: normal; font-size: 9.5px; color: var(--vm); font-weight: 600; }
.vmark--on { border-color: var(--vm); box-shadow: 0 6px 20px rgba(22, 119, 255, .35); }
.vmark--moving .vmark__icon::after {
  content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--vm); opacity: .45; animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse { to { transform: scale(2); opacity: 0; } }

/* Marker harakati animatsiyasi maps.js da elementga yoziladi (Leaflet
   o'z uslubini ustun qo'yadi, shuning uchun CSS qoidasi yetarli emas). */

.map-legend {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s3) var(--pad-card); border-top: 1px solid var(--line);
  font-size: var(--fs-meta); color: var(--ink-2);
}
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }

.chart-host { width: 100%; min-width: 0; overflow: hidden; }
.chart { width: 100%; display: block; }
.chart text { font-family: var(--font); font-size: 11px; fill: var(--ink-2); }
.chart .chart-tick { font-size: 11px; font-weight: 500; fill: var(--ink-2); }
.chart .grid-line { stroke: var(--grid-line); stroke-width: 1; }
.chart .axis-line { stroke: var(--line-strong); stroke-width: 1; }
.chart .chart-bar { cursor: pointer; transition: opacity .14s var(--ease); }
.chart .chart-bar:hover { opacity: .78; }
.chart .chart-dot { stroke: var(--card); cursor: pointer; }

/* --- Donut --- */
.donut-wrap {
  display: flex; gap: var(--s6); align-items: center; flex-wrap: wrap;
}
.donut { flex: 0 0 auto; }
.donut__track { stroke: var(--line); }
.donut__arc { cursor: pointer; transition: opacity .14s var(--ease); }
.donut__arc:hover { opacity: .82; }
.donut__value { font-size: 22px; font-weight: 800; fill: var(--ink); }
.donut__label {
  font-size: 11px; fill: var(--ink-2); text-transform: uppercase; letter-spacing: .5px;
}
.donut-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.donut-row {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: 7px var(--s3); border: 0; background: transparent; cursor: pointer;
  border-radius: 9px; text-align: left; color: var(--ink);
}
.donut-row:hover, .donut-row:focus-visible { background: var(--card-2); }
.donut-row__label {
  flex: 1 1 auto; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.donut-row__value { font-size: 13px; font-weight: 600; white-space: nowrap; }
.donut-row__pct {
  font-size: var(--fs-meta); color: var(--ink-2); width: 46px; text-align: right;
}
.chart-legend {
  display: flex; gap: var(--s4); flex-wrap: wrap; justify-content: center;
  font-size: var(--fs-meta); color: var(--ink-2); margin-top: var(--s3);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-tip {
  position: fixed; z-index: 150; pointer-events: none;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 8px 11px; font-size: var(--fs-meta);
  box-shadow: var(--shadow-pop); white-space: nowrap;
}

/* ======================================================================
   12. TABLAR, TIMELINE, TAFSILOT
   ====================================================================== */
.tabs {
  display: flex; gap: var(--s1); border-bottom: 1px solid var(--line);
  padding: 0 var(--pad-card); overflow-x: auto;
}
.tab {
  padding: var(--s3) var(--s4); border: 0; background: transparent;
  color: var(--ink-2); font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blue); }

/* Ro'yxat ustidagi holat tab-paneli (buyurtmalar ekrani) */
.status-tabs {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 6px; box-shadow: var(--shadow-card);
}
.status-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px var(--s4); border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--ink-2);
  font-size: var(--fs-body); font-weight: 600; white-space: nowrap;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.status-tab:hover { background: var(--card-2); color: var(--ink); }
.status-tab[aria-selected="true"] { background: var(--blue-strong); color: var(--on-accent); }
.status-tab__count {
  font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--card-2); color: var(--ink-2);
}
.status-tab[aria-selected="true"] .status-tab__count {
  /* Oq parda ko'k ustida 3.64:1 berardi — QORA parda bilan chip to'qroq
     bo'ladi va oq raqam 7.2:1 ga chiqadi (to'q mavzuda 6.5:1). */
  background: rgba(0, 0, 0, .18); color: var(--on-accent);
}

/* Hisobot jadvali — o'qiladigan katakchalar */
.bar--thin { height: 5px; margin-top: 5px; }
.report-dim { display: inline-flex; align-items: center; gap: 8px; }
.report-dim b { font-weight: 600; white-space: nowrap; }
.report-dim .dot { flex: 0 0 8px; }
/* Ustun ichidagi mini-chiziq ixcham — 9 ustunli jadval noutbuk ekraniga
   (1366 px) gorizontal aylantirishsiz sig'sin */
.report-pct, .report-num {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  min-width: 72px; gap: 0;
}
.report-pct .bar, .report-num .bar { width: 72px; }
.report-pct__value { font-weight: 600; }
/* ======================================================================
   TELEGRAM MINI APP — kirish sahifasi (/tg) va ilova ichidagi moslashuv
   ====================================================================== */
.tg-body { background: var(--bg); min-height: 100vh; margin: 0; }
.tg-gate {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  box-sizing: border-box;
}
.tg-card {
  width: 100%; max-width: 360px; text-align: center; padding: 28px 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-pop);
}
.tg-card__logo { width: 52px; height: 52px; }
.tg-card__brand { margin-top: 10px; font-size: 20px; font-weight: 800; color: var(--ink); }
.tg-card__sub { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px; }
.tg-card__spinner {
  width: 28px; height: 28px; margin: 22px auto 0; border-radius: 50%;
  border: 3px solid var(--blue-soft); border-top-color: var(--blue);
  animation: tg-spin .8s linear infinite;
}
.tg-card__spinner[hidden] { display: none; }
@keyframes tg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tg-card__spinner { animation: none; } }
.tg-card__status {
  margin: 16px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5;
  white-space: pre-line;
}
.tg-card__actions { display: grid; gap: 8px; margin-top: 18px; }
.tg-card__actions:empty { display: none; }
/* Ilova Telegram ichida: soat va "Ctrl K" kabi kompyuter elementlari kerak emas */
.in-telegram .search__kbd, .in-telegram .clock { display: none; }

/* Jami qatori — jadval ichida (tfoot), ustunlar bilan tekis */
.table tfoot td {
  height: var(--trow-h); padding: 10px var(--s4);
  border-top: 2px solid var(--line-strong); background: var(--card-2);
  color: var(--ink); font-weight: 600; white-space: nowrap;
}
.table tfoot td:first-child { color: var(--ink-2); font-weight: 700; letter-spacing: .4px; }
.record-card--total { background: var(--card-2); }
.report-dim--empty b { color: var(--ink-3); font-weight: 500; font-style: italic; }
.report-dim--empty .dot { background: var(--line-strong) !important; }
.drill-count { margin-bottom: var(--s3); color: var(--ink-2); font-size: var(--fs-meta); }
.kpi__unit { margin-left: 5px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.drill-count b { color: var(--ink); }

/* Yetkazib berish: kun tasmasi */
/* Yetkazib berish ro'yxati — QAT'IY ustunlar (grid).
   Avval flex edi: har qatorda haydovchi ismi boshqa joyda tugab, ro'yxat
   tartibsiz ko'rinardi. Endi hamma ustun bir chiziqda. */
.delivery-grid, .delivery-row, .delivery-head {
  display: grid;
  grid-template-columns: 56px 30px minmax(0, 1fr) 170px 78px 150px;
  align-items: center; gap: 14px;
}
.delivery-head {
  padding: 10px var(--pad-card); font-size: 10.5px; font-weight: 600;
  letter-spacing: .3px; color: var(--ink-3); text-transform: uppercase;
  border-bottom: 1px solid var(--line); background: var(--card-3);
}
.delivery-row {
  width: 100%; padding: 11px var(--pad-card); border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent; cursor: pointer; text-align: left; color: var(--ink);
  font-size: var(--fs-table);
}
.delivery-row:last-child { border-bottom: 0; }
.delivery-row:hover { background: var(--card-hover); }
.delivery-row__time {
  display: flex; flex-direction: column; flex: 0 0 52px; line-height: 1.25;
}
.delivery-row__time b { font-size: var(--fs-table); }
.delivery-row__time small { font-size: 10.5px; color: var(--ink-2); }
.delivery-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);
}
.delivery-row__dot svg { width: 15px; height: 15px; }
.delivery-row__dot--ok   { background: var(--green-soft); color: var(--green-ink); }
.delivery-row__dot--info { background: var(--blue-soft);  color: var(--blue-ink); }
.delivery-row__dot--warn { background: var(--amber-soft); color: var(--amber-ink); }
.delivery-row__dot--crit { background: var(--red-soft);   color: var(--red-ink); }
.delivery-row__main {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto;
}
.delivery-row__main b { font-size: var(--fs-table); }
.delivery-row__main small,
.delivery-row__who small { font-size: var(--fs-meta); color: var(--ink-2); }
.delivery-row__main b, .delivery-row__main small,
.delivery-row__who span, .delivery-row__who small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.delivery-row__who {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.delivery-row__who span { font-weight: 600; }
.delivery-row__vol { text-align: right; font-weight: 600; white-space: nowrap; }
.delivery-row__state { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }

@media (max-width: 1100px) {
  .delivery-row, .delivery-head {
    grid-template-columns: 52px 28px minmax(0, 1fr) 132px 66px 120px;
    gap: 10px;
  }
}
@media (max-width: 900px) {
  .delivery-head { display: none; }
  .delivery-row {
    grid-template-columns: 52px 28px minmax(0, 1fr);
    grid-template-areas: "time dot main" ". . who" ". . state";
    row-gap: 6px;
  }
  .delivery-row__time { grid-area: time; }
  .delivery-row__dot { grid-area: dot; }
  .delivery-row__main { grid-area: main; }
  .delivery-row__who { grid-area: who; flex-direction: row; gap: 8px; }
  .delivery-row__state { grid-area: state; }
  .delivery-row__vol { display: none; }
}

/* Marshrutlar: chapda ro'yxat, o'ngda xarita.
   `.route-picker` va `.route-item*` O'CHIRILDI — yangi marshrut ekrani
   transport ro'yxatiga o'tgach ularni hech kim chizmaydi (nusxalari
   `ops.css` dan ham olib tashlangan). `.route-split` va `.route-stats`
   esa YANGI ekranda ham ishlatiladi, shuning uchun qoldirildi. */
.route-split {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s5);
  height: 420px; margin-bottom: var(--s5);
}
.route-stats {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  padding: var(--s3) var(--s5); border-top: 1px solid var(--line);
}
.route-stats__item { display: flex; flex-direction: column; line-height: 1.3; }
.route-stats__item small { font-size: var(--fs-meta); color: var(--ink-2); }
.route-stats__item b { font-size: var(--fs-table); }

@media (max-width: 1100px) {
  .route-split { grid-template-columns: 1fr; height: auto; }
}

/* Kalit (toggle) — sozlamalardagi yoqish/o'chirish */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 40px; height: 22px; border-radius: 999px; background: var(--switch-track);
  position: relative; flex: 0 0 40px; transition: background .18s var(--ease);
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--switch-knob);
  box-shadow: 0 1px 3px rgba(7, 27, 51, .25);
  transition: transform .18s var(--ease);
}
.switch input:checked + .switch__track { background: var(--blue); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--blue-ring); }
.switch input:disabled + .switch__track { opacity: var(--disabled-op); cursor: not-allowed; }
.switch__row {
  display: flex; align-items: center; gap: var(--s4);
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.switch__row:last-child { border-bottom: 0; }
.switch__row .switch { margin-left: auto; flex: 0 0 auto; }
.switch__label { font-size: var(--fs-table); font-weight: 600; }
.switch__hint { font-size: var(--fs-meta); color: var(--ink-2); max-width: 68ch; margin-top: 2px; }
.form-grid .switch__row, .form-grid--3 .switch__row { grid-column: 1 / -1; }

/* Kartalar boshidagi rangli ikon chipi */
.card__icon {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
  display: grid; place-items: center;
}
.card__icon svg { width: 17px; height: 17px; }

/* Sozlamalar o'ng ustuni: tizim holati, zaxira, tezkor amallar */
.settings-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap-block);
  align-items: start;
}
.status-list { display: grid; gap: 0; }
.status-list__row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-table);
}
.status-list__row:last-child { border-bottom: 0; }
.status-list__row .dot { flex: 0 0 8px; }
.status-list__value { margin-left: auto; font-size: var(--fs-meta); font-weight: 600; }
.status-list__value--ok { color: var(--green-ink); }
.status-list__value--muted { color: var(--ink-2); font-weight: 500; }
/* Bosiladigan holat qatori (avtopark kesimi) */
.status-list__row--click {
  width: 100%; border: 0; background: transparent; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  border-radius: 8px; padding-left: 6px; padding-right: 6px;
}
.status-list__row--click:hover { background: var(--card-2); }

.action-list { display: grid; gap: 8px; }
.action-list__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); cursor: pointer; text-align: left;
  font-size: var(--fs-table); color: var(--ink);
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.action-list__item:hover { background: var(--card-2); border-color: var(--line-strong); }
.action-list__item svg { width: 16px; height: 16px; color: var(--ink-2); }
.action-list__item--danger { color: var(--red-ink); border-color: var(--red-line); }
.action-list__item--danger svg { color: var(--red-ink); }
.action-list__item--danger:hover { background: var(--red-soft); }

.soft-button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 14px; border-radius: 10px;
  background: var(--blue-soft); color: var(--blue-ink); border: 1px solid var(--blue-line);
  font-size: var(--fs-table); font-weight: 600; cursor: pointer;
}
.soft-button svg { width: 16px; height: 16px; flex: 0 0 16px; }
.soft-button:hover { background: var(--blue-soft-2); }
.soft-button:disabled { opacity: var(--disabled-op); cursor: not-allowed; }

@media (max-width: 1150px) {
  .settings-layout { grid-template-columns: 1fr; }
}

/* Ma'lumot manbai belgisi (haqiqiy / taxminiy) */
.source-note {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.source-note__badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: var(--fs-meta); font-weight: 600;
}
.source-note__badge svg { width: 13px; height: 13px; }
.source-note__badge--ok   { background: var(--green-soft); color: var(--green-ink); }
.source-note__badge--warn { background: var(--amber-soft); color: var(--amber-ink); }

/* Yoqilg'i: avtomobil bo'yicha sarf qatori */
.fuel-row { display: flex; flex-direction: column; gap: 7px; }
.fuel-row__top { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-table); }
.fuel-row__top .hint { font-size: var(--fs-meta); color: var(--ink-2); }

/* Sozlamalar bo'limlari paneli — QUTI EMAS, tag chiziqli tablar.
   Avval u to'liq kartada (chegara + soya + 56 px bo'y) turardi va
   ostidagi kontent kartalari bilan birga sahifani "qutilar seti"
   qilib ko'rsatardi. */
.section-nav {
  display: flex; gap: var(--s1); flex-wrap: wrap;
  background: transparent; border: 0; border-radius: 0; padding: 0;
  box-shadow: none; border-bottom: 1px solid var(--line);
}
.section-nav__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--s3) var(--s3); border: 0; border-radius: 0; cursor: pointer;
  background: transparent; color: var(--ink-2);
  font-size: var(--fs-body); font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.section-nav__item svg { width: 14px; height: 14px; opacity: .6; }
.section-nav__item:hover { background: transparent; color: var(--ink); }
.section-nav__item[aria-selected="true"] {
  background: transparent; color: var(--ink); border-bottom-color: var(--blue);
}

.detail-grid { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kv { display: grid; gap: var(--s3); }
.kv__row {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.kv__row:last-child { border-bottom: 0; padding-bottom: 0; }
.kv__key { color: var(--ink-2); font-size: var(--fs-table); flex: 0 0 172px; }
.kv__val { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body); word-break: break-word; }

.timeline { display: grid; gap: 0; position: relative; }
.timeline__item { display: flex; gap: var(--s4); padding-bottom: var(--s6); position: relative; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: 11px; top: 26px; bottom: 0;
  width: 2px; background: var(--line);
}
.timeline__item:last-child::before { display: none; }
.timeline__dot {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px;
  display: grid; place-items: center; z-index: 1;
  background: var(--card-2); border: 2px solid var(--line-strong);
}
.timeline__dot svg { width: 12px; height: 12px; }
.timeline__body { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.timeline__title { font-weight: 600; font-size: var(--fs-body); }
.timeline__meta { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px; }

.stops { display: grid; gap: var(--s3); }
/* Texnik xizmat: muddati yaqin xizmatlar — ixcham, keng ekranda 2 ustun */
.stops--compact { gap: 8px; }
.stops--compact .stop { padding-top: 10px; padding-bottom: 10px; align-items: center; }
@media (min-width: 1100px) {
  .stops--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stop {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s4); border: 1px solid var(--line); border-radius: 14px;
  background: var(--card-2);
}
.stop__seq {
  width: 28px; height: 28px; border-radius: 9px; flex: 0 0 28px;
  background: var(--blue-soft); color: var(--blue-ink);
  display: grid; place-items: center; font-weight: 800; font-size: var(--fs-table);
}
.stop__body { flex: 1 1 auto; min-width: 0; }
.stop__actions { display: flex; gap: var(--s2); flex: 0 0 auto; }

.items-table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.items-table th {
  text-align: left; padding: var(--s2) var(--s3); color: var(--ink-2);
  font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.items-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.items-table tr:last-child td { border-bottom: 0; }
.items-table .num { text-align: right; }

.file-list { display: grid; gap: var(--s2); }
.file-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); border: 1px solid var(--line); border-radius: 12px;
  background: var(--card-2); font-size: var(--fs-table);
}
.file-row svg { width: 17px; height: 17px; color: var(--ink-2); flex: 0 0 17px; }
.file-row b { font-weight: 600; }
.file-row .spacer { margin-left: auto; }

/* Fayl qo'shish — ixcham bir qatorli tugma-zona */
.dropzone {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px dashed var(--line-strong); border-radius: 10px;
  padding: 9px 14px; color: var(--ink-2); font-size: var(--fs-meta);
  cursor: pointer; transition: border-color .16s var(--ease), background .16s var(--ease);
}
.dropzone svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--blue-ink); }
.dropzone b { color: var(--blue-ink); font-weight: 600; font-size: var(--fs-table); }
.dropzone__hint { margin-left: auto; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.dropzone:hover, .dropzone[data-over="true"] { border-color: var(--blue); background: var(--blue-soft); }
.dropzone:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 600px) {
  .dropzone__or { display: none; }       /* telefonda sudrab tashlash yo'q */
  .dropzone { flex-wrap: wrap; }
}

/* Drawer — GPS tafsiloti va mobil filtr */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 110;
  width: min(420px, 100%); background: var(--card);
  border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  animation: slide-in .2s var(--ease);
}
@keyframes slide-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
}
.drawer__body { padding: var(--s5); overflow-y: auto; flex: 1 1 auto; }
.drawer__foot { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); display: flex; gap: var(--s3); }

.notif-item {
  display: flex; gap: var(--s3); padding: var(--s4);
  border-bottom: 1px solid var(--line); cursor: pointer; text-align: left;
  width: 100%; background: transparent; border-left: 0; border-right: 0; border-top: 0;
}
.notif-item:hover { background: var(--row-hover); }
.notif-item[data-unread="true"] { background: var(--blue-soft); }
.notif-item__icon {
  width: 34px; height: 34px; border-radius: 11px; flex: 0 0 34px;
  display: grid; place-items: center;
}
.notif-item__icon svg { width: 16px; height: 16px; }
.notif-item__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.notif-item__title {
  font-weight: 600; font-size: var(--fs-table); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis;
}
.notif-item__text {
  font-size: var(--fs-meta); color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis;
}
.notif-item__time { font-size: 11px; color: var(--ink-2); margin-top: 2px; }

/* ======================================================================
   13. LOGIN — kirish sahifasi uslublari alohida faylda: static/css/login.css
   (faqat templates/login.html ulaydi; ilovaning boshqa ekranlariga ta'sir
   qilmaydi va ular yuklaydigan CSS hajmi kamaydi).
   ====================================================================== */

/* ======================================================================
   14. RESPONSIVE — TZ: 360 px dan 1920 px gacha
   ====================================================================== */
/* TZ §Ekranlar bo'yicha dizayn: 1366 × 768 asosiy ishchi ekran —
   shu kenglikda to'rtta KPI karta bir qatorda qoladi. */
/* TZ 6-bosqich: forma 1100 px dan KENG ekranda ikki ustun, tor ekranda
   bitta. (Avval 720 px gacha ikki ustun qolib, maydonlar siqilib
   ketardi.) */
@media (max-width: 1100px) {
  .form-grid, .form-grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 1150px) {
  .grid--kpi, .grid--kpi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split, .grid--2, .grid--3, .detail-grid { grid-template-columns: 1fr; }
  .grid--progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* Sidebar drawer ko'rinishida ochiladi */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .22s var(--ease);
    box-shadow: var(--shadow-pop);
  }
  body[data-nav="open"] .sidebar { transform: none; }
  body[data-nav="open"]::after {
    content: ""; position: fixed; inset: 0; z-index: 55; background: var(--overlay);
  }
  .main { margin-left: 0; }
  .icon-btn.burger { display: grid; }
  .page { padding: var(--s5) var(--s4); }
  .topbar { padding: 0 var(--s4); gap: var(--s2); }
  .clock { display: none; }
  .profile__meta { display: none; }
  .search__kbd { display: none; }
  .topbar__div { display: none; }
  .grid--progress { grid-template-columns: 1fr; }
  .page__title { font-size: 20px; }
  /* Drawer menyuda barmoq uchun kattaroq nishon */
  .nav__item { height: 44px; }
}

@media (max-width: 720px) {
  /* Telefonda ham IKKI ustun — to'rtta KPI bitta ekranga sig'adi va
     har biri hamon 40 px dan baland (bosish uchun qulay) */
  .grid--kpi, .grid--kpi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { gap: var(--s3); }
  .kv__row { flex-direction: column; gap: var(--s1); }
  .kv__key { flex: 0 0 auto; }
  .page__actions { width: 100%; }
  .page__actions .btn { flex: 1 1 auto; }
  .modal-root { padding: 0; align-items: flex-end; }
  .modal { width: 100%; max-height: 94vh; border-radius: var(--r-modal) var(--r-modal) 0 0; }
  .modal__body, .modal__head, .modal__foot { padding-left: var(--s4); padding-right: var(--s4); }
  .toasts { right: var(--s3); left: var(--s3); bottom: var(--s3); width: auto; }

  /* Jadval o'rniga card view */
  .table-wrap { display: none; }
  .record-cards { display: block; }

  /* Sticky save bar (TZ §Ekranlar bo'yicha dizayn) */
  .modal__foot {
    position: sticky; bottom: 0; background: var(--card);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .3);
  }
}

/* --- Telefon (375 px) ---------------------------------------------------
   Shart: hech qayerda gorizontal aylantirish bo'lmasin, bosish
   nishonlari 40 px dan kichik bo'lmasin. */
@media (max-width: 480px) {
  .page { padding: var(--s4); }
  .toolbar, .filters, .chips, .pagination { padding-left: var(--s4); padding-right: var(--s4); }
  .toolbar > .chips { padding-left: 0; padding-right: 0; }
  .card__head { padding: var(--s4) var(--s4) 0; }
  .card__body { padding: var(--s4); }
  .record-card { padding: var(--s4); }
  .form-section + .form-section { margin-top: var(--s4); padding-top: var(--s4); }

  .grid--kpi, .grid--kpi-5 { --kpi-min-h: 92px; }
  .kpi { padding: 12px; column-gap: 10px; }
  .kpi__icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; }
  .kpi__icon svg { width: 16px; height: 16px; }
  .kpi__value { font-size: 20px; }
  .kpi__label {
    /* Tor kartada uzun yorliq kesilmasin — ikki qatorga tushsin */
    white-space: normal; overflow-wrap: anywhere; letter-spacing: .03em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .kpi--click .kpi__label { padding-right: 0; }
  .kpi__go { display: none; }          /* 375 px da burchak qimmat */
  .kpi__hint { -webkit-line-clamp: 1; }

  /* Bosish nishonlari — barmoq uchun kamida 40 px */
  .btn, .btn--sm { height: 40px; }
  .btn--icon { width: 40px; }
  .icon-btn, .icon-btn--sm, .toolbar .icon-btn { width: 40px; height: 40px; }
  .input, .select, .textarea { min-height: 40px; }
  .toolbar__search .input { height: 40px; min-height: 40px; }
  .filters .input, .filters .select { min-height: 40px; }
  .page-btn { min-width: 40px; height: 40px; }
  /* Sahifa o'lchami tanlovi lib.js da inline uslub bilan 34 px qilingan —
     telefonda barmoq uchun kichik, shuning uchun shu yerda bosiladi */
  .pagination .select { min-height: 40px !important; }
  .donut-row { min-height: 40px; }
  .section-nav__item { min-height: 40px; }
  .switch__row { padding: 12px 0; }
  .chip { height: 36px; }
  .chip button, .chip__x { width: 24px; height: 24px; flex: 0 0 24px; }
  .toolbar__search { flex: 1 1 100%; max-width: none; }
  .toolbar__lead { flex: 1 0 100%; }
  .toolbar__right { margin-left: 0; width: 100%; justify-content: flex-start; }
  .toolbar__right .btn { flex: 1 1 auto; }
  .nav__item { height: 44px; }
  .section-nav__item { min-height: 44px; }
}

@media print {
  .sidebar, .topbar, .page__actions, .toolbar, .pagination, .toasts { display: none !important; }
  .main { margin-left: 0; }
  body { background: #fff; color: #000; }
  .card { border-color: #ccc; box-shadow: none; background: #fff; }
}

/* Harakatni kamaytirish so'ralganda — hamma narsa QIMIRLAMAYDI:
   animatsiya ham, o'tish ham, "ko'tarilish" ham, silliq aylantirish ham. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important; transition-delay: 0ms !important;
  }
  html { scroll-behavior: auto !important; }
  .kpi--click:hover, .btn:active, .breadcrumb .back-btn:hover,
  .breadcrumb .back-btn:active, .icon-btn:active { transform: none !important; }
  .breadcrumb .back-btn:hover .back-btn__icon,
  .kpi__go, .kpi--click:hover .kpi__go { transform: none !important; }
  .skeleton { animation: none !important; background: var(--skeleton-1) !important; }
}



/* ======================================================================
   LIVE GPS EKRANI — maketdagi to'liq ekranli xarita va suzuvchi panellar
   ====================================================================== */
/* Bu ekranda sahifa o'z chekkasini bermaydi: xarita butun maydonni
   egallaydi, panellar esa uning ustida "suzib" turadi. */
.page--map {
  padding: 0; display: flex; flex-direction: column; gap: 0;
  height: calc(100vh - var(--topbar-h));
  /* `clip`, `hidden` emas: `hidden` aylantirgich yaratadi va fokus
     ichkaridagi elementga tushganda brauzer blokni ICHIDAN surib
     yuborishi mumkin (xarita joyidan qimirlaydi). `clip` bunday qilmaydi.
     Eslatma: jonli GPS ekrani `.page--gps` (gps.css) sinfini ishlatadi —
     u boshqa faylda, shuning uchun bu yerda tegilmagan. */
  overflow: clip;
  background: var(--map-shell);
}
/* isolation: xarita ustidagi panellar (z-index 500) faqat xarita ichida
   ustun turadi — avval ular modal oyna, bildirishnomalar paneli va
   telefondagi menyu ustiga chiqib qolardi. */
.mapscreen { position: relative; flex: 1 1 auto; min-height: 340px; overflow: hidden;
             isolation: isolate; }
.mapscreen__canvas { position: absolute; inset: 0; }
.mapscreen__canvas .leaflet-container { width: 100%; height: 100%; background: var(--map-bg); }

.mapfloat { position: absolute; z-index: 500; }
/* Leaflet'ning +/- tugmalari chapdagi panel ostida qolib ketmasligi uchun
   surib qo'yiladi; ro'yxat yopilsa chekkaga qaytadi. */
.page--map .leaflet-top.leaflet-left { margin-left: 346px; margin-top: 4px; }
.gps-list-off .page--map .leaflet-top.leaflet-left { margin-left: 4px; }

/* Panellar yopilganda ularning o'rnida qoladigan tugmalar */
.mapfloat--reopen { top: 16px; left: 16px; }
.mapfloat--reopen-right { top: 16px; right: 16px; }
.page--map .leaflet-control-zoom a {
  border-radius: 9px !important; width: 30px; height: 30px; line-height: 30px;
  border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(7, 27, 51, .12);
}
.page--map .leaflet-control-zoom { border: 0; box-shadow: none; }
/* Panellar xarita maydonidan tashqariga chiqmasligi kerak: balandlik
   cheklanadi, ichidagi ro'yxat esa o'zi aylanadi. Aks holda uzun ro'yxat
   pastdagi vaqt chizig'ini yopib qo'yadi. */
.mapfloat--left {
  top: 16px; left: 16px; width: 330px;
  max-height: calc(100% - 32px); display: flex;
}
.mapfloat--right {
  top: 16px; right: 16px; width: 300px;
  max-height: calc(100% - 32px); display: flex;
}
.mapfloat--left > .mapcard, .mapfloat--right > .mapcard {
  max-height: 100%; width: 100%;
}
.mapfloat--tools { top: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }

.mapcard {
  background: var(--card); border-radius: 16px; border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; overflow: hidden;
}
.mapcard__head {
  display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px;
}
.mapcard__title { font-size: var(--fs-card); font-weight: 700; }
.mapcard__close {
  margin-left: auto; width: 26px; height: 26px; border-radius: 8px;
  border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center;
}
.mapcard__close:hover { background: var(--card-2); color: var(--ink); }
.mapcard__close svg { width: 15px; height: 15px; }

/* --- chip filtrlari (Barchasi 8 · Yo'lda 4 · …) ---
   Chip KO'RINISHI endi §8 da, bitta joyda (avval shu yerdagi nusxa
   ro'yxatlardagi "filtr chipi"ni ham bosib ketardi). Bu yerda faqat
   xarita panelidagi JOYLASHUVI — panel ichi tor. */
.mapcard .chips { flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.mapcard .chip { height: 26px; padding: 0 9px; gap: 4px; }

/* --- avtomobil ro'yxati --- */
/* To'rtta chip bitta qatorga sig'ishi uchun panel ichida biroz ixcham */
.mapfloat--left .chips { gap: 4px; }
.mapfloat--left .chip { padding: 0 8px; font-size: 10.5px; }

.vsearch { padding: 0 14px 10px; position: relative; }
.vsearch input {
  width: 100%; height: 34px; padding: 0 12px 0 32px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--field-bg);
  font-size: var(--fs-meta);
}
.vsearch svg {
  position: absolute; left: 24px; top: 9px; width: 15px; height: 15px; color: var(--ink-3);
}
.vlist { overflow-y: auto; flex: 1 1 auto; min-height: 90px; padding: 0 8px 8px; }
.vrow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px; border-radius: 12px; border: 0; background: transparent;
  cursor: pointer; text-align: left;
}
.vrow:hover { background: var(--row-hover); }
.vrow[aria-selected="true"] { background: var(--blue-soft); }
.vrow__icon {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 32px;
  display: grid; place-items: center;
}
.vrow__icon svg { width: 16px; height: 16px; }
.vrow__main { min-width: 0; flex: 1 1 auto; }
.vrow__plate { font-size: var(--fs-table); font-weight: 700; display: block; }
.vrow__driver {
  font-size: var(--fs-meta); color: var(--ink-2); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vrow__side { text-align: right; flex: 0 0 auto; max-width: 128px; }
.vrow__speed {
  font-size: var(--fs-meta); font-weight: 600; display: flex;
  align-items: center; gap: 5px; justify-content: flex-end;
}
.vrow__route {
  font-size: 10.5px; color: var(--ink-3); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- xarita ustidagi tugmalar --- */
.maptool {
  display: inline-flex; align-items: center; gap: 7px; height: 36px;
  padding: 0 13px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--card); box-shadow: 0 8px 22px rgba(7, 27, 51, .14);
  font-size: var(--fs-meta); font-weight: 600; color: var(--ink);
  cursor: pointer; white-space: nowrap;
}
.maptool svg { width: 15px; height: 15px; color: var(--ink-2); }
.maptool:hover { background: var(--card-2); }
.maptool--square { width: 36px; padding: 0; justify-content: center; }
.maptool .switch__track { width: 30px; height: 17px; }
.maptool .switch__track::after { width: 11px; height: 11px; }
.maptool .switch input:checked + .switch__track::after { transform: translateX(13px); }

/* --- o'ng tafsilot paneli --- */
.vdetail__tabs {
  display: flex; gap: 4px; padding: 0 12px 10px;
}
.vdetail__tab {
  flex: 1 1 0; height: 28px; border-radius: 8px; border: 0;
  background: transparent; color: var(--ink-2);
  font-size: var(--fs-meta); font-weight: 600; cursor: pointer;
}
.vdetail__tab[aria-selected="true"] { background: var(--blue-soft); color: var(--blue-ink); }
.vdetail__body {
  padding: 0 14px 14px; display: grid; gap: 12px;
  overflow-y: auto; min-height: 0;
}
.vdetail__driver {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
}
.vdetail__driver .avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px; }
.vdetail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.vdetail__cell--wide { grid-column: 1 / -1; }
.vdetail__label {
  font-size: 10.5px; color: var(--ink-3); text-transform: none; margin-bottom: 2px;
}
.vdetail__value { font-size: var(--fs-table); font-weight: 600; }
.vdetail__load { display: flex; align-items: center; gap: 12px; }
.vdetail__load > div { min-width: 0; }
.vdetail__service {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: 12px; background: var(--card-2); border: 0; width: 100%;
  cursor: pointer; text-align: left;
}
.vdetail__service:hover { background: var(--blue-soft); }
.vdetail__service .card__icon { width: 30px; height: 30px; flex: 0 0 30px; }
.vdetail__service .card__icon svg { width: 15px; height: 15px; }
.vdetail__service > svg:last-child { margin-left: auto; width: 15px; color: var(--ink-3); }

/* Kichik doiraviy ko'rsatkich (yuklanish foizi) */
.ring { position: relative; width: 62px; height: 62px; flex: 0 0 62px; }
.ring svg { transform: rotate(-90deg); width: 62px; height: 62px; }
.ring__bg { stroke: var(--track); }
.ring__val { stroke-linecap: round; transition: stroke-dasharray .4s var(--ease); }
.ring__text {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}

/* ======================================================================
   BUGUNGI OPERATSIYALAR — vaqt chizig'i (Gantt)
   ====================================================================== */
.mapscreen__bottom {
  flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px; padding: 14px; background: var(--map-shell);
  height: clamp(232px, 29vh, 310px);
  transition: height .25s var(--ease);
}
/* Yig'ilgan holat: faqat sarlavha qatori ko'rinadi */
.page--map-wide .mapscreen__bottom { height: 74px; padding-bottom: 0; }
.page--map-wide .tl__legend,
.page--map-wide .tl__axis,
.page--map-wide .tl__rows,
.page--map-wide .notifcard__list { display: none; }
.page--map-wide .notifcard { opacity: .9; }
.tl { background: var(--card); border-radius: 16px; overflow: hidden; display: flex;
      flex-direction: column; }
.tl__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.tl__head .card__sub { font-size: 10.5px; }
.tl__chips { padding: 0; flex: 1 1 auto; justify-content: flex-end; }
.tl__chips .chip { height: 24px; padding: 0 8px; font-size: 10.5px; }

/* Izoh — qaysi rang nimani anglatadi */
.tl__legend {
  display: flex; flex-wrap: wrap; gap: 14px; padding: 0 14px 8px;
  font-size: 10.5px; color: var(--ink-2);
}
.tl__legend span { display: inline-flex; align-items: center; gap: 5px; }
.tl__dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.tl__dot--done { background: var(--green); }
.tl__dot--progress { background: var(--blue); }
.tl__dot--late { background: var(--amber); }
.tl__dot--pending { background: var(--blue-pale); }
.tl__now { margin-left: auto; text-align: right; font-size: 10.5px; color: var(--ink-3); }
.tl__now b { display: block; font-size: var(--fs-table); color: var(--ink); }
.tl__axis {
  display: flex; padding: 0 14px; font-size: 10px; color: var(--ink-3);
  margin-left: 160px; position: relative;
}
.tl__axis span { flex: 1 1 0; }
.tl__rows { padding: 4px 14px 12px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.tl__row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tl__label { width: 150px; flex: 0 0 150px; display: flex; align-items: center; gap: 8px; }
.tl__label .vrow__icon { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; }
.tl__label .vrow__icon svg { width: 13px; height: 13px; }
.tl__label b { font-size: 11.5px; display: block; }
.tl__label span { font-size: 10px; color: var(--ink-3); display: block; }
/* Bajarilish darajasi — "3 / 4 manzil" ostidagi ingichka chiziq */
.tl__progress {
  display: block; height: 3px; border-radius: 2px; background: var(--track);
  margin-top: 4px; overflow: hidden;
}
.tl__progress i { display: block; height: 100%; border-radius: 2px; }
.tl__track {
  position: relative; flex: 1 1 auto; height: 26px; border-radius: 8px;
  background: var(--track); overflow: hidden;
}
.tl__seg {
  position: absolute; top: 3px; bottom: 3px; border-radius: 6px;
  display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: var(--on-accent);
  min-width: 18px; cursor: help; transition: opacity .15s var(--ease);
}
.tl__seg:hover { filter: brightness(1.08); }
.tl__seg.is-dim { opacity: .22; }
.tl__seg--done { background: var(--green-strong); }
.tl__seg--progress { background: var(--blue-strong); }
.tl__seg--pending { background: var(--blue-pale); }
.tl__seg--late { background: var(--amber-strong); }
.tl__nowline {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 2px dashed var(--red); z-index: 2; opacity: .75;
}

/* Bildirishnomalar kartasi (xarita ostida) */
.notifcard { background: var(--card); border-radius: 16px; display: flex;
             flex-direction: column; overflow: hidden; }
.notifcard__list { overflow-y: auto; padding: 0 10px 10px; flex: 1 1 auto; min-height: 0; }
.notifrow {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  padding: 8px; border-radius: 10px; border: 0; background: transparent;
  cursor: pointer; text-align: left;
}
.notifrow:hover { background: var(--card-2); }
.notifrow__icon {
  width: 28px; height: 28px; border-radius: 9px; flex: 0 0 28px;
  display: grid; place-items: center;
}
.notifrow__icon svg { width: 14px; height: 14px; }
.notifrow__body { min-width: 0; flex: 1 1 auto; }
.notifrow__title { font-size: 11.5px; font-weight: 700; display: block; }
.notifrow__text {
  font-size: 10.5px; color: var(--ink-2); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notifrow__time { font-size: 10px; color: var(--ink-3); flex: 0 0 auto; }

@media (max-width: 1180px) {
  .mapfloat--right { display: none; }
  .mapscreen__bottom { grid-template-columns: 1fr; }
  .notifcard { display: none; }
}
@media (max-width: 900px) {
  .page--map { height: auto; overflow: visible; background: var(--bg); }
  /* Telefon/planshet: xarita tepada (420 px), avtomobillar ro'yxati uning
     OSTIDA. Avval ro'yxat xarita ichida qolib, xaritani to'sardi. */
  .mapscreen { height: auto; flex: 0 0 auto; overflow: visible;
               display: flex; flex-direction: column; }
  .mapscreen__canvas { position: relative; inset: auto; height: 420px; }
  .mapfloat--left { position: static; order: 2; width: auto; max-height: none; margin: 12px; }
  .mapfloat--left .mapcard { box-shadow: none; }
  .page--map .leaflet-top.leaflet-left { margin-left: 4px; }
}
@media (max-width: 600px) {
  /* Xarita tugmalari bir qatorda, ekrandan chiqmaydi (kerak bo'lsa suriladi) */
  .mapfloat--tools {
    top: 10px; left: 52px; right: 10px; transform: none;
    overflow-x: auto; scrollbar-width: none;
  }
  .mapfloat--tools::-webkit-scrollbar { display: none; }
  .mapfloat--tools .maptool { flex: 0 0 auto; }
  /* Vaqt o'qi: tor ekranda soatlar bir-biriga yopishardi ("07:0009:00") —
     har ikkinchisi yashiriladi (joyi saqlanadi) */
  .tl__axis > span:nth-child(even) { visibility: hidden; }
}


/* ======================================================================
   HAYDOVCHILAR — maketdagi kunlik faollik chizig'i, hujjatlar, reyting
   ====================================================================== */
.daybar { margin-bottom: 6px; }
.daybar__track {
  position: relative; height: 26px; border-radius: 8px;
  background: var(--track); overflow: hidden;
}
.daybar__seg { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; }
.daybar__axis {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-size: 10px; color: var(--ink-3);
}
.daybar__legend {
  display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-meta);
  color: var(--ink-2);
}
.daybar__legend span { display: inline-flex; align-items: center; gap: 5px; }

.doclist { display: grid; gap: 8px; }
.doclist__row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 11px; background: var(--card-2);
}
.doclist__row .card__icon { width: 30px; height: 30px; flex: 0 0 30px; }
.doclist__row .card__icon svg { width: 15px; height: 15px; }
.doclist__row b { font-size: var(--fs-meta); font-weight: 600; display: block; }
.doclist__row span span { font-size: 10.5px; color: var(--ink-2); }
.doclist__row > svg:last-child { margin-left: auto; width: 15px; color: var(--green-ink); }

/* Jadvaldagi odam ustuni (avatar + ism) */
.cell-person { display: flex; align-items: center; gap: 9px; }
.cell-person small, .cell-person .strong { white-space: nowrap; }
.avatar--sm { width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px; }

.rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
/* Yulduz — MATN belgisi: `--amber` (#F59E0B) oq fonda 2.15:1 berardi.
   `--amber-ink` 5.02:1 — rang biroz to'qroq, lekin o'qiladi. */
.rating__star { color: var(--amber-ink); font-size: 13px; line-height: 1; }


/* ======================================================================
   MARSHRUT REJALASHTIRISH — maketdagi uch ustunli ekran
   ====================================================================== */
.modal--full { width: min(1400px, 100%); }
.planner {
  display: grid; grid-template-columns: 290px minmax(0, 1fr) 290px;
  gap: 14px; height: clamp(340px, 50vh, 500px);
}
.planner__col {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.planner__head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.planner__head .card__title { font-size: var(--fs-card); }
.planner__scroll { overflow-y: auto; padding: 10px; flex: 1 1 auto; min-height: 0; }
.planner__map {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  position: relative; min-height: 0;
}
.planner__map .leaflet-container { width: 100%; height: 100%; }
.planner__foot { padding: 12px 14px; border-top: 1px solid var(--line-soft); }

/* Raqamlangan manzil qatori */
.stoprow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px; border-radius: 11px; border: 0; background: transparent;
  text-align: left; cursor: pointer;
}
.stoprow:hover { background: var(--row-hover); }
.stoprow__num {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px;
  background: var(--blue-strong); color: var(--on-accent); font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.stoprow__body { min-width: 0; flex: 1 1 auto; }
.stoprow__body b {
  font-size: var(--fs-meta); font-weight: 600; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stoprow__body span {
  font-size: 10.5px; color: var(--ink-2); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stoprow__time { font-size: 10.5px; color: var(--ink-3); flex: 0 0 auto; }
.stoprow__move { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.stoprow__move .icon-btn { width: 20px; height: 18px; border-radius: 6px; }
.stoprow__move .icon-btn svg { width: 11px; height: 11px; }

/* Tor ustunda buyurtma tanlash qatorlari ixcham ko'rinadi */
.planner__scroll .stop {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px;
  border-radius: 10px; margin-bottom: 6px; border: 1px solid var(--line);
}
.planner__scroll .stop .pill { display: none; }
.planner__scroll .stop .strong { font-size: var(--fs-meta); }
.planner__scroll .stop .hint { font-size: 10.5px; }
.planner__scroll .stop input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; }

/* Natija qatorlari (Masofa · Vaqt · Yuk …) */
.resultrow {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.resultrow:last-child { border-bottom: 0; }
.resultrow .card__icon { width: 32px; height: 32px; flex: 0 0 32px; }
.resultrow .card__icon svg { width: 15px; height: 15px; }
.resultrow__label { font-size: 10.5px; color: var(--ink-3); }
.resultrow__value { font-size: var(--fs-table); font-weight: 700; }

/* Xaritadagi raqamlangan manzil belgisi — "tomchi" shaklida */
.pinmark {
  width: 28px; height: 28px; border-radius: 50% 50% 50% 0;
  background: var(--pin, var(--blue-strong)); border: 2px solid var(--card);
  box-shadow: 0 4px 12px rgba(7, 27, 51, .32);
  transform: rotate(-45deg); display: grid; place-items: center;
  margin: 2px 0 0 1px;
}
.pinmark span {
  transform: rotate(45deg); color: var(--on-accent); font-size: 11px; font-weight: 700;
  line-height: 1;
}
/* `maps.js` bu belgining rangini inline `--pin` bilan beradi (hali
   tokenlashtirilmagan): "bajarildi" holatida #22C55E chiqib, ustidagi oq
   raqam 2.28:1 bo'lib qolardi. Shu holat uchun to'ldirilgan yashil. */
.pinmark--done { background: var(--green-strong); }
/* Manzil holati (BL.stopState) — rang izohi xarita ostida (.route-legend).
   Belgi xaritada turadi (yorug' plitka) — oq raqam ikkala mavzuda o'qilsin */
.pinmark--gps { background: var(--green-strong); }
.pinmark--delivered { background: color-mix(in srgb, var(--chart-6) 78%, #000); }
.pinmark--pending { background: var(--blue-strong); }
.pinmark--failed { background: var(--red-strong); }
.pinmark--off { background: color-mix(in srgb, var(--muted) 70%, #000); opacity: .75; }

@media (max-width: 1100px) {
  .planner { grid-template-columns: 1fr; height: auto; }
  .planner__map { height: 320px; }
}


/* ======================================================================
   HISOBOT JADVALI USTIDAGI BOSHQARUV — kesim, sana oralig'i, eksport
   ====================================================================== */
.report-export { display: flex; gap: 8px; }
.report-export .btn svg { width: 15px; height: 15px; }
/* Telefonda: sarlavha to'liq kenglikda, eksport tugmalari uning ostida;
   "qatorni bosing" izohi kerak emas (qatorlar karta ko'rinishida) */
@media (max-width: 600px) {
  .card__head:has(.report-export) { flex-wrap: wrap; }
  .card__head .report-export { margin-left: 0; }
  .report-hint { display: none; }
}

.report-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 12px var(--s5); border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft); background: var(--card-3);
}

/* Kunlik | Haftalik | Oylik */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px;
  background: var(--muted-soft);
}
.segmented__item {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 14px; border-radius: 8px;
  font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2);
}
.segmented__item:hover { color: var(--ink); }
.segmented__item[aria-pressed="true"] {
  background: var(--card); color: var(--blue-ink);
  box-shadow: 0 1px 4px rgba(7, 27, 51, .12);
}

/* Boshlanish — Tugash (kalendar) */
.report-range { display: flex; align-items: flex-end; gap: 8px; }
.report-range__field { display: flex; flex-direction: column; gap: 3px; }
.report-range__field > span {
  font-size: 10px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .3px;
}
.input--date { height: 34px; padding: 0 10px; width: 150px; font-size: var(--fs-meta); }
.report-range__dash { color: var(--ink-3); padding-bottom: 8px; }

.report-toolbar__group { display: flex; align-items: center; gap: 10px; }
.report-toolbar__label {
  font-size: 10px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .3px;
}

@media (max-width: 900px) {
  .input--date { width: 136px; }
}


/* Moslik qatlami (15-bo'lim) OLIB TASHLANDI: dashboard/gps/ops/orders/
   records/reports.css endi to'liq token bilan ishlaydi, ya'ni to'q ko'k
   mavzuda ranglar o'z joyidan keladi. Bu yerga yangi "tuzatuvchi" qoida
   qo'shilmaydi — rang faqat mavzu bloklarida (1a/1b) e'lon qilinadi. */

/* --- Mavzu tugmasi (topbarda, soat yonida) ---------------------------
   Ikki holatli ixcham tanlagich. Yoqilgani `aria-pressed` bilan
   belgilanadi: to'ldirilgan yuza + to'q ikonka (faqat rang emas). */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
  padding: 3px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--line);
}
.theme-toggle__btn {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-2);
  transition: background var(--t, 140ms) ease-out, color var(--t, 140ms) ease-out;
}
.theme-toggle__btn svg { width: 17px; height: 17px; }
.theme-toggle__btn:hover { background: var(--row-hover); color: var(--ink); }
.theme-toggle__btn:focus-visible { outline: 2px solid var(--focus, var(--blue)); outline-offset: 2px; }
.theme-toggle__btn[aria-pressed="true"] {
  background: var(--card); color: var(--blue-ink, var(--blue));
  box-shadow: var(--shadow-card);
}

@media (max-width: 720px) {
  /* Telefonda soat yashiringan — tugma qoladi, lekin ixchamroq */
  .theme-toggle__btn { width: 40px; height: 40px; }
  .theme-toggle { padding: 2px; }
  /* Telefonda topbar bitta qatorda qolishi SHART: o'ng guruh siqilmaydi
     va o'ralmaydi (aks holda profil chipi chetdan chiqib ketardi),
     qidiruv esa qolgan joyni oladi. */
  .topbar { padding: 0 var(--s3); gap: var(--s1); }
  .topbar__right { flex: 0 0 auto; flex-wrap: nowrap; gap: var(--s1); }
  .search { flex: 1 1 auto; min-width: 88px; }
  .search input { padding-right: var(--s3); }
  /* Barmoq uchun kamida 40 px (topbardagi selektor `.icon-btn` dan
     kuchliroq bo'lgani uchun bu yerda ham aniq yoziladi) */
  .topbar .icon-btn { width: 40px; height: 40px; }
  .search input { height: 40px; }
  .profile { height: 40px; }
  .avatar { width: 32px; height: 32px; flex: 0 0 32px; }
}

@media (prefers-reduced-motion: reduce) { .theme-toggle__btn { transition: none; } }

/* ======================================================================
   16. MIKRO-ANIMATSIYALAR — sichqoncha olib borilganda

   Mijoz talabi: "tugmaning ustiga olib borganda rangli animatsiya
   bo'lsin". Qoidalar:
     · rang HAR DOIM mavzudan (light/navy) olinadi — qattiq yozilmaydi;
     · harakat qisqa (160-620 ms) va bir marta — diqqatni chalg'itmaydi;
     · ma'no faqat animatsiya bilan berilmaydi (u bezak, xabar emas);
     · `prefers-reduced-motion` yoqilgan bo'lsa — harakat yo'q, faqat
       rang o'zgaradi (bosh aylanishiga moyil odamlar uchun).
   ====================================================================== */

:root {
  --fx: 170ms cubic-bezier(.2, .7, .3, 1);   /* qisqa, yumshoq */
  --fx-sweep: 620ms cubic-bezier(.25, .8, .3, 1);
}

/* --- 1. To'ldirilgan tugmalar: yorug' "yaltirash" o'tadi -------------- */
.btn--primary,
.btn--danger,
.btn--success {
  overflow: hidden;              /* yaltirash tugma ichida qoladi */
  isolation: isolate;
}
.btn--primary::after,
.btn--danger::after,
.btn--success::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg,
              transparent 18%,
              color-mix(in srgb, #fff 34%, transparent) 46%,
              transparent 74%);
  transform: translateX(-130%);
  transition: transform var(--fx-sweep);
  pointer-events: none;
}
.btn--primary:hover::after,
.btn--danger:hover::after,
.btn--success:hover::after { transform: translateX(130%); }
.btn--primary > *, .btn--danger > *, .btn--success > * { position: relative; z-index: 1; }

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, .08),
              0 12px 26px -12px color-mix(in srgb, var(--blue) 72%, transparent);
}
.btn--danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, .08),
              0 12px 26px -12px color-mix(in srgb, var(--red) 72%, transparent);
}
.btn--success:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, .08),
              0 12px 26px -12px color-mix(in srgb, var(--green) 72%, transparent);
}

/* Bosilganda: qisqa "cho'kish" */
.btn--primary:active, .btn--danger:active, .btn--success:active {
  transform: translateY(0) scale(.985);
}

/* --- 2. Oddiy tugmalar: ostidan rangli chiziq o'sadi ------------------ */
.btn:not(.btn--primary):not(.btn--danger):not(.btn--success)::before {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--blue);
  transition: left var(--fx), right var(--fx), opacity var(--fx);
  opacity: 0; pointer-events: none;
}
.btn:not(.btn--primary):not(.btn--danger):not(.btn--success):hover::before {
  left: 12%; right: 12%; opacity: 1;
}
.btn:not(.btn--primary):not(.btn--danger):not(.btn--success):hover {
  color: var(--blue-ink, var(--blue));
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
}
.btn:disabled::before, .btn[aria-disabled="true"]::before { content: none; }
.btn:disabled::after, .btn[aria-disabled="true"]::after { content: none; }

/* --- 3. Ikonka tugmalari: markazdan rangli doira yoyiladi ------------- */
.icon-btn { position: relative; overflow: hidden; }
.icon-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at center,
              color-mix(in srgb, var(--blue) 22%, transparent) 0%,
              transparent 72%);
  opacity: 0; transform: scale(.55);
  transition: opacity var(--fx), transform var(--fx);
  pointer-events: none;
}
.icon-btn:hover::before { opacity: 1; transform: scale(1); }
.icon-btn:hover { color: var(--blue-ink, var(--blue)); }
.icon-btn > * { position: relative; }

/* --- 4. Chap menyu: rangli chiziq chapdan suriladi -------------------- */
.nav__item { position: relative; overflow: hidden; }
.nav__item::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--blue);
  transform: translateX(-100%); opacity: 0;
  transition: transform var(--fx), opacity var(--fx);
}
.nav__item:hover::before { transform: translateX(0); opacity: 1; }
.nav__item[aria-current="page"]::before { content: none; }   /* faol element o'z ko'rinishiga ega */
.nav__item:hover svg { opacity: 1; transform: translateX(1px); transition: transform var(--fx); }

/* --- 5. Bosiladigan KPI kartasi: burchakdan rangli yorug'lik ---------- */
.kpi--click::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 90% at 100% 0%,
              color-mix(in srgb, var(--kpi-tone, var(--blue)) 16%, transparent) 0%,
              transparent 58%);
  opacity: 0; transition: opacity var(--fx); pointer-events: none;
}
.kpi--click:hover::before { opacity: 1; }
.kpi--info  { --kpi-tone: var(--blue); }
.kpi--ok    { --kpi-tone: var(--green); }
.kpi--warn  { --kpi-tone: var(--amber); }
.kpi--crit  { --kpi-tone: var(--red); }
.kpi--muted { --kpi-tone: var(--ink-2); }
.kpi--click:hover .kpi__go { transform: translateX(2px); }
.kpi__go { transition: transform var(--fx), opacity var(--fx); }

/* --- 6. Jadval qatori: chapda rangli chiziq o'sadi -------------------- */
.table tbody tr { position: relative; }
.table tbody tr::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--blue); transform: scaleY(0); transform-origin: center;
  transition: transform var(--fx); pointer-events: none;
}
.table tbody tr:hover::after { transform: scaleY(1); }

/* --- 7. Chip va tab: rang yumshoq o'zgaradi --------------------------- */
.chip, .segmented__item, .section-nav__item {
  transition: background var(--fx), color var(--fx), border-color var(--fx);
}
.section-nav__item:hover { color: var(--blue-ink, var(--blue)); }

/* --- 8. Harakat kerak bo'lmaganda (tizim sozlamasi) ------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn--primary::after, .btn--danger::after, .btn--success::after { content: none; }
  .btn--primary:hover, .btn--danger:hover, .btn--success:hover,
  .btn--primary:active, .btn--danger:active, .btn--success:active { transform: none; }
  .icon-btn::before, .nav__item::before, .kpi--click::before { transition: none; }
  .table tbody tr::after { transition: none; }
  .nav__item:hover svg { transform: none; }
  .btn:not(.btn--primary):not(.btn--danger):not(.btn--success)::before {
    transition: opacity var(--fx);
  }
}

/* Sozlamalar → Linko buyurtmalari */
.linko-branches {
  display: grid; gap: 6px 16px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.linko-branch { min-width: 0; }
.linko-rules { margin: 0; padding-left: 18px; display: grid; gap: 6px;
  color: var(--ink-2); font-size: var(--fs-meta); }

/* Yangi versiya tayyor — foydalanuvchi band paytida (static/js/app.js checkBuild).
   Ochiq oyna (modal, z-index 120) ortida qoladi — uning tugmalarini to'smaydi */
.upd-bar {
  position: fixed; bottom: 18px; left: 50%; z-index: 110; display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 32px); padding: 10px 12px 10px 14px; transform: translateX(-50%);
  border: 1px solid var(--blue-line); border-radius: 14px; background: var(--card);
  box-shadow: var(--shadow-pop); color: var(--ink); font-size: var(--fs-body); font-weight: 600;
}
.upd-bar svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--blue); }
.upd-bar .btn { flex: 0 0 auto; }