/* BuildOps — umumiy dizayn tizimi (CSS).
   2026-10-10 (tezlik): ilgari templates/partials/theme.html ichida HAR
   SAHIFAGA joylab yuborilardi (~190 KB, keshlanmasdi). Endi statik fayl —
   brauzer bir marta yuklab keshda saqlaydi; URL'dagi ?v= fayl xeshi
   (worker_i18n.statik_v) — o'zgarganda eski nusxa qolib ketmaydi.
   Kompaniya urg'u rangi (--primary...) theme.html'da inline qoladi.
   DIQQAT: bu yerda Django teglari ISHLAMAYDI (oddiy CSS). */
  /* ============================================================
     BuildOps — "Site Office" design system
     Light content canvas · dark navigation rail · teal + amber
     ============================================================ */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    background: var(--canvas);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: -0.003em;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  a { color: inherit; text-decoration: none; }

  /* Numeric / tabular data keeps the mono face */
  .num, table .num, .stat-value, .metric {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  ::selection { background: var(--primary-line); color: var(--primary-ink); }

  /* ============================================================
     APP SHELL
     ============================================================ */

  body.app { display: flex; min-height: 100vh; }

  .rail-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(2px);
    z-index: 30;
  }

  /* 2026-10-13 (Shohzod: "sidebar eni umuman qisqarmagan"): 244px -> 214px.
     Eng uzun band nomi (ru "Финансовое состояние", ~165px matn) ikona va
     yangi ichki chekkalar bilan ~212px — 214px'ga bitta qatorda sig'adi. */
  .rail {
    width: 214px;
    flex-shrink: 0;
    background: var(--rail);
    background-image: linear-gradient(180deg, #142032 0%, var(--rail) 42%, #0C131D 100%);
    border-right: 1px solid var(--rail-border);
    display: flex;
    flex-direction: column;
    padding: 16px 0 12px;
    /* position:sticky + height:100vh — sahifa uzun bo'lib, pastga surilganda
       ham chap navigatsiya doim ekranda qolishi uchun (avval bu yo'q edi:
       .rail body bilan birga cho'zilib, pastga surilganda butunlay
       ko'rinmay qolardi). Agar nav ro'yxati ekrandan uzun bo'lsa, o'zi
       ichida mustaqil scroll qiladi. */
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* --- Brand --- */
  .rail-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 16px 16px;
    /* 2026-09-30dagi so'rov: ".rail-profile" endi DARHOL shu blokdan
       keyin keladi — ilgari margin-bottom 16px edi (keyingi element
       nav-group bo'lganida mos edi), lekin profil bloki o'zining ham
       padding-top'iga ega bo'lgani uchun ikkalasi qo'shilib "profil
       tepasida ortiqcha bo'sh joy" hosil qilardi. Endi 4px — atigi
       nafas oladigan farq, ortiqcha bo'shliqsiz. */
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rail-border);
  }
  /* 36px — topbar'dagi bell/hamburger/avatar bilan bir xil "chrome" pog'onasi */
  .brand-mark {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: var(--r-md);
    background: linear-gradient(145deg, var(--primary-top) 0%, var(--primary) 55%, var(--primary-ink) 100%);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb),0.34), inset 0 1px 0 rgba(255,255,255,0.22);
    display: flex; align-items: center; justify-content: center;
  }
  .brand-mark svg { width: 18px; height: 18px; display: block; }
  /* 2026-08-22dagi so'rov: kompaniya o'z logotipini yuklagan bo'lsa
     (partials/brand_mark.html), shu belgi ichida to'liq to'ldirib
     ko'rsatiladi — o'lchami/burchagi qanday bo'lishidan qat'iy nazar
     belgining o'zi bilan bir xil kvadrat/burchak ko'rinishda qoladi. */
  .brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
  .brand-name {
    font-size: 15.5px; font-weight: 700; letter-spacing: -0.2px;
    color: var(--rail-text-strong); line-height: 1.2;
    /* Kompaniya nomi "BuildOps"dan uzunroq bo'lishi mumkin — yon panel
       torligicha qolishi uchun bitta qatorda kesib ko'rsatiladi. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 134px;
  }
  .brand-sub {
    font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--rail-text); margin-top: 2px; font-weight: 500;
    /* 2026-10-05: o'zbekcha "TA'MINOTCHI PANELI"/"DIREKTOR PANELI" ikki
       qatorga o'tib, butun sidebar (profil bloki ham) 14px pastga
       siljirdi — ruscha/inglizchada esa siljimasdi. Nom kabi bitta
       qatorda kesib ko'rsatiladi (to'liq matn `title`da). */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 134px;
  }

  /* --- Nav --- */
  .nav-group { margin-bottom: 20px; display: flex; flex-direction: column; }
  /* 2026-10-13 (Shohzod: "sidebardagi yozuvlar shrifti normalmi?"): guruh
     sarlavhasi 9.5px edi — bosh harflar va keng oraliq bilan ham juda
     mayda, ayniqsa kichik ekranda. 10.5px — band nomlaridan (13px) hamon
     aniq kichik, lekin bemalol o'qiladi. */
  .nav-label {
    font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
    color: #6B7C91; padding: 0 16px; margin-bottom: 8px;
  }
  .nav-item {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    margin: 2px 6px;
    padding: 8px 10px; min-height: var(--control-h-sm);
    border-radius: var(--r-md);
    color: var(--rail-text);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .nav-item:hover { background: var(--rail-2); color: var(--rail-text-strong); }
  .nav-item:focus-visible { outline: none; box-shadow: var(--ring-rail); color: var(--rail-text-strong); }
  .nav-item.active {
    background: linear-gradient(90deg, rgba(var(--primary-rgb),0.22), rgba(var(--primary-rgb),0.07));
    color: var(--rail-accent);
    font-weight: 600;
  }
  .nav-item.active::before {
    content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 0 3px 3px 0;
    background: var(--rail-accent);
    box-shadow: 0 0 10px rgba(var(--rail-accent-rgb),0.7);
  }
  .nav-item.disabled { color: #5A6A7D; cursor: not-allowed; }
  .nav-item.disabled:hover { background: transparent; color: #5A6A7D; }

  /* 13px ikonka 13px matn yonida siqilib qolardi — 15px matndan biroz
     ustun turadi va nav qatorini muvozanatlaydi. */
  .nav-icon {
    width: 20px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; opacity: 0.95;
  }
  .nav-icon svg { width: 17px; height: 17px; display: block; }

  .nav-soon {
    margin-left: auto; flex-shrink: 0;
    font-size: 8px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
    color: #7B8CA1; background: rgba(255,255,255,0.06);
    border-radius: var(--r-pill); padding: 3px 8px;
  }
  /* 2026-10-13: son-belgini nom yoniga yopishtirish ("judayam chapga
     surilgan") qaytarildi — belgi yana o'ng chetda, ixchamlik endi
     sidebar enini toraytirish orqali (.rail, 214px). */

  /* 2026-08-26dagi so'rov ("sidebar bo'limlari ko'payib ketti"): ba'zi
     nav-group'lar endi <details> — yig'ilib/ochilib turadi. .nav-label
     shu holda <summary> bo'ladi, xuddi .section-head kabi (qarang
     yuqorida "Yopiladigan/ochiladigan formalar"), lekin rail'ning
     to'q rangiga moslashtirilgan. */
  summary.nav-label {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    cursor: pointer; list-style: none; user-select: none;
    transition: color var(--t-fast) var(--ease);
  }
  summary.nav-label::-webkit-details-marker { display: none; }
  summary.nav-label::marker { content: ''; }
  summary.nav-label:hover, summary.nav-label:focus-visible { color: var(--rail-text); outline: none; }
  .nav-chevron {
    width: 11px; height: 11px; flex-shrink: 0; opacity: 0.75;
    transition: transform var(--t) var(--ease-out);
  }
  details.nav-group[open] > summary.nav-label .nav-chevron { transform: rotate(180deg); }
  /* 2026-10-11: yopiq guruh sarlavhasida ichidagi belgilar yig'indisi —
     signal guruh ichida yashirinib qolmasin. Guruh ochilganda bandlarning
     o'zidagi belgilar ko'rinadi, sarlavhadagisi yo'qoladi. */
  summary.nav-label .nav-guruh-belgi { margin-left: auto; margin-right: 6px; text-transform: none; letter-spacing: 0; }
  details.nav-group[open] > summary.nav-label .nav-guruh-belgi { display: none; }

  .rail-foot { margin-top: auto; padding: 12px 16px 0; border-top: 1px solid var(--rail-border); }
  .rail-foot-text { font-size: 10px; color: #5A6A7D; letter-spacing: 0.3px; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--rail-border); }

  /* --- Rail foot / chiqish: 2026-09-30dagi so'rov, qarang base_dashboard.
     html'dagi izoh. Ilgari `.logout-mini-btn` topbar'da kvadrat ikonka-
     tugma edi (`.lang-mini-btn` bilan bir xil qoidada) — endi BU YERDA
     yagona ishlatilishi shu, shu sabab o'sha umumiy qoidadan chiqarilib,
     to'liq matnli qator sifatida qayta yozildi. Rang oq/och SURFACE
     tokenlaridan emas — sidebar doim to'q fonli, shu sabab `.nav-item`
     bilan bir xil naqshda (rail-specific rang, tema almashsa ham
     o'zgarmaydi). */
  .logout-mini-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0; width: 100%;
    color: #E39CA3; font-size: 12.5px; font-weight: 600;
    cursor: pointer; list-style: none;
    transition: color var(--t-fast) var(--ease);
  }
  .logout-mini-btn::-webkit-details-marker { display: none; }
  .logout-mini-btn::marker { content: ''; }
  .logout-mini-btn:hover { color: #FFC2C7; }
  .logout-mini-btn:focus-visible { outline: none; color: #FFC2C7; }
  .logout-mini-btn svg { width: 15px; height: 15px; flex-shrink: 0; display: block; }
  details.logout-mini { position: relative; }
  /* Panel endi PASTGA emas — YUQORIGA ochiladi (sidebar eng pastida
     turgani uchun pastga ochilsa ekrandan tashqariga chiqib ketardi),
     va chapga tekislanadi (sidebar tor, 214px). */
  .logout-mini-panel {
    position: absolute; bottom: 100%; left: 0; margin-bottom: 8px; z-index: 50;
    width: 182px; padding: 14px; text-align: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
  }

  /* --- Main column --- */
  .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

  .topbar {
    position: sticky; top: 0; z-index: 20;
    min-height: 64px;
    background: var(--topbar-bg);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 12px 28px;
    flex-shrink: 0;
  }
  .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; }
  /* 2026-08-26dagi OLTINCHI so'rov ("tugmalar judayam yomon holatda"):
     PTO'ning bir nechta sahifasida (Ф-2, Ф-3, Смета дарахти) sarlavha
     (topbar-heading, o'tgan davrada BARCHA panellarga umumlashtirilgan)
     va bir nechta sahifaga xos amal tugmasi (topbar_actions) BIR
     QATORDA joy talashib qolgan edi — natijada sarlavha "Ф..." kabi
     deyarli o'qib bo'lmas darajada qirqilib qolardi, chunki
     .topbar-right hech qachon qisqarmasdi (flex-shrink:0) va butun
     siqilish yuki sarlavhaga tushardi. Endi .topbar-right o'zi ham
     qisqara oladi VA kerak bo'lsa ICHKI ravishda ikki qatorga
     bo'linadi: identifikatsiya/boshqaruv guruhi (.icon-cluster —
     til/tema/chiqish/qo'ng'iroq/profil) har doim BIRINCHI qatorda
     o'ng chetda qoladi (order:1), sahifaga xos amal tugmalari esa joy
     yetmasa AVTOMATIK ikkinchi qatorga tushadi (order:2) — shu bilan
     sarlavha doim o'qish mumkin bo'lgan kenglikni oladi. Joy YETARLI
     bo'lganda (masalan PTO loyiha sahifasidagi 2 ta tugma) baribir
     bitta qatorda, odatdagidek ko'rinishda qoladi — bu faqat
     siqilganda ishga tushadigan zaxira (fallback) xatti-harakat. */
  .topbar-right {
    display: flex; align-items: center; gap: 12px 10px;
    flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px;
    min-width: 0; max-width: 56%;
  }
  /* 2026-08-27dagi so'rov ("tugmalar notog'ri joylashgan"): sahifaga xos
     amal tugmalari (masalan PTO'dagi "Smeta daraxti"/"Tahrirlash") ENDI
     doimiy global blok (til/tema/chiqish/qo'ng'iroq/profil)dan CHAPDA —
     sarlavhaga yaqinroq, "shu sahifaning o'zi" bilan bog'liq amal
     sifatida; global blok esa har doim eng o'ngda, barcha sahifada bir
     xil joyda qoladi. DIQQAT: tugmalarni global blokning ICHIGA (masalan
     pill bilan qo'ng'iroq orasiga) kiritish emas — .icon-cluster ATAYLAB
     bo'linmas blok (pill+qo'ng'iroq+ism+avatar birga wrap bo'ladi, aks
     holda haqiqiy telefonda avatar yolg'iz pastga tushib qolgan eski xato
     qaytishi mumkin). */
  /* 2026-08-27dagi TUZATISH: amal tugmalari endi #topbar-actions-slot
     ichiga o'ralgan (JS uni mobilda hero'ga ko'chirishi uchun) — shu
     sabab order/flex-shrink endi to'g'ridan-to'g'ri .btn'ga emas, shu
     slot konteyneriga qo'llanadi; slot o'zi ICHKI tugmalarni bir qatorda
     saqlaydigan flex bo'ladi. */
  .topbar-actions-slot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  /* 2026-09-17: slot `.topbar-right` dan `.topbar-left` ga — sarlavha
     yoniga ko'chirildi (sabab base_dashboard.html dagi izohda). Sarlavha
     matni cho'zilib slotni siqib qo'ymasin: u qisqarishi mumkin, tugma
     esa yo'q. */
  .topbar-left > .topbar-actions-slot { flex-shrink: 0; }
  .topbar-left > .topbar-heading { min-width: 0; }
  .icon-cluster { order: 2; }
  .topbar-left { flex-grow: 1; }
  /* 2026-09-25 (audit 2-bosqich, skrinshotda topildi): direktor obyekt
     sahifasida (uzun nom + 2 ta amal tugmasi) `.topbar-right` o'z
     mazmunidan (bo'linmas .icon-cluster) ham torroq siqilib, til/rejim
     tugmalari chapdagi "Geodeziya o'lchovlari" tugmasi USTIGA chiqib
     qolardi. Amal tugmalari 2026-09-17dan beri chap tomonda — o'ng
     tomonda faqat global blok qoldi, uni siqishning ma'nosi yo'q:
     keng ekranda endi faqat sarlavha qisqaradi ("…" bilan). */
  @media (min-width: 901px) { .topbar-right { flex-shrink: 0; } }

  /* 2026-08-26dagi so'rov: "til, yorug'lik va chiqishni yaxshilaylik" —
     bu uchta boshqaruv avval alohida-alohida suzib yurgan ikonkalar edi
     (topbar-right'ning istalgan joyida bo'lishi mumkin edi). Endi bitta
     "pill" idishga jamlandi — mavjud .lang-mini-btn/.theme-toggle/
     .logout-mini-btn klasslari o'zgarmadi (ular Worker PWA'da ham
     ishlatiladi — shu sabab hajmi tegilmadi), faqat shu konteyner
     ICHIDA burchaklari to'liq yumaloqlanadi. */
  .control-pill {
    display: flex; align-items: center; gap: 1px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: 2px; flex-shrink: 0;
  }
  .control-pill .lang-mini-btn,
  .control-pill .logout-mini-btn,
  .control-pill .theme-toggle,
  .control-pill button[type="submit"].theme-toggle {
    border-radius: var(--r-pill);
  }
  .control-pill-divider {
    width: 1px; height: 18px; background: var(--border); flex-shrink: 0; margin: 0 1px;
  }
  /* 2026-08-26dagi TUZATISH: pill/qo'ng'iroq/avatar'ni BITTA guruh
     sifatida ushlab turadi — shu sabab .topbar-right qatorga sig'may
     qolganda ular alohida-alohida emas, FAQAT guruh bo'lib birga
     keyingi qatorga tushadi (haqiqiy telefonda avatar yolg'iz pastga
     tushib qolgan xato shu bilan tuzatildi). */
  .icon-cluster { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

  .hamburger {
    display: none; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); color: var(--text-dim);
    font-size: 15px; cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .hamburger:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
  .hamburger:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
  .hamburger svg { width: 16px; height: 16px; display: block; }

  .back-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: var(--r-md);
    background: transparent; border: none;
    color: var(--primary); font-size: 16px;
    transition: background 0.16s ease, color 0.16s ease;
  }
  .back-link:hover { background: var(--primary-soft); color: var(--primary-active); }
  .back-link svg { width: 15px; height: 15px; display: block; }
  .back-link[hidden] { display: none; }
  /* 2026-09-25 (audit 2-bosqich) — "karta sahifasi": kartochka bosilganda
     sahifani faqat shu karta egallaydi (JS: base_dashboard.html).
     `.karta-yashir` — karta holatida vaqtincha berkitilgan qolgan bloklar;
     `.karta-zanjir` — ochiq karta va uning ota kartalari: sarlavhasi
     endi sahifa sarlavhasi, bosilib yopilmaydi (chiqish — orqaga tugmasi). */
  .karta-yashir { display: none !important; }
  body.karta-rejimi details.karta-zanjir > summary { pointer-events: none; cursor: default; }
  body.karta-rejimi details.karta-zanjir > summary .chevron { display: none; }
  /* 2026-08-26dagi TO'RTINCHI so'rov ("hero qismiga ko'chiramizmi?"):
     .page-title/.page-sub endi topbar'ning tor joyida emas, .page-hero
     ichida — o'zining TO'LIQ KENGLIKDAGI qatorida turadi. Shu sabab
     endi kesish (ellipsis/nowrap/max-height) kerak emas — matn to'liq
     ko'rinadi, zarur bo'lsa erkin qatorlarga bo'linadi. Ikkalasi ham
     bo'sh bo'lsa (:empty) o'zi butunlay yo'qoladi va .page-hero hech
     qanday balandlik qo'shmaydi (masalan detail-sahifalar, PTO bosh
     sahifasi). */
  /* 2026-09-17: hero endi yotiq qator — sarlavha chapda, sahifaga xos
     amal o'ngda. Ilgari tugma sarlavha OSTIDA, o'z qatorida turardi;
     endi joy yetsa yonida turadi, yetmasa o'zi tushadi (`flex-wrap`).
     Ya'ni qo'shimcha qator faqat HAQIQATAN kerak bo'lganda paydo
     bo'ladi. */
  .page-hero {
    margin-bottom: 18px;
    display: flex; align-items: flex-end; flex-wrap: wrap;
  }
  /* DIQQAT: bu yerda `gap` ATAYLAB ishlatilmadi. Sarlavhasi ham,
     amali ham bo'lmagan sahifalarda (masalan tafsilot sahifalari)
     ikkala bola ham bo'sh bo'ladi va `gap` ularning orasiga 12px
     balandlik qo'shib, butun saytda ko'rinmas bo'shliq yaratardi.
     `margin-left: auto` esa faqat gorizontal — balandlikka
     tegmaydi. */
  .page-hero > .hero-actions-slot { margin-left: auto; padding-left: 12px; }
  .page-heading { min-width: 0; }
  .page-title {
    font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: var(--text);
    line-height: 1.3;
    margin: 0 0 3px;
  }
  .page-title:empty { display: none; margin: 0; }
  .page-sub {
    font-size: 12.5px; color: var(--text-dim); font-weight: 500; letter-spacing: 0;
  }
  .page-sub:empty { display: none; }
  /* 2026-08-27dagi so'rov: mobilda (≤560px) sahifaga xos amal tugmalari
     JS orqali shu yerga (sarlavha ostiga) ko'chiriladi — qarang
     base_dashboard.html. Desktopda bo'sh qoladi va :empty orqali
     balandlik qo'shmaydi. */
  /* 2026-09-17: `margin-top: 12px` olib tashlandi — slot endi
     sarlavhaning YONIDA, ostida emas. Joy yetmasa `flex-wrap` uni
     baribir pastga tushiradi. */
  .hero-actions-slot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .hero-actions-slot:empty { display: none; }

  /* 2026-08-26dagi BESHINCHI so'rov: faqat DIREKTOR uchun, faqat
     DESKTOPDA (>900px) — .page-heading (sarlavha+subtitle) JS orqali
     shu slotga ko'chirilganda topbar ichida ixcham ko'rinsin (hero'dagi
     kabi katta 22px shrift emas, hamburger/pill guruhi bilan bitta
     qatorda joylashadigan o'lcham). Standart holatda display:none —
     JS mobil kenglikda (yoki director bo'lmagan har qanday holatda)
     buni hech qachon ko'rsatmaydi. */
  .topbar-heading { display: none; min-width: 0; overflow: hidden; margin-right: 4px; }
  .topbar-heading .page-title {
    font-size: 17px; margin: 0; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 2026-09-24 (katta audit, 1d-bosqich): ruscha izoh-sarlavha uzunroq
     bo'lib ikkinchi qatorga tushar va BUTUN sahifa 11px pastga siljirdi
     ("Texnika holati", o'lchangan). Sarlavha kabi bir qatorda qoladi. */
  .topbar-heading .page-sub {
    font-size: 11px; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* DIQQAT: bu tugma <form> ichida type="submit" bo'lgani uchun quyida
     keladigan umumiy button[type="submit"] qoidasi (yashil gradient, 100%
     kenglik) undan ustun kelib, tugmani katta yashil blokka aylantirib
     qo'ygan edi. Selektor aynan shu sababdan button[type="submit"] bilan
     kuchaytirilgan. */
  .theme-toggle,
  button[type="submit"].theme-toggle {
    width: var(--control-h-icon); height: var(--control-h-icon);
    min-height: var(--control-h-icon); flex-shrink: 0;
    margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--r-md);
    background: transparent; box-shadow: none;
    color: var(--text-dim);
    cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .theme-toggle:hover,
  button[type="submit"].theme-toggle:hover {
    background: var(--surface-3); color: var(--text);
    box-shadow: none; transform: none;
  }
  .theme-toggle:focus-visible,
  button[type="submit"].theme-toggle:focus-visible { outline: none; box-shadow: var(--ring); color: var(--text); }
  .theme-toggle svg { width: 17px; height: 17px; display: block; }
  /* 2026-10-11: ikkala ikonka ham chiziladi, JS faqat klassni almashtiradi. */
  .theme-toggle .tt-quyosh, .theme-toggle .tt-oy { display: none; }
  .theme-toggle.is-sun .tt-quyosh, .theme-toggle.is-moon .tt-oy { display: block; }
  .lang-mini-btn.is-yuklanmoqda { opacity: .45; pointer-events: none; }

  /* Rang bu yerda BEZAK emas, MA'NO tashiydi: oy (indigo/tun) — qorong'i
     rejimga o'tish, quyosh (amber/kun) — yorug' rejimga qaytish. */
  .theme-toggle.is-moon,
  button[type="submit"].theme-toggle.is-moon { color: #6366F1; background: rgba(99,102,241,0.10); }
  .theme-toggle.is-moon:hover,
  button[type="submit"].theme-toggle.is-moon:hover { color: #4F46E5; background: rgba(99,102,241,0.18); }
  .theme-toggle.is-sun,
  button[type="submit"].theme-toggle.is-sun { color: var(--secondary); background: var(--secondary-soft); }
  .theme-toggle.is-sun:hover,
  button[type="submit"].theme-toggle.is-sun:hover { color: #FBBF24; background: rgba(245,158,11,0.24); }

  /* Ixcham til tugmasi — topbar'da, theme-toggle bilan BIR XIL o'lchamda.
     O'lcham `--control-h-icon` dan keladi: bu ikkalasi va `.bell` bitta
     oila, ular hech qachon ayri-ayri o'zgartirilmasligi kerak.
     2026-09-30dagi so'rov: "Chiqish" endi bu yerda EMAS — sidebar pastida
     (`.rail-foot`, quyida "Rail foot / chiqish" izohiga qarang). Shu sabab
     `.logout-mini-btn` uslubi ham shu yerdan OLIB TASHLANDI — endi kvadrat
     ikonka-tugma emas, to'liq matnli qator (pastga qarang). */
  details.lang-mini { position: relative; }
  .lang-mini-btn {
    width: var(--control-h-icon); height: var(--control-h-icon);
    min-height: var(--control-h-icon); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md); background: transparent;
    color: var(--text-dim); font-size: 11px; font-weight: 800; letter-spacing: 0.2px;
    cursor: pointer; list-style: none;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .lang-mini-btn::-webkit-details-marker { display: none; }
  .lang-mini-btn::marker { content: ''; }
  .lang-mini-btn:hover { background: var(--surface-3); color: var(--text); }
  .lang-mini-btn:focus-visible { outline: none; box-shadow: var(--ring); color: var(--text); }
  .lang-mini-panel {
    position: absolute; top: 44px; right: 0; z-index: 50; width: 200px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
  }
  .logout-mini-panel p { font-size: 12.5px; color: var(--text-dim); margin: 0 0 12px; line-height: 1.4; }
  /* 2026-09-30dagi so'rov: bitta qizil tugma o'rniga ikkita aniq tanlov —
     "Yo'q" (yopadi) va "Ha" (chiqadi), yonma-yon, teng kenglikda. */
  .logout-mini-actions { display: flex; gap: 8px; }
  /* "Ha" tugmasi <form> ichida (POST yuborishi kerak), "Yo'q" esa yalang'
     <button>. Agar <form>ning o'zi flex bola bo'lsa, ikkalasi hech qachon
     PIKSELMA-PIKSEL bir xil o'lcham bo'lmaydi (forma o'z ichki box modeliga
     ega). `display:contents` formani "yo'qotadi" — ichidagi tugma
     TO'G'RIDAN-TO'G'RI shu flex qatorning o'zida turgandek bo'ladi, shu
     sabab ikkala tugma ENDI AYNAN bir xil qoidaga (`.btn{flex:1}`)
     bo'ysunadi. */
  .logout-mini-actions form { display: contents; }
  /* 220px'lik ixcham panel uchun bazaviy `.btn` (40px, 8px 16px padding)
     biroz og'ir ko'rinardi, lekin `--control-h-sm` (32px) bilan ORTIQCHA
     yengil/ingichka chiqdi. `--control-h-icon` (36px — topbar'dagi
     tugmalar bilan bir xil "chrome" pog'onasi, ALLAQACHON mavjud token)
     ikkalasining o'rtasi — ixcham, lekin baribir "bosiladigan tugma"dek
     zichlikda. */
  .logout-mini-actions .btn {
    flex: 1; width: auto; margin: 0;
    min-height: var(--control-h-icon); padding: 7px 14px; font-size: 13px;
  }

  .bell {
    position: relative; flex-shrink: 0;
    width: var(--control-h-icon); height: var(--control-h-icon);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md); color: var(--text-dim); font-size: 15px;
    cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .bell:hover { background: var(--surface-3); color: var(--text); }
  .bell:focus-visible { outline: none; box-shadow: var(--ring); color: var(--text); }
  .bell svg { width: 17px; height: 17px; display: block; }
  /* O'qilmagan bildirishnoma BOR bo'lgandagina qo'ng'iroqcha rangga kiradi —
     rang holatni bildiradi ("sizni nimadir kutyapti"), doimiy bezak emas. */
  .bell.has-unread { color: var(--secondary-ink); background: var(--secondary-soft); }
  .bell.has-unread:hover { background: rgba(245,158,11,0.24); }
  /* 2026-10-11: yuqori paneldagi SOS tugmasi — yangi signal bo'lsa qizil. */
  .sos-bell.is-alert { color: var(--bad); background: var(--bad-soft); }
  .sos-bell.is-alert:hover { background: var(--bad-soft); filter: brightness(0.96); }
  .bell .dot {
    position: absolute; top: 6px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--bad); border: 1.5px solid var(--surface);
  }
  .bell .bell-count {
    position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: var(--r-pill); background: var(--bad); color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--surface);
  }

  /* Bildirishnoma dropdown */
  details.bell-wrap { position: relative; }
  details.bell-wrap > summary.bell { list-style: none; }
  details.bell-wrap > summary.bell::-webkit-details-marker { display: none; }
  details.bell-wrap > summary.bell::marker { content: ''; }
  .bell-panel {
    position: absolute; top: 44px; right: 0; width: 320px; max-height: 380px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); z-index: 50; padding: 6px;
  }
  .bell-panel-head { padding: 8px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--text-dim); }
  .bell-item {
    display: flex; gap: 12px; align-items: flex-start; padding: 8px 12px; border-radius: var(--r-sm);
    text-decoration: none; color: var(--text); font-size: 12.5px; line-height: 1.4; position: relative;
    font-weight: 600;
    transition: background var(--t-fast) var(--ease);
  }
  .bell-item:hover { background: var(--surface-3); }
  .bell-item:focus-visible { outline: none; background: var(--surface-3); box-shadow: var(--ring); }
  .bell-item .icon { flex-shrink: 0; font-size: 15px; }
  .bell-item.is-read { opacity: 0.55; font-weight: 400; }
  .bell-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .bell-item-ticks {
    font-size: 11px; letter-spacing: -2px; color: var(--text-faint);
  }
  .bell-item:not(.is-read) .bell-item-ticks { color: var(--primary); }
  .bell-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .bell-item-time { font-size: 10.5px; color: var(--text-faint); font-weight: 500; }
  .bell-empty { padding: 20px 12px; text-align: center; font-size: 12.5px; color: var(--text-faint); }
  /* Sana sarlavhasi — bell panelida bildirishnomalarni kunlarga ajratadi
     (bank ilovalaridagi "Bugun"/"Kecha" uslubi kabi). */
  .bell-date-header {
    padding: 10px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; color: var(--text-faint);
  }
  .bell-date-header:first-child { padding-top: 2px; }

  .profile {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 4px 4px 12px; border-radius: var(--r-pill);
    cursor: pointer; transition: background var(--t-fast) var(--ease);
  }
  .profile:hover { background: var(--surface-3); }
  .profile:focus-visible { outline: none; background: var(--surface-3); box-shadow: var(--ring); }
  /* 2026-09-24 (katta audit, 1d-bosqich): til almashganda yuqori o'ngdagi
     til/rejim/chiqish tugmalari 5–27px chapga sakrardi. O'lchab topilgan
     sabab: shu ism+lavozim bloki matn uzunligiga qarab kengayardi
     ("Prorab" → "Прораб" → "Site manager"), undan chapdagi hamma narsa
     surilardi. Endi blok kengligi QAT'IY — uzun matn "…" bilan kesiladi
     (to'liq matn `title` atributida). */
  .profile-text { width: 112px; min-width: 0; }
  .profile-name { font-size: 12.5px; font-weight: 600; text-align: right; line-height: 1.3;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .profile-role { font-size: 10.5px; color: var(--text-dim); text-align: right; line-height: 1.3;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Yonidagi .bell 36px — avatar 34px bo'lsa qator tekislanmaydi */
  .avatar {
    width: var(--control-h-icon); height: var(--control-h-icon);
    flex-shrink: 0; border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-top), var(--primary-active));
    color: #fff; font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb),0.32);
  }

  /* ============================================================
     RAIL PROFIL — 2026-09-30dagi so'rov: profil (rasm+ism+lavozim)
     topbar'dan sidebar tepasiga ko'chirildi. `.profile`/`.avatar`/
     `.profile-text`/`.profile-name`/`.profile-role` klasslari QAYTA
     ISHLATILADI (yangi nusxa yaratilmadi) — faqat joylashuv dark
     sidebar bo'lgani uchun ayrim xossalar shu yerda bekor qilinadi:
     matn endi CHAPGA tekislanadi (avatar chapda, ilgari o'ngda edi),
     va matn rangi rail tokenlariga (och fonda emas, to'q fonda
     o'qiladigan) almashtiriladi.
     ============================================================ */
  .rail-profile {
    width: 100%; margin: 0 0 4px; padding: 10px 16px 14px;
    border-radius: 0; border-bottom: 1px solid var(--rail-border);
  }
  .rail-profile:hover { background: var(--rail-2); }
  .rail-profile:focus-visible { box-shadow: none; background: var(--rail-2); }
  .rail-profile .profile-text { width: auto; flex: 1; }
  .rail-profile .profile-name, .rail-profile .profile-role { text-align: left; }
  .rail-profile .profile-name { color: var(--rail-text-strong); }
  .rail-profile .profile-role { color: var(--rail-text); }
  .rail-profile .avatar { width: 44px; height: 44px; font-size: 16px; }

  .content { flex: 1; min-width: 0; padding: 24px 28px 48px; overflow-x: hidden; }

  /* Standalone (no rail) pages — login, error screens */
  body.plain {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
    background:
      radial-gradient(900px 520px at 12% -10%, rgba(13,148,136,0.13), transparent 62%),
      radial-gradient(760px 460px at 100% 106%, rgba(245,158,11,0.11), transparent 60%),
      var(--canvas);
  }

  /* ============================================================
     STAT CARDS
     ============================================================ */

  .stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(224px, 100%), 1fr));
    gap: var(--gap); margin-bottom: 20px;
  }
  .stats-row.hero { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }

  .stat-card {
    position: relative; overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--gutter);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--t) var(--ease-out), transform var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
  }
  /* 2026-08-28 (8-bosqich, Yo'nalish D): kartaning yuqori chap burchagida
     nozik "texnik chizma" burchak-belgisi — chertyoj/spetsifikatsiya
     hissi beradi, generik "rangli doira ikonka" SaaS ko'rinishidan
     uzoqlashtiradi. overflow:hidden tufayli border-radius ichida qoladi. */
  .stat-card::after {
    content: ''; position: absolute; top: 7px; left: 7px; width: 10px; height: 10px;
    border-top: 1.5px solid var(--primary-line); border-left: 1.5px solid var(--primary-line);
    border-top-left-radius: 3px; opacity: 0.9; pointer-events: none;
  }
  /* 2026-08-27dagi so'rov ("ranglar tartibsiz, kartochkalar tekis"):
     ilgari har bir kartochka tepasida alohida rangli chiziq (::before)
     bo'lardi — bir qatorda amber/ok/bad/info yonma-yon turganda "rangli
     tasma" ta'sirini berardi. Endi rang faqat BITTA joyda — ikonka
     nishonchasida (.stat-icon.is-*) va raqam rangida (.stat-value.is-*)
     — shu bilan bir vaqtning o'zida ham tinchroq, ham ma'noliroq. Chuqurlik
     esa doimiy --shadow-card bilan (yuqorida) ta'minlanadi, hover'da
     --shadow-md'ga kuchayadi. */
  .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
  /* 2026-08-22dagi so'rov: bosh sahifadagi 3 ta hero-karta endi tegishli
     sahifaga havola (<a>) — .proj-card bilan bir xil "bosiladi" tuyg'usi
     (kursor, hover-ko'tarilish allaqachon yuqorida bor, bu yerga faqat
     <a> uchun display/rang asosini va strelka belgisini qo'shadi). */
  a.stat-card { display: block; color: inherit; text-decoration: none; cursor: pointer; }
  .stat-go { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--primary); font-weight: 600; }
  .stat-go svg { width: 12px; height: 12px; transition: transform .18s ease; }
  .stat-card:hover .stat-go svg { transform: translateX(3px); }

  /* 2026-08-27dagi so'rov: ikonka endi yorliq bilan bir qatorda emas,
     o'zining USTIDA alohida turadi (mockup asosida) — bu har bir
     kartochkaga aniqroq "identifikatsiya bloki" beradi. .stat-icon HTML'da
     yorliqdan KEYIN keladi (eski kod), shu sabab `order:-1` bilan
     vizual ravishda yuqoriga chiqariladi — HTML hech qaysi sahifada
     o'zgartirilmagan. */
  .stat-top {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 10px; margin-bottom: 14px;
  }
  .stat-label {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase;
    color: var(--text-dim); line-height: 1.4;
  }
  .stat-icon {
    order: -1;
    width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1;
    background: var(--primary-soft); color: var(--primary-ink);
  }
  .stat-icon.is-amber { background: var(--secondary-soft); color: var(--secondary-ink); }
  /* 2026-09-17 (dizayn 2-bosqich, A3). `is-amber` — RANG nomi, MA'NO emas,
     va u brend rangiga (`--secondary`) bog'langan. "E'tibor bering" degan
     HOLAT uchun alohida `is-warn` kerak: u `--warn` oilasidan oziqlanadi,
     ya'ni nishon, lenta va kartochka bir xil sariqda bo'ladi.
     `is-amber` ataylab O'ZGARTIRILMADI — u 11 ta shablonda 33 joyda
     ishlatiladi va ularning qaysi biri holat, qaysi biri brend urg'usi
     ekanini alohida ko'rib chiqish kerak. Bu bosqichda faqat
     "narxlanmagan" holati `is-warn` ga o'tkazildi. */
  .stat-icon.is-warn  { background: var(--warn-soft); color: var(--warn-text); }
  .stat-icon.is-ok    { background: var(--ok-soft); color: var(--ok); }
  .stat-icon.is-bad   { background: var(--bad-soft); color: var(--bad); }
  .stat-icon.is-info  { background: var(--info-soft); color: var(--info); }
  /* 2026-08-27dagi so'rov (::before rangli chiziq olib tashlanganda):
     ko'p sahifalarda holat klassi (is-ok/is-bad/...) FAQAT .stat-card'ga
     qo'yilgan, .stat-icon'ga emas — avval bu muammo emas edi, chunki
     rang signalini yuqoridagi ::before chiziq ko'rsatardi. Endi shu
     "ota-klass → ikonka" kaskadi orqali, .stat-icon'da klass alohida
     qo'yilmagan bo'lsa ham, ikonka avtomatik holat rangini oladi —
     hech qaysi shablonni o'zgartirmasdan. */
  .stat-card.is-amber .stat-icon { background: var(--secondary-soft); color: var(--secondary-ink); }
  .stat-card.is-warn  .stat-icon { background: var(--warn-soft); color: var(--warn-text); }
  .stat-card.is-ok    .stat-icon { background: var(--ok-soft); color: var(--ok); }
  .stat-card.is-bad   .stat-icon { background: var(--bad-soft); color: var(--bad); }
  .stat-card.is-info  .stat-icon { background: var(--info-soft); color: var(--info); }
  /* SVG ikonkalar plitka rangini (currentColor) oladi — emoji'dan farqli
     o'laroq yorug'/qorong'i rejimda ham dizayn bilan uyg'un bo'ladi. */
  .stat-icon svg { width: 17px; height: 17px; display: block; }
  /* 2026-08-28 (8-bosqich, ikonka birlashtirilishi): moliya kartochkalari
     ilgari Gemini-AI PNG mask-image (.stat-icon-img) ishlatardi, boshqa
     ko'pchilik stat-icon esa inline SVG — ikki xil vizual til. Endi
     barchasi bitta chiziqli-SVG uslubida (.stat-icon svg qoidasi yetarli,
     alohida .stat-icon-img klassi kerak emas). */

  .stat-value {
    /* 2026-08-28 (8-bosqich, Yo'nalish D): raqamlar endi IBM Plex Mono'da —
       "texnik/aniq" hissi beradi va jadval raqamlari bilan bir xil shriftda
       o'qiladi. tabular-nums o'zgaruvchan raqam kengligini bir xillashtiradi. */
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 30px; font-weight: 600; letter-spacing: -0.4px;
    line-height: 1.1; color: var(--text); word-break: break-word;
  }
  /* 40px edi — keng ekranda karta ~650px ga cho'zilganda bitta xonali raqam
     o'ng tomonida katta bo'sh joy qoldirardi. 34px nisbatni tuzatadi. */
  .stats-row.hero .stat-value { font-size: 34px; letter-spacing: -1.2px; }
  /* ===== HISOBOT YIG'INDISI (.stat-block) =====
     2026-09-17dagi dizayn ko'rigi, oxirgi bosqich (auditda C1).

     `.stat-block` IKKITA shablonda ishlatiladi — `dashboard/hisobot.html`
     va `attendance/worker_report.html` — va ikkalasida ham bir xil
     qoida yozilgan edi. Bundan tashqari qoida `.report-stat` ichida
     bo'lishini talab qilardi, shuning uchun HAYDOVCHI bo'limidagi
     xuddi shu blok qoidaga tushmasdi va o'sha ko'rinish qo'lda,
     `style="font-size:26px; font-weight:800; color:var(--primary)"`
     bilan sakkiz marta qaytarilgandi.

     Auditda bu "bir xil `.num` 28px va 26px ga bo'lingan" deb yozilgan.
     O'lchov aniqlashtirdi: bu USTIGA YOZISH emas edi — CSS qoidasi u
     yerga UMUMAN yetib bormasdi. Endi ajdod talabi olib tashlandi va
     ikkala joy ham 28px oladi. */
  .stat-block .num { font-size: 28px; font-weight: 800; color: var(--primary); }
  .stat-block .label { font-size: 12px; color: var(--text-dim); }
  /* O'lchov birligi raqamdan kichikroq — "125 m3" da "m3" raqamni
     bosib ketmasin. */
  .stat-block .num .u { font-size: 15px; }
  /* Ikkilamchi raqam: asosiy raqam OSTIDA turadi. Haydovchi gaz bilan
     ham, benzin bilan ham ishlaganda ikkinchi qiymat shu ko'rinishda
     beriladi — litr va m3 bitta songa qo'shilmaydi, ular boshqa-boshqa
     o'lchov. */
  .stat-block .num.is-sub { font-size: 18px; margin-top: 6px; }
  .stat-block .num.is-sub .u { font-size: 13px; }
  /* 2026-09-17: kirim-chiqim yozuv kartochkasi — musbat/manfiy summa
     rangi. Xuddi `.stat-value.is-ok`/`.is-bad` bilan bir xil rang,
     lekin bu boshqa selektor (`.stat-block .num`) ostida, shuning
     uchun alohida yozilgan — YANGI O'LCHAM QO'SHILMAYDI, faqat rang. */
  .stat-block .num.is-in  { color: var(--ok-text); }
  .stat-block .num.is-out { color: var(--bad-text); }

  .stat-value.is-primary { color: var(--primary-active); }
  .stat-value.is-ok      { color: var(--ok); }
  .stat-value.is-bad     { color: var(--bad); }
  .stat-value.is-amber   { color: var(--secondary-ink); }
  .stat-value.is-warn    { color: var(--warn-text); }

  .stat-unit { font-size: 0.44em; font-weight: 600; color: var(--text-dim); margin-left: 4px; letter-spacing: 0; }

  /* Pul summalari yoniga taxminiy USD ko'rinishi — data-count-up bilan
     birga JS orqali to'ldiriladi (pastdagi umumiy skript). */
  .stat-usd-sub {
    font-size: 13px; font-weight: 600; color: var(--text-dim);
    letter-spacing: 0; margin-top: 3px; min-height: 17px;
  }

  /* ============================================================
     TEZKOR AMALLAR (action tiles) — 2026-08-26dagi so'rov: uzun
     akkordeon ro'yxati (prorab/PTO/geodez obyekt sahifalarida
     10+ta <details class="section"> bo'lim) ustida tezkor
     ikonka-kartochkalar qatori. Bosilganda tegishli bo'lim
     ochiladi va o'sha joyga scroll qilinadi (base_dashboard.html
     dagi umumiy skriptga qarang). Vizual tili — .stat-icon bilan
     BIR XIL token'lar (primary-soft/primary-ink/primary-line),
     shu sabab .stats-row bilan bir sahifada turganda ham uyg'un
     ko'rinadi. ============================================================ */
  .action-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(122px, 100%), 1fr));
    gap: 10px;
    margin-bottom: 20px;
  }
  /* 2026-08-26dagi so'rov: sidebar'dan kontent maydoniga ko'chirilgan
     tezkor amal kartochka guruhlari uchun ixcham sarlavha (mas. PTO bosh
     sahifasidagi "Ma'lumotnomalar" guruhi). .nav-label bilan bir xil
     vizual til, lekin qorong'i "rail" ranglariga emas — yorug' kontent
     maydoni tokenlariga moslashtirilgan. */
  .section-divider-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-dim); margin: 4px 0 10px;
  }
  .action-tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 10px 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
    text-decoration: none; color: var(--text); text-align: center;
    cursor: pointer;
    transition: box-shadow var(--t) var(--ease-out), transform var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
  }
  .action-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
  .action-tile:focus-visible { outline: none; box-shadow: var(--ring); }
  .action-tile-icon {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-soft); color: var(--primary-ink);
    border: 1px solid var(--primary-line);
  }
  .action-tile-icon svg { width: 20px; height: 20px; display: block; }
  /* 2026-08-28 (8-bosqich, ikonka birlashtirilishi): tezkor amal
     ikonkalari ilgari Gemini-AI PNG mask-image (.action-tile-icon-img)
     edi — endi .action-tile-icon svg (yuqorida) yetarli, bitta chiziqli
     ikonka tili butun loyiha bo'ylab. */
  .action-tile-label { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--text-dim); }

  /* 2026-08-27dagi so'rov ("qo'shish tugmalari hamma joyda bir xil
     bo'lsin"): "Yangi X qo'shish" akkordeon sarlavhalaridagi "+" belgisi
     Gemini AI'da chizilgan YAGONA ikonka bilan almashtirildi — xuddi
     yuqoridagi stat-icon-img/action-tile-icon-img naqshi: rang
     currentColor'dan (o'rab turgan elementning `color` qiymatidan)
     olinadi, shakl esa mask orqali. */
  /* 2026-08-28 (8-bosqich): avvalgi Gemini-AI PNG mask-image o'rniga
     inline SVG (boshqa 46+ joydagi bir xil chiziqli-ikonka uslubida). */
  .plus-icon-mask { width: 14px; height: 14px; display: inline-block; flex-shrink: 0; }

  /* ============================================================
     OBYEKT KARTOCHKALARI — umumiy komponent ("Procore" uslubi).
     Geodez, Prorab va PTO panellaridagi obyektlar ro'yxati shu
     bitta komponentdan foydalanadi: .proj-toolbar (qidiruv + son),
     .proj-grid > .proj-card (status chiziq, muddat % bar, kun-chip,
     footer havola). Muddat % va kun-chip JS bilan hisoblanadi
     (pastdagi umumiy skript, .proj-progress-wrap bo'yicha).
     ============================================================ */
  .proj-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
  }
  .proj-search { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
  .proj-search svg {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--text-faint); pointer-events: none;
  }
  .proj-search input {
    width: 100%; padding: 10px 14px 10px 36px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); font-size: 13.5px;
  }
  .proj-count-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    background: var(--primary-soft); color: var(--primary-active);
    border: 1px solid var(--primary-line, var(--border));
  }
  .proj-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }
  .proj-card {
    position: relative; display: flex; flex-direction: column; gap: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden; text-decoration: none;
    color: inherit; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  }
  .proj-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-strong); }
  /* is-static — bosib bo'lmaydigan (havola emas) sarhisob kartalari uchun:
     hover'dagi "ko'tarilish" effekti bosiladigan degan noto'g'ri taassurot
     bermasligi uchun o'chiriladi. */
  .proj-card.is-static:hover { box-shadow: none; transform: none; border-color: var(--border); }
  .proj-card::before {
    content: ''; display: block; height: 4px; width: 100%;
    background: linear-gradient(90deg, var(--primary), #34D399);
  }
  .proj-card.is-done::before { background: linear-gradient(90deg, #94A3B8, #CBD5E1); }
  .proj-card-body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .proj-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  /* 2026-08-22dagi so'rov ("kartochkalar tekis turmayapti"): uzun nomli
     obyekt (masalan 5 qatorli kirill nomi) avval kartochkani bir necha
     baravar cho'zib yuborardi — CSS grid butun QATORNI eng balandiga
     tenglashtirgani uchun yonidagi kartochkalar ostida katta bo'sh joy
     qolardi. Endi nom ENG KO'PI 2 qatorga cheklanadi (uchi "…" bilan),
     to'liq nom title= atributida (sichqoncha ustiga kelganda) ko'rinadi.
     min-height — 1 qatorli va 2 qatorli nomlar bir xil joy egallashi
     uchun; shu sabab pastdagi progress-bar/sanalar BARCHA kartochkada
     bir xil balandlikda tekis turadi. */
  .proj-name { font-size: 15.5px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.25; }
  .proj-contractor {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--text-dim); margin-top: 2px;
  }
  .proj-contractor svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.7; }

  /* DIQQAT: quyidagi cheklovlar FAQAT .proj-grid ICHIDAGI (ro'yxatdagi)
     kartochkalarga tegishli. Obyekt sahifasidagi sarhisob kartasi
     (.proj-card.is-static) — bitta obyektning SARLAVHASI, u yerda nom
     to'liq ko'rinishi kerak, shu sabab u ataylab tashqarida qoldirildi. */
  .proj-grid .proj-name {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(15.5px * 1.25 * 2);
    overflow-wrap: anywhere;
  }
  /* Buyurtmachi nomi ham bitta qatorda — aks holda u ham kartochkani
     cho'zadi (nom cheklangani bilan foyda yo'q bo'lib qoladi).
     min-height — buyurtmachisi bor va yo'q kartochkalar bir xil joy
     egallashi uchun. */
  .proj-grid .proj-card-top > div:first-child { min-width: 0; flex: 1; }
  .proj-grid .proj-contractor { min-height: 17px; }
  .proj-grid .proj-contractor > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  /* Sana matni ham bitta qatorda qolsin — "2026-08-22 → 2027-07-26" uzun
     bo'lsa ham kun-chipni pastga tushirib yubormaydi. */
  .proj-grid .proj-dates > span:not(.proj-days-chip) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .proj-progress-wrap { margin-top: 2px; }
  .proj-progress-meta {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11.5px; color: var(--text-dim); margin-bottom: 5px;
  }
  .proj-progress-meta .pct { font-weight: 800; color: var(--text); }
  /* Trek foni --surface-3 — mavjud tema o'zgaruvchisi, qorong'i temada ham
     aniq ko'rinadi (avvalgi rgba(0,0,0,...) fallback qorong'i fonda
     deyarli ko'rinmasdi). */
  .proj-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
  .proj-bar span {
    display: block; height: 100%; border-radius: 999px; width: 0;
    background: linear-gradient(90deg, var(--primary), #34D399);
    transition: width .9s cubic-bezier(.22,.61,.36,1);
  }
  .proj-bar.is-late span { background: linear-gradient(90deg, #E0662F, var(--bad)); }
  .proj-dates { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
  .proj-dates svg { width: 12.5px; height: 12.5px; flex-shrink: 0; opacity: 0.75; }
  .proj-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 18px; border-top: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 12.5px; font-weight: 700; color: var(--primary-active);
  }
  .proj-card-foot .go { display: inline-flex; align-items: center; gap: 5px; }
  .proj-card-foot .go svg { width: 13px; height: 13px; transition: transform .18s ease; }
  .proj-card:hover .proj-card-foot .go svg { transform: translateX(3px); }
  .proj-days-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
    border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap;
  }
  .proj-days-chip.ok   { background: var(--ok-soft); color: var(--ok); }
  .proj-days-chip.warn { background: var(--warn-soft); color: var(--warn); }
  .proj-days-chip.bad  { background: var(--bad-soft); color: var(--bad); }
  .proj-days-chip.neutral { background: var(--surface-3); color: var(--text-dim); }

  /* ---- 2026-08-22dagi so'rov: holat filtri + saralash ----
     Chiplar SERVER tomonida emas, brauzerda ishlaydi: har bir kartochkaning
     holati (kechikkan / muddati yaqin / faol / yakunlangan) allaqachon
     mavjud bo'lgan kun-chip hisobi bilan AYNAN bir xil mantiqda, o'sha
     skriptning o'zida aniqlanadi (pastdagi initProjCards) — ikkinchi,
     boshqacha natija beradigan hisob paydo bo'lmasligi uchun. */
  .proj-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .proj-chip {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    background: var(--surface); color: var(--text-dim);
    border: 1px solid var(--border); transition: background .15s ease, color .15s ease, border-color .15s ease;
    font-family: inherit; line-height: 1.2;
  }
  .proj-chip:hover { border-color: var(--border-strong); color: var(--text); }
  .proj-chip .n {
    font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-dim);
    font-variant-numeric: tabular-nums;
  }
  .proj-chip.is-active { background: var(--primary-soft); color: var(--primary-active); border-color: var(--primary-line, var(--border-strong)); }
  .proj-chip.is-active .n { background: var(--primary-active); color: var(--surface); }
  .proj-chip.is-bad.is-active { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
  .proj-chip.is-bad.is-active .n { background: var(--bad); color: var(--surface); }
  /* Bo'sh (0 ta) filtr — bosilmaydi, lekin YASHIRILMAYDI: "kechikkani yo'q"
     degan ma'lumotning o'zi ham foydali. */
  .proj-chip.is-empty { opacity: 0.45; cursor: default; }
  .proj-chip.is-empty:hover { border-color: var(--border); color: var(--text-dim); }
  /* 2026-10-14 (Shohzod: "saralash tugmasini ixchamlashtir va dropdown
     belgisini ham qo'y"): chiplar bilan bir xil o'lcham. Avval umumiy
     `select` qoidasi unga 40px balandlik bergan, `background` qisqa yozuvi
     esa o'ng tomondagi caret rasmini o'chirib yuborgan edi — shuning uchun
     katta oq maydon ko'rinib, ochiladigan ro'yxat ekani bilinmasdi. */
  .proj-sort {
    width: auto; min-width: 0; height: auto; min-height: 0; line-height: 1.2;
    padding: 7px 28px 7px 13px; border-radius: 999px; border: 1px solid var(--border);
    background-color: var(--surface); background-image: var(--select-caret);
    background-repeat: no-repeat; background-position: right 10px center;
    font-size: 12.5px; font-weight: 700; color: var(--text-dim); font-family: inherit;
    box-shadow: none; cursor: pointer;
  }
  .proj-sort:hover { border-color: var(--border-strong); color: var(--text); }
  .proj-sort:focus { background-color: var(--surface); }
  .proj-empty-filter {
    display: none; padding: 26px 18px; text-align: center;
    color: var(--text-faint); font-size: 13.5px;
  }
  .proj-grid.is-all-hidden + .proj-empty-filter { display: block; }

  @media (max-width: 640px) {
    .proj-grid { grid-template-columns: 1fr; gap: 12px; }
    .proj-toolbar { flex-direction: column; align-items: stretch; }
    .proj-search { max-width: none; }
    .proj-count-chip { align-self: flex-start; }
    .proj-card-body { padding: 14px 15px 12px; }
    .proj-card-foot { padding: 10px 15px; }
    /* Telefonda chiplar qatori yon tomonga suriladi — qatorlarga bo'linib
       ekranning yarmini egallab qolmasligi uchun. */
    .proj-filters {
      flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
      -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .proj-filters::-webkit-scrollbar { display: none; }
    .proj-chip, .proj-sort { flex-shrink: 0; }
  }

  .stat-foot {
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 11px; color: var(--text-dim); font-weight: 500;
  }
  .stat-spark { flex-shrink: 0; display: block; }

  /* ============================================================
     SECTIONS / PANELS
     ============================================================ */

  .section {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--gap);
    overflow: hidden;
    min-width: 0;
  }
  /* .stat-card bilan bir xil burchak-belgisi — panel/jadval kartalari ham
     xuddi shu "texnik" vizual tilga tegishli ekanini bildiradi. */
  .section::after {
    content: ''; position: absolute; top: 7px; left: 7px; width: 10px; height: 10px;
    border-top: 1.5px solid var(--primary-line); border-left: 1.5px solid var(--primary-line);
    border-top-left-radius: 3px; opacity: 0.9; pointer-events: none; z-index: 1;
  }
  .section.narrow { max-width: 460px; }
  .section.padded { padding: var(--gutter); }
  .section.flush  { margin-bottom: 0; }

  .section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 12px var(--gutter); min-height: 56px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .section-head > :first-child { min-width: 0; }
  /* Ilgari 11px UPPERCASE mikro-yorliq edi — shu sababli sahifada haqiqiy
     sarlavha darajasi yo'q edi, hamma narsa forma yorlig'iday ko'rinardi.
     Endi bu to'liq huquqli sarlavha; UPPERCASE faqat stat/jadval
     yorliqlarida qoladi, ya'ni sarlavha > yorliq ierarxiyasi paydo bo'ladi. */
  .section-title,
  .section-head {
    font-size: 14px; font-weight: 700; letter-spacing: -0.2px;
    text-transform: none; color: var(--text);
  }
  .section-head .count {
    font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--text-dim); font-size: 12px;
  }
  /* ===== FILTRLANGAN SON NISHONI (.shown-chip) =====
     2026-09-17dagi dizayn ko'rigi, 7-bosqich (auditda B14).

     Reyestr sahifalarida filtr panelining o'ng chetida "nechtasi
     ko'rinmoqda" nishoni turadi. U UCHTA shablonda alohida yozilgan
     edi — `.people-shown-chip`, `.eq-shown-chip`, `.th-shown-chip` —
     ikkitasi bayt-bayt bir xil, uchinchisi faqat `white-space` bilan
     farq qilardi.

     `.section-head .count` dan FARQI: u sarlavhadagi O'ZGARMAS jami,
     bu esa filtr qo'llangandan keyin JS yangilab turadigan son,
     shuning uchun ko'zga tashlanadigan dori shaklida.

     `var(--primary-line, var(--border))` zaxirasi olib tashlandi:
     `--primary-line` doim aniqlangan, ya'ni zaxira hech qachon
     ishlamasdi (1-bosqichda topilgan naqsh). */
  .shown-chip {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    padding: 7px 14px; border-radius: var(--r-pill);
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
    background: var(--primary-soft); color: var(--primary-active);
    border: 1px solid var(--primary-line);
  }
  /* Nishon o'z guruhi ichida turganda (masalan tugmalar bilan bitta
     `.jrn-toolbar-actions` ichida) o'ngga itarish KERAK EMAS — guruh
     o'zi joylashadi. */
  .shown-chip.is-inline { margin-left: 0; }
  /* Tor ekranda asboblar paneli ustunga aylanadi — nishon o'ngga
     itarilmasin, chap chetdan boshlansin. */
  @media (max-width: 640px) {
    .shown-chip { margin-left: 0; align-self: flex-start; }
  }


  /* ===== KALENDAR (.wcal-*) =====
     2026-09-17dagi dizayn ko'rigi, 8-bosqich (auditda B11).

     Bitta kalendar UCHTA shablonda yashardi:
       davomat.html                  `.wcal-*`      (23 qator)
       worker_checkin.html           `.wcal-*`      (23 qator, ikkitasidan
                                                     tashqari BAYT-BAYT bir xil)
       worker_hauling_trip_new.html  `.haul-cal-*`  (o'sha skelet, boshqa nom)

     Uchinchisi vaqt o'tib SURILIB ketgan: katak 34px o'rniga 32px,
     shrift 12.5px o'rniga 12px, qatorlar orasi 12px o'rniga 10px,
     o'q shrifti 15px o'rniga 16px. Ya'ni haydovchi bitta ilovada ikki
     xil kalendar ko'rardi.

     Endi skelet shu yerda, KATTAROQ o'lchamda (34px/12.5px) — barmoq
     uchun qulayrog'i tanlandi. Sahifaga xos narsalar o'z joyida
     qoladi: davomatdagi ishlagan/kelmagan/jarima ranglari va izoh
     qatori shu yerda (ular IKKI sahifada bir xil edi), reys
     kalendarining nishoni va kunlik sanog'i esa o'z shablonida —
     ular faqat bitta sahifada bor.

     `.wcal-wrap` ning KENGLIGI ataylab bu yerda emas: u har sahifada
     boshqacha (440px / 700px / 480px) va bu joylashuv, komponent
     emas. */
  .wcal-wrap { margin-bottom: 18px; }
  .wcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .wcal-title { font-size: 15px; font-weight: 700; color: var(--text); }
  .wcal-nav { display: flex; gap: 4px; }
  .wcal-nav a {
    display: inline-flex; align-items: center; justify-content: center;
    /* 2026-09-14: 28px edi — barmoq uchun juda kichik (me'yor 44px).
       Aylana ko'rinishi saqlandi, faqat bosiladigan maydon kattalashdi. */
    width: 44px; height: 44px; border-radius: 50%; color: var(--text-dim);
    text-decoration: none; font-size: 15px; transition: background .15s;
  }
  .wcal-nav a:hover { background: var(--surface-3); }
  .wcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 12px; text-align: center; }
  .wcal-weekday { font-size: 11px; color: var(--text-faint); font-weight: 600; padding-bottom: 4px; }
  .wcal-day {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 34px; width: 34px; margin: 0 auto; border-radius: 50%;
    font-size: 12.5px; color: var(--text); box-sizing: border-box;
  }
  .wcal-day.out-month { opacity: .3; }

  /* 2026-09-09, rang sxemasi qayta ishlandi.
     ILGARI: ishlagan kun — qalin YASHIL halqa, kelmagan kun — qalin QIZIL
     halqa. Natijada oyning boshi butunlay qizil doiralarga to'lib, ilova
     ochilganda birinchi ko'rinadigan narsa "xato devori" bo'lardi — holbuki
     u yerda hech qanday xato yo'q edi (dam olish kunlari ham qizil edi).

     ENDI: rang OG'IRLIGI holatning og'irligiga qarab beriladi —
       ishlagan kun  — tinch och yashil fon (norma, ko'zga urilmaydi);
       kelmagan kun  — kulrang fon;
       jarima kuni   — qizil (yagona haqiqiy ogohlantirish);
       bugun         — ko'k HALQA (fon emas!), shuning uchun bugungi holat
                       halqa ichida ko'rinib turadi — ikkalasi bir vaqtda.

     Jarima kuniga rangdan TASHQARI pastida nuqta ham qo'yiladi: qizil va
     yashilni ajrata olmaydigan odam (erkaklarning ~8 foizi) uni rangsiz
     ham taniydi. */
  .wcal-day.worked  { background: var(--ok-soft);      color: var(--ok-text);  font-weight: 600; }
  .wcal-day.missed  { background: var(--neutral-soft); color: var(--text-dim); font-weight: 600; }
  .wcal-day.penalty { background: var(--bad-soft);     color: var(--bad-text); font-weight: 700; }
  .wcal-day.penalty::after {
    content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: var(--bad);
  }
  /* box-shadow (border emas) — halqa fonni bosib qolmaydi va katak
     o'lchamini o'zgartirmaydi, ya'ni bugun + holat birga ko'rinadi. */
  .wcal-day.is-today { box-shadow: 0 0 0 2px var(--info); font-weight: 700; }

  .wcal-legend {
    display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
    font-size: 11.5px; color: var(--text-dim);
  }
  .wcal-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .wcal-key { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
  .wcal-key.worked  { background: var(--ok-soft);      border: 1px solid var(--ok-line); }
  .wcal-key.missed  { background: var(--neutral-soft); border: 1px solid var(--border-strong); }
  .wcal-key.penalty { background: var(--bad-soft);     border: 1px solid var(--bad-line); }
  .wcal-key.today   { background: transparent;         border: 2px solid var(--info); }

  .section-body { padding: var(--gutter); }
  .form-body { padding: 8px var(--gutter) var(--gutter); }

  /* ===== KENG KARTADAGI "QO'SHISH" FORMALARI (2026-10-08, vizual audit) =====
     Muammo: kontragent, pul hisobi, qarz, ofis, katalog, PTO reja va h.k.
     sahifalaridagi qo'shish formalari butun sahifa kengligidagi kartada
     turardi — kompyuterda maydonlar ham, "Qo'shish"/"Saqlash" tugmasi ham
     1000px+ ga cho'zilib, forma qo'pol ko'rinardi (Shohzod: "tugmalar
     judayam katta").
     Yechim (faqat keng ekranda, telefonda o'zgarishsiz — u yerda keng
     tugma barmoq uchun qulay):
       * ustma-ust maydonli forma (bevosita `label` yoki `{{ form.as_p }}`
         bilan chiqqan `p > label`) 640px dan kengaymaydi;
       * formaning o'zidagi asosiy tugma o'z matni kengligida (kamida
         180px), `.btn-row` ichidagi tugmalarga tegilmaydi;
       * sarlavha ostidagi izoh matni karta chetiga yopishib qolmaydi. */
  details.section > summary + p.faint,
  .section > .section-head + p.faint { padding: 12px var(--gutter) 0; }
  /* `{{ form.as_p }}` bilan chiqqan maydon izohi (Django `.helptext`)
     ilgari uslubsiz — oddiy qora matn bo'lib — maydon tagida turardi. */
  .helptext { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--text-faint); }
  @media (min-width: 900px) {
    /* `> div > label` — maydonlari `<div>` ichida chiqadigan formalar
       (katalog/ma'lumotnoma, asboblar). GET formalar (filtr panellari)
       ATAYLAB chetda: ular keng qatorga mo'ljallangan. */
    .section:not(.narrow) form:not([method="get"]):has(> label, > p > label, > div > label) { max-width: 640px; }
    .section:not(.narrow) form:not([method="get"]):has(> label, > p > label, > div > label) > button[type="submit"] {
      width: auto; min-width: 180px;
    }
    details.section > summary + p.faint,
    .section > .section-head + p.faint { max-width: 640px; }
    /* Bitta asosiy amal tugmasi (masalan "Ishdaman") kompyuterda karta
       bo'ylab 650px ga cho'zilmasin — telefonda esa to'liq kenglik qoladi. */
    :is(.btn, button[type="submit"]).btn-cta { max-width: 420px; margin-left: auto; margin-right: auto; }
  }
  /* Bir qatorli (flex) formalarda tugma va tanlov maydoni o'z kengligida —
     umumiy `width: 100%` qoidasi ularni alohida qatorga sindirib, butun
     karta bo'ylab cho'zib yuborardi (ombor o'tkazmasi, asboblar). */
  form[style*="display:flex"] > button[type="submit"],
  form[style*="display: flex"] > button[type="submit"] { width: auto; margin-top: 0; }
  form[style*="display:flex"] > select,
  form[style*="display: flex"] > select { width: auto; min-width: 220px; max-width: min(420px, 100%); }
  /* 2026-10-08: topbar'dagi "+ Pul harakati" tugmasi; tor ekranda faqat "+". */
  .pul-harakati-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-right: 8px; }
  /* 2026-10-08 (Pul harakati 3-bosqich): bo'lim ichidagi kirim-chiqim
     tugmalari — pul_havola shablon tegi orqali yagona sahifaga olib boradi. */
  .ph-tugmalar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ph-tugmalar .btn { width: auto; white-space: nowrap; }
  .ph-tugmalar-pastki { padding: 12px 20px 16px; border-top: 1px solid var(--border); }
  /* Sarlavha qatoridagi forma tugmasi (masalan xodim sahifasidagi "PIN kodini
     tozalash") umumiy submit qoidasidan 20px yuqori chekinish olib, yonidagi
     tugmadan 10px pastda turardi. */
  .section-head form > button[type="submit"].btn { margin-top: 0; }
  @media (max-width: 640px) {
    .pul-harakati-btn { padding-left: 10px; padding-right: 10px; margin-right: 4px; }
    .pul-harakati-btn .pul-harakati-matn { display: none; }
  }
  /* Loyihalar ro'yxatidagi "Saralash" tanlovi butun sahifa bo'ylab cho'zilardi.
     2026-10-14: 200px pol ham olib tashlandi — o'lcham yuqoridagi .proj-sort'da. */
  .proj-sort { width: auto; }

  /* Legacy h3 headings inside cards */
  .section h3 {
    font-size: 14px; font-weight: 700; letter-spacing: -0.2px; text-transform: none;
    color: var(--text); margin-bottom: 16px;
  }
  .section.padded h3, .section-body h3 { margin-bottom: 16px; }

  /* Yopiladigan/ochiladigan formalar (details/summary) — barcha panellarda formalarni ixcham qilish uchun */
  details.section > summary.section-head {
    cursor: pointer; list-style: none; user-select: none;
  }
  details.section > summary.section-head::-webkit-details-marker { display: none; }
  details.section > summary.section-head::marker { content: ''; }
  .section-head .chevron {
    transition: transform var(--t) var(--ease-out); flex-shrink: 0; color: var(--text-dim); font-size: 16px; font-weight: 700;
  }
  details[open] > summary.section-head .chevron { transform: rotate(180deg); }
  details.section > summary.section-head {
    transition: background var(--t-fast) var(--ease);
  }
  details.section > summary.section-head:hover { background: var(--surface-3); }
  details.section > summary.section-head:focus-visible {
    outline: none; background: var(--surface-3); box-shadow: inset var(--ring);
  }

  /* minmax(0, …) everywhere: a bare 1fr track defaults to min-width:auto and
     refuses to shrink below its content, which blows the layout out sideways. */
  .cols-2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
  .cards-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--gap); margin-bottom: var(--gap); align-items: start;
  }
  .cards-row > .section { margin-bottom: 0; }
  .cols-2 > *, .cards-row > *, .cards > *, .stats-row > * { min-width: 0; }

  /* ============================================================
     DATA TABLES
     ============================================================ */

  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .table-scroll::-webkit-scrollbar { height: 8px; }
  .table-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-xs); }
  .table-scroll::-webkit-scrollbar-track { background: var(--surface-2); }

  /* ---- UZUN JADVALLARNI YIG'ISH (2026-09-28dagi so'rov: "jadvallar
     yig'iladigan bo'lsin, default holatda hammasi emas, bir nechta qator
     ko'rinsin"). JS: shu fayl oxirida — `table[data-limit]` belgisiga
     qarab ishlaydi (qarang izoh o'sha yerda). ---- */
  .tbl-yigma-hidden { display: none !important; }
  .tbl-yigma-toggle {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 2px; padding: 9px 4px;
    font-size: 12.5px; font-weight: 700; color: var(--text-dim);
    background: var(--surface); border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    cursor: pointer;
  }
  .tbl-yigma-toggle:hover { color: var(--text); background: var(--surface-2); }
  .tbl-yigma-toggle .chevron { font-size: 10px; line-height: 1; }

  /* line-height 1.55 (body) jadvalda juda bo'sh: qator 45px ga chiqib ketardi.
     1.4 bilan padding'ni 4px shkalasida qoldirgan holda ~42px ga tushadi. */
  table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.4; }

  th {
    text-align: left; white-space: nowrap;
    padding: 12px var(--gutter);
    background: var(--surface-3);
    border-bottom: 1px solid var(--border-strong);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--th-text);
  }
  td {
    padding: 12px var(--gutter);
    border-top: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
    transition: background var(--t-fast) var(--ease);
  }
  tbody tr:nth-child(even) td, table tr:nth-child(even) td { background: var(--row-alt); }
  tbody tr:hover td, table tr:hover td { background: var(--primary-wash); }
  thead tr:hover th { background: var(--surface-3); }
  table tr:first-child th { border-top: none; }

  /* ============================================================
     YIG'ILADIGAN FILTR PANELI (.hf-*)
     ============================================================
     2026-09-13dagi so'rov (4-band), "Yuk yetkazish" reyestri uchun.
     Ilgari oltita <select> bitta qatorda yonma-yon turardi va har birining
     NOMI o'sha select'ning "Barchasi" variantI ichida yozilgan edi — biror
     qiymat tanlansa nom ko'rinmay qolardi ("Hamkor zavod — Barchasi" →
     "Asfalt-1"), ya'ni qaysi filtr ishlab turganini eslab qolish kerak edi.

     Yangi tuzilish: filtrlar YIG'ILADIGAN panelga kirdi (bosilmaguncha joy
     olmaydi), faol filtrlar esa panelning TASHQARISIDA "Yorliq: Qiymat ✕"
     nishonchasi bo'lib turadi — nom hech qachon yo'qolmaydi va bitta
     bosishda yechiladi. Panel `position:absolute` — saytdagi til
     tanlagichi (.lang-dd-menu) bilan bir xil naqsh.

     2026-09-14: panel "Moliya" sahifasidagi xarajat balansi hisobotiga
     ham kerak bo'lgach, uslublar shu yerga — umumiy manbaga ko'chirildi.
     Ko'chirish paytida yo'l-yo'lakay nuqson tuzatildi: nishonchani
     yopish tugmasi `var(--danger)` tokeniga tayanardi, loyihada esa
     BUNDAY TOKEN YO'Q (tokens.html da `--bad-text`) — ya'ni hover rangi
     mavzuga moslashmay, qotib qolgan #d14343 edi. E-bosqichdagi
     `.ic-btn` bilan AYNAN bir xil xato. */
  .hf-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  details.hf { position: relative; }
  .hf-toggle {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
    padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    color: var(--text); background: var(--surface); border: 1px solid var(--border);
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .hf-toggle::-webkit-details-marker { display: none; }
  .hf-toggle::marker { content: ''; }
  .hf-toggle:hover { border-color: var(--primary-line, var(--border)); }
  details.hf[open] .hf-toggle { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
  .hf-toggle svg { width: 14px; height: 14px; flex: none; }
  .hf-count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800;
  }
  .hf-chev { color: var(--text-dim); font-size: 12px; font-weight: 700; transition: transform var(--t) var(--ease-out); }
  details.hf[open] .hf-chev { transform: rotate(180deg); }

  .hf-menu {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 45;
    width: 660px; max-width: calc(100vw - 48px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 16px;
  }
  /* 2026-10-14: panelni yopish × tugmasi (theme.js qo'shadi). O'ng yuqori
     burchakda; birinchi qator yorliqlari ostiga tushmasligi uchun panel
     tepasiga biroz joy beriladi. */
  .hf-menu:has(> .hf-yop) { padding-top: 34px; }
  .hf-yop {
    position: absolute; top: 6px; right: 6px;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--text-dim); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .hf-yop svg { width: 14px; height: 14px; display: block; }
  .hf-yop:hover { color: var(--text); background: var(--surface-3); }
  .hf-yop:focus-visible { outline: none; box-shadow: var(--ring); color: var(--text); }
  /* To'r 6 ustunli: ochiladigan ro'yxatlar 2 tadan (qatorga uchtasi).
     Kam variantli filtrlar (avval yonma-yon tugmalar) 2026-10-09dan
     ochiluvchi chiplar — ular to'rning oxirida alohida qator (.hf-dd-row). */
  .hf-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .hf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; grid-column: span 2; }
  .hf-lab {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--text-dim);
  }
  .hf-field select { width: 100%; min-width: 0; }

  /* Ikki-uch variantli filtrlar (Manzil turi / Egalik / Narx) uchun
     ochiladigan ro'yxat ortiqcha — ular yonma-yon tugmachaga aylandi:
     ochish→aylantirish→bosish o'rniga BITTA bosish. JS shart emas —
     forma GET, tugmaning name/value o'zi filtrni yuboradi.
     Selektor `button[type="submit"]` bilan boshlanadi: umumiy yashil
     submit qoidasini yengish uchun (xuddi .lang-dd-opt kabi). */
  /* 2026-09-13dagi IKKINCHI so'rov (3-band): "bir marta tugma bossak
     bo'lim yopilib qolmoqda — avval batafsil filtrlaylik, keyin Ko'rsatish
     tugmasi bilan natijani ko'raylik". Ilgari bu tugmalar `type=submit`
     edi: har bosishda sahifa qayta yuklanib, panel yopilardi.

     Endi ular — YASHIRIN radio tugma + uning yorlig'i. Ya'ni bosilganda
     shunchaki tanlov belgilanadi (hech narsa yuborilmaydi), hammasi
     tanlab bo'lingach pastdagi "Ko'rsatish" bosiladi. JS baribir
     ishlatilmadi — brauzerning o'z radio mexanizmi yetarli. */

  /* 2026-10-09: yonma-yon tugmali (`.hf-seg`) filtrlar "ochiluvchi chip"ga
     aylandi (direktor tanlovi, variant 4): har filtr bitta ixcham tugma —
     "Manzil turi: Barchasi ▾" — bosilganda variantlar ochiladi.
     Ichida avvalgidek YASHIRIN radio tugmalar: tanlash hech narsa
     yubormaydi, "Ko'rsatish" bosilganda filtr qo'llanadi (2026-09-13
     qarori saqlandi). Yopiq <details> ichidagi radio ham forma bilan
     yuboriladi. Tanlangan qiymat matnini yangilash va menyuni yopish —
     pastdagi kichik JS (`data-hf-dd-v`). */
  .hf-dd-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .hf-dd-row:not(:has(.hf-dd)) { display: none; }
  /* Filtr paneli kartochka (`.section`, Moliya'da `.fin-table-wrap` /
     `.fin-group` — hammasi overflow: hidden) ichida turadi — jadval bo'sh/qisqa bo'lsa menyuning
     pasti kesilib qolardi (2026-10-09 skrinshotda "Narxlanmagan"
     ko'rinmadi). Eksport menyusidagi yechim bilan bir xil. */
  .section:has(details.hf[open]), .section:has(details.hf-dd[open]),
  .fin-table-wrap:has(details.hf[open]), details.fin-group:has(details.hf[open]) { overflow: visible; }
  details.hf-dd { position: relative; }
  .hf-dd-btn {
    display: inline-flex; align-items: center; gap: 6px; list-style: none;
    min-height: 36px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); font-size: 12.5px; line-height: 1.2; cursor: pointer;
    white-space: nowrap; user-select: none;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .hf-dd-btn::-webkit-details-marker { display: none; }
  .hf-dd-btn::marker { content: ''; }
  .hf-dd-btn:hover { border-color: var(--primary-line, var(--border)); }
  .hf-dd-btn:focus-visible { outline: none; box-shadow: var(--ring); }
  .hf-dd-k { color: var(--text-dim); font-weight: 600; }
  .hf-dd-v { color: var(--text); font-weight: 700; }
  .hf-dd-chev { font-size: 10px; color: var(--text-dim); transition: transform var(--t-fast) var(--ease); }
  details.hf-dd[open] .hf-dd-chev { transform: rotate(180deg); }
  details.hf-dd.is-active .hf-dd-btn { background: var(--primary-soft); border-color: var(--primary-line, var(--primary)); }
  details.hf-dd.is-active .hf-dd-v { color: var(--primary-ink); }
  details.hf-dd[open] .hf-dd-btn { border-color: var(--primary); }
  .hf-dd-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: max(100%, 190px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  }
  .hf-dd-menu input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
  .hf-dd-menu label, .hf-dd-menu a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: 0; padding: 8px 10px; border-radius: var(--r-sm);
    font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none;
    white-space: nowrap; cursor: pointer; user-select: none;
  }
  .hf-dd-menu label:hover, .hf-dd-menu a:hover { background: var(--surface-3); text-decoration: none; }
  .hf-dd-menu input[type="radio"]:checked + label, .hf-dd-menu a.is-on {
    background: var(--primary-soft); color: var(--primary-ink); font-weight: 700;
  }
  .hf-dd-menu input[type="radio"]:checked + label::after, .hf-dd-menu a.is-on::after { content: '✓'; font-weight: 800; }
  .hf-dd-menu input[type="radio"]:focus-visible + label { box-shadow: var(--ring); }
  @media (max-width: 640px) {
    .hf-dd-row { flex-direction: column; align-items: stretch; }
    .hf-dd-btn { width: 100%; justify-content: space-between; }
    .hf-dd-k { margin-right: auto; }
  }

  /* Panel pastidagi amal qatori: sana oralig'i + Ko'rsatish + Yuklab olish.
     2026-09-13: sana va eksport ilgari JADVALDAN PASTDA alohida turardi —
     direktorning so'rovi bo'yicha ikkalasi ham shu panelga ko'chirildi,
     "ikkisi uchun bitta filtr" bo'lishi uchun. */
  .hf-foot {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  }
  .hf-foot .hf-field { grid-column: auto; flex: 0 0 auto; }
  .hf-foot input[type="date"] { min-width: 138px; }
  .hf-foot-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  /* "Ko'rsatish" tugmasi filtr etagida sana maydonlari BILAN BIR QATORDA
     turadi. `min-height: 0` unga 37.5px berardi — sana maydoni 40px,
     ya'ni ikkalasi 2.5px ga siljigan holda tekislanardi. Endi ikkalasi
     ham `--control-h`. Tugmada `.btn-sm` klassi ham bor, lekin bu yerda
     u o'rinsiz: qator 40px lik qator. */
  button[type="submit"].hf-apply { margin: 0; min-height: var(--control-h); padding: 8px 20px; font-size: 12.5px; font-weight: 700; }
  @media (max-width: 640px) {
    .hf-foot { flex-direction: column; align-items: stretch; }
    .hf-foot-actions { margin-left: 0; }
    .hf-foot input[type="date"] { width: 100%; }
  }

  .hf-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 6px 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  }
  .hf-chip-k { color: var(--text-dim); font-weight: 600; }
  a.hf-chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border-radius: 50%; flex: none;
    background: var(--surface-3); color: var(--text-dim);
    font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none;
  }
  a.hf-chip-x:hover { background: var(--bad-text); color: var(--surface); text-decoration: none; }
  a.hf-clear { font-size: 12px; font-weight: 600; color: var(--text-dim); }
  a.hf-clear:hover { color: var(--text); }
  .hf-empty { font-size: 12px; color: var(--text-faint); }

  @media (max-width: 640px) {
    .hf-menu { width: calc(100vw - 40px); padding: 14px; }
    .hf-grid { grid-template-columns: 1fr; }
    .hf-field { grid-column: span 1; }
  }

  /* ============================================================
     IKKI QATORLI SARLAVHA (.th-wrap)
     ============================================================
     Yuqoridagi `th { white-space: nowrap }` qoidasi sarlavhani bitta
     qatorga majburlaydi — ya'ni ustun kengligini MA'LUMOT emas,
     SARLAVHA belgilaydi. Ustuni ko'p jadvalda bu jadvalni ekrandan
     chiqarib yuboradi.

     `.table-scroll`ga qo'shimcha ravishda `.th-wrap` berilsa, o'sha
     jadvalda sarlavha ikki-uch qatorga bo'linishi mumkin: thead bir
     marta biroz o'sadi, buning evaziga gorizontal aylantirish
     yo'qoladi.

     2026-09-14: bu qoida "Texnika reestri" uchun yozilgan edi
     (`.eq-th-wrap` nomi bilan, faqat o'sha sahifada). Keyin uch tilda
     o'lchov qilinganda ma'lum bo'ldiki, "Texnika holati" sahifasi
     O'ZBEKCHADA sig'adi-yu, RUSCHA va INGLIZCHADA sig'maydi
     ("Ожидаемо (по движению)" — 211px, "Expected (from movement)" —
     215px). Ikkita sahifa bitta qoidaga muhtoj bo'lgani uchun u
     global qilindi.

     DIQQAT: bu qoida SON katakchalariga tegmaydi — identifikatorlar
     (davlat raqami va h.k.) bo'linib ketmasligi uchun `td.num`
     bo'linmaydigan bo'lib qoladi. */
  .th-wrap th { white-space: normal; max-width: 110px; line-height: 1.25; }

  /* ============================================================
     IXCHAM JADVAL (.tbl-compact)
     ============================================================
     Umumiy `td/th` chekkasi `12px var(--gutter)` — desktopda --gutter
     20px, ya'ni HAR BIR katakda 40px faqat bo'sh joy. Sakkiz-o'n bir
     ustunli jadvalda bu 320-440px, ya'ni jadvalning ekrandan chiqib
     ketishining eng katta yagona sababi. Shrift aybdor emas (12.5px
     allaqachon kichik).

     `.table-scroll`ga `.tbl-compact` qo'shilsa, o'sha jadvalda chekka
     siqiladi. Ko'p ustunli jadvallarda ISHLATILADI, oddiylarida YO'Q —
     bo'sh joy o'qishni yengillashtiradi, uni bekorga yo'qotmaymiz.

     2026-09-13da bu qoida "Yuk yetkazish" reyestri uchun mahalliy
     yozilgandi (`.jrn-table-wrap`). 2026-09-14da uch tilda o'lchov
     "Texnika holati"ga ham aynan shu kerakligini ko'rsatdi — shu sabab
     umumiy qoidaga aylandi. */
  .tbl-compact th, .tbl-compact td { padding: 9px 8px; }
  /* 10px — umumiy `th` esa 10.5px. 2026-09-15da bu "shkalada ortiqcha
     qiymat" deb 10.5px ga TENGLASHTIRILDI va o'lchov darhol qaytardi:
     ruscha sarlavha "Ожидаемо (по движению)" `.th-wrap` ning 110px
     chegarasidan 119px o'rniga 125px ga toshdi. Ya'ni bu yarim piksel
     BEZAK emas — ixcham jadval tor ustunda ruscha sarlavhani shu bilan
     ushlab turadi. Qaytarildi; shkalada ataylab qolgan istisno. */
  .tbl-compact th { font-size: 10px; letter-spacing: 0.4px; }
  .th-wrap td.num { white-space: nowrap; }

  /* ============================================================
     UZUN MATNLI USTUN (.td-clip)
     ============================================================
     `.th-wrap` SARLAVHANI, `.tbl-compact` CHEKKANI jilovlaydi. Uchinchi
     sabab esa MA'LUMOTNING O'ZI edi va u eng og'iri bo'lib chiqdi.

     2026-09-15dagi o'lchov (haqiqiy brauzer, 25 ta direktor sahifasi,
     uch tilda): jadval qatori loyiha bo'ylab 36px dan 112px gacha,
     18 xil balandlikda. Eng yomoni "Texnika smenasi jurnali" — 112px,
     ya'ni bosh sahifadagi qatordan UCH BARAVAR. Sabab: to'qqizta
     ustunning uchtasida erkin matn bor (obyekt nomi, zakazchik,
     pudratchi) va ular haqiqiy shartnoma nomlari — "Toshkent-Samarqand
     avtomobil yo'li 142-158 km" kabi. Ustun kengligiga hech qanday
     cheklov bo'lmagani uchun matn uch qatorga yoyiladi va ekranga 20
     qator o'rniga 7 qator sig'adi.

     `.td-clip` katakni BITTA qatorda kesadi va uchta nuqta qo'yadi.
     Ma'lumot YO'QOLMAYDI: to'liq matn `title` da qoladi (sichqoncha
     ustiga kelsa chiqadi) va jadval `.table-scroll` ichida bo'lgani
     uchun kerak bo'lsa yon tomonga surib ham ko'rish mumkin.

     NEGA `max-width` YETARLI EMAS: `table-layout: auto` da brauzer
     katak kengligini MAZMUNGA qarab hisoblaydi va `max-width` ni
     layout bosqichida e'tiborsiz qoldiradi. Shu sabab kesish ichki
     blokda bajariladi — `td` ning o'zida emas. Bu jadvalning boshqa
     ustunlariga TEGMAYDI.

     IKKI QATORLI VARIANT: "Moliya" sahifasida `.fin-proj` bor —
     u nomni bitta emas, IKKI qatorga cheklaydi. Bu ataylab boshqacha
     (o'sha sahifada obyekt nomi ikkinchi darajali, lekin bir qatorga
     sig'maydigan darajada muhim) va `verify_moliya_joylashuvi.py`
     uni qo'riqlaydi — shu sabab `.td-clip` ga BIRLASHTIRILMADI.
     Yangi sahifada ikki qatorli kesish kerak bo'lsa, o'sha qoidani
     shu yerga ko'chirib, nom bering — mahalliy nusxa yaratmang.

     DIQQAT — FOIZ ISHLATMANG. Birinchi urinishda `width: 22%` edi va
     bitta jadvalda ikkita `.td-clip` bo'lsa 44% ni egallab, QOLGAN
     ustunlarni siqib qo'yardi: "Hisoblar boshqaruvi" qatori 60px dan
     77.5px ga CHIQIB KETDI (o'lchov ko'rsatdi). Aniq piksel chegarasi
     esa faqat O'SHA ustunni cheklaydi, qolganlariga tegmaydi.

     Ishlatilishi:
         <td class="td-clip" title="{{ uzun_matn }}">{{ uzun_matn }}</td> */
  .td-clip {
    max-width: 240px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .td-clip > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 640px) { .td-clip { max-width: 150px; } }

  /* Flex ichidagi matn uchun (avatar + ism kabi): butun katakni kesib
     bo'lmaydi, chunki avatar ham yo'qolardi — faqat matn kesiladi.
     `min-width: 0` SHART: flex elementi standart holda mazmunidan
     kichrayolmaydi va `overflow` ishlamaydi. */
  .clip-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

  /* SON KATAKLARI BO'LINMAYDI.
     2026-09-15dagi o'lchov: "Obyekt tafsiloti" qatori 95px edi va
     sababi uzun nom emas, SON bo'lib chiqdi — "95 739.49 chel-soat"
     84px li ustunda TO'RT qatorga bo'lingan. Raqamni bo'lish o'qishni
     ham buzadi (95 / 739.49 ikki xil son bo'lib ko'rinadi).
     Bu qoida ilgari FAQAT `.th-wrap` jadvallarida bor edi (yuqoriga
     qarang) — o'lchov uni hamma joyga kerakligini ko'rsatdi. */
  td.num { white-space: nowrap; }

  tr.clickable { cursor: pointer; }
  tr.clickable:hover td { background: var(--primary-wash); }

  td.strong, .cell-strong { font-weight: 600; }
  td a {
    color: var(--link); font-weight: 600; border-radius: var(--r-sm);
    transition: color var(--t-fast) var(--ease);
  }
  td a:hover { color: var(--link-hover); text-decoration: underline; }
  td a:focus-visible { outline: none; color: var(--link-hover); box-shadow: var(--ring); }
  td.empty, .empty-cell { color: var(--text-faint); font-style: italic; }
  /* ===== BO'SH HOLAT (.empty-state) =====
     2026-09-17dagi dizayn ko'rigi, 6-bosqich (auditda B6).

     `.empty-state` allaqachon bor edi, lekin "yozuv yo'q" xabari
     ~20 joyda undan CHETLAB o'tib chizilgan: `.mo-empty`, `.fe-empty`,
     `.sos-empty`, `.oc-empty` (har biri o'z shablonida), va
     `<p class="faint" style="font-size:13px">` ko'rinishidagi
     qo'lda yozilgan uslub. Ishchi panelidagi 17 ta shablondan
     BIRORTASI ham umumiy klassni ishlatmasdi.

     Sabab aniq: bitta qoida hamma joyga to'g'ri kelmasdi — jadval
     katagi, kartochka ichi va butun sahifa uchun uchta boshqa
     o'lcham kerak. Endi shu uchtasi variant sifatida bor, ya'ni
     chetlab o'tishga sabab qolmadi.

     `margin: 0` — element `<p>` yoki `<td>` bo'lganda brauzerning
     o'z chekkasi qo'shilib ketmasin (ilgari hammasi `<div>` edi,
     shuning uchun bu qoida hech narsani o'zgartirmaydi). */
  .empty-state {
    padding: 32px var(--gutter); margin: 0;
    text-align: center; color: var(--text-faint); font-size: 12.5px;
  }
  /* Kartochka yoki jadval ichida — sahifa o'rtasida emas. */
  .empty-state.is-compact { padding: 20px 4px; font-size: 13px; }
  /* Butun ro'yxat bo'sh bo'lganda: uzuq chiziqli ramka "bu yerda
     hali hech nima yo'q" degan ma'noni rangsiz ham beradi.

     2026-09-17 (7-bosqich): 6-bosqichda bu variant faqat IKKI joydan
     (`fuel_events`, `sos_alerts`) yig'ilgandi, chunki o'sha bosqichdagi
     skaner faqat `{% templatetag openblock %} empty {% templatetag closeblock %}`
     joylarini qidirgan. Filtr natija bermaganda JS ko'rsatadigan
     panellar esa e'tibordan chetda qolgan — ular TO'QQIZTA shablonda
     yana takrorlangan ekan (`.eq-empty`, `.th-empty`, `.jrn-empty`,
     `.people-empty`, `.cl-empty`, `.ds-empty`, `.ov-empty`,
     `.mx-empty`, `.tf-empty`). To'qqizalasi ham mazmunan bir xil,
     farqi faqat to'ldirishda (30/34/40px) edi.

     Ko'pchilik qiymat olindi: `var(--r-lg)` radius va `--text-dim`
     rang — to'qqizalasida shunday. Avvalgi `16px` ikkitasidan
     kelgandi va 4/8/10/14/20 shkalasiga ham tushmasdi. */
  .empty-state.is-card {
    background: var(--surface); border: 1px dashed var(--border);
    border-radius: var(--r-lg); padding: 34px 16px;
    color: var(--text-dim); font-size: 13.5px;
  }
  /* Filtr natijasi bo'sh bo'lganda JS ko'rsatadi (`style.display`),
     shuning uchun boshlang'ich holat yashirin. */
  .empty-state.is-hidden { display: none; }

  /* ===== HODISA KARTOCHKASI (.ev-*) =====
     2026-09-17dagi dizayn ko'rigi, oxirgi bosqich (auditda B7).

     Ikkita "hodisa ro'yxati" sahifasi bor — yoqilg'i hodisalari
     (`fuel_events.html`, `.fe-*`) va SOS signallari (`sos_alerts.html`,
     `.sos-*`). Ularning ko'rinishi ATAYLAB bir xil qilingan edi va
     shu sabab YETTITA qoida ikkala shablonda bayt-bayt takrorlangandi:
     `-note`, `-card`, `-head`, `-meta` (+ `b`, `a`), `-badge`,
     `-actions` (+ submit chekinishi). Ya'ni kartochkaning bo'shlig'ini
     o'zgartirish ikkita faylni qidirishni talab qilardi, va ular
     allaqachon bir-biridan uzoqlasha boshlagandi.

     `is-new` chizig'ining RANGI esa ataylab HAR XIL va shu sabab
     sahifada qoladi: yoqilg'ida ko'k (`--info` = "sizning
     navbatingiz"), SOS'da qizil (`--bad` = favqulodda). Bu 2-bosqichda
     (A4) qabul qilingan qaror.

     Radius 16px edi — shkaladan tashqarida; `--r-lg` (14px) ga
     o'tkazildi. */
  .ev-note {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 14px;
    font-size: 13px; color: var(--text-dim); line-height: 1.6;
  }
  .ev-note b { color: var(--text); }

  .ev-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 10px;
  }
  /* Chap chetidagi chiziq — ro'yxatni aylantirganda "hali ko'rilmagani"
     darrov ko'zga tashlansin. Rangni sahifa o'zi beradi. */
  .ev-card.is-new { border-left: 3px solid var(--info); }

  .ev-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
  }
  .ev-meta { font-size: 12.5px; color: var(--text-faint); margin-top: 4px; line-height: 1.6; }
  .ev-meta b { color: var(--text-dim); font-weight: 600; }
  .ev-meta a { color: var(--accent, var(--text-dim)); }
  .ev-badge {
    font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill);
    background: var(--bad-soft); color: var(--bad); white-space: nowrap;
  }
  .ev-actions {
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  /* Umumiy `button[type="submit"]` qoidasi 20px yuqori chekinish
     qo'shadi — kartochka ichida u ortiqcha bo'shliq beradi. */
  .ev-actions button[type="submit"] { margin-top: 0; }

  .row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

  /* ============================================================
     BADGES / PILLS
     ============================================================ */

  /* .badge va .delta ko'pincha bitta katakda yonma-yon turadi —
     line-height va padding bir xil, shuning uchun balandligi ham bir xil. */
  .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0.1px;
    white-space: nowrap;
    border: 1px solid transparent;
  }
  .badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
  }
  .badge.no-dot::before { display: none; }

  .badge.ok,      .badge.online  { background: var(--ok-soft);      color: var(--ok-text);     border-color: var(--ok-line); }
  .badge.warn,    .badge.pending { background: var(--warn-soft);    color: var(--warn-text);   border-color: var(--warn-line); }
  .badge.bad,     .badge.alert   { background: var(--bad-soft);     color: var(--bad-text);    border-color: var(--bad-line); }
  .badge.info                    { background: var(--info-soft);    color: var(--info-text);   border-color: var(--info-line); }
  .badge.neutral, .badge.offline { background: var(--neutral-soft); color: var(--neutral-ink); border-color: var(--border-strong); }
  .badge.primary                 { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary-line); }

  /* Numeric delta pills — mono, tabular */
  .delta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: var(--r-pill);
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
    border: 1px solid transparent;
  }
  .delta.up      { background: var(--ok-soft);      color: var(--ok-text);     border-color: var(--ok-line); }
  .delta.down    { background: var(--bad-soft);     color: var(--bad-text);    border-color: var(--bad-line); }
  .delta.flat    { background: var(--neutral-soft); color: var(--neutral-ink); border-color: var(--border-strong); }
  .delta.warn    { background: var(--warn-soft);    color: var(--warn-text);   border-color: var(--warn-line); }

  /* Avatar halqasi — "Xodimlar holati" jadvalidagi ism yonidagi aylana
     atrofida holat rangidagi halqa: yashil = ishda/kelgan, kulrang = ketgan,
     qizil = kelmagan (partials/worker_status_table.html da ishlatiladi) */
  .avatar-st {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--text-dim); background: var(--surface-3);
    border: 2px solid var(--border-strong); box-sizing: border-box; flex-shrink: 0;
  }
  .avatar-st.is-g { border-color: var(--ok); }
  .avatar-st.is-r { border-color: var(--bad); }

  .dot-status { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
  .dot-status.g   { background: var(--ok);   box-shadow: 0 0 0 3px var(--ok-soft); }
  .dot-status.r   { background: var(--bad);  box-shadow: 0 0 0 3px var(--bad-soft); }
  .dot-status.y   { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
  .dot-status.dim { background: var(--text-faint); box-shadow: 0 0 0 3px var(--neutral-soft); }

  .name-cell { display: inline-flex; align-items: center; gap: 8px; }

  /* ============================================================
     BUTTONS
     ============================================================ */

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--control-h);
    padding: 8px 16px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 600; line-height: 1.4;
    white-space: nowrap; cursor: pointer;
    background: linear-gradient(180deg, var(--primary-top), var(--primary));
    color: #fff;
    box-shadow: 0 1px 2px rgba(13,148,136,0.26), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease),
                transform var(--t-fast) var(--ease-out), color var(--t) var(--ease), border-color var(--t) var(--ease);
  }
  .btn:hover {
    background: linear-gradient(180deg, var(--primary), var(--primary-hover));
    box-shadow: 0 2px 4px rgba(13,148,136,0.18), 0 8px 18px rgba(13,148,136,0.26), inset 0 1px 0 rgba(255,255,255,0.18);
    transform: translateY(-1px);
  }
  /* Bosilganda tez qaytish — sekin transition bosishni "loyqa" qiladi */
  .btn:active {
    transform: translateY(0); background: var(--primary-active); box-shadow: var(--shadow-xs);
    transition-duration: 60ms;
  }
  .btn:focus-visible { outline: none; box-shadow: var(--ring), var(--shadow-sm); }

  /* Secondary — quiet, outlined */
  .btn-secondary {
    background: var(--surface); color: var(--text-dim);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
  }
  .btn-secondary:hover {
    background: var(--surface-3); color: var(--text);
    border-color: var(--border-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px);
  }
  .btn-secondary:active { background: var(--border); transform: translateY(0); }
  .btn-secondary:focus-visible { border-color: var(--primary); box-shadow: var(--ring), var(--shadow-xs); }

  /* Ghost — lowest weight, for inline/table actions.
     Kichik boshqaruvlar --r-sm oladi: 32px balandlikda 10px radius
     40px tugmaga nisbatan haddan tashqari yumaloq ko'rinadi. */
  .btn-ghost {
    background: transparent; color: var(--text-dim);
    border-color: transparent; box-shadow: none;
    min-height: var(--control-h-sm); border-radius: var(--r-sm);
    padding: 4px 12px; font-size: 12px;
  }
  .btn-ghost:hover { background: var(--surface-3); color: var(--text); transform: none; box-shadow: none; }
  .btn-ghost:focus-visible { background: var(--surface-3); color: var(--text); box-shadow: var(--ring); }

  .btn-ghost.is-primary { color: var(--link); }
  .btn-ghost.is-primary:hover { background: var(--primary-soft); color: var(--link-hover); }
  .btn-ghost.is-danger { color: var(--bad-text); }
  .btn-ghost.is-danger:hover { background: var(--bad-soft); color: var(--bad-text); }
  .btn-ghost.is-danger:focus-visible { background: var(--bad-soft); color: var(--bad-text); box-shadow: var(--ring-bad); }
  .btn-ghost.is-disabled { opacity: 0.4; pointer-events: none; }

  /* ============================================================
     IKONKALI QATOR AMALI (.ic-btn)
     ============================================================
     2026-09-14dagi sahifalararo moslik ko'rigi.

     Jadvaldagi "Amal" ustuni uchta MATNLI tugmadan iborat bo'lsa, ustun
     kengligi ~125px bilan cheklanadi va tugmalar bir-birining tagiga
     tushib ketadi — o'shanda qator balandligi 42px dan 137px ga chiqadi,
     ya'ni ekranga 20 ta emas, 5 ta qator sig'adi. O'lchangan holat:
     "Texnika reestri" sahifasi (2026-09-14).

     Yechim: kam ishlatiladigan tahrirlash/o'chirish ikonkaga aylanadi,
     kundalik asosiy amal esa MATN bo'lib qoladi (ikonka nimani
     bildirishini taxmin qilishga majbur qilmaydi).

     Bu qoida ilgari FAQAT "Yuk yetkazish" sahifasida `.jrn-ic-btn` nomi
     bilan turardi. Endi u global — chunki:
       * ikkita sahifada bir xil CSS ikki nusxada yotmaydi;
       * eski nusxada `var(--danger-soft)` va `var(--danger)` ishlatilgan
         edi, bunday TOKENLAR loyihada YO'Q — ya'ni o'chirish tugmasining
         hover rangi mavzuga (light/dark) moslashmay, qotib qolgan
         #d14343 ga tushib qolardi. Bu yerda haqiqiy tokenlar ishlatiladi.

     Ochiladigan "⋯" menyusi ATAYLAB tanlanmadi: bu jadvallar
     `.table-scroll` (overflow:auto) ichida, ya'ni menyu paneli qirqilib
     qolardi. */
  .ic-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: var(--r-sm);
    color: var(--text-dim); background: transparent; border: 1px solid transparent;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .ic-btn svg { width: 15px; height: 15px; display: block; }
  .ic-btn:hover { background: var(--surface-3); color: var(--text); }
  .ic-btn:focus-visible { outline: none; background: var(--surface-3); color: var(--text); box-shadow: var(--ring); }
  .ic-btn.is-danger:hover { background: var(--bad-soft); color: var(--bad-text); }
  .ic-btn.is-danger:focus-visible { background: var(--bad-soft); color: var(--bad-text); box-shadow: var(--ring-bad); }
  /* 2026-09-26 KECHKI vizual audit ("Batafsil" o'rniga chekning o'zi,
     `ic_chek.html`): tahrirlash/o'chirishdan farqli, bu MUSBAT/muhim
     amal — shuning uchun `.btn-ghost.is-primary` bilan bir xil naqshda
     DAM HOLATIDA ham rangli (faqat hoverda emas), aks holda chekning
     borligi boshqa ikonkalar orasida yo'qolib qolardi. */
  .ic-btn.is-primary { color: var(--link); }
  .ic-btn.is-primary:hover { background: var(--primary-soft); color: var(--link-hover); }
  .ic-btn.is-primary:focus-visible { background: var(--primary-soft); color: var(--link-hover); box-shadow: var(--ring); }

  /* ============================================================
     2026-09-17 (dizayn 3-bosqich, A7) — UCHTA KOMPONENT BU YERGA
     KO'CHIRILDI

     Uchalasi ham IKKI shablonda nusxa bo'lib yotgan edi va uchalasi
     ham ishchi panelining O'Z 44px me'yoridan past edi. Nusxa turgani
     uchun ularni bir joyda tuzatib bo'lmasdi — avval birlashtirildi,
     keyin o'lchami ko'tarildi.

       .pw-toggle          ~26px  (worker_pin.html + profile.html)
       .entry-receipt-link ~14px  (worker_balance.html + worker_moliya.html)
       .paid-by-row label  ~20px  (worker_yoqilgi.html + worker_moliya.html)

     BARMOQ MAYDONI O'SADI, KO'RINISH EMAS: ikonka va shrift o'lchami
     o'zgarmagan, faqat bosiladigan maydon kattalashgan. Yagona
     ko'zga tashlanadigan farq — chek havolasi turgan qator biroz
     balandlashadi; me'yorning ma'nosi aynan shu. */

  /* --- Parolni ko'rsatish/berkitish --- */
  .pw-wrap { position: relative; }
  .pw-wrap input { width: 100%; padding-right: 46px; box-sizing: border-box; }
  .pw-toggle {
    /* `top:50%` + `translateY` o'rniga to'liq balandlik: shunda bosish
       maydoni kiritish maydonining balandligiga TENG bo'ladi — ishchi
       panelida 44px, dashboardda 40px. Ilgari u 4px to'ldirish +
       18px ikonka = 26px edi, ya'ni ikkala joyda ham past. */
    position: absolute; top: 0; right: 0; height: 100%; width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0; cursor: pointer;
    opacity: 0.55; line-height: 1; color: var(--text-dim);
  }
  .pw-toggle:hover { opacity: 0.9; }
  .pw-toggle:focus-visible { outline: none; opacity: 1; box-shadow: var(--ring); border-radius: var(--r-sm); }
  .pw-toggle svg { width: 18px; height: 18px; display: block; }
  .pw-toggle .icon-eye-closed { display: none; }
  .pw-toggle[data-state="visible"] .icon-eye-open { display: none; }
  .pw-toggle[data-state="visible"] .icon-eye-closed { display: block; }

  /* --- Chek suratiga havola (moliya ro'yxatlarida) ---
     TO'RTTA shablonda nusxa edi: ikkitasi ishchi panelida, ikkitasi
     dashboardda. Shuning uchun o'lcham ikkiga bo'linadi — dashboardda
     32px (sichqoncha uchun yetarli, qator ixcham qoladi), ishchi
     panelida esa panelning o'z me'yori 44px. Bitta 44px ni hamma
     joyga qo'yish direktorning moliya jadvalidagi har bir qatorni
     keraksiz cho'zib yuborardi. */
  .entry-receipt-link {
    font-size: 11.5px; color: var(--primary); text-decoration: none;
    display: inline-flex; align-items: center; min-height: 32px;
  }
  .worker-app .entry-receipt-link { min-height: 44px; }

  /* --- "Kim to'ladi" tanlov-kartochkalari ---
     2026-09-23dagi so'rov: "xodimlar tanlashda qiynalmasin" — oddiy
     radio-matn ro'yxati o'rniga ikonkali tanlov-kartochkalar (worker_
     yoqilgi.html + worker_moliya.html, qarang LOYIHA_HUJJATI.md).
     Tanlangan variant `:has(input:checked)` orqali ajratiladi — loyihada
     shu texnika allaqachon ishlatilgan (masalan director.html).

     2026-09-24dagi so'rov ("ikonkalar bu yerda ham juda kichik, kartochka
     kabi bo'lsin"): qator-ko'rinish (ikonka chapda, matn o'ngda, ~44px)
     o'rniga endi TO'LIQ .action-tile vizual tili — kvadrat kartochka,
     ikonka YUQORIDA markazda (kattaroq), yorliq PASTDA — action-tiles
     bilan bir sahifada turganda ham uyg'un ko'rinadi. Funksional radio
     bir xilligicha qoladi (`:has(input:checked)` bilan tanlangani
     ajratiladi), faqat KO'RINISH kattalashdi. */
  /* 2026-09-24dagi so'rov: "Pulni kim to'ladi?" yorlig'i ko'zga
     yaxshiroq ko'rinishi kerak — u pastdagi kartochka-tanlovga bevosita
     bog'liq qaror nuqtasi, lekin boshqa oddiy maydon yorliqlari
     (`.bal-form label`, 12.5px kulrang) bilan bir xil kichik-xira
     ko'rinishda yo'qolib ketardi. Endi alohida, qorayib turgan sarlavha. */
  .bal-form label.paid-by-label {
    display: block; font-size: 13.5px; font-weight: 700; color: var(--text);
    margin: 16px 0 8px;
  }
  /* 2026-09-24dagi so'rov (ikkinchi tur): "ikkita kartochka o'lchami
     haliyam ikki xil" — CSS Grid `auto-fit` + `minmax(108px, 1fr)`
     nazariyada teng ustun berishi kerak edi (Chromium'da sinovdan
     o'tkazilganda ham aynan shunday chiqdi), lekin foydalanuvchining
     real qurilmasida (incognito rejimda ham) ikkita kartochka
     nomutanosib chiqishda davom etdi — demak muammo aynan shu
     brauzer/qurilmaga xos Grid-track o'lchash xatti-harakatida (grid
     "avtomatik minimal o'lcham" hisob-kitobi kontent-asosli bo'lib,
     turli dvigatellarda (Grid implementatsiyalarida) farqli talqin
     qilinishi mumkin). Grid o'rniga endi FLEXBOX — bu naqsh ancha
     sodda va bir xilda ishlaydi: `flex: 1 1 0` + `min-width: 0` ikkala
     kartochkani KONTENTIDAN QAT'IY NAZAR teng bo'lishga MAJBURLAYDI
     (flex-basis:0 kontent o'lchamini butunlay e'tiborsiz qoldiradi,
     flex-grow:1 ikkalasida bab-baravar, shu sabab natija har doim
     50/50 bo'ladi — bu Grid'dagi kabi "kontent balki katta bo'lsa
     ustunni kengaytirib yuborishi mumkin" degan noaniqlikka o'rin
     qoldirmaydi). */
  .paid-by-row {
    display: flex; flex-wrap: wrap;
    gap: 10px; margin-top: 2px;
  }
  /* 2026-09-27dagi IKKINCHI tuzatish: birinchi urinish (matnni sarlavha+
     izohga ajratish) balandlikni tekislagan edi, lekin haligacha MUTLAQ
     bir xil bo'lishiga KAFOLAT yo'q edi — agar ekran torroq bo'lsa,
     "Zapravkada" (uzunroq so'z) "Ombordan"ga qaraganda boshqa nuqtada
     siqilishi/kichrayishi mumkin edi (ikkalasi ham erkin matn oqimi
     edi). Endi UCH QATORLI Grid ishlatiladi — ikonka, sarlavha, izoh —
     va sarlavha/izoh qatorlari ANIQ FIKS balandlikda (matn hech qachon
     ikkinchi qatorga tushmaydi, uzun bo'lsa "..." bilan qirqiladi). Shu
     bilan ikkala kartochkaning HAR BIR qatori piksel-piksel bir xil
     balandlikda bo'lishi KONTENTGA (so'z uzunligiga) BOG'LIQ BO'LMAY
     qoladi — bu Grid+fiks-balandlik yondashuvi matn uzunligidan
     to'liq mustaqil, shuning uchun oldingi flex+auto-balandlik
     usulidan ancha ishonchli. */
  .paid-by-choice {
    position: relative;
    display: grid; grid-template-rows: 46px 17px 15px; row-gap: 6px;
    justify-items: center; align-content: start;
    flex: 1 1 0; min-width: 0;
    margin: 0; padding: 16px 8px 14px; border-radius: var(--r-lg);
    border: 1.5px solid var(--border); background: var(--surface);
    font-size: 12.5px; color: var(--text); cursor: pointer; text-align: center;
    min-height: 44px; box-sizing: border-box;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .paid-by-choice:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
  .paid-by-choice:has(input:checked) {
    border-color: var(--primary); background: var(--primary-soft);
    box-shadow: var(--shadow-sm);
  }
  .paid-by-choice input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .paid-by-choice:has(input:focus-visible) { outline: none; box-shadow: var(--ring); }
  .paid-by-ic {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-soft); color: var(--primary-ink);
  }
  .paid-by-choice:has(input:checked) .paid-by-ic { background: var(--surface); }
  .paid-by-ic svg { width: 23px; height: 23px; display: block; }
  /* `.paid-by-txt` markupda bitta o'rovchi <span> (JS shu ichiga
     sarlavha+izohni qo'yadi) — lekin 3 qatorli Grid'da sarlavha va
     izoh alohida-alohida ANIQ qatorga tushishi kerak. `display:
     contents` o'rovchini "yo'q qilib", uning FARZANDLARINI bevosita
     Grid ishtirokchisiga aylantiradi (o'zi joy egallamaydi/render
     bo'lmaydi, faqat DOM tuzilishi saqlanadi). */
  .paid-by-txt { display: contents; }
  /* Grid qatoriga TO'LIQ mos, oqim (parent) matn ta'sirisiz: nowrap +
     ellipsis, shu sabab qator hech qachon bo'ylab cho'zilib
     ketmaydi va ikkinchi qatorga sig'may qolmaydi. */
  .paid-by-title, .paid-by-sub {
    width: 100%; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .paid-by-title { font-weight: 600; line-height: 17px; }
  .paid-by-sub { font-size: 11px; line-height: 15px; color: var(--text-dim); }
  /* Ikonkali va matnli tugma bir katakda turganda qator ajralmasin */
  .row-actions.is-compact { gap: 3px; flex-wrap: nowrap; align-items: center; }
  .row-actions.is-compact .btn-sm { padding: 5px 9px; font-size: 11.5px; }

  /* Sahifalash (partials/pagination.html) — 2026-08-20dagi so'rov, audit 2.6-band */
  .pagination-bar {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 14px 0 4px;
  }
  .pagination-current { font-size: 12.5px; font-weight: 600; color: var(--text-dim); min-width: 60px; text-align: center; }

  /* Danger — destructive primary */
  .btn-danger {
    background: linear-gradient(180deg, var(--bad-top), var(--bad)); color: #fff;
    box-shadow: 0 1px 2px rgba(198,48,59,0.26), inset 0 1px 0 rgba(255,255,255,0.16);
  }
  .btn-danger:hover {
    background: linear-gradient(180deg, var(--bad), var(--bad-bottom));
    box-shadow: 0 2px 4px rgba(198,48,59,0.18), 0 8px 18px rgba(198,48,59,0.26), inset 0 1px 0 rgba(255,255,255,0.16);
  }
  .btn-danger:focus-visible { outline: none; box-shadow: var(--ring-bad), var(--shadow-sm); }

  /* 2026-09-12dagi so'rov: "Hamma joydagi saqlash tugmalarini yashil rangga
     o'tkazsak" — "Saqlash" alohida, ijobiy/yakunlovchi harakat sifatida
     ajralib tursin (xuddi haul-finish-btn'dagi "Yetkazdim" bilan bir xil
     yashil ohang). .btn-danger bilan bir xil naqsh: keyinroq e'lon
     qilingani uchun bare .btn qoidasidan ustun chiqadi. */
  .btn-save {
    background: linear-gradient(180deg, var(--save-top), var(--save)); color: #fff;
    box-shadow: 0 1px 2px rgba(22,163,74,0.3), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .btn-save:hover {
    background: linear-gradient(180deg, var(--save-hover-top), var(--save-hover));
    box-shadow: 0 2px 4px rgba(22,163,74,0.2), 0 8px 18px rgba(22,163,74,0.26), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .btn-save:focus-visible { outline: none; box-shadow: var(--ring), var(--shadow-sm); }

  /* "Rasmga olish" kabi tugmalar uchun — ghost (shaffof, oddiy) o'rniga
     yumshoq to'ldirilgan fon, .settings-ic bilan bir xil ohang — ko'zga
     ko'proq tashlanadi, lekin asosiy (.btn) yoki .btn-save bilan
     raqobatlashmaydi. */
  .btn-soft-primary {
    background: var(--primary-soft); color: var(--primary-ink);
    border: 1px solid var(--primary-line); box-shadow: none;
  }
  .btn-soft-primary:hover { filter: brightness(0.97); box-shadow: var(--shadow-xs); }
  .btn-soft-primary:active { transform: translateY(0); }

  .btn-sm {
    min-height: var(--control-h-sm); border-radius: var(--r-sm);
    padding: 4px 12px; font-size: 12px;
  }
  .btn-block { width: 100%; }
  .btn-icon { font-size: 13px; line-height: 1; }
  /* 2026-09-21dagi so'rov: "Yuklab olish" ikonkasi o'lchami noto'g'ri
     ko'rinishi haqidagi xabar bo'yicha tekshiruv — loyihadagi BARCHA
     boshqa ikonka o'ramlari (`.nav-icon svg`, `.stat-icon svg`,
     `.ic-btn svg` va h.k., shu faylda qarang) `width`/`height`/
     `display:block` qoidasiga ega, FAQAT `.btn-icon svg` ega emas edi.
     Ikonka o'zi `width`/`height` HTML atributi bilan keladi (`ikon`
     shablon tegi, `olcham=` parametri), shuning uchun o'lchami sonda
     TO'G'RI edi — lekin `display:block` yo'qligi uni matn qatori
     (inline) sifatida qoldirardi, ya'ni pastida kichik bosh harf
     "descender" bo'shlig'i qolib, tugma ichida vertikal jipslashmagan
     (baseline'ga tortilgan) ko'rinardi — ayniqsa kichik (13px) o'lchamda
     va tor (mobil) tugmalarda sezilarli. Boshqa barcha ikonka
     qoidalari bilan bir xillashtirildi. */
  .btn-icon svg { display: block; }

  /* ===== BUTUN KENGLIKDAGI ASOSIY AMAL (.btn-cta) =====
     2026-09-17dagi dizayn ko'rigi, 5-bosqich (auditda B10).

     Sahifaning bosh amali — "Ishdaman", "Reysni boshlash", "Yetkazdim",
     "Davom etish". U BESHTA shablonda besh xil o'lchamda edi:

       .gps-btn                      16px 20px / 15px   (davomat, checkin)
       .haul-welcome .btn            14px      / 15px
       .haul-form button             14px      / 15px
       .haul-finish-btn              14px      / 15px
       .login-card button[submit]    11px 20px / 13.5px

     Beshtasidan uchtasi allaqachon 14px/15px da kelishgan — shu
     ko'pchilik qiymat olindi. `min-height: 48px` esa ishchi panelining
     44px me'yoridan biroz baland: bu sahifadagi ENG asosiy tugma, u
     boshqa boshqaruvlardan ajralib turishi kerak.

     Bare `<button type="submit">` ham qamraladi — login shakllarida
     tugmada klass yo'q, uslub `button[type="submit"]` qoidasidan
     keladi, u esa `.btn-cta` dan KEYIN e'lon qilingan bo'lardi. */
  .btn-cta,
  button[type="submit"].btn-cta {
    width: 100%;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
  }
  /* O'chirilgan tugma. `not-allowed` — umumiy holat ("bu amal mumkin
     emas"). `.btn-cta` esa aksincha: u ish KETAYOTGANI uchun (GPS
     kutilmoqda, forma yuborilmoqda) o'chiriladi, shuning uchun
     "kutish" kursori — bu ilgari `.gps-btn:disabled` da shunday edi. */
  .btn:disabled, button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
  .btn-cta:disabled, button[type="submit"].btn-cta:disabled { cursor: wait; }

  .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
  .btn-row .btn { flex: 1; }
  .btn-row.right { justify-content: flex-end; }
  .btn-row.right .btn { flex: 0 0 auto; }

  /* ============================================================
     YUKLANISH SPINNERI — 2026-08-20dagi so'rov (audit 3.x-band, 5-band):
     forma yuborilganda yoki eksport boshlanganda tugma hech qanday
     signal bermasdan turardi — sekin amallarda (hisobot, eksport)
     foydalanuvchi яна bosib, ikki marta yuborish xavfi bor edi. Global
     JS (pastda) tugmani .is-loading klassi bilan xiralashtiradi va
     ichiga shu spinnerni qo'shadi; currentColor ishlatilgani uchun
     istalgan tugma variantida (primary/secondary/ghost/danger) mos
     rangda ko'rinadi, alohida moslashtirish shart emas.
     ============================================================ */
  .btn.is-loading, button[type="submit"].is-loading, input[type="submit"].is-loading {
    pointer-events: none; opacity: 0.72; cursor: default;
  }
  .btn-spinner {
    display: inline-block; width: 13px; height: 13px; flex-shrink: 0;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; opacity: 0.85; animation: btn-spin 0.7s linear infinite;
  }
  @keyframes btn-spin { to { transform: rotate(360deg); } }

  /* ============================================================
     EXPORT MENU (hisobotlarni yuklab olish) — 2026-08-18dagi so'rov
     ============================================================ */
  details.export-menu { position: relative; display: inline-block; }
  details.export-menu > summary { list-style: none; cursor: pointer; }
  details.export-menu > summary::-webkit-details-marker { display: none; }
  details.export-menu > summary::marker { content: ''; }
  details.export-menu[open] > summary .chevron { transform: rotate(180deg); }
  .export-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
    width: 292px; padding: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 8px;
  }
  .export-group-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--text-faint);
  }
  /* "Yuklanadi: 1-obyekt · Iyul 2026" xulosasi — menyu sahifa filtriga
     ergashishini ko'rsatib turadi (2026-08-18dagi qaror). */
  .export-summary {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: var(--r-sm);
    background: var(--primary-soft); border: 1px solid var(--primary-line);
  }
  .export-summary strong { font-size: 12.5px; color: var(--primary-ink); font-weight: 700; }
  .export-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  /* 2026-09-15dagi o'lchov: chip 26px edi (chekka 5px + qator balandligi),
     ya'ni o'lcham TANLANMAGAN — tasodifan chiqqan. Endi `--control-h-sm`
     (32px): yonidagi tugmalar bilan bir qatorda tekislanadi. Chekka
     vertikal bo'yicha 6px ga oshirildi, gorizontal tegilmadi — chipning
     kengligi matn uzunligiga qarab o'zgarishi kerak. `inline-flex` +
     `align-items: center` SHART, aks holda `min-height` matnni yuqorida
     qoldiradi. */
  .export-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--control-h-sm);
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text-dim); border-radius: var(--r-pill);
    font-size: 12px; font-weight: 600; padding: 5px 11px; cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  /* Chiplar orasida bitta `<select>` ham bor (davr tanlash). Umumiy
     `select` qoidasi unga 40px beradi — qatordagi chiplardan 8px
     baland. Bu yerda ixcham pog'onaga qaytariladi. */
  select.export-chip { height: var(--control-h-sm); padding-right: 28px; background-position: right 8px center; }
  .export-chip:hover { background: var(--surface-3); color: var(--text); }
  .export-chip.is-active {
    background: var(--primary-soft); border-color: var(--primary-line);
    color: var(--primary-ink);
  }
  .export-chip:focus-visible { outline: none; box-shadow: var(--ring); }
  /* Oy tanlash dropdown'i chip ko'rinishida (2026-08-18dagi so'rov) —
     umumiy select qoidalari (40px balandlik, to'liq kenglik) bekor
     qilinadi, o'ngida kichik caret qoladi. */
  select.export-chip {
    appearance: none; -webkit-appearance: none;
    width: auto; min-height: 0; height: auto; line-height: 1.2;
    padding: 5px 24px 5px 11px;
    background-image: var(--select-caret);
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-color: var(--surface-2);
    box-shadow: none;
  }
  select.export-chip.is-active { background-color: var(--primary-soft); }
  .export-custom-range { display: flex; gap: 8px; }
  /* MUHIM: author CSS'dagi display:flex brauzerning [hidden] qoidasini
     yengib qo'yardi — maydonlar "yashirin" holatda ham ko'rinib turardi
     (foydalanuvchi ko'rgan "Август ----" muammosi shundan). */
  .export-custom-range[hidden] { display: none; }
  .export-custom-range label {
    flex: 1; display: flex; flex-direction: column; gap: 3px;
    font-size: 10.5px; font-weight: 700; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: 0.5px;
  }
  .export-custom-range label { min-width: 0; }
  .export-custom-range input[type="date"],
  .export-custom-range input[type="month"] {
    width: 100%; min-width: 0; min-height: 34px; padding: 4px 8px; font-size: 12px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font-family: inherit;
  }
  .export-panel .export-go { margin-top: 4px; }
  /* .section overflow:hidden panelni kesib qo'ymasligi uchun: menyu ochiq
     paytda konteyner vaqtincha overflow'ni bo'shatadi (yopiq bo'limda ham
     panel to'liq ko'rinadi). */
  .section:has(details.export-menu[open]) { overflow: visible; }

  /* ============================================================
     FORMS
     ============================================================ */

  form label,
  label {
    display: block;
    font-size: 11.5px; font-weight: 600;
    color: var(--text-dim);
    /* Yorliq o'z maydoniga yaqinroq, oldingi maydondan uzoqroq turishi kerak */
    margin: 16px 0 8px;
    letter-spacing: 0.1px;
  }

  input, select, textarea {
    width: 100%;
    min-height: var(--control-h);
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.5;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  /* BIR QATORLI MAYDON ANIQ 40px, "kamida 40px" EMAS.
     2026-09-15dagi o'lchov: yuqoridagi `min-height` yetarli emasligi
     chiqdi — maydonlar 40 / 40.3 / 42.3 / 42.6 px bo'lib turardi:
       * `input[type=date]` — brauzerning O'Z kalendar vidjeti mazmun
         qutisini 22.3px ga cho'zadi, `line-height` unga ta'sir qilmaydi;
       * qidiruv maydonlari — mahalliy `padding: 10px` (ikonka uchun)
         balandlikni 42.3px ga ko'tarardi.
     Farq 0.3-2.6px, ya'ni ko'zga tashlanmaydi, lekin yonma-yon turgan
     sana + matn + tugma qatori TEKISLANMAYDI va buni faqat o'lchov
     ko'rsatadi. `height` esa mahalliy chekkadan qat'iy nazar bitta
     qiymat beradi (box-sizing: border-box global qo'yilgan).
     Chiqarib tashlanganlar: checkbox/radio (16px), file (o'z tugmasi
     bor), textarea (ko'p qatorli — selektorga umuman tushmaydi). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  select { height: var(--control-h); }

  input[type="number"], input[type="date"], input[type="time"] {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  }
  /* Django's default Textarea renders rows="10"; cap it so stacked forms stay compact.
     resize:vertical keeps it expandable. */
  textarea { height: 88px; min-height: 76px; resize: vertical; }

  input:hover, select:hover, textarea:hover { border-color: var(--border-hover); }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
    background: var(--surface);
  }
  input::placeholder, textarea::placeholder { color: var(--text-faint); }

  select {
    appearance: none; -webkit-appearance: none;
    background-image: var(--select-caret);
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
  }

  /* min-height: 0 — yuqoridagi umumiy input qoidasi 40px pol qo'yadi,
     usiz katakcha 40px ga cho'zilib ketadi. */
  input[type="checkbox"], input[type="radio"] {
    box-shadow: none; accent-color: var(--primary);
    width: 16px; height: 16px; min-height: 0; cursor: pointer;
  }
  input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: none; box-shadow: var(--ring);
  }
  input[type="file"] {
    padding: 8px 12px; font-size: 12.5px; cursor: pointer;
    background: var(--surface-2);
  }
  input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 6px 12px;
    border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text-dim);
    font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
    cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  input[type="file"]::file-selector-button:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-hover); }

  /* Default submit button = primary, block (matches existing form layouts) */
  button[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 20px;
    min-height: var(--control-h);
    padding: 8px 20px;
    border: 1px solid transparent; border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--primary-top), var(--primary));
    color: #fff;
    font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1.4;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(13,148,136,0.26), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease-out);
  }
  button[type="submit"]:hover {
    background: linear-gradient(180deg, var(--primary), var(--primary-hover));
    box-shadow: 0 2px 4px rgba(13,148,136,0.18), 0 8px 18px rgba(13,148,136,0.26), inset 0 1px 0 rgba(255,255,255,0.18);
    transform: translateY(-1px);
  }
  button[type="submit"]:active { transform: translateY(0); background: var(--primary-active); transition-duration: 60ms; }
  button[type="submit"]:focus-visible { outline: none; box-shadow: var(--ring), var(--shadow-sm); }

  /* 2026-09-20: shu yerda `.hm-filtr` / `.hm-davr` / `.hm-davr-btn`
     (davr tanlovi segmentli tugmalari) turardi. Yagona davr navigatori
     (`.davr-nav`, pastda) ularning o'rnini BUTUNLAY egallagach, ular
     hech bir shablonda ishlatilmay qoldi va o'chirildi — "hozircha
     tursin" degan o'lik CSS keyingi o'qiyotgan odamni chalg'itadi. */

  /* ============================================================
     YAGONA DAVR NAVIGATORI (.davr-nav) — 2026-09-20
     ============================================================
     Kirim-Chiqim sahifasidagi birinchi sinov (qarang accounts/davr.py).
     Uch qism: (1) davr TURI — `.hf-toggle`/`.hf-menu`/`.hf-chev` bilan
     AYNAN bir xil ochiladigan-ro'yxat naqshi (pastda ko'rilgan filtr
     tugmasi bilan bir xil ko'rinishi uchun — ikkalasi ham shu sahifada
     yonma-yon turadi); (2) `.davr-stepper` — Oldingi/Keyingi + yorliq,
     eski segmentli-tugma ko'rinishidan ilhomlangan, lekin
     bu yerda ikkita alohida o'q + o'rtada matn (tugma emas, chunki har
     biri boshqa-boshqa sahifaga o'tadi); (3) `.davr-maxsus-inline` —
     ikkita sana + "Ko'rsatish" — `.hf-foot`ning sana-qatoridan olingan. */
  .davr-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

  details.davr-type { position: relative; }
  .davr-type-btn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
    padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    color: var(--text); background: var(--surface); border: 1px solid var(--border);
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .davr-type-btn::-webkit-details-marker { display: none; }
  .davr-type-btn::marker { content: ''; }
  .davr-type-btn:hover { border-color: var(--primary-line, var(--border)); }
  details.davr-type[open] .davr-type-btn { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
  .davr-type-btn .chevron { color: var(--text-dim); font-size: 12px; font-weight: 700; transition: transform var(--t) var(--ease-out); }
  details.davr-type[open] .davr-type-btn .chevron { transform: rotate(180deg); }

  .davr-type-menu {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 45;
    min-width: 190px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
  }
  a.davr-type-item {
    display: block; padding: 8px 10px; border-radius: var(--r-md);
    font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none;
  }
  a.davr-type-item:hover { background: var(--surface-3); text-decoration: none; }
  a.davr-type-item.is-active { background: var(--primary-soft); color: var(--primary-ink); }

  .davr-stepper {
    display: flex; align-items: center; gap: 2px; border: 1px solid var(--border);
    border-radius: var(--r-md); overflow: hidden; background: var(--surface);
  }
  a.davr-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-h-sm); min-height: var(--control-h-sm);
    /* 15px — `.wcal-nav a`dagi bir xil ‹/› belgisi bilan bir xil o'lcham
       (qarang shu fayldagi `.wcal-nav a`), yangi "katta" shrift o'lchami
       QO'SHILMASIN uchun (храповик — verify_shrift_shkalasi.py). */
    color: var(--text-dim); font-size: 15px; font-weight: 700; text-decoration: none;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  a.davr-arrow:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
  a.davr-arrow + span.davr-label,
  span.davr-label + a.davr-arrow,
  span.davr-label + span.davr-arrow { border-left: 1px solid var(--border); }
  /* Bo'lajak kunga o'tish kabi hollarda o'q butunlay yo'qolib qolmasin
     (joylashuv sakramasin) — `pagination.html`dagi `.btn-ghost.is-disabled`
     bilan bir xil naqsh: <a> emas, <span>, bosilmaydigan. */
  span.davr-arrow.is-disabled { opacity: 0.4; pointer-events: none; cursor: default; }
  .davr-label {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 14px; min-height: var(--control-h-sm);
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
    color: var(--text); white-space: nowrap;
  }

  .davr-maxsus-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .davr-maxsus-inline input[type="date"] { min-width: 138px; min-height: var(--control-h-sm); }
  .davr-maxsus-ajr { color: var(--text-dim); font-size: 12px; }
  @media (max-width: 640px) {
    .davr-nav { align-items: stretch; }
    .davr-maxsus-inline { width: 100%; }
    .davr-maxsus-inline input[type="date"] { flex: 1 1 auto; }
  }

  /* ============================================================
     KIRIM/CHIQIM/FARQ STATISTIKA QATORI (.kx-stats / .kx-stat)
     ============================================================
     2026-09-19: ilgari IKKITA mustaqil nusxa bor edi — `.hm-stat`
     (Bosh sahifadagi ixcham vidjet) va `.kx-stat` (Kirim-chiqim
     sahifasining o'zi) — deyarli bir xil narsa ikki marta, ozgina
     farqli qiymatlar bilan (padding, radius, shrift o'lchami, hatto
     CHIQIM rangi — biri `--warn`, biri `--bad-text` ishlatgan edi).
     Endi bitta umumiy komponent: asosiy ko'rinish (to'liq sahifa
     uchun, kattaroq) + `.is-compact` modifikatori (vidjetlar uchun,
     ko'p bo'lim orasida joy tejash kerak bo'lganda). */
  .kx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 420px) { .kx-stats { grid-template-columns: 1fr; } }
  .kx-stat { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px;
               background: var(--surface); min-width: 0; }
  .kx-stat-lab { font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
                   text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
  .kx-stat-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
                   font-size: 20px; font-weight: 700; color: var(--text); }
  .kx-stat-val .stat-unit { font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--text-dim); }
  .kx-stat.is-in .kx-stat-val { color: var(--ok-text); }
  .kx-stat.is-out .kx-stat-val { color: var(--bad-text); }
  .kx-stat-val.is-bad { color: var(--bad-text); }

  /* Ixcham hajm — bosh sahifadagi kabi ko'p bo'lim orasidagi vidjetlar
     uchun; kattaligi kamayadi, lekin rang mantig'i (is-in/is-out)
     yuqoridagi asosiy qoidadan meros bo'lib qoladi. */
  .kx-stats.is-compact { gap: 10px; }
  .kx-stats.is-compact .kx-stat { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
  .kx-stats.is-compact .kx-stat-lab { font-size: 10px; margin-bottom: 4px; }
  .kx-stats.is-compact .kx-stat-val { font-family: var(--font-sans); font-size: 15px; font-weight: 800; }
  .kx-stats.is-compact .kx-stat-val .stat-unit { font-size: 10px; }

  /* ============================================================
     KX-HERO — bosh sahifadagi "Kunlik kirim/chiqim" (2026-09-29)
     ============================================================
     2026-09-29dagi so'rov: sidebardagi "Kirim-Chiqim", bosh sahifadagi
     shu vidjet va Moliyadagi "xarajat balansi" bandi bir-biriga
     o'xshab ketardi — bosh sahifa ilgari xuddi Kirim-Chiqim sahifasi
     bilan BIR XIL `.kx-stats` (uchta tekis kartochka) ishlatardi.
     Bu — FAQAT bosh sahifaga xos alohida komponent (`kx_hero.html`,
     Kirim-Chiqim sahifasining o'zi `.kx-stats`da qoladi — u yerda
     maqsad hisobot, bu yerda "bir qarashda xulosa"):
       1. FARQ — yagona yirik "hero" raqam (dataviz: bitta ko'rinishda
          bitta hero raqam), ishora rangi bilan (musbat=ok, manfiy=bad).
       2. Kirim/chiqim endi ikkita alohida quti emas — BITTA tasmaning
          nisbiy kengliqdagi ikki bo'lagi (proportional bar), orasida
          2px SIRT rangidagi bo'shliq (mark spec).
       3. Tagida rang nuqtasi + summasi bilan yorliq qatori. */
  .kx-hero { padding: 4px 2px 2px; }
  .kx-hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
  .kx-hero-lab { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
  /* Proportsional raqamlar (tabular-nums EMAS) — dataviz: katta yakka
     raqam shriftning standart proportsional raqamlaridan foydalanadi,
     tabular-nums faqat ustun-jadvallar uchun. */
  .kx-hero-val { font-family: var(--font-sans); font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
  .kx-hero-val .stat-unit { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-left: 2px; }
  .kx-hero-val.is-ok { color: var(--ok-text); }
  .kx-hero-val.is-bad { color: var(--bad-text); }

  .kx-hero-bar {
    display: flex; align-items: stretch; height: 10px; gap: 2px;
    border-radius: 4px; overflow: hidden; background: var(--surface);
  }
  .kx-hero-bar.is-empty { background: var(--neutral-soft); }
  .kx-hero-seg { display: block; height: 100%; min-width: 3px; }
  .kx-hero-seg.is-in { background: var(--ok); }
  .kx-hero-seg.is-out { background: var(--bad); }
  /* 2026-09-29 KECHKI: kirim=chiqim=0 kunda (masalan bugun) blok
     "0 so'm" + bo'sh chiziqdan iborat bo'lib, juda bo'sh/oxirlanmagan
     ko'rinardi (Shohzodning to'g'ridan-to'g'ri sinovdagi e'tirozi). Endi
     shu holatga MAXSUS, dizayn qilingan bo'sh xabar — "hali yozuv yo'q",
     ikonka bilan — tasodifiy bo'shliq emas, ATAYLAB bo'sh ekani aniq. */
  .kx-hero-empty-note {
    display: flex; align-items: center; gap: 7px; margin-top: 12px;
    font-size: 12px; color: var(--text-faint);
  }
  .kx-hero-empty-note svg { flex: none; width: 14px; height: 14px; }

  .kx-hero-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
  .kx-hero-leg-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
  .kx-hero-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .kx-hero-dot.is-in { background: var(--ok); }
  .kx-hero-dot.is-out { background: var(--bad); }
  .kx-hero-leg-lab { color: var(--text-dim); }
  .kx-hero-leg-val { font-weight: 700; color: var(--text); }
  .kx-hero-leg-val .stat-unit { font-size: 10.5px; font-weight: 600; color: var(--text-dim); }
  @media (max-width: 420px) { .kx-hero-val { font-size: 26px; } }

  /* ============================================================
     KIRIM-CHIQIM: KESIM/NAVIGATSIYA BO'LAKLARI
     ============================================================
     2026-09-26dagi so'rov: bosh sahifadagi kunlik kirim-chiqim va
     Kirim-Chiqim sahifasi "naqsh AYNAN bir xil bo'lishi kerak" —
     ikkalasi endi BITTA umumiy bo'lak to'plamidan (partials/kx_*.html)
     foydalanadi, shuning uchun ularning CSS'i ham BITTA joyda bo'lishi
     shart (ilgari faqat kirim_chiqim.html'ning o'z `extra_style`
     blokida edi — bosh sahifada ishlatilsa, uslubsiz chiqardi). */
  /* `.kx-non` (non ushlagichi/breadcrumb) 2026-09-26 KECHKI, BESHINCHI
     so'rovda o'chirildi — Kirim-Chiqim sahifasidagi dropdown filtrlar
     BUTUNLAY olib tashlangach, "bitta filtrni yechish" breadcrumb'i
     ma'nosiz qoldi (endi qaytadigan filtrlangan holat yo'q). Qarang
     `templates/partials/kx_non.html`ning o'chirilishi. */

  /* Kassadan tashqaridagi pul — ATAYLAB boshqa ko'rinishda: u
     yuqoridagi uchta raqam bilan bir xil vaznda turmasligi kerak,
     aks holda qo'shilishi mumkindek tuyulardi. */
  .kx-tashqari { background: var(--surface-2); border: 1px dashed var(--border);
                 border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 14px;
                 font-size: 13px; color: var(--text-dim); }
  .kx-tashqari b { color: var(--text); font-weight: 700; }
  .kx-tashqari-qator { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

  /* 2026-09-26 KECHKI qayta qurish: "kesim" (guruhlash jadvali,
     shu jumladan bosh sahifadagi "Kesim bo'yicha ko'rish" ochiladigan
     bo'lagi) BUTUNLAY olib tashlandi (accounts/views/, finance/
     kirim_chiqim.py) — shu bilan birga faqat o'sha tizim ishlatgan
     `.kx-kesim`/`.kx-qator-nom`/`.kx-ogoh`/`.kx-tashqari-ustun`/
     `.hm-kesim-detail` qoidalari ham shu yerda o'chirildi (hech qayerda
     ishlatilmaydi — tekshirilgan). `.kx-izoh` esa hamon ishlatiladi
     (Kirim-Chiqim va bosh sahifa), o'zgarishsiz qoladi. */
  .kx-izoh { font-size: 12.5px; color: var(--text-dim); line-height: 1.6;
             margin: 10px 0 14px; }

  /* TARIX: 2026-09-26 KECHKI, UCHINCHI so'rovda "Hammasi" non ushlagichi
     bosh sahifada olib tashlanib, o'rniga to'rtta doimiy "xulosa" bo'lim
     ikkitadan ikkita QATORDA (`.hm-xulosa-grid`, `display:grid;
     grid-template-columns:1fr 1fr`) joylashtirilgan edi.
     2026-09-26 KECHKI, BESHINCHI so'rov ("filtr borasida xatoga yo'l
     qo'ydim... alohida bo'limlarga ajratamiz"): endi bo'limlar ENDI
     ikkitadan yonma-yon EMAS — har biri TO'LIQ kenglikda, USTMA-UST
     (chunki har biri endi o'z ichida kengaytiriladigan "Batafsil"
     jadvaliga ega — ikki ustunli grid ularni torайtirib qo'yardi).
     Shu sabab `.hm-xulosa-grid` grid xususiyati olib tashlandi — endi
     oddiy vertikal oqim, faqat bo'limlar orasidagi bo'shliq uchun
     qoldirilgan (shablonlarda `class="hm-xulosa-grid"` o'zgarishsiz
     qolgani uchun nom saqlandi, mazmuni o'zgardi). */
  .hm-xulosa-grid { display: flex; flex-direction: column; gap: var(--gap);
                    margin-bottom: 16px; }
  .hm-xulosa-blok { margin-bottom: 0; }

  /* 2026-09-26 KECHKI, BESHINCHI so'rov: kategoriya/obyekt/xodim
     bo'limlaridagi HAR DOIM ko'rinadigan "qator + Batafsil" naqshi —
     ichma-ich TABLE tegi YO'Q (HTML jihatdan yaroqsiz bo'lardi — smoke
     test ham xom "table" so'zini emas, aynan burchakli qavsli tegni
     qidiradi, shuning uchun bu izohda ATAYLAB burchakli qavssiz
     yozilgan), o'rniga har bir qator native DETAILS/SUMMARY tegi
     (JS'siz ochiladi/yopiladi), sarlavha qatori CSS grid bilan jadval
     ustunlariga o'xshatilgan. Ichidagi tafsilot esa haqiqiy jadval tegi
     (`kx_yozuv_qator.html` orqali, ilgari `kx_yozuvlar.html`ning tekis
     ro'yxatida ishlatilgan qator markapi bilan bir xil). */
  /* 2026-09-26 KECHKI, vizual audit ("jadvallarni tartib sol, ustunlar
     orasidagi masofani ham... professional qilish"): gap 10px→18px,
     padding 10/16px→13/18px — qatorlar avvalgidan bo'shroq, jadvalga
     o'xshash "nafas oladigan" ko'rinishga ega. Guruh nomi (birinchi
     ustun) endi 600 og'irlikda — jami summadan vizual ravishda ajralib,
     qatorning "sarlavhasi" ekanini ko'rsatadi. */
  .kx-bolim-bosh, .kx-bolim-qator > summary {
    display: grid; align-items: center; gap: 18px; padding: 13px 18px; font-size: 13.5px;
    transition: background var(--t-fast) var(--ease);
  }
  .kx-bolim-bosh {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-dim); font-weight: 700; background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }
  .kx-grid-3 { grid-template-columns: 1fr auto 96px; }
  .kx-grid-4 { grid-template-columns: 1fr auto auto 96px; }
  .kx-bolim-qator { border-top: 1px solid var(--border); }
  .kx-bolim-qator > summary { cursor: pointer; list-style: none; }
  .kx-bolim-qator > summary::-webkit-details-marker { display: none; }
  .kx-bolim-qator > summary > span:first-child { font-weight: 600; }
  .kx-bolim-qator > summary:hover { background: var(--surface-2); }
  /* Ochilgan qator o'zi ham ozroq ajralib tursin — faqat strelka
     aylanishiga tayanmaslik uchun (ekran o'quvchisiz ham darhol
     ko'rinadigan holat farqi). */
  .kx-bolim-qator[open] > summary { background: var(--surface-2); border-bottom: 1px solid var(--border); }
  .kx-bolim-qator .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
  .kx-bolim-qator .kx-ok {
    justify-self: end; color: var(--link); font-weight: 700; font-size: 12px;
    display: flex; align-items: center; gap: 3px; white-space: nowrap;
  }
  .kx-bolim-qator .kx-arrow { transition: transform .15s ease; display: inline-block; }
  .kx-bolim-qator[open] .kx-arrow { transform: rotate(90deg); }
  /* Tafsilot jadvali endi o'z ichida yengil "kartochka" — summary
     qatoridan biroz pastroqda, o'z chegarasi/burchak yumaloqligi bilan
     ajralib turadi (avval to'g'ridan-to'g'ri fonga yopishib turardi). */
  .kx-tafsilot { padding: 0 16px 16px; background: var(--surface-2); }
  .kx-tafsilot .table-scroll {
    border: 1px solid var(--border); border-radius: var(--r-md); margin-top: 2px;
  }
  .kx-tafsilot table { font-size: 12px; }
  @media (max-width: 640px) {
    .kx-bolim-bosh, .kx-bolim-qator > summary { gap: 8px; padding: 10px 12px; font-size: 12.5px; }
    .kx-grid-3 { grid-template-columns: 1fr auto 24px; }
    .kx-grid-4 { grid-template-columns: 1fr auto auto 24px; }
    .kx-bolim-qator .kx-ok .kx-ok-matn { display: none; }
  }

  /* 2026-09-26dagi "Batafsil" auditi: `.fin-table-wrap`/`.fin-table-head`
     (oddiy "jadval kartochkasi" ko'rinishi) va `.xf-receipt`/
     `.xf-noreceipt` (chek bor/yo'q nishonchasi) ilgari FAQAT
     director_finance.html'ning o'z `extra_style`ida edi. Direktor aynan
     shu ko'rinishni ("Xarajat balansi hisobot" bo'limi) Kirim-Chiqimning
     yangi obyekt/kategoriya/texnika/xodim "Batafsil" sahifalari uchun
     namuna qildi — shuning uchun ular endi shu yerda, boshqa sahifalar
     ham ishlatishi uchun (`.kx-*` 2026-09-26da ko'chirilgani kabi). */
  .fin-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 20px; }
  .fin-table-head { padding: 16px 20px; font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--border); }
  .xf-receipt, .xf-noreceipt {
    display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; white-space: nowrap;
    background: var(--warn-soft); color: var(--warn-text);
  }
  a.xf-receipt {
    background: var(--surface-3); color: var(--text-dim); text-decoration: none;
    font-size: 10.5px; font-weight: 700; white-space: nowrap;
  }
  a.xf-receipt:hover { background: var(--primary-soft); color: var(--primary-ink); }

  /* ============================================================
     QIDIRUV MAYDONI (.search-field)
     ============================================================
     2026-09-15dagi ko'rik: AYNAN shu o'nta qator to'rtta shablonda
     so'zma-so'z takrorlangan edi — `.eq-search` (Texnika reestri),
     `.th-search` (Texnika holati), `.jrn-search` (Smena jurnali),
     `.people-search` (Xodimlar). Faqat prefiks har xil, qolgani
     bir xil: bitta belgi ham farq qilmaydi.

     Nusxaning zarari o'lchovda emas, KELAJAKDA: beshinchi sahifaga
     qidiruv kerak bo'lsa, u ham nusxa oladi; radius yoki chekka
     o'zgarsa esa to'rtta joyni topib chiqish kerak — va bittasi
     har doim esdan chiqadi. Shu sabab bitta nomga birlashtirildi.

     Ishlatilishi (markup ham to'rt joyda bir xil edi):
         <div class="search-field">
           {% templatetag openblock %} ikon "qidiruv" {% templatetag closeblock %}
           <input type="text" id="..." placeholder="...">
         </div>

     Balandlik ataylab yozilmagan — umumiy `input` qoidasi 40px beradi
     (`--control-h`), ya'ni qidiruv maydoni yonidagi filtr `select`i
     bilan o'z-o'zidan tekislanadi. */
  .search-field { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
  .search-field svg {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--text-faint); pointer-events: none;
  }
  .search-field input {
    width: 100%; padding: 0 14px 0 36px; border-radius: var(--r-pill);
    border: 1px solid var(--border); background: var(--surface); font-size: 13.5px;
  }
  @media (max-width: 640px) { .search-field { max-width: none; } }

  /* 2026-10-15: umumiy qidiruv qatori (partials/qidiruv_maydoni.html) —
     ro'yxat ustida doim ko'rinadi; natija soni va "Tozalash" o'ng tomonda. */
  .qidiruv-qator { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; }
  .qidiruv-natija { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-dim); }
  .qidiruv-natija strong { color: var(--text); font-weight: 600; }
  .qidiruv-natija a { color: var(--primary); font-weight: 600; text-decoration: none; }
  .qidiruv-natija a:hover { text-decoration: underline; }
  .jonli-qidiruv { margin: 0 0 12px; }
  .jonli-qidiruv .search-field { max-width: 380px; }
  .jonli-qidiruv [data-jonli-bosh] { margin-top: 10px; }
  @media (max-width: 640px) {
    .qidiruv-qator .search-field { flex: 1 1 0; min-width: 0; }
    .qidiruv-natija { flex-basis: 100%; }
  }

  /* Submit buttons that opt into the .btn scale stay inline-sized */
  button[type="submit"].btn-auto { width: auto; }

  /* ===== FILTR QATORIDAGI "KO'RSATISH" TUGMASI =====
     2026-09-17dagi dizayn ko'rigi, 9-bosqich (auditda B5).

     TUZOQ VA UNING SABABI. Yuqoridagi umumiy `button[type="submit"]`
     qoidasi tugmani BUTUN KENGLIKKA cho'zadi va tepasiga 20px chekinish
     qo'yadi — forma oxiridagi "Saqlash" uchun bu to'g'ri. Lekin
     filtr QATORIDA (sana maydonlari yonida) xuddi shu tugma butun
     qatorni egallab, maydonlarni pastga itarib yuboradi.

     `class="btn btn-sm"` qo'yish YETMAYDI: `.btn-sm` aniqligi (0,1,0)
     `button[type="submit"]` (0,1,1) dan PAST, ya'ni kenglik baribir
     100% bo'lib qolaveradi. Shu sababli sahifalarda qo'lda
     `style="width:auto"` yozilgan (director_map) yoki mahalliy
     `.fin-filter button { width: auto }` qoidasi qo'shilgan
     (director_finance), uchinchi joyda esa umuman unutilgan
     (hisobot, worker_report — u yerda tugma hozir ham butun
     kenglikda).

     Bu yerdagi birikma selektor (0,2,1) muammoni BIR MARTA hal
     qiladi: `btn-sm` olgan har qanday submit tugmasi o'z o'lchamida
     qoladi. */
  button[type="submit"].btn-sm { width: auto; margin-top: 0; }

  /* 2026-09-20: shu yerda `.range-form` (sana oralig'i formasi) turardi
     — `hisobot.html`/`worker_report.html`ning eski vaqt oralig'i
     tanlovida ishlatilardi. Ikkalasi ham yagona davr navigatoriga
     (`.davr-nav` -> `.davr-maxsus-inline`, pastda) ko'chirilgach,
     `.range-form` hech qayerda ishlatilmay qoldi — o'chirildi (qarang
     verify_olik_kod_tozalandi.py'dagi bir xil mantiqdagi eslatma).
     DIQQAT: shu izohda vaqt oralig'i bo'limining o'zbekcha sarlavha
     matni QASDDAN yozilmaydi — `smoke_test_detail38.py` xodim
     tafsilotlar sahifasidagi statistika bo'limini fon tarjima kaliti
     topilmasa AYNAN o'sha sarlavha matni bo'yicha qidiradi, bu izoh
     esa sahifaning umumiy <style> blokida, haqiqiy bo'limdan ANCHA
     OLDIN keladi — mos kelib qolsa qidiruv shu yerda to'xtab, haqiqiy
     bo'limni hech qachon topmay qolardi (aynan shu narsa bir marta
     sodir bo'lgan). */
  .btn-row button[type="submit"] { margin-top: 0; width: auto; }

  /* Variant classes must out-specify the bare element rule above */
  button[type="submit"].btn-danger {
    background: linear-gradient(180deg, var(--bad-top), var(--bad));
    box-shadow: 0 1px 2px rgba(198,48,59,0.26), inset 0 1px 0 rgba(255,255,255,0.16);
  }
  button[type="submit"].btn-danger:hover {
    background: linear-gradient(180deg, var(--bad), var(--bad-bottom));
    box-shadow: 0 2px 4px rgba(198,48,59,0.18), 0 8px 18px rgba(198,48,59,0.26), inset 0 1px 0 rgba(255,255,255,0.16);
  }
  button[type="submit"].btn-danger:focus-visible { box-shadow: var(--ring-bad), var(--shadow-sm); }
  button[type="submit"].btn-secondary {
    background: var(--surface); color: var(--text-dim);
    border-color: var(--border-strong); box-shadow: var(--shadow-xs);
  }
  button[type="submit"].btn-secondary:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-hover); }

  /* 2026-09-12: bare <button type="submit"> (klasssiz "Saqlash" tugmalari
     ko'pchiligi) uchun ham xuddi shu yashil variant — .btn-danger bilan
     bir xil sabab: bare elementdan USTUN chiqishi uchun compound selector. */
  button[type="submit"].btn-save {
    background: linear-gradient(180deg, var(--save-top), var(--save));
    box-shadow: 0 1px 2px rgba(22,163,74,0.3), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  button[type="submit"].btn-save:hover {
    background: linear-gradient(180deg, var(--save-hover-top), var(--save-hover));
    box-shadow: 0 2px 4px rgba(22,163,74,0.2), 0 8px 18px rgba(22,163,74,0.26), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  button[type="submit"].btn-save:focus-visible { box-shadow: var(--ring), var(--shadow-sm); }

  .checkbox-list {
    max-height: 160px; overflow-y: auto; scrollbar-width: thin;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: 8px 12px;
    box-shadow: var(--shadow-inset);
  }
  .checkbox-list label {
    display: flex; align-items: center; gap: 8px;
    margin: 2px 0; padding: 6px 8px;
    border-radius: var(--r-sm);
    color: var(--text); font-size: 12.5px; font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
  }
  .checkbox-list label:hover { background: var(--primary-soft); }
  .checkbox-list label:focus-within { background: var(--primary-soft); }
  .checkbox-list ul { list-style: none; }
  .checkbox-list li { list-style: none; }
  .checkbox-list-title {
    font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-faint); margin: 8px 0 4px; padding: 0 8px;
  }
  .checkbox-list-title:first-child { margin-top: 4px; }

  .field-error { color: var(--bad-text); font-size: 11.5px; font-weight: 500; margin-top: 4px; }
  .field-error ul { list-style: none; }
  .empty-hint { color: var(--text-faint); font-size: 11.5px; padding: 8px; font-style: italic; }
  .field-hint { color: var(--text-faint); font-size: 11px; margin-top: 4px; }

 /* ============================================================
     MESSAGES
     ============================================================ */

  .message {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px; margin-bottom: 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--ok-line);
    background: var(--ok-soft);
    color: var(--ok-text);
    font-size: 13px; font-weight: 500;
    box-shadow: var(--shadow-xs);
    position: relative;
  }
  .message::before { content: "✓"; font-weight: 700; flex-shrink: 0; }
  .message.error { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad-text); }
  .message.error::before { content: "!"; }
  .message.warning { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
  .message.warning::before { content: "!"; }
  .message.info { background: var(--info-soft); border-color: var(--info-line); color: var(--info-text); }
  .message.info::before { content: "i"; }

  /* Toast — vaqtinchalik (flash) xabarlar sahifa oqimidan TASHQARIDA,
     ekran yuqorisida suzib turadi. Shu sababli u paydo bo'lganda yoki
     avtomatik yo'qolganda pastdagi kontent siljimaydi (reflow bo'lmaydi). */
  .toast-stack {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    z-index: 300; display: flex; flex-direction: column; gap: 10px;
    width: min(94vw, 440px); pointer-events: none;
  }
  .toast-stack .message {
    margin-bottom: 0; pointer-events: auto; box-shadow: var(--shadow-lg);
    animation: toast-in 0.22s ease;
  }
  .toast-stack .message.toast-out { animation: toast-out 0.22s ease forwards; }
  @keyframes toast-in {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-14px); }
  }

  /* ============================================================
     PROJECT CARDS
     ============================================================ */

  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr)); gap: var(--gap); }
  .card {
    position: relative; overflow: hidden; display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t) var(--ease-out), transform var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
  }
  .card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--primary), #2DD4BF);
    opacity: 0; transition: opacity var(--t) var(--ease-out);
  }
  .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--primary-line); }
  .card:hover::before { opacity: 1; }
  .card:focus-visible {
    outline: none; border-color: var(--primary);
    box-shadow: var(--ring), var(--shadow-md); transform: translateY(-2px);
  }
  .card:focus-visible::before { opacity: 1; }
  .card h3 {
    font-size: 15px; font-weight: 700; letter-spacing: -0.25px;
    color: var(--text); text-transform: none; margin-bottom: 8px;
  }
  .card p { font-size: 12.5px; color: var(--text-dim); }
  .card-meta {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
  }

  /* ============================================================
     DOCUMENT LISTS
     ============================================================ */

  .doc-list { list-style: none; padding: 8px var(--gutter) 16px; }
  .doc-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0; border-top: 1px solid var(--border);
    font-size: 12.5px;
  }
  .doc-list li:first-child { border-top: none; }
  .doc-list a {
    color: var(--link); font-weight: 600; border-radius: var(--r-sm);
    transition: color var(--t-fast) var(--ease);
  }
  .doc-list a:hover { color: var(--link-hover); text-decoration: underline; }
  .doc-list a:focus-visible { outline: none; color: var(--link-hover); box-shadow: var(--ring); }
  .doc-note { color: var(--text-faint); font-size: 11.5px; font-weight: 400; margin-top: 4px; }
  .doc-list li.is-empty { color: var(--text-faint); font-style: italic; justify-content: flex-start; }

  /* 2026-09-09: hujjat va fotolavhani o'chirish tugmasi. ATAYLAB kichik
     va rangsiz (matn rangida, faqat hover'da qizil) — bu kundalik amal
     emas, xatoni tuzatish uchun. Katta qizil tugma har bir hujjat
     yonida turishi ro'yxatni bezovta ko'rinishga keltirardi. */
  .doc-del {
    flex-shrink: 0; width: 24px; height: 24px; line-height: 22px;
    text-align: center; border-radius: var(--r-sm); font-size: 17px;
    color: var(--text-faint); font-weight: 400;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .doc-del:hover { color: var(--bad); background: var(--bad-soft); text-decoration: none; }
  .doc-del:focus-visible { outline: none; color: var(--bad); box-shadow: var(--ring); }

  /* 2026-10-13: hujjat to'plami — bir yuborishda yuklangan fayllar bitta
     yig'iladigan qator (qarang partials/hujjat_royxati.html). */
  .doc-list li.doc-toplam { display: block; padding: 0; }
  .doc-toplam > details > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0; cursor: pointer; list-style: none;
    color: var(--text); font-weight: 600;
  }
  .doc-toplam > details > summary::-webkit-details-marker { display: none; }
  .doc-toplam > details > summary::marker { content: ''; }
  .doc-toplam > details > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
  .doc-toplam-nom::before {
    content: "\25B8"; display: inline-block; width: 14px; color: var(--text-faint);
    transition: transform var(--t-fast) var(--ease);
  }
  .doc-toplam > details[open] .doc-toplam-nom::before { transform: rotate(90deg); }
  .doc-list.doc-toplam-ichi { padding: 0 0 8px 22px; border-left: 2px solid var(--border); margin-left: 5px; }

  /* Yuklash formasi: tanlangan fayllar ro'yxati (har yangi tanlov
     avvalgilariga qo'shiladi, keraksizini olib tashlash mumkin). */
  .fayl-tanlov { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 12px; }
  .fayl-tanlov[hidden] { display: none; }
  .fayl-tanlov-bosh { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-dim); }
  .fayl-tanlov ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
  .fayl-tanlov li {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 4px 0; border-top: 1px solid var(--border); font-size: 12.5px; word-break: break-all;
  }
  .fayl-tanlov li:first-child { border-top: none; }
  .fayl-tanlov .doc-del { border: 0; background: none; cursor: pointer; padding: 0; }
  [data-qator][hidden] { display: none; }

  /* Fotolavha: tugma rasmning o'ng yuqori burchagida turadi, shuning
     uchun u ORQA FONLI — aks holda och rangli rasmda ko'rinmay qolardi. */
  .photo-cell { position: relative; display: block; }
  .photo-del {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; line-height: 20px; text-align: center;
    border-radius: 50%; font-size: 15px; font-weight: 400;
    background: rgba(0, 0, 0, .55); color: #fff;
    opacity: 0; transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .photo-cell:hover .photo-del, .photo-del:focus-visible { opacity: 1; }
  .photo-del:hover { background: var(--bad); text-decoration: none; }
  /* Sensorli ekranda hover yo'q — tugma doim ko'rinadi. */
  @media (hover: none) { .photo-del { opacity: 1; } }

  /* ============================================================
     MINI CHARTS
     ============================================================ */

  /* 2026-08-28 (8-bosqich): eski .donut/.chart-wrap radial-diagramma CSS'i
     olib tashlandi — endi shu joyda .progress.lg (pastda) ishlatiladi,
     "AI-shablon" gradient-donut ko'rinishidan qochish uchun. */

  /* max-width'siz legenda butun bo'sh joyni egallab, yorliq bilan qiymat
     orasida katta uzilish hosil qilardi ("Muddatida .............. 4"). */
  .legend { display: flex; flex-direction: column; gap: 12px; min-width: 160px; max-width: 340px; flex: 1; }
  .legend-item { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-dim); font-weight: 500; }
  .legend-swatch { width: 10px; height: 10px; border-radius: var(--r-xs); flex-shrink: 0; }
  .legend-value {
    margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-weight: 700; color: var(--text); font-size: 12.5px;
  }

  /* 2026-08-22dagi so'rov: bosh sahifadagi "Loyihalar muddati" bo'limi
     uchun KPI raqam-kartochkalari (donut-diagramma o'rniga, foydalanuvchi
     tanlovi bo'yicha — taqdim etilgan variantlar orasidan "Variant B"). */
  .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: var(--gutter); }
  .kpi-tile {
    border-radius: var(--r-md); padding: 12px 12px 11px; border: 1px solid var(--border);
    position: relative; overflow: hidden;
  }
  .kpi-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
  .kpi-tile.ok      { background: var(--ok-soft); }
  .kpi-tile.ok::before      { background: var(--ok); }
  .kpi-tile.warn    { background: var(--warn-soft); }
  .kpi-tile.warn::before    { background: var(--warn); }
  .kpi-tile.bad     { background: var(--bad-soft); }
  .kpi-tile.bad::before     { background: var(--bad); }
  .kpi-tile.neutral { background: var(--neutral-soft); }
  .kpi-tile.neutral::before { background: var(--text-faint); }
  .kpi-num {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 21px; font-weight: 700; line-height: 1; color: var(--text);
  }
  .kpi-tile.ok .kpi-num      { color: var(--ok-text); }
  .kpi-tile.warn .kpi-num    { color: var(--warn-text); }
  .kpi-tile.bad .kpi-num     { color: var(--bad-text); }
  .kpi-tile.neutral .kpi-num { color: var(--neutral-ink); }
  .kpi-label { font-size: 10.5px; color: var(--text-dim); margin-top: 4px; font-weight: 500; }
  @media (max-width: 640px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
  }

  .bars { display: flex; flex-direction: column; gap: 12px; padding: var(--gutter); }
  .bar-row { display: grid; grid-template-columns: minmax(72px, 128px) 1fr auto; align-items: center; gap: 12px; }
  .bar-name { font-size: 12px; font-weight: 500; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar-track { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
  .bar-fill {
    height: 100%; border-radius: var(--r-pill); width: 0;
    background: linear-gradient(90deg, var(--primary), #2DD4BF);
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
  }
  .bar-fill.is-warn { background: linear-gradient(90deg, var(--warn), var(--secondary)); }
  .bar-fill.is-bad  { background: linear-gradient(90deg, var(--bad), #F87171); }
  .bar-value {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 11.5px; font-weight: 700; color: var(--text); min-width: 48px; text-align: right;
  }

  .progress { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; margin-top: 12px; }
  .progress > span {
    display: block; height: 100%; width: 0; border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--primary), #2DD4BF);
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
  }
  .progress.is-warn > span { background: linear-gradient(90deg, var(--warn), var(--secondary)); }
  .progress.is-bad > span  { background: linear-gradient(90deg, var(--bad), #F87171); }
  /* Kattaroq variant — mustaqil "gauge" sifatida (masalan, byudjet taqsimoti
     paneli), .progress bilan bir xil rang-holat sinflarini (.is-warn/.is-bad)
     baham ko'radi. */
  .progress.lg { height: 20px; border-radius: var(--r-sm); margin-top: 0; }
  .progress.lg > span { border-radius: var(--r-sm); }

  /* ============================================================
     UTILITY
     ============================================================ */

  .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--gap); }
  .muted { color: var(--text-dim); }
  .faint { color: var(--text-faint); }
  .nowrap { white-space: nowrap; }
  .compact { font-size: 11.5px; }
  .mt-0 { margin-top: 0; }
  .mb-0 { margin-bottom: 0; }
  .stack { display: flex; flex-direction: column; gap: var(--gap); }

  /* Centered utility card (login, confirm, edit) */
  .panel-card {
    width: 100%; max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 32px;
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */

  @media (max-width: 1080px) {
    .cols-2 { grid-template-columns: 1fr; }
  }

  @media (max-width: 900px) {
    /* Chekka va oraliq bitta joydan toraytiriladi — har bir selektorni
       alohida qayta yozish o'rniga ritm tokenlari qisqartiriladi. */
    :root { --gutter: 16px; --gap: 12px; }

    .rail {
      position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
      transform: translateX(-100%);
      transition: transform 0.24s cubic-bezier(0.4,0,0.2,1);
      box-shadow: 12px 0 36px rgba(15,23,42,0.28);
    }
    body.rail-open .rail { transform: translateX(0); }
    body.rail-open .rail-overlay { display: block; }
    .hamburger { display: inline-flex; }

    .topbar { padding: 12px 16px; }
    .content { padding: 16px 16px 40px; }

    .stats-row, .stats-row.hero { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; }
    .stats-row.hero .stat-value { font-size: 32px; letter-spacing: -1.1px; }
    .cards-row { grid-template-columns: minmax(0, 1fr); }
    .cards { grid-template-columns: minmax(0, 1fr); }

    .chart-wrap { gap: 16px; }
  }

  @media (max-width: 560px) {
    body { font-size: 13.5px; }
    .topbar { min-height: 56px; padding: 8px 12px; }
    .page-title { font-size: 19px; }
    .content { padding: 16px 12px 32px; }

    /* 2026-08-27dagi so'rov ("mobilda tugmalarni hero'ga ko'chirsak"):
       sahifaga xos amal tugmalari (#topbar-actions-slot) ENDI JS orqali
       bu ekran kengligida .topbar-right'dan butunlay olib chiqilib,
       .page-hero ichidagi #hero-actions-slot'ga ko'chiriladi (qarang
       base_dashboard.html) — shu sabab .topbar-right'da endi FAQAT
       .icon-cluster qoladi va u siqilish/joy talashish muammosiga
       umuman duch kelmaydi. Eski "amal tugmasi alohida qatorga tushadi"
       yechimi shu bilan ortiqcha bo'lib qoldi. */
    .topbar-right { justify-content: flex-end; }
    .icon-cluster { gap: 8px; }

    .stats-row, .stats-row.hero { grid-template-columns: minmax(0, 1fr); }
    .stat-card { padding: 16px; }
    .stats-row.hero .stat-value, .stat-value { font-size: 28px; letter-spacing: -0.9px; }
    .stat-icon { width: 32px; height: 32px; font-size: 15px; }

    .section { border-radius: var(--r-md); }
    .section-head { padding: 12px 16px; min-height: 48px; font-size: 13.5px; }
    .bar-row { grid-template-columns: 1fr auto; }
    .bar-name { grid-column: 1 / -1; margin-bottom: -4px; }
    .donut { width: 112px; height: 112px; }
    .chart-wrap { justify-content: center; }
    .legend { min-width: 0; max-width: none; width: 100%; }

    .btn-row { flex-direction: column-reverse; }
    .btn-row .btn { width: 100%; }
    .panel-card { padding: 24px 20px; }
  }

  /* Juda tor ekranlarda (~320px va undan kichik — eski/arzon telefonlar)
     topbar'dagi ikonkalar bitta qatorga sig'may, qo'ng'iroqcha ikkinchi
     qatorga tushib qolar edi. Bu yerda ularning barchasi bir xilda
     biroz kichraytiriladi — hech birini yashirmasdan, hammasi bitta
     qatorda qoladi.
     2026-09-30dagi so'rov: "Chiqish" va profil (avatar) endi topbar'da
     EMAS (sidebar'ga ko'chirildi), shu sabab bu ro'yxatdan `.logout-
     mini-btn` va `.avatar` OLIB TASHLANDI — endi topbar'da faqat til/
     tema/qo'ng'iroq bor, ular allaqachon sig'adi (tor ekran uchun ham). */
  /* DIQQAT: bu kichraytirish FAQAT dashboardga tegishli (`body.app`).
     2026-09-14da o'lchanganda ma'lum bo'ldiki, qoida ISHCHI PANELIGA ham
     o'tib ketgan — u yerda esa beshta emas, UCHTA boshqaruv bor (til,
     tema, qo'ng'iroq) va joy yetarli. Natijada dala ishchisining
     telefonida ikkala sabab ham yo'q holda 30px li nishonlar qolgan edi:
     qo'lqopdagi barmoq uchun bu juda kichik (Apple ham, Google ham
     44px/48dp beradi). Ishchi paneli uchun alohida qoida pastda. */
  @media (max-width: 400px) {
    body:not(.worker-app) .topbar-right { gap: 5px; }
    body:not(.worker-app) .icon-cluster { gap: 5px; }
    body:not(.worker-app) .control-pill { padding: 1px; gap: 0; }
    body:not(.worker-app) .theme-toggle,
    body:not(.worker-app) button[type="submit"].theme-toggle,
    body:not(.worker-app) .bell,
    body:not(.worker-app) .lang-mini-btn {
      width: 30px; height: 30px; min-height: 30px;
    }
    body:not(.worker-app) .theme-toggle svg,
    body:not(.worker-app) .bell svg { width: 15px; height: 15px; }
    body:not(.worker-app) .lang-mini-btn { font-size: 9.5px; }
    body:not(.worker-app) .bell .bell-count {
      min-width: 14px; height: 14px; font-size: 9px;
    }
    body:not(.worker-app) .bell .dot { width: 7px; height: 7px; top: 4px; right: 6px; }
  }

  /* 2026-10-11 (sidebar 3-bosqichi): direktorning telefondagi pastki paneli
     (partials/direktor_pastki_panel.html). Faqat <= 900px — sidebar shu
     kenglikda yashirin bo'ladi. Ochilgan sidebar va uning soyasi (z 30/40)
     panel ustida turadi. Tepadagi "Pul harakati" tugmasi shu kenglikda
     yashiriladi — uning o'rnini o'rtadagi katta "+" egallaydi. */
  .dir-pastki { display: none; }
  @media (max-width: 900px) {
    body.has-pastki .dir-pastki {
      display: flex; align-items: flex-end; justify-content: space-around;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
      background: var(--surface); border-top: 1px solid var(--border);
      padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
      box-shadow: 0 -6px 20px rgba(15,23,42,0.06);
    }
    body.has-pastki .content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    body.has-pastki .pul-harakati-btn { display: none; }
    body.has-pastki .dir-ai-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
    .dir-pastki-band {
      flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
      padding: 6px 2px; border: 0; background: none; cursor: pointer;
      color: var(--text-faint); font: inherit; font-size: 10.5px; font-weight: 600; text-decoration: none;
      border-radius: var(--r-md);
    }
    .dir-pastki-band > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dir-pastki-band.is-active { color: var(--primary); }
    .dir-pastki-ic { position: relative; display: inline-flex; }
    .dir-pastki-ic svg { width: 21px; height: 21px; display: block; }
    .dir-pastki-nuqta {
      position: absolute; top: -2px; right: -4px; width: 9px; height: 9px; border-radius: 50%;
      background: var(--bad); border: 2px solid var(--surface);
    }
    .dir-pastki-plus {
      flex: 0 0 auto; width: 54px; height: 54px; margin: -18px 6px 2px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: var(--primary); color: #fff; text-decoration: none;
      box-shadow: 0 6px 16px rgba(13,148,136,0.35);
    }
    .dir-pastki-plus svg { width: 24px; height: 24px; }
  }

  /* ============================================================
     ISHCHI PANELI — BARMOQ O'LCHAMI
     ============================================================
     2026-09-14dagi ishchi paneli ko'rigi. Bu panelni dala ishchisi
     TELEFONDA, ko'pincha qo'lqopda, quyosh ostida, silkinayotgan
     mashinada ishlatadi — ya'ni bosish nishoni dashboarddagidan KATTA
     bo'lishi kerak, kichik emas.

     O'lchangan holat: til/tema/qo'ng'iroq 30px (tor ekranda) yoki 36px
     edi. Ikkalasi ham 44px me'yoridan past. Bu yerda ular 44px ga
     chiqariladi — joy yetadi, chunki ishchi panelida uchta boshqaruv
     bor (dashboardda beshta).

     Ikonkaning O'ZI kattalashtirilmaydi (17px svg shundayligicha
     qoladi) — faqat bosiladigan maydon o'sadi, ya'ni ko'rinish
     o'zgarmaydi, tegish osonlashadi. */
  .worker-app .theme-toggle,
  .worker-app button[type="submit"].theme-toggle,
  .worker-app .bell,
  .worker-app .lang-mini-btn {
    width: 44px; height: 44px; min-height: 44px;
  }
  /* Til menyusidagi variantlar ham (ochilganda) barmoq o'lchamida:
     37px edi. Ular kamdan-kam bosiladi, lekin bosilganda ham xuddi
     shu barmoq bilan bosiladi. */
  .worker-app button[type="submit"].lang-dd-opt { min-height: 44px; padding: 10px; }

  /* Ishchi panelida BARCHA boshqaruvlar barmoq o'lchamida.
     `--control-h` global qiymati 40px — bu sichqoncha uchun yetarli,
     lekin qo'lqopdagi barmoq uchun emas. Bu yerda faqat ishchi paneli
     uchun 44px ga ko'tariladi: select, tugma, kiritish maydoni —
     hammasi bitta joydan, ya'ni kelajakda qo'shiladigan boshqaruv ham
     avtomatik to'g'ri o'lchamda bo'ladi. */
  .worker-app {
    --control-h: 44px;
    /* "Kichik" tugma ham 44px: telefonda barmoq bitta o'lchamda bo'ladi,
       ya'ni "sm" variantining past bo'lishi uchun sabab yo'q. Farq
       gorizontal chekkada va shriftda qoladi, balandlikda emas. */
    --control-h-sm: 44px;
    /* Ikonka tugmalari ham (topbar): yuqoridagi aniq `.worker-app .bell`
       qoidasi bilan bir xil qiymat. Ikkalasi ham qoldirildi — aniq
       qoidani `verify_ishchi_paneli_barmoq.py` qo'riqlaydi, token esa
       bu paneldagi YANGI ikonka tugmasi ham avtomatik 44px bo'lishini
       ta'minlaydi. */
    --control-h-icon: 44px;
  }
  /* 2026-09-17 (A7): `.ic-btn` qat'iy 28x28 va u `--control-h-icon` ga
     TAYANMAYDI — shuning uchun yuqoridagi token unga ta'sir qilmasdi.
     U ishchi panelida ham ishlatiladi
     (`worker_hauling_trip_history.html` — reys tarixi qatoridagi
     ikonka), ya'ni telefonda 28px nishon bosilishi kerak edi.
     Dashboardda 28px o'z joyida qoladi: u sichqoncha uchun. */
  .worker-app .ic-btn {
    width: var(--control-h-icon); height: var(--control-h-icon);
  }

  /* ========== TIL DROPDOWN (lang-dd) ==========
     Sozlamalardagi til tanlagich — yopiq holatda oddiy select'ga o'xshaydi,
     ochilganda har bir variant oldida radio-aylana: tanlanganida bo'yalgan,
     qolganlarida bo'sh. Dashboard va ishchi panelida BIR XIL ishlatiladi. */
  details.lang-dd { position: relative; }
  details.lang-dd > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border: 1.5px solid var(--border);
    border-radius: var(--r-md); background: var(--surface);
    font-size: 13.5px; font-weight: 600; color: var(--text);
  }
  details.lang-dd > summary::-webkit-details-marker { display: none; }
  details.lang-dd > summary::marker { content: ''; }
  details.lang-dd > summary:hover { border-color: var(--primary-line); }
  details.lang-dd[open] > summary { border-color: var(--primary); }
  .lang-dd-chev { margin-left: auto; color: var(--text-dim); font-size: 14px; font-weight: 700; transition: transform var(--t) var(--ease-out); }
  details.lang-dd[open] .lang-dd-chev { transform: rotate(180deg); }
  .lang-dd-menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px;
  }
  /* Selektor ataylab button[type="submit"] bilan boshlanadi — theme'dagi umumiy
     yashil-gradient submit qoidasini (yuqoriroq spetsifiklik) yengish uchun,
     xuddi .theme-toggle'dagi kabi. */
  button[type="submit"].lang-dd-opt {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    /* `min-height: 0` edi — natijada qator 36.9px bo'lardi (9+9 chekka +
       18.9 qator balandligi), ya'ni tanlangan emas, TASODIFIY o'lcham.
       Endi forma boshqaruvi pog'onasida: menyu qatori ham bosiladigan
       nishon, 40px uni barmoq uchun ham qulay qiladi. Uzun obyekt nomi
       ikki qatorga bo'linsa qator o'sadi — bu to'g'ri, chunki bu yerda
       nomni kesish mumkin emas (obyekt tanlash menyusi). */
    width: 100%; margin: 0; min-height: var(--control-h);
    padding: 9px 10px; border: 0; background: none; box-shadow: none; cursor: pointer;
    border-radius: var(--r-sm); font-size: 13.5px; color: var(--text);
    font-weight: 500; text-align: left; font-family: inherit;
  }
  button[type="submit"].lang-dd-opt:hover {
    background: var(--primary-soft); color: var(--primary-ink);
    box-shadow: none; transform: none;
  }
  button[type="submit"].lang-dd-opt:active { background: var(--primary-soft); transform: none; }
  button[type="submit"].lang-dd-opt.is-active { font-weight: 700; color: var(--primary-ink); background: none; }
  button[type="submit"].lang-dd-opt.is-active:hover { background: var(--primary-soft); }
  .lang-dd-radio {
    width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid var(--border); background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .lang-dd-opt.is-active .lang-dd-radio { border-color: var(--primary); }
  .lang-dd-opt.is-active .lang-dd-radio::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  }

  /* ===== RASM LIGHTBOX =====
     Har qanday "img.lightbox-img" ustiga bosilsa, to'liq ekranga kattalashadi.
     Direktor xodim profilidagi avatarni keldim/ketdim suratlari bilan solishtira
     olishi uchun — bir joyda ishlaydigan umumiy mexanizm (pastdagi JS bilan). */
  /* ===== Reysni kim kiritgani belgisi va trayektoriya oynasi =====
     2026-09-16: ikkalasi ham dastlab faqat direktor reyestrida edi;
     so'rov bo'yicha haydovchi panelida ham kerak bo'ldi. Loyiha
     qoidasi: ikki sahifada ishlatiladigan komponent global uslubga
     ko'chadi, aks holda biri tuzatilib ikkinchisi eskirib qolardi.
     Ikkala panel ham shu faylni ulaydi (dashboard/base_dashboard.html
     va attendance/worker_base.html).

     DIQQAT, shu fayl uchun umumiy qoida: bu izohlar HAR BIR sahifaga
     yuboriladi, ya'ni ular sahifa MATNIning bir qismi. Shu sabab bu
     yerda na shaxs ismi, na boshqa sahifalarda qidirilishi mumkin
     bo'lgan ibora yozilmaydi — 2026-09-16da aynan shunday ikkita test
     (smoke_test_detail15, verify_texnika_holati) yiqilgan edi. */
  /* 2026-09-16: "kim kiritdi" belgisi. Matnli yorliq ("Direktor kiritdi")
     ismning yonida juda ko'p joy egallab, qatorni ikkiga bo'lib
     yuborardi (kuzatuv asosida). Endi kichik ikonka: qator
     kengligiga deyarli ta'sir qilmaydi, javob esa izohda chiqadi
     ("Direktor kiritgan · Sardor Aliyev").

     So'rovning aniqlashtirishi: "sariq yoki qizil ikonka
     qo'y, chunki ogohlantirish; odam ikonkasi emas, qalam".
     Rang — amber: bu xato emas, lekin E'TIBOR talab qiladigan holat
     (reysni haydovchi emas, boshqa odam kiritgan). Qalam — "qo'lda
     yozilgan" ma'nosi; odam ikonkasi esa "haydovchi" deb o'qilardi.

     IZOH BOSILGANDA HAM CHIQADI. Brauzerning `title` maslahati faqat
     sichqoncha bilan ishlaydi — telefonda bosish hech narsa
     ko'rsatmaydi. Shu sabab belgi `tabindex="0"` oladi va izoh
     `:hover` bilan bir qatorda `:focus` da ham ochiladi. `title`
     baribir qoldiriladi (ekran o'quvchi uchun).

     IZOH YON TOMONDA, tepada emas: jadval `.table-scroll` ichida
     (`overflow-x: auto`), tepaga chiqqan qalqib turuvchi izoh
     QIRQILARDI. */
  .qolda-belgi {
    position:relative;
    display:inline-flex; align-items:center; vertical-align:middle;
    margin-left:5px; color:var(--warn-text); cursor:help;
  }
  .qolda-belgi:hover { color:var(--bad); }
  .qolda-belgi:focus { outline:none; }
  .qolda-belgi:focus-visible { box-shadow:var(--ring); border-radius:var(--r-xs); }
  .qolda-belgi::after {
    content: attr(data-izoh);
    position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%);
    z-index:70; white-space:nowrap;
    padding:5px 9px; border-radius:var(--r-sm);
    background:var(--rail); color:var(--rail-text-strong);
    font-size:11.5px; font-weight:600; line-height:1.3;
    box-shadow:var(--shadow-md);
    opacity:0; pointer-events:none;
    transition:opacity var(--t-fast) var(--ease);
  }
  .qolda-belgi:hover::after, .qolda-belgi:focus::after { opacity:1; }

  /* ===== Reys trayektoriyasi (2026-09-16dagi so'rov, 2-band) =====
     Xarita ALOHIDA SAHIFA emas, shu sahifaning ustida ochiladigan oyna:
     direktor reyestrni ko'zdan kechirayotganda bir necha reysni ketma-ket
     ochib ko'radi — har safar sahifa almashinsa, filtr va sahifa raqami
     joyida qolishi uchun orqaga qaytish kerak bo'lardi.

     Xarita BALANDLIGI `vh` bilan beriladi, chunki muhim narsa — yo'lning
     ko'rinishi; telefonda ham, katta ekranda ham oyna ekran balandligiga
     moslashadi. */
  .trek-fon {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
  }
  /* MUHIM: `display: flex` brauzerning `[hidden] { display: none }` qoidasini
     bosib ketadi — bu holda oyna YOPIQ ko'rinsa ham butun sahifani qoplab,
     hech bir tugmani bosib bo'lmasdi. Haqiqiy brauzerdagi sinov aynan shuni
     tutdi (bosish "trek-fon intercepts pointer events" deb rad etildi). */
  .trek-fon[hidden] { display: none; }
  .trek-oyna {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    width: min(940px, 100%); display: flex; flex-direction: column; overflow: hidden;
  }
  .trek-bosh {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px var(--gutter); border-bottom: 1px solid var(--border);
  }
  .trek-sarlavha { display: block; font-weight: 700; font-size: 14px; }
  .trek-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--text-dim); line-height: 1.45; }
  .trek-yopish {
    margin-left: auto; flex: none;
    width: var(--control-h-icon); height: var(--control-h-icon);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--text); font-size: 18px; line-height: 1;
  }
  .trek-yopish:hover { background: var(--surface-3); }
  .trek-yopish:focus-visible { outline: none; box-shadow: var(--ring); }
  .trek-xarita { height: min(62vh, 560px); width: 100%; }
  /* Xabar (GPS yo'q / nuqta yo'q) xarita O'RNIGA chiqadi — bo'sh kulrang
     kvadratni ko'rsatib, ustiga izoh yozishdan ko'ra tushunarli. */
  .trek-xabar { padding: 28px var(--gutter) 34px; text-align: center; color: var(--text-dim); font-size: 13px; }
  @media (max-width: 640px) {
    .trek-fon { padding: 0; align-items: stretch; }
    .trek-oyna { width: 100%; border-radius: 0; border: none; }
    .trek-xarita { height: 68vh; }
  }


  img.lightbox-img { cursor: zoom-in; }
  /* 2026-09-28: yoqilg'i chek rasmining jadvaldagi kichik nusxasi —
     Yoqilg'i reestri va Texnika kartochkasi ikkalasi ham shu umumiy
     bo'lakni (partials/yoqilgi_chek.html) ishlatadi. */
  /* 2026-09-28: sahifa ichidagi tablar — texnika kartochkasi va
     "Yoqilg'i" sahifasi. JS: partials/kt_tablar.html. */
  .kt-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 18px; padding: 2px 0; }
  .kt-tab {
    flex-shrink: 0; padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--border);
    background: var(--surface); color: var(--text-dim); cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
  }
  .kt-tab:hover { background: var(--surface-3); }
  .kt-tab.is-active { background: var(--text); color: var(--surface); border-color: transparent; }
  .kt-tab .n { opacity: .7; margin-left: 4px; }
  .kt-pane[hidden] { display: none; }
  /* 2026-10-11: bir sidebar bandi ostidagi sahifalar ("Qarzlar | Hamkorlar",
     "Sozlamalar") — havolali tab qatori, partials/bolim_tablar.html. Telefonda
     gorizontal suriladi, sahifa kengligini oshirmaydi. */
  .bolim-tablar { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 18px; padding: 2px 0;
    scrollbar-width: none; }
  .bolim-tablar::-webkit-scrollbar { display: none; }
  .bolim-tablar a.kt-tab { text-decoration: none; }


  .yq-chek {
    width: 28px; height: 28px; object-fit: cover; vertical-align: middle;
    border-radius: var(--r-xs); border: 1px solid var(--border);
  }
  .lightbox-overlay {
    position: fixed; inset: 0; z-index: 9999; background: rgba(10, 14, 20, 0.88);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    cursor: zoom-out; animation: lightboxFadeIn 0.12s ease-out;
  }
  @keyframes lightboxFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .lightbox-overlay img {
    max-width: min(92vw, 720px); max-height: 88vh; border-radius: var(--r-md);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5); object-fit: contain;
  }
  .lightbox-overlay .lightbox-close {
    position: absolute; top: 18px; right: 22px; width: 38px; height: 38px;
    border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    border: none; cursor: pointer;
  }

  /* ===== CHEK/RASM KAMERASI OYNASI (.rcam-modal) =====
     2026-09-16dagi dizayn ko'rigi, 1-bosqich.

     NEGA BU YERGA KO'CHIRILDI. Bu blok BESHTA shablonda takrorlangan
     edi — moliya.html, balansim.html, worker_moliya.html,
     worker_balance.html, worker_yoqilgi.html — va to'rttasida
     BAYT-BAYT bir xil (bir xil md5), beshinchisida faqat qator
     o'ralishi boshqacha. Loyihaning o'z qoidasi: bir nechta sahifada
     uchraydigan komponent theme.html da bo'ladi.

     NEGA BU ISH MUHIM EDI (ko'rinish emas, XATOLIK): ranglar qotirib
     yozilgani sabab oyna QORONG'I REJIMDA ishlamasdi — foni oppoq
     (#ffffff), matni qora (#1a1a1a) bo'lib qolaverardi. Endi hammasi
     tokendan keladi va ikkala rejimda ham to'g'ri.

     2026-09-17 (4-bosqich, B9): o'sha va'da bajarildi — `10px 12px` +
     `13.5px` o'rniga endi `.btn` ning O'Z to'ldirishi va shrifti
     ishlatiladi. Tugmaning past bo'lib qolmasligi `min-height: 44px`
     bilan ta'minlanadi (ishchi panelining me'yori), ya'ni o'lcham
     tasodifiy raqamdan emas, qoidadan keladi. */
  /* 2026-09-27dagi so'rov: selfi kamerasi kabi bu oyna ham endi BUTUN
     EKRANNI qoplaydi (ilgari 420px kenglikdagi kichik kartochka edi).
     Bu oyna TOKENDAN keladi (yuqoridagi izohga qarang — qorong'i
     rejimga moslashishi SHART), shuning uchun selfi oynasidan farqli
     o'laroq oq emas, `var(--surface)`dan foydalanadi. */
  .rcam-modal {
    position: fixed; inset: 0; z-index: 200;
    background: var(--surface);
    display: none;
    padding: 0; box-sizing: border-box;
  }
  .rcam-modal.is-open { display: flex; }
  .rcam-modal-inner {
    width: 100%; height: 100%;
    max-width: none;
    background: var(--surface); border-radius: 0;
    padding: 0; box-sizing: border-box;
    display: flex; flex-direction: column;
    position: relative;
  }
  .rcam-modal-title {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    padding: 16px 16px calc(16px + env(safe-area-inset-top, 0px));
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    font-size: 13px; font-weight: 700; color: var(--text);
    text-align: center;
    background: linear-gradient(to bottom, var(--surface), transparent);
  }
  .rcam-modal-frame {
    flex: 1; width: 100%; border-radius: 0;
    /* Qora ATAYLAB token emas: bu kamera tasviri ortidagi fon.
       U ikkala rejimda ham qora bo'lishi kerak — aks holda surat
       chetlarida oq chiziqlar paydo bo'ladi. */
    background: #000; overflow: hidden; position: relative;
  }
  .rcam-modal-frame video, .rcam-modal-frame img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .rcam-modal-error {
    position: absolute; left: 16px; right: 16px; bottom: 84px; z-index: 2;
    margin: 0; padding: 10px 12px; border-radius: var(--r-md);
    background: var(--bad-soft); color: var(--bad-text);
    font-size: 12.5px; text-align: left; display: none;
  }
  .rcam-modal-actions {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; gap: 8px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--surface), transparent);
  }
  .rcam-modal-actions .btn { flex: 1; margin: 0; width: auto; min-height: 44px; }
  .rcam-modal .btn-ghost { color: var(--text-dim); }
  .rcam-modal .btn-ghost:hover { background: var(--surface-2); color: var(--text); }

  /* 2026-09-27dagi tuzatish: kamera hali ochilmagan/oqim kelmagan
     paytda ba'zi qurilmalar (ayniqsa Android WebView) `<video>` uchun
     katta "ijro" (play) belgisini ko'rsatib yuboradi — `object-fit:
     cover` uni butun ekranga cho'zib, xunuk chiqarardi. Video oqim
     HAQIQATAN boshlangunicha (`loadeddata` hodisasi) ko'rinmas turadi,
     orqadagi qora fon (`.camera-modal-frame`/`.rcam-modal-frame`)
     ko'rinib turadi — bo'sh joy emas, tabiiy "yuklanmoqda" holati. */
  .camera-modal-frame video,
  .rcam-modal-frame video {
    opacity: 0;
    transition: opacity .15s ease;
  }
  .camera-modal-frame video.is-ready,
  .rcam-modal-frame video.is-ready {
    opacity: 1;
  }

  /* ===== SELFI KAMERASI OYNASI (.camera-modal) =====
     2026-09-17dagi dizayn ko'rigi, 4-bosqich (B9, B12).

     NEGA BU YERGA KO'CHIRILDI. Yuqoridagi chek oynasi bilan BIR XIL
     blok TO'RTTA shablonda yana takrorlangan edi, ustiga IKKI XIL nom
     ostida:

       .camera-modal       davomat.html, worker_checkin.html
       .haul-camera-modal  worker_hauling_trip_active.html,
                           worker_hauling_trip_new.html

     Ikkala oila ham mazmunan aynan bir xil edi — `haul-` prefiksi
     yagona farq. Endi bitta nom: `.camera-modal`.

     NEGA U CHEK OYNASIDAN AJRATIB SAQLANADI (birlashtirilmadi):
     bu oyna ATAYLAB doim OQ. Bu bank ilovalaridagi "old kamera
     chirog'i" hiylasi — ekran yorqin oq bo'lib, qorong'ida yuzga
     yorug'lik beradi. Shuning uchun bu yerdagi ranglar tokendan
     KELMAYDI va kelmasligi ham kerak: token qorong'i rejimda
     ag'darilib, oyna oq qolgani holda matni ham oqarib ketardi.
     Chek oynasida esa bunday ehtiyoj yo'q — u tokendan ishlaydi.

     B12 — TUGMALAR IYERARXIYASI. Bu uchta oynada suratga olish va
     tasdiqlash `.gps-btn` (butun kenglikdagi asosiy amal klassi) bilan
     chizilgan edi, chek oynasida esa oddiy `.btn` bilan. Endi hamma
     joyda bir xil: asosiy amal `.btn`, ikkinchi darajali amal
     (bekor qilish / qayta olish) `.btn-ghost`. */
  /* 2026-09-27dagi so'rov: kamera oynasi endi BUTUN EKRANNI qoplaydi
     (ilgari 420px kenglikdagi kichik kartochka edi, atrofida bo'sh joy
     qolardi — "faqat pastda tugmalarga joy qolsa bas" talabi). Video/
     surat endi position:fixed inset:0 orqali butun ekranni to'ldiradi,
     sarlavha va tugmalar esa uning USTIGA (overlay, gradient fon bilan)
     joylashadi — FENO (resto_saas) loyihasidagi xuddi shu naqsh. */
  .camera-modal {
    position: fixed; inset: 0; z-index: 200;
    background: #ffffff;
    display: none;
    padding: 0; box-sizing: border-box;
  }
  .camera-modal.is-open { display: flex; }
  .camera-modal-inner {
    width: 100%; height: 100%;
    max-width: none;
    background: #ffffff; border-radius: 0;
    padding: 0; box-sizing: border-box;
    display: flex; flex-direction: column;
    position: relative;
  }
  .camera-modal-title {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    padding: 16px 16px calc(16px + env(safe-area-inset-top, 0px));
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    font-size: 13px; font-weight: 700; color: #1a1a1a;
    text-align: center;
    background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,0));
  }
  .camera-modal-frame {
    flex: 1; width: 100%; border-radius: 0;
    /* Chek oynasidagi kabi — kamera tasviri ortidagi fon doim qora. */
    background: #000; overflow: hidden; position: relative;
  }
  .camera-modal-frame video, .camera-modal-frame img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* Ko'zgu ko'rinishi: FAQAT selfi oqimida (davomat va ishchi
     davomati). Reys suratlarida ko'zgu yo'q edi va shundayligicha
     qoladi — shuning uchun qoida id bo'yicha, umumiy klass bo'yicha
     emas. Saqlanadigan rasm har doim asl holatda. */
  #camera-video { transform: scaleX(-1); }
  /* Rang ATAYLAB qotirilgan va `--bad-text` ga o'tkazilmaydi (2026-09-17,
     C3 bandi ko'rib chiqilganda alohida tekshirildi): kamera oynasi doim
     OQ — qorong'i rejimda ham, chunki u qorong'ida yuzga yorug'lik
     beradigan "kamera chirog'i" vazifasini bajaradi. `--bad-text`
     qorong'i rejimda yorug'lashadi (#F87171) va oq fonda o'qilmay
     qolardi. Pastdagi `.camera-modal .btn-ghost` ham xuddi shu sababdan
     qotirilgan. */
  .camera-modal-error {
    position: absolute; left: 16px; right: 16px; bottom: 84px; z-index: 2;
    margin: 0; padding: 10px 12px; border-radius: var(--r-md);
    background: #FDECEC; color: #A82530;
    font-size: 12.5px; text-align: left; display: none;
  }
  .camera-modal-actions {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; gap: 8px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,0));
  }
  .camera-modal-actions .btn { flex: 1; margin: 0; width: auto; min-height: 44px; }
  /* Oyna doim oq — `.btn-ghost` ning mavzuga bog'liq rangi (qorong'i
     rejimda och rang) bu yerda o'qilmay qolmasin. */
  .camera-modal .btn-ghost { color: #4b5563; }
  .camera-modal .btn-ghost:hover { background: #f1f5f9; color: #1a1a1a; }

  /* YORUG'LIK — 2026-09-27dagi so'rov ("qorong'i joylar uchun").
     Ikki qatlamli yechim:
     1) `.camera-torch-btn` — qurilmaning HAQIQIY chirog'ini yoqadi
        (MediaStreamTrack `torch` cheklovi). Bu deyarli faqat ORQA
        kamerada (накладная surati) ishlaydi — old (selfi) kameralarda
        jismoniy chiroq bo'lmagani sabab ko'pchilik qurilma buni
        qo'llab-quvvatlamaydi, shu holda tugma JS orqali avtomatik
        yashiriladi.
     2) `.camera-light-overlay` — old (selfi) kamera uchun DASTURIY
        yechim: ekran chetlari yorqin oqqa aylanadi (halqa shaklida,
        markaz — yuz turgan joy — ochiq qoladi), telefon ekranining
        o'zi yorug'lik manbaiga aylanadi. Faqat foydalanuvchi
        yorug'lik tugmasini bosganda yoqiladi (doimiy emas — kunduzi
        kerak emas). */
  .camera-torch-btn {
    position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 3;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: rgba(20, 20, 20, .5);
    color: #fff; border: none; cursor: pointer;
  }
  .camera-torch-btn svg { width: 20px; height: 20px; }
  .camera-torch-btn.is-on { background: #FFC107; color: #1a1a1a; }
  .camera-light-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at center, rgba(255,255,255,0) 42%, rgba(255,255,255,.96) 82%);
    opacity: 0; transition: opacity .15s ease;
  }
  .camera-light-overlay.is-on { opacity: 1; }

/* 2026-10-10 (tezlik): ochilganda yuklanadigan qism (smeta daraxti, Ф-2,
   Ф-3) — "Yuklanmoqda…" va xato bo'lsa "qayta urinish" tugmasi.
   Qarang accounts/static/accounts/theme/qismlar.js. */
.qism-holat { padding: 14px 16px; font-size: 13px; color: var(--text-faint); }
.qism-holat button { font: inherit; color: var(--primary); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; }