/* ═══════════════════════════════════════════════════════════════════════
   hb-components.css — Bittada HRM yagona komponent kutubxonasi
   TZ_UNIFIED_DESIGN_SYSTEM.md §4 asosida, "Bittada HRM.dc.html" prototipidan
   olingan aniq o'lcham/uslub bilan. hb-tokens.css'dan KEYIN ulanadi. 2026-07-29.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Erishuvchanlik (2026-08-09): shell chrome tugmalari — avval <div onclick>
   edi (klaviatura bilan Tab orqali umuman yetib bo'lmasdi), endi haqiqiy
   <button> — bu qoida ularni native brauzer tugma ko'rinishidan tozalab,
   avvalgi div ko'rinishini aynan qaytaradi (fon/border allaqachon har bir
   klassning o'z qoidasida bor, bu yerda faqat brauzer default'lari
   o'chiriladi: appearance, margin, font, matn tekislash). ── */
button.hb-menubtn, button.hb-navitem, button.hb-navsub-item, button.hb-lang-item,
button.hb-bnav, button.hb-sidebar-profile{
  appearance:none; -webkit-appearance:none; margin:0; font:inherit; color:inherit;
  text-align:left; cursor:pointer;
  /* 2026-08-09 tuzatildi: appearance:none o'zi native button border/fonni
     olib tashlamaydi (bu UA stylesheet'ning alohida `border`/`background-color`
     deklaratsiyasi, "appearance" xususiyatidan mustaqil) — .hb-menubtn kabi
     o'z fon/border'ini alohida belgilagan klasslarda bu sezilmasdi, lekin
     .hb-navitem-toggle/.hb-lang-item/.hb-sidebar-profile kabi (fon/borderni
     atayin belgilamaydigan, atrofdan "shaffof" meros olishga mo'ljallangan)
     klasslarda kulrang "outset" andoza tugma ko'rinib qolardi. */
  border:none; background:none;
}
button.hb-navitem, button.hb-navsub-item, button.hb-sidebar-profile{width:100%}
button.hb-lang-item{width:100%; justify-content:space-between}
button.hb-bnav{width:auto}

/* ── Klaviatura fokusi (2026-08-09) — sichqoncha bilan bosishda ko'rinmaydi
   (:focus-visible), Tab bilan o'tishda esa BARCHA interaktiv elementlarda
   ko'rinadi: tugmalar, havolalar, inputlar, va tabindex berilgan divlar
   (masalan ac-card kabi maxsus komponentlar). Shell konteynerlari ichida
   umumiy qoida — har bir komponent klassiga alohida yozish shart emas. ── */
.hb-shell :focus-visible, .hb-drawer :focus-visible, .hb-sheet :focus-visible,
.hb-pub :focus-visible, .hb-lang-menu :focus-visible,
body.hb :focus-visible, body.ac-app :focus-visible{
  outline:2px solid var(--hb-acc); outline-offset:2px; border-radius:6px;
}
/* Katta to'ldirilgan tugmalarda (fon allaqachon accent rangda) kontrast uchun
   fokus halqasi accent emas, matn/ink rangida chiziladi. */
.hb-btn:focus-visible, .hb-chip-acc:focus-visible, .hb-tab.active:focus-visible{
  outline-color:var(--hb-acc-ink); outline-offset:-3px;
}

/* ── "Kontentga o'tish" — klaviatura foydalanuvchilari uchun, sichqoncha
   foydalanuvchisiga umuman ko'rinmaydi (ekrandan tashqarida turadi, faqat
   Tab bilan birinchi bosishda joyiga tushadi). ── */
.hb-skiplink{
  position:fixed; top:-60px; left:12px; z-index:500;
  background:var(--hb-acc); color:var(--hb-acc-ink); font-weight:800; font-size:13px;
  padding:10px 16px; border-radius:var(--hb-radius-sm); text-decoration:none;
  transition:top .15s ease;
}
.hb-skiplink:focus{top:12px; outline:2px solid var(--hb-acc-ink); outline-offset:2px}

/* ── App shell ── */
/* [2026-08-20] `auto` → ANIQ uzunlik + o'tish (transition).
   Sabab: yon panel yig'ilganda (220px ⇄ 72px) kontent maydoni ham SHU
   ZAHOTI kengayishi kerak, "o'lik bo'shliq" qolmasligi uchun. `auto`
   trek uzunlik EMAS, shu bois interpolatsiya qilinmaydi — panel silliq
   torayardi-yu, kontent chekkasi SAKRAB o'zgarardi. Ikkala qiymat ham
   endi haqiqiy uzunlik (--hb-side-w / --hb-rail-w), demak
   `grid-template-columns` animatsiyalanadi va ikkalasi BIR VAQTDA,
   bir xil egri chiziq bilan harakatlanadi.
   ⚠️ `:has()` qoidasi ATAYLAB `@media (min-width:861px)` ichida (pastda) —
   uning spetsifikligi (1,2,0) mobil `@media (max-width:860px){.hb-shell{
   grid-template-columns:1fr}}` (0,1,0) qoidasidan yuqori bo'lgani uchun
   himoyasiz qoldirilsa mobilda ham 72px ustun ajratib qo'yardi. */
/* 2026-09-07 (buyurtmachi: "butun tanasi qora bo'lib qolyapti, yashil
   gradient tarqalib tursin") — `background-image` shu yerga, `.hb-shell`
   ustiga chizildi (u `position:fixed`, o'zi HECH QACHON skroll qilmaydi —
   yog'du hamisha bir joyda turadi, faqat `.hb-content` uning USTIDAN
   skroll qiladi, shaffof fonda). `.hb-sidebar` o'zining alohida OPAK
   --hb-bg2 foniga ega — shu bois bu gradient sidebar hududida ko'rinmaydi,
   faqat asosiy kontent maydonida. Token --hb-shell-bg-image (hb-tokens.css)
   yorug' temada `none`ga tushadi. */
.hb-shell{position:fixed;inset:0;display:grid;grid-template-columns:var(--hb-side-w) 1fr;min-width:0;overflow:hidden;background-color:var(--hb-bg);background-image:var(--hb-shell-bg-image,none);color:var(--hb-txt);font-family:var(--hb-font);
  transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}
@media (min-width:861px){
  .hb-shell:has(#hbSidebar.slim){grid-template-columns:var(--hb-rail-w) 1fr}
  /* `hb:noauth` (hb_shell_base.html) `#hbSidebar`ni inline `display:none`
     qiladi — login sahifasida chap ustun bo'sh qolmasin. */
  .hb-shell:has(#hbSidebar[style*="display: none"]),
  .hb-shell:has(#hbSidebar[style*="display:none"]){grid-template-columns:0 1fr}
}
@media (prefers-reduced-motion:reduce){ .hb-shell{transition:none} }
.hb-sidebar{width:248px;position:relative;display:grid;grid-template-rows:auto 1fr auto;border-right:1px solid var(--hb-brd);background:var(--hb-bg2);min-height:0}
/* Chetidan tortib kengaytirish/toraytirish (2026-07-31) — 2026-08-19
   KECHQURUN rail+flyout redizaynida #hbSidebar ENDI FIKS kenglikdagi
   ikonka-rail (pastga qarang), shu bois tortib-o'lchamlash mantiqsiz
   bo'lib qoldi. `#hbSidebarResize` DOM elementi hb_shell_base.html'dan
   OLIB TASHLANDI — bu qoida ATAYLAB shu yerda qoldirilgan (hech qanday
   elementga mos kelmaydi, zararsiz o'lik CSS; hb-ui.js::
   hbInitSidebarResize() ham xuddi shu sabab bilan xavfsiz no-op bo'lib
   qoladi — `if (!sidebar || !handle) return;` — ESKI localStorage
   kengligi ham shu orqali endi HECH QACHON qo'llanmaydi, tasodifiy
   eski 400px kabi qiymat yangi rail'ga "sizib chiqmaydi"). */
.hb-sidebar-resize{position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize;z-index:5;background:transparent;transition:background .15s}
.hb-sidebar-resize:hover,.hb-sidebar-resize.resizing{background:var(--hb-acc)}
/* 2026-09-07 — tutqich QAYTARILDI (hb_shell_base.html #hbSidebarResize,
   hb-ui.js::hbInitSidebarResize): faqat keng rejimda; slim rail va mobil
   drawer'da yashirin. Tortish paytida grid-animatsiya o'chiriladi. */
#hbSidebar.slim .hb-sidebar-resize{display:none}
.hb-shell.is-resizing{transition:none !important}
@media (max-width:860px){ .hb-sidebar-resize{display:none} }
.hb-sidebar-brand{display:flex;align-items:center;gap:11px;padding:calc(18px + var(--tg-safe-top,0px)) 16px 18px}
.hb-sidebar-logo{width:34px;height:34px;flex:none;display:block;object-fit:contain}
.hb-sidebar-name{font-weight:800;font-size:15px;letter-spacing:-.2px;line-height:1.15}
.hb-sidebar-domain{color:var(--hb-mut);font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.hb-sidebar-nav{overflow-y:auto;min-height:0;padding:4px 10px 10px;display:flex;flex-direction:column;gap:2px;scrollbar-width:none;-ms-overflow-style:none}
.hb-sidebar-nav::-webkit-scrollbar{display:none}

/* ── Navigatsiya skroll ishorasi (2026-08-20, QA #14) ────────────────────
   1440x900'da rail ro'yxati sig'may qoladi ("Tizim sozlamalari"/"Chiqish"
   pastda) — ro'yxat skroll bo'ladi, LEKIN butun platformada scrollbar
   ataylab yashirin (hb-tokens.css), ya'ni hech qanday ishora yo'q edi.
   Pastki chetda yumshoq so'nish + chevron: FAQAT `.more` klassi bilan
   ko'rinadi, uni hb-ui.js::hbInitNavScrollCue() haqiqiy o'lchov bo'yicha
   qo'yadi/oladi (ro'yxat sig'sa — umuman chiqmaydi, oxirigacha skroll
   qilinsa — so'nadi). Ranglar tokenlardan → ikkala temada ishlaydi.
   `pointer-events:none` — ostidagi nav bandini bosishga XALAQIT BERMAYDI. */
.hb-navscroll{position:relative;min-height:0;display:flex;flex-direction:column}
.hb-navscroll > .hb-sidebar-nav{flex:1 1 auto}
.hb-navscroll-cue{
  position:absolute;left:0;right:0;bottom:0;height:44px;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;
  color:var(--hb-mut);opacity:0;transition:opacity .18s ease;z-index:2;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,var(--hb-bg2) 76%);
}
.hb-navscroll-cue svg{display:block;animation:hb-navcue 1.9s ease-in-out infinite}
.hb-navscroll.more > .hb-navscroll-cue{opacity:1}
@keyframes hb-navcue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(2px);opacity:1}}
@media (prefers-reduced-motion:reduce){ .hb-navscroll-cue svg{animation:none} }
.hb-navgroup-label{color:var(--hb-mut);font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;padding:10px 8px 6px}
/* Tizim bandlarini (Asosiy ERP'ga qaytish/Chiqish) matn-sarlavhasiz pastga
   surish (2026-08-19 kechqurun, buyurtmachi: "bo'laklarga bo'lish kerak
   emas" — "Ilovalar"/"Tez orada"/"Tizim" matn sarlavhalari olib
   tashlandi). `.hb-sidebar-nav` allaqachon flex-column — auto-margin
   o'rniga `flex` ishlatiladi, shunda ro'yxat qisqa bo'lganda ham (masalan
   kelajakda band kamaysa) manfiy joy hosil bo'lmaydi. */
.hb-navrail-spacer{flex:1 0 10px}

/* ═══════════════════════════════════════════════════════════════════════
   ZUMRAD YON PANEL (2026-08-20) — buyurtmachi namunasi bo'yicha to'liq
   qayta bo'yash. RESKIN, REWRITE EMAS: butun mexanizm (guruh toggle,
   admin-gating, i18n, SPA-almashtirish, sozlamalar tortmasidagi
   tartiblash) o'zgarishsiz, faqat ko'rinish.

   IKKI REJIM, BITTA MARKUP:
     • KENG (default, 220px) — bo'lim sarlavhalari (ASOSIY/XODIMLAR/TIZIM),
       matn yorliqlari, ko'p bandli guruh JOYIDA (inline) ochiladi.
     • `.slim` (72px) — 2026-08-19 dagi ikonka-rail: faqat 44px ikonka
       tugmalar, guruh esa SUZUVCHI flyout panel (position:fixed) sifatida
       ochiladi. Rejim `[data-hb-dock-toggle]` tugmasi bilan almashadi,
       localStorage `hb_sidebar_mode` da saqlanadi
       (hb-ui.js::hbInitSidebarMode).

   ⚠️ TEMA: panel RANGLARI --hb-dock-* tokenlaridan (hb-tokens.css) — ular
   yorug'/qorong'i bloklarda QAYTA BELGILANMAYDI, ya'ni yon panel HAR
   IKKALA temada bir xil to'q zumrad bo'lib qoladi (Slack/Discord
   uslubidagi doimiy chrome — buyurtmachi namunasida yorug' kontent
   yonida to'q yashil panel turibdi). Sahifaning qolgan qismi avvalgidek
   temaga ergashadi — mavzu almashtirgichi (data-hb-theme-toggle)
   TEGILMAGAN.

   ⚠️ Z-INDEX: spetsifikatsiyada `z-index:1000` yozilgan edi — BU YERDA
   ATAYLAB 50 ISHLATILADI. Sabab: bu platformada 1000 panelni modal oyna
   (.hb-sheet-bg 180), toast (200), kiruvchi qo'ng'iroq (400) va
   navigatsiya yo'lagidan (600) YUQORIGA chiqarib yuborardi — ya'ni
   qoraytirilgan fon ustida yon panel "yonib" turardi. 50 esa
   spetsifikatsiyaning HAQIQIY maqsadini (panel kontentdan va topbar'dan
   yuqorida) to'liq bajaradi: .hb-topbar (40) dan yuqori, .hb-drawer (71) /
   flyout (85) / til menyusi (90) / modal / toastlardan past.
   ⚠️ .hb-topbar'ning `position:relative; z-index:40` qoidasi (til
   menyusining bosilishini tiklagan HAQIQIY tuzatish, pastdagi izoh)
   TEGILMAGAN — panel undan boshqa grid ustunida, ustma-ust tushmaydi.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Bo'lim o'rami + sarlavhasi (ASOSIY / XODIMLAR / TIZIM) ──────────────
   Ikkala nusxada ham (mobil drawer + desktop panel) bir xil. `.hb-navsect-end`
   — KO'RINMAS langar: hb-settings-drawer.js::applyNavToDom() qayta
   tartiblashda bandni AYNAN O'Z bo'limi ichida qoldirishi uchun. */
.hb-navsect{display:flex; flex-direction:column; gap:2px}
.hb-navsect-label{
  color:rgba(255,255,255,.45); font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  margin:16px 0 6px 8px; line-height:1.2;
}
.hb-navsect:first-child > .hb-navsect-label{margin-top:2px}
.hb-navsect-end{display:none}
/* POS — hali qurilmagan band (avval inline style edi, endi klass). */
.hb-navitem-off{opacity:.45; cursor:default}

/* ══ KENG REJIM (default) ══════════════════════════════════════════════ */
#hbSidebar{
  width:var(--hb-side-w); min-width:var(--hb-side-w);
  /* [2026-08-20] Platforma standarti: `100dvh` (`100vh` — faqat eski
     brauzerlar uchun zaxira, birinchi qator). `100vh` mobil brauzerda
     manzil qatori/virtual klaviatura ochilganda HAQIQIY ko'rinadigan
     balandlikdan katta bo'lib qoladi va panel pastdan kesiladi. Bu yerda
     ta'sir cheklangan (≤860px'da `#hbSidebar{display:none}` — mobilda
     `.hb-drawer` ishlaydi, u esa `top:0;bottom:0` bilan o'lchanadi), lekin
     standart butun komponentga bir xil qo'llanadi. */
  height:100vh; height:100dvh; position:sticky; top:0; left:0; z-index:50;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:20px 14px;
  background:var(--hb-dock-bg); border-right:1px solid var(--hb-dock-brd);
  /* 2026-08-24: har burchak alohida o'zgaruvchidan (hb-tokens.css) —
     standart qiymat qattiq-kodlangan bilan bir xil, "Ranglar" varag'i
     #hbSidebar'ga inline qayta belgilasa (hbApplySidebarRadius) burchak
     mustaqil o'zgaradi. */
  border-radius:var(--hb-side-rad-tl,0px) var(--hb-side-rad-tr,24px) var(--hb-side-rad-br,24px) var(--hb-side-rad-bl,0px);
  /* `.hb-shell`ning grid-track o'tishi bilan AYNAN bir xil davomiylik va
     egri chiziq — ikkalasi qadam-baqadam harakatlanadi. */
  transition:width .25s cubic-bezier(.16,1,.3,1), min-width .25s cubic-bezier(.16,1,.3,1), padding .25s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion:reduce){ #hbSidebar{transition:none} }
#hbSidebar .hb-navscroll{width:100%; flex:1 1 auto; min-height:0}
#hbSidebar .hb-sidebar-nav{align-items:stretch; padding:2px 0 6px; gap:2px}

/* ── Brend sarlavhasi + yig'ish tugmasi ── */
.hb-sidebar-head{display:flex; align-items:center; gap:10px; flex:none}
#hbSidebar .hb-sidebar-head{padding:var(--tg-safe-top,0px) 0 16px}
#hbSidebar .hb-sidebar-brand{flex:1; min-width:0; gap:10px; padding:0}
#hbSidebar .hb-sidebar-name{color:var(--hb-dock-ink-on); font-size:15.5px; font-weight:800}
/* Brend belgisi — 44px zumrad "badge" (hbk-brand-tile ning shisha varianti
   to'q yashil fonda ko'rinmay qolardi, shu bois bu yerda qayta belgilanadi;
   markup O'ZGARMAGAN). */
#hbSidebar .hbk-brand-tile{
  width:44px; height:44px; flex:none; border-radius:14px;
  background:var(--hb-dock-acc); border:none;
  /* 2026-08-24: rgb() endi --hb-dock-acc-rgb'dan (fallback = qattiq
     standart), "Ranglar" sozlamasi #hbSidebar'ga ikkalasini ham inline
     qayta belgilasa soya rangi ham fon bilan birga o'zgaradi. */
  box-shadow:0 4px 14px rgba(var(--hb-dock-acc-rgb,16,185,129),.35);
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;
}
#hbSidebar .hb-sidebar-brand:hover .hbk-brand-tile{transform:translateY(-1px); box-shadow:0 6px 18px rgba(var(--hb-dock-acc-rgb,16,185,129),.5)}
#hbSidebar .hb-sidebar-logo{width:30px; height:30px}
.hb-dock-toggle{
  flex:none; width:28px; height:28px; border-radius:9px; border:none;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.7);
  display:grid; place-items:center; cursor:pointer; padding:0;
  transition:background .15s ease, color .15s ease, transform .22s cubic-bezier(.2,.8,.3,1);
}
.hb-dock-toggle:hover{background:rgba(255,255,255,.16); color:#fff}
.hb-dock-toggle svg{display:block}

/* ── Nav bandi (keng) ── */
#hbSidebar .hb-navitem, #hbSidebar .hb-navitem-toggle{
  position:relative; width:100%;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:12px;
  font-size:13.5px; font-weight:500;
  color:var(--hb-dock-ink); background:transparent;
  transition:background .18s ease, color .18s ease, box-shadow .2s ease;
}
#hbSidebar .hb-navitem:hover{background:var(--hb-dock-hover); color:var(--hb-dock-ink-on)}
#hbSidebar .hb-navitem.active, #hbSidebar .hb-navitem-toggle.active{
  background:rgba(255,255,255,.12); color:var(--hb-dock-ink-on); font-weight:600;
}
/* 2026-08-19'da ikonka o'lchami buyurtmachi so'rovi bilan kattalashtirilgan
   edi (34→38px quti, 19→23px svg). Keng rejimda ikonka MATN yonida turadi,
   shu bois quti fonsiz va 20px — matn bilan mutanosib; TOR (.slim)
   rejimda esa 44px quti + 23px svg (o'sha kattalashtirish to'liq saqlanadi,
   pastga qarang). */
#hbSidebar .hb-navitem-ic{
  width:22px; height:22px; flex:none;
  background:transparent; border-radius:0; color:inherit;
}
#hbSidebar .hb-navitem-ic svg{width:20px; height:20px}
#hbSidebar .hb-navitem-name{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Muloqot o'qilmagan xabar nishoni — keng rejimda HAQIQIY SON ("3") pilyulasi
   (element/id o'zgarmagan: #hbd-nav-unread, discuss.js + hbSetDiscussBadge()
   uni aynan shu id bilan yangilaydi). */
#hbSidebar .hb-navitem-badge{
  flex:none; margin-left:auto; padding:2px 7px; border-radius:999px;
  background:var(--hb-dock-dot); color:var(--hb-dock-bg);
  font-size:10px; font-weight:800; line-height:1.5;
}
#hbSidebar .hb-navitem-chevron{margin-left:auto; color:rgba(255,255,255,.5)}
#hbSidebar .hb-navitem-badge + .hb-navitem-chevron{margin-left:6px}
#hbSidebar .hb-navgroup{display:flex; flex-direction:column}

/* ── Ichki ro'yxat (keng rejim + mobil drawer) — chapdan chekinma +
   yo'naltiruvchi chiziq. `.hb-navsub` ning display/`open` mantig'i
   ATAYLAB tegilmagan (bazaviy `.hb-navsub`/`.hb-navsub.open` qoidalari,
   pastda) — shu bois keng rejimda guruh JOYIDA ochiladi, xuddi mobil
   drawer'dagidek, bitta sinovdan o'tgan mexanizm bilan. ── */
#hbSidebar .hb-navsub, .hb-drawer .hb-navsub{
  margin:2px 0 6px 25px; padding:2px 0 2px 10px; gap:2px;
  border-left:1.5px solid rgba(255,255,255,.14);
}
#hbSidebar .hb-navsub-item, .hb-drawer .hb-navsub-item{
  padding:8px 12px; border-radius:10px;
  font-size:12.5px; font-weight:600;
  color:rgba(255,255,255,.68);
}
#hbSidebar .hb-navsub-item:hover, .hb-drawer .hb-navsub-item:hover{
  background:rgba(255,255,255,.09); color:var(--hb-dock-ink-on); opacity:1;
}
#hbSidebar .hb-navsub-item.active, .hb-drawer .hb-navsub-item.active{
  /* 2026-08-24: --hb-dock-acc-rgb'dan (hb-tokens.css) — standart qiymati
     eski qattiq hex bilan bir xil (16,185,129), shu bois hech narsa
     o'zgarmaydi; #hbSidebar'ga inline qayta belgilansa (Ranglar
     sozlamasi) FAQAT desktop rail (#hbSidebar) rangi o'zgaradi —
     .hb-drawer (mobil) inline override OLMAYDI, :root standartida qoladi. */
  background:rgba(var(--hb-dock-acc-rgb,16,185,129),.30); color:var(--hb-dock-ink-on); font-weight:800;
}
#hbSidebar .hb-navsub-ic, .hb-drawer .hb-navsub-ic{color:inherit; opacity:.9}

/* Skroll ishorasi (hbInitNavScrollCue) — so'nish gradienti panel rangida
   bo'lishi kerak, aks holda to'q yashil ustida oq-kulrang dog' chiqardi. */
#hbSidebar .hb-navscroll-cue, .hb-drawer .hb-navscroll-cue{
  color:rgba(255,255,255,.62);
  background:linear-gradient(to bottom,rgba(6,78,59,0) 0%,var(--hb-dock-bg) 76%);
}

/* ── Pastki foydalanuvchi kartasi ────────────────────────────────────────
   Avatar + ism + izoh, yumaloq kartada; avatarning pastki-o'ng burchagida
   yashil "onlayn" nishoni. Bosilish xatti-harakati (hbSidebarProfileLink →
   /hrm/profile/, hb_shell_base.html) TEGILMAGAN. */
#hbSidebar .hb-sidebar-foot{
  padding:14px 0 0; width:100%; flex:none;
  border-top:1px solid var(--hb-dock-brd);
}
#hbSidebar .hb-sidebar-profile{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border-radius:14px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  transition:background .16s ease, border-color .16s ease;
}
#hbSidebar .hb-sidebar-profile:hover{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.2)}
.hb-profile-av{position:relative; flex:none; display:grid; place-items:center}
.hb-profile-av::after{
  content:''; position:absolute; right:-1px; bottom:-1px;
  width:11px; height:11px; border-radius:999px;
  background:var(--hb-dock-dot); border:2px solid var(--hb-dock-bg);
  pointer-events:none;
}
#hbSidebar .hb-sidebar-profile .hb-avatar{
  width:38px; height:38px; font-size:13px;
  border:2px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.12); color:var(--hb-dock-ink-on);
}
.hb-profile-meta{display:flex; flex-direction:column; line-height:1.25; min-width:0; text-align:left; flex:1}
.hb-profile-name{
  font-weight:700; font-size:12.5px; color:var(--hb-dock-ink-on);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#hbSidebar .hb-profile-meta .hb-hint{color:rgba(255,255,255,.5); font-size:11px}

/* ══ TOR REJIM (`.slim`) — 2026-08-19 ikonka-rail'i ════════════════════ */
#hbSidebar.slim{width:var(--hb-rail-w); min-width:var(--hb-rail-w); padding:20px 0; align-items:center}
#hbSidebar.slim .hb-sidebar-head{flex-direction:column; gap:10px; padding:var(--tg-safe-top,0px) 0 14px}
#hbSidebar.slim .hb-sidebar-brand{flex:none; justify-content:center}
#hbSidebar.slim .hb-sidebar-name, #hbSidebar.slim .hb-sidebar-brand > div{display:none}
#hbSidebar.slim .hb-dock-toggle{transform:rotate(180deg)}
#hbSidebar.slim .hb-sidebar-nav{align-items:center; gap:6px}
#hbSidebar.slim .hb-navsect{align-items:center}
#hbSidebar.slim .hb-navsect-label{display:none}
#hbSidebar.slim .hb-navgroup{align-items:center}
#hbSidebar.slim .hb-navitem, #hbSidebar.slim .hb-navitem-toggle{
  width:44px; height:44px; padding:0; gap:0;
  display:grid; place-items:center; text-align:center;
  transition:background .18s ease, color .18s ease,
             border-radius .18s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
}
#hbSidebar.slim .hb-navitem-ic{width:auto; height:auto; place-items:center}
#hbSidebar.slim .hb-navitem-ic svg{width:23px; height:23px}
#hbSidebar.slim .hb-navitem-name{display:none}
#hbSidebar.slim .hb-navitem-chevron{display:none}
/* Tor rejimda faol band — zumrad "squircle" + yumshoq nur (44px kvadratda
   rgba(255,255,255,.12) yetarlicha ko'rinmasdi). */
#hbSidebar.slim .hb-navitem.active, #hbSidebar.slim .hb-navitem-toggle.active{
  background:var(--hb-dock-acc); color:var(--hb-dock-ink-on);
  border-radius:14px; box-shadow:0 4px 16px rgba(16,185,129,.45);
}
#hbSidebar.slim .hb-navitem.active:hover{background:var(--hb-dock-acc); color:var(--hb-dock-ink-on)}
/* Tor rejimda son sig'maydi (ikki xonali unread) — 6px nuqta, bitta element. */
#hbSidebar.slim .hb-navitem-badge{
  position:absolute; top:7px; right:7px; margin:0;
  width:6px; height:6px; padding:0; border-radius:999px;
  background:var(--hb-dock-dot);
  font-size:0; line-height:0; color:transparent; border:none;
  box-shadow:0 0 0 2px var(--hb-dock-bg);
}
/* Profil kartasi tor rejimda faqat avatar bo'lib qoladi.
   `!important` SHART EMAS bo'lib qoldi (2026-08-20): matn bloki endi
   inline `style=` bilan emas, `.hb-profile-meta` klassi bilan yoziladi —
   2026-08-19 dagi "inline uslub CSS'dan kuchli" muammosi manbadan
   yo'qotildi. */
#hbSidebar.slim .hb-sidebar-foot{padding:14px 6px 0}
#hbSidebar.slim .hb-sidebar-profile{
  width:42px; height:42px; padding:0; margin:0 auto;
  justify-content:center; border-radius:999px;
  background:transparent; border:none;
}
#hbSidebar.slim .hb-sidebar-profile:hover{background:transparent; border:none}
#hbSidebar.slim .hb-sidebar-profile .hb-avatar{width:42px; height:42px; font-size:14px}
#hbSidebar.slim .hb-profile-meta{display:none}

/* ── Flyout panel — FAQAT tor rejimda. JS (hb-ui.js::hbPositionRailFlyout)
   panelning `top`/`left` ini qo'yadi.
   ⚠️ `position:fixed` ATAYLAB (spetsifikatsiyadagi `position:absolute`
   o'rniga): `.hb-sidebar-nav` `overflow-y:auto`, demak overflow-x ham
   "auto" — absolute panel panel chetida KESILIB qolardi (2026-08-19 da
   aynan shu sabab bilan fixed'ga o'tilgan). `left:80px` effekti JS orqali
   beriladi (panel o'ng cheti 72px + 8px oraliq).
   ⚠️ Bitta YAGONA qoida — UCHALA statik guruh (Xodimlar/4, Akademiya/6,
   Muloqot/3) va DINAMIK CMS (6) uchun bir xil, guruh-boshiga
   takrorlanadigan CSS YO'Q. ── */
#hbSidebar.slim .hb-navsub{
  display:none; position:fixed; min-width:220px; max-width:280px;
  z-index:85; flex-direction:column; gap:2px;
  margin:0; padding:10px; border-left:none;
  /* Shisha sirt (2026-08-20 jilo): deyarli oq, lekin ostidagi kontent
     ozgina "nafas oladi". @supports zaxira — blur bo'lmasa to'liq oq. */
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border-radius:20px;
  border:1.5px solid rgba(6,78,59,.08);
  box-shadow:0 20px 45px -10px rgba(6,78,59,.2), 0 4px 14px rgba(0,0,0,.05);
  opacity:0; transform:translate(-6px,-4px) scale(.98);
  transition:opacity .16s ease, transform .16s cubic-bezier(.16,1,.3,1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #hbSidebar.slim .hb-navsub{background:#fff}
}
#hbSidebar.slim .hb-navsub.open{display:flex}
#hbSidebar.slim .hb-navsub.open.hb-flyout-in{opacity:1; transform:translateY(-10px)}
/* Panel ichidagi bo'lim sarlavhasi ("MULOQOT") — hb-ui.js::
   hbInitFlyoutHeaders() `data-hb-flyout-title` dan yasaydi. FAQAT tor
   rejimda: keng rejimda guruh nomi darhol tepasida turadi. */
.hb-navsub-title{display:none}
#hbSidebar.slim .hb-navsub-title{
  display:block; font-size:11px; font-weight:700; color:#064e3b;
  opacity:.6; padding:6px 12px; text-transform:uppercase; letter-spacing:.06em;
}
#hbSidebar.slim .hb-navsub-item{
  padding:10px 14px; border-radius:12px;
  color:#064e3b; font-weight:600; font-size:13.5px;
  transition:background .15s ease, color .15s ease;
}
/* `.hb a:hover{opacity:.8}` (hb-tokens.css) oq panelda bandni xiralashtirardi. */
#hbSidebar.slim .hb-navsub-item:hover{background:#ecfdf5; color:#059669; opacity:1}
#hbSidebar.slim .hb-navsub-item.active{background:#ecfdf5; color:#059669; font-weight:800}
#hbSidebar.slim .hb-navsub-ic{color:inherit; opacity:.9}

/* Ochiq (lekin faol bo'lmasligi mumkin) guruh bandi — panel/ro'yxat
   o'ziga tegishli ekanini ko'rsatadi. */
#hbSidebar .hb-navitem-toggle.open{background:rgba(255,255,255,.14); color:var(--hb-dock-ink-on)}
#hbSidebar .hb-navitem-toggle.active.open{background:rgba(255,255,255,.16)}
#hbSidebar.slim .hb-navitem-toggle.open{background:rgba(255,255,255,.16)}
#hbSidebar.slim .hb-navitem-toggle.active.open{
  background:var(--hb-dock-acc); border-radius:14px; box-shadow:0 4px 16px rgba(16,185,129,.45);
}

/* 2026-08-08: admin-only nav elementlari DEFAULT'da yashirin — avval hech
   qanday qoida yo'q edi (JS orqali FAQAT admin bo'lmasa yashirilardi),
   shuning uchun har sahifa yuklanganda (bu SPA emas, har navigatsiya =
   yangi HTML) rolni bilishdan OLDIN bir lahza ko'rinib, keyin yo'qolib
   ketardi ("Boshqaruv paneli tugmasi bir ko'rinib yo'qolayabdi"). Endi CSS
   ORQALI yashirin boshlanadi. `!important` SHART — [data-hb-admin-only]
   bilan bir xil elementlarda .hb-navitem/.hb-navitem-toggle/.hb-navsub/
   .hb-bnav kabi klasslar HAM display belgilaydi, bir xil spetsifiklikda
   FAYLDA KEYINGI qoida g'olib chiqadi (bu qoidalardan ko'pi shu fayldan
   PASTDA yozilgan) — !important'siz bu qoida ULARDAN yutib qolardi.
   hb_shell_base.html'dagi hb:user handler admin bo'lsa ELEMENTDAN
   data-hb-admin-only ATRIBUTINI OLIB TASHLAYDI (inline style bilan
   kurashish o'rniga) — shunda selektor UMUMAN mos kelmay qoladi va element
   o'zining ODATIY (boshqa klasslar belgilagan) display qiymatiga qaytadi. */
[data-hb-admin-only]{display:none !important}
/* 2026-09-08 — [data-hb-manager-only]: xuddi shu mexanizm, faqat rahbar
   (bo'lim rahbari/qo'lida bevosita xodim bor) YOKI admin bo'lsa ko'rinadi
   ('Jamoa' bandi — oddiy xodimga ma'nosiz, hb_shell_base.html::hbBootProfile
   olib tashlaydi). */
[data-hb-manager-only]{display:none !important}
.hb-navitem{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--hb-radius-sm);cursor:pointer;font-weight:700;font-size:13px;color:var(--hb-mut);transition:background .15s,color .15s}
.hb-navitem:hover{background:var(--hb-sfc);color:var(--hb-txt)}
.hb-navitem.active{background:var(--hb-sfc);color:var(--hb-txt)}
.hb-navitem-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--hb-sfc2);flex:none}
/* 2026-08-09: emoji ikonkalar chiziqli SVG'ga almashtirildi (buyurtmachi:
   "stiker emas, real svg") — inline <svg> standart holda baseline bo'yicha
   tekislanadi va ostida ozgina bo'sh joy qoldiradi, block qilib bu oldini
   olamiz, aniq markazlashishi uchun. */
.hb-navitem-ic svg, .hb-bnav-ic svg{display:block}
.hb-navitem.active .hb-navitem-ic{background:rgba(var(--hb-acc-rgb),.18);color:var(--hb-acc-text)}
.hb-navitem-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-navitem-badge{padding:2px 7px;border-radius:var(--hb-pill);background:var(--hb-acc);color:var(--hb-acc-ink);font-size:10px;font-weight:800}

/* ── Ochiladigan sidebar guruhi (mobilda .hb-drawer ichida ODATIY inline
   kengayish; #hbSidebar/desktop'da yuqoridagi "FLYOUT PANEL" bo'limi bu
   qoidalarni qayta belgilaydi — pastga qarang). Chevron SVG (2026-08-19
   kechqurun, "eng mos ikonka" — Unicode glif o'rniga chiziqli SVG,
   qolgan rail ikonkalari bilan bir xil uslub/og'irlik). ── */
.hb-navitem-chevron{margin-left:auto;display:flex;color:var(--hb-mut);transition:transform .18s}
.hb-navitem-toggle.open .hb-navitem-chevron{transform:rotate(90deg)}
.hb-navsub{display:none;flex-direction:column;gap:2px;margin:2px 0 4px}
.hb-navsub.open{display:flex}
/* Aylana-yorliq ("rounded highlight pill", Canva mos-tushuvi, buyurtmachi
   talabi) — ikkala kontekstda (drawer inline + desktop flyout) bir xil. */
.hb-navsub-item{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:var(--hb-pill);
  cursor:pointer;font-weight:600;font-size:12.5px;color:var(--hb-mut);transition:background .15s,color .15s}
/* 2026-08-19 kechqurun — flyout bandlariga ikonka qo'shildi (buyurtmachi
   so'rovi). `flex:none` — matn uzun bo'lsa ham ikonka torraymaydi. */
.hb-navsub-ic{flex:none;width:16px;height:16px;display:grid;place-items:center;opacity:.85}
.hb-navsub-ic svg{display:block}
.hb-navsub-item.active .hb-navsub-ic{opacity:1}
.hb-navsub-item:hover{background:var(--hb-sfc);color:var(--hb-txt)}
.hb-navsub-item.active{background:rgba(var(--hb-acc-rgb),.16);color:var(--hb-acc-text);font-weight:800}
.hb-sidebar-foot{padding:12px;border-top:1px solid var(--hb-brd);display:flex;flex-direction:column;gap:8px}
.hb-sidebar-profile{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:var(--hb-radius-sm);cursor:pointer}
.hb-sidebar-profile:hover{background:var(--hb-sfc)}

.hb-main{display:grid;grid-template-rows:auto 1fr;min-height:0;min-width:0;overflow:hidden}
/* 2026-08-08 (noauth kartani jilolash paytida topildi): `.hb-shell` grid-template-columns
   HAR DOIM "auto 1fr" (2 ustun) desktopda — lekin `hb:noauth` `#hbSidebar`ni
   `display:none` qiladi (hb_shell_base.html), demak grid'da FAQAT `.hb-main`
   qoladi va avtomatik joylashtirish uni 1-ustunga ("auto", tarkibga qarab
   o'lchanadi) qo'yadi, 2-ustun ("1fr", butun qolgan kenglik) BO'SH qoladi —
   natijada butun sahifa (topbar ham) kontent kengligiga siqilib, o'ngda
   ulkan bo'sh joy qolardi (login talab qilingan har qanday sahifada, desktop
   kenglikda). Aniq ustun raqami bilan mahkamlaymiz — sidebar ko'rinadimi
   yo'qmi, `.hb-main` HAR DOIM 2-ustunda turadi. */
.hb-main{grid-column:2}
/* padding-top: Telegram fullscreen'da status-bar ostiga kirib qolmasligi uchun —
   --tg-safe-top ni hb-ui.js::hbTgSafeArea() o'rnatadi (Telegram tashqarisida 0px). */
/* 2026-08-19 HAQIQIY XATO TUZATILDI (buyurtmachi: "til tanlasam ham
   o'zgarmayabdi, bosilmayabdi") — `.hbk-glass-bar` (shaffof/glass effekt)
   `backdrop-filter` qo'shadi, bu esa CSS spetsifikatsiyasi bo'yicha yangi
   stacking context yaratadi, LEKIN `position`/`z-index` ANIQ berilmasa,
   brauzer uni pastdagi `.hb-main`/`#hbMainContent` bilan bir xil "qatlam"da
   deb hisoblaydi — natijada DOM tartibiga qarab ba'zan kontent maydoni
   ustidan chiqib, til menyusi (`.hb-lang-menu`, position:absolute) kabi
   ichidagi elementlarning bosilishini TUTIB QOLADI (Playwright bilan
   tasdiqlandi: "hbHome subtree intercepts pointer events"). `position:
   relative` + aniq `z-index` shu stacking context'ni MAJBURIY ravishda
   kontentdan YUQORIGA chiqaradi. */
.hb-topbar{display:flex;align-items:center;gap:14px;padding:calc(12px + var(--tg-safe-top,0px)) 24px 12px;border-bottom:1px solid var(--hb-brd);background:var(--hb-bg);min-height:64px;min-width:0;position:relative;z-index:40}
/* 2026-09-10 (buyurtmachi: "telegram menyusi bilan saytniki ustma-ust
   tushib qolayabdi") — Telegram fullscreen'da --tg-safe-top ba'zan 0
   bo'lib qolsa ham (hb-ui.js::hbTgSafeArea), kam degani shuncha bo'shliq
   MAJBURLANADI (Telegram'ning suzuvchi Yopish/menyu tugmalari balandligi). */
body.hb-tg-fullscreen .hb-topbar{padding-top:max(calc(12px + var(--tg-safe-top,0px)), 54px)}
.hb-topbar-actions{display:flex;align-items:center;gap:8px}
/* 2026-08-24 (Ranglar varag'i, uchinchi tuzatish): sarlavha/tavsif —
   navbar FONIGA BEVOSITA (nested neytral chipsiz) chiqadigan YAGONA matn,
   shu bois FAQAT shu ikkalasi --hb-top-ink*ga bog'lanadi (standart holatda
   --hb-txt/--hb-mut'ga teng qoladi — hech narsa o'zgarmagandek ko'rinadi).
   Boshqa hech qanday elementga (qidiruv, tugmalar — ularning O'ZINING
   neytral --hb-sfc foni bor) bu o'zgaruvchilar TA'SIR qilmaydi. */
.hb-topbar-title{color:var(--hb-top-ink, var(--hb-txt));font-weight:800;font-size:17px;letter-spacing:-.25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
/* 2026-09-08 (buyurtmachi: "sarlavhani o'rtaga keltir, ostiga yozuv
   qo'shma, qolgan sahifalarda ham ostidagi yozuvni olib tashla") — tavsif
   qatori BUTUN qobiqda yashiriladi (22 sahifa shablonining har birini
   alohida tahrirlash o'rniga bitta joy). `.hb-topbar-titlewrap` ustunida
   endi FAQAT sarlavha qoladi — `.hb-topbar`ning `align-items:center`i uni
   avtomatik o'rtaga tushiradi (baland/past ikki qator emas, bitta qator).
   Shablonlardagi `{% block hb_topbar_sub %}` matnlari ATAYLAB o'chirilmadi
   (i18n/SPA almashtirish ularga tayanadi, hb-ui.js:1622) — faqat KO'RINMAYDI. */
.hb-topbar-sub{display:none}
.hb-topbar-spacer{flex:1}
/* ── Topbar kompaniya tablari (2026-09-08, 2-tur) ───────────────────────
   Sarlavha yonida: Oliy maqsad / Qadriyatlar / Qoidalar / Nizom — Bosh
   sahifadagi ma'lumot kartalari ankorlariga. `.hb .hb-topbar-tab` — .hb a
   {color:--hb-acc-text} (hb-tokens.css) qoidasidan kuchliroq bo'lishi uchun. */
/* .hb-topbar-company — sarlavha va o'ng tugmalar orasidagi BUTUN bo'sh joyni
   oladi (flex:1) va ichidagi bandlarni (4 tab + 3 logo, `display:contents`
   orqali bitta qatorga yoyilgan) space-evenly bilan taqsimlaydi — oraliq
   qo'lda emas, flex tomonidan har doim teng. */
/* [2026-09-08, buyurtmachi: "ikki bo'lak bo'lishi kerak — ekran kattarganda
   logolar o'ngga, so'zlar chapga surilib borsin"] — space-EVENLY emas,
   space-BETWEEN: ikki guruh (tablar / logolar), ular orasidagi bo'sh joy
   cho'ziladi, guruh ICHIDAGI oraliqlar doimiy (8px / 10px). */
/* [buyurtmachi: "bu darajada tiqishtirib qo'yma, erkinroq tursin"] — guruh ichi 20px/16px, chetlar 12px/24px */
.hb-topbar-company{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;min-width:0;padding:0 16px 0 28px}
/* [buyurtmachi: "o'rtadan tartiblansin, o'ngdan ham chapdan ham teng"] —
   konteyner ko'ringanda o'ng spacer BO'SH JOY OLMAYDI (flex:0), butun
   joy konteynerniki → space-evenly chekkalarda ham teng oraliq beradi.
   Spacer faqat konteyner yashirin holatda (≤600px, ommaviy sahifa, bosh
   sahifa mehmon rejimi — index.html hbShowHeroTopbar) o'z vazifasiga
   qaytadi. */
.hb-topbar-company ~ .hb-topbar-spacer{flex:0 0 auto}
@media (max-width:600px){ .hb-topbar-company ~ .hb-topbar-spacer{flex:1} }
body.hbp-public .hb-topbar-company ~ .hb-topbar-spacer{flex:1}
.hb-topbar-tabs{display:flex;align-items:center;gap:28px;flex:none;min-width:0}
/* [buyurtmachi: "yozuvlarni katta-katta qil"] — 15px, sarlavha (17px) bilan
   yaqin ierarxiya, --hb-txt rang (ilgari --hb-mut 12.5px edi). */
.hb .hb-topbar-tab,.hb-topbar-tab{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:999px;color:var(--hb-txt);
  text-decoration:none;font-weight:700;font-size:15px;letter-spacing:-.2px;white-space:nowrap;transition:background .16s ease,color .16s ease}
.hb .hb-topbar-tab:hover,.hb-topbar-tab:hover,.hb-topbar-tab:focus-visible{background:var(--hb-sfc2);color:var(--hb-txt);outline:none}
.hb .hb-topbar-tab.active,.hb-topbar-tab.active{background:color-mix(in srgb,var(--hb-acc) 14%,var(--hb-sfc));color:var(--hb-acc-text)}
/* ≤1600px viewport (sidebar 280px ochiq bo'lsa kontent ~1112px): 1440px'da
   qidiruv ikonasi logoga chiqib ketardi (Playwright, 2026-09-08) — ixcham
   qatlam: oraliqlar/shrift kichikroq, sarlavha ellipsis bilan qisqaradi. */
@media (max-width:1600px){
  .hb-topbar-company{gap:16px;padding:0 8px 0 14px}
  .hb-topbar-tabs{gap:12px}
  .hb .hb-topbar-tab,.hb-topbar-tab{font-size:14px;padding:0 9px}
  .hb-topbar-brands{gap:12px}
  .hb-topbar-titlewrap{flex:0 1 auto}
}
@media (max-width:1280px){ .hb-topbar-tabs{display:none} }
@media (max-width:600px){ .hb-topbar-company{display:none} }
body.hbp-public .hb-topbar-tabs,body.hbp-public .hb-topbar-company{display:none}

/* ── Tutqich + ochiluvchi panel (2026-09-08, "mobilda kichik tutqich") ──
   Tutqich — topbar pastki chetida markazda, faqat tablar yashirin
   kengliklarda (≤1280px). Panel — topbar ostidan tushadi, shisha fon. */
.hb-topbar-handle{display:none;position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);width:44px;height:20px;
  border-radius:999px;background:var(--hb-sfc);border:1px solid var(--hb-brd);color:var(--hb-mut);cursor:pointer;padding:0;
  place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.08);z-index:41;transition:color .15s,border-color .15s,transform .2s}
.hb-topbar-handle svg{transition:transform .2s ease}
.hb-topbar-handle:hover{color:var(--hb-txt);border-color:var(--hb-acc)}
.hb-topbar-handle.open{color:var(--hb-acc-text);border-color:var(--hb-acc)}
.hb-topbar-handle.open svg{transform:rotate(180deg)}
@media (max-width:1280px){ .hb-topbar-handle{display:grid} }
.hb-topbar-panel{position:absolute;left:0;right:0;top:100%;z-index:39;padding:18px 16px 14px;
  background:color-mix(in srgb,var(--hb-bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hb-brd);box-shadow:0 12px 28px -12px rgba(0,0,0,.18);
  animation:hb-topbar-panel-in .22s cubic-bezier(.2,.8,.3,1) both}
.hb-topbar-panel[hidden]{display:none}
@keyframes hb-topbar-panel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* [buyurtmachi: "mobilda yuqoridagi 4 ta bir qatorga, pastdagi 3 ta bir
   qatorga sig'sin"] — grid: 4 va 3 teng ustun; matn markazda, sig'masa
   ellipsis. Tor ekranda (≤420px) shrift/padding kichikroq. */
.hb-topbar-panel-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hb-topbar-panel .hb-topbar-tab{background:var(--hb-sfc);border:1px solid var(--hb-brd);justify-content:center;padding:0 6px;min-width:0;font-size:13.5px}
.hb-topbar-panel .hb-topbar-tab > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-topbar-panel .hb-topbar-tab.active{border-color:transparent}
.hb-topbar-panel-brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px;padding:12px 0 0;border-top:1px solid var(--hb-brd)}
.hb .hb-topbar-panel-brand,.hb-topbar-panel-brand{display:flex;align-items:center;gap:7px;height:40px;padding:0 8px 0 4px;border-radius:999px;min-width:0;
  background:var(--hb-sfc);border:1px solid var(--hb-brd);color:var(--hb-txt);text-decoration:none;font-weight:700;font-size:13.5px;white-space:nowrap;
  transition:background .16s,box-shadow .16s}
.hb-topbar-panel-brand-name{overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:420px){
  .hb-topbar-panel{padding:16px 10px 12px}
  .hb-topbar-panel-tabs,.hb-topbar-panel-brands{gap:4px}
  .hb-topbar-panel .hb-topbar-tab{font-size:12.5px;padding:0 4px;letter-spacing:-.3px}
  .hb .hb-topbar-panel-brand,.hb-topbar-panel-brand{font-size:12.5px;gap:5px;padding:0 6px 0 3px;letter-spacing:-.2px}
  .hb-topbar-panel-brand .hb-topbar-brand-logo{width:26px;height:26px}
}
.hb-topbar-panel-brand .hb-topbar-brand-logo{width:30px;height:30px;box-shadow:none}
.hb-topbar-panel-brand:hover,.hb-topbar-panel-brand:active{background:color-mix(in srgb,var(--brand) 14%,var(--hb-sfc));box-shadow:0 0 0 1.5px var(--brand)}
/* Logolar topbar'da ko'rinib turgan kengliklarda (>600px) panelda takror ko'rsatilmaydi */
@media (min-width:601px){ .hb-topbar-panel-brands{display:none} }
body.hbp-public .hb-topbar-handle,body.hbp-public .hb-topbar-panel{display:none !important}

/* ── Topbar jamoa logolari tasmasi (2026-09-08) ─────────────────────────
   "Oliy maqsad / Qadriyatlar / Nizom va Qoidalar" sidebar bandlari o'rniga
   — uchta jamoa (Mebel City / Bittada / Big One) logosi topbar markazida,
   shisha-pill ichida. [2-tur, buyurtmachi: "logoning o'zi chiqsin"] —
   nom YO'Q, faqat dumaloq logo (nom title'da). Har birining --brand rangi
   (TEAM_CONFIG) FAQAT hover/fokusda halqa sifatida chiqadi. */
/* [2-tur, buyurtmachi: "logolarni har birini alohida qil, yagona qolipga
   o'rama"] — umumiy pill/chegara YO'Q; har bir logo alohida dumaloq chip
   (o'z chegarasi + yengil soya), oralari kengroq. */
.hb-topbar-brands{display:flex;align-items:center;gap:22px;flex:none;margin-left:auto}
.hb-topbar-brand{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  transition:transform .18s cubic-bezier(.2,.8,.3,1);position:relative}
.hb-topbar-brand-logo{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;
  background:var(--hb-sfc);box-shadow:0 0 0 1.5px var(--hb-brd),0 1px 3px rgba(0,0,0,.08);transition:box-shadow .18s ease}
[data-theme="dark"] .hb-topbar-brand-logo{box-shadow:0 0 0 1.5px var(--hb-brd),0 1px 3px rgba(0,0,0,.4)}
.hb-topbar-brand-logo img{width:100%;height:100%;object-fit:cover;display:block}
.hb-topbar-brand:hover,.hb-topbar-brand:focus-visible{outline:none;transform:translateY(-1px) scale(1.06)}
.hb-topbar-brand:hover .hb-topbar-brand-logo,.hb-topbar-brand:focus-visible .hb-topbar-brand-logo{box-shadow:0 0 0 2px var(--brand),0 4px 10px color-mix(in srgb,var(--brand) 35%,transparent)}
.hb-topbar-brand:active{transform:translateY(0) scale(1)}
@media (max-width:600px){
  .hb-topbar-brands{display:none}
}
/* Ommaviy sahifalar (hb_public_base.html → body.hbp-public): topbar
   markazida ommaviy nav (.hbpn-links, absolute) turadi — tasma faqat
   KIRGAN xodim qobig'ida ma'noli. */
body.hbp-public .hb-topbar-brands{display:none}
.hb-content{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  min-height:0;padding:16px 24px 32px;animation:hb-screenin .3s cubic-bezier(.2,.8,.3,1) both}
/* 2026-08-11, scroll mustahkamlash. `.hb-shell` `position:fixed` bo'lgani uchun
   SAHIFANING O'ZI hech qachon skrol qilmaydi — butun skrol AYNAN shu element
   ichida bo'ladi. Shu sxemada ikkita ma'lum tuzoq bor:
     • iOS/Safari — `position:fixed` ota ichidagi `overflow-y:auto` bola
       inertial skrolsiz qoladi yoki umuman qimirlamaydi;
       `-webkit-overflow-scrolling:touch` shuni tiklaydi.
     • skrol oxiriga yetganda harakat OTA elementga "o'tib ketadi"
       (scroll chaining) — mobil brauzerda bu sahifani tortib yopish/
       yangilash ishorasiga aylanib, foydalanuvchiga "skrol ishlamayapti"
       bo'lib tuyuladi; `overscroll-behavior-y:contain` uni shu element
       ichida ushlab qoladi.
   Ikkalasi ham xatti-harakatni desktopda O'ZGARTIRMAYDI. */
/* AI suzuvchi tugmasi uchun "xavfsiz yo'lak" (2026-08-20, QA #18) — tugma
   `position:fixed` bo'lgani uchun sahifaning ENG OXIRGI qatori (odatda
   amal tugmalari: o'chirish/tahrirlash) uni tagida ABADIY qolib ketardi:
   skroll oxiriga yetgan bo'lasiz, lekin tugma baribir ustida turadi.
   96px = 20px (chetdan) + 56px (tugma) + 20px (nafas). `.hb-content`
   allaqachon `padding:16px 24px 32px` — bu qoida faqat pastkisini
   kattalashtiradi (qolgan uchtasi TEGILMAYDI). */
.hb-content{padding-bottom:96px}
@media (max-width:860px){
  /* Mobilda tugma pastki navigatsiya USTIDA turadi, lekin `.hb-bottomnav`
     `.hb-content`dan TASHQARIDA — shu bois yo'lak hisobiga nav balandligi
     kirmaydi, faqat tugma + oraliq. */
  .hb-content{padding-bottom:88px}
  /* 2026-08-24, GLOBAL mobil chekka-padding standarti — "mobilda chetlarida
     joy juda kam qolsin, hamma joyda bitta standard" (foydalanuvchi so'rovi).
     Avval bu faqat bosh sahifada (`#hbHome`, hrm_launcher/index.html) manfiy
     margin bilan hack qilingandi — endi BARCHA sahifalar uchun GLOBAL qoida:
     24px o'rniga 8px (deyarli chekka-chekkaga, lekin nafas joyi bilan). */
  .hb-content{padding-left:8px;padding-right:8px}
}
.hb-menubtn{width:38px;height:38px;border-radius:var(--hb-radius-sm);background:var(--hb-sfc);border:1px solid var(--hb-brd);display:grid;place-items:center;cursor:pointer;flex:none;color:var(--hb-txt)}
.hb-topbar-titlewrap{min-width:0}

/* ── Tor ekranda topbar siqilishi (2026-08-03, responsiv audit) ──
   Muammo: mobil (<=480px)da drawer-menyu + orqaga + mavzu + til + qo'ng'iroq +
   avatar tugmalari YIG'INDISI ekran kengligidan OSHIB KETADI (masalan 375px'da
   ~230px tugma + ~98px oraliq + ~48px padding = ~376px — sarlavha uchun joy
   QOLMAYDI). `.hb-topbar-title/-sub`dagi `overflow:hidden` flex algoritmga
   ularning konteynerini 0 gacha TORAYTIRISHGA ruxsat beradi — natijada sahifa
   sarlavhasi (masalan "Xodimlar") butunlay yo'qolib qolardi (screenshot bilan
   tasdiqlangan: staff/#/emp/* da 375px'da sarlavha ustunlari TO'LIQ bo'sh edi).
   Yechim: tugmalarni kichraytirish + oraliq/padding'ni qisqartirish (joy
   bo'shatish) + sarlavha ustuniga minimal kenglik berish (butunlay yo'qolib
   ketmasin, kerak bo'lsa ellipsis bilan qisqarsin). */
@media (max-width:480px){
  .hb-topbar{gap:6px;padding:calc(12px + var(--tg-safe-top,0px)) 14px 12px}
  .hb-topbar .hb-menubtn{width:34px !important;height:34px !important}
  .hb-topbar #hbTopAvatar{width:30px !important;height:30px !important;font-size:11px}
  .hb-topbar-titlewrap{min-width:74px !important}
  .hb-topbar-title{font-size:15px}
}

/* ── Til tanlash tugmasi + menyu (i18n 0-bosqich, TZ/i18n/TZ_I18N.md) ── */
.hb-langbtn-badge{position:absolute;bottom:-2px;right:-2px;background:var(--hb-acc);color:var(--hb-acc-ink);font-size:8px;font-weight:800;line-height:1;padding:2px 3.5px;border-radius:6px;pointer-events:none}
.hb-lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:168px;background:var(--hb-sfc);border:1px solid var(--hb-brd);border-radius:var(--hb-radius-sm);box-shadow:var(--hb-shadow);padding:6px;z-index:90;display:none;cursor:default}
.hb-lang-menu.open{display:block}
.hb-lang-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:var(--hb-radius-sm);cursor:pointer;font-weight:700;font-size:13px;color:var(--hb-txt);white-space:nowrap}
.hb-lang-item:hover{background:var(--hb-sfc2)}
.hb-lang-item.active{color:var(--hb-acc-text)}
.hb-lang-check{opacity:0;font-size:13px}
.hb-lang-item.active .hb-lang-check{opacity:1}

/* ── Bottom nav (mobil, <=860px) ── */
.hb-bottomnav{display:none}
@media (max-width:860px){
  .hb-shell{grid-template-columns:1fr}
  /* ⚠️ `#hbSidebar` SHART (2026-08-20, Playwright bilan topilgan HAQIQIY
     xato): yangi zumrad panel qoidasi `#hbSidebar{display:flex}` — ID
     selektori (1,0,0) yalang'och `.hb-sidebar` (0,1,0) dan KUCHLIROQ,
     shu bois media-query ichidagi yashirish YUTQAZARDI va desktop panel
     mobil ekranda ham chizilib, topbar'dagi hamburger tugmasining
     bosilishini TUTIB QOLARDI ("#hbSidebar intercepts pointer events",
     390x844'da tasdiqlangan). */
  .hb-sidebar, #hbSidebar{display:none}
  .hb-main{grid-column:1}
  /* 2026-08-24 (buyurtmachi: "pastki navbarni yuqoridagi navbarga o'xshab
     burchagini aylana qil" + "Ranglar" varag'iga shu ham qo'shilsin) —
     yuqori panel (.hbk-glass-bar) pastki ikkita burchagi (u YUQORIDA
     joylashgani uchun) aylantirilgan edi; bu EKRANNING PASTIDA turadi,
     shu bois OYNA — yuqori ikkita burchak (`--hb-bnav-rad-tl/tr`)
     aylantiriladi, standart 20px (hb-tokens.css'da SOZLASH imkoni bilan
     bir xil naqsh — --hb-top-rad-* / --hb-side-rad-*). Fon/urg'u rangi ham
     endi --hb-bnav-bg-mix/--hb-bnav-acc-text orqali MUSTAQIL sozlanadi
     (hb-ui.js::hbApplyBottomNavAccent) — standart holatda ikkalasi ham
     avvalgi qattiq-kodlangan qiymatga (var(--hb-bg2)/var(--hb-acc-text))
     teng, shu bois hech narsa o'zgarmagandek ko'rinadi. */
  .hb-bottomnav{
    position:sticky;bottom:0;display:flex;
    background:var(--hb-bnav-bg-mix, var(--hb-bg2));
    border-top:1px solid var(--hb-brd);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    border-radius:var(--hb-bnav-rad-tl,24px) var(--hb-bnav-rad-tr,24px) var(--hb-bnav-rad-br,0px) var(--hb-bnav-rad-bl,0px);
    overflow:hidden;
  }
  /* 2026-08-24, uchinchi tuzatish: `.hb-bnav`ning O'ZINING neytral foni
     YO'Q (to'g'ridan-to'g'ri panel foni ustida) — shu bois faol-bo'lmagan
     matn ham --hb-bnav-ink-mut orqali avtomatik-kontrastga ega (standart
     holatda --hb-mut'ga teng). */
  .hb-bnav{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:var(--hb-radius-sm);color:var(--hb-bnav-ink-mut, var(--hb-mut));font-size:10px;font-weight:700;cursor:pointer}
  .hb-bnav.active{color:var(--hb-bnav-acc-text, var(--hb-acc-text))}
  /* [2026-08-25, buyurtmachi: "ikonlarni kattalashtira olish, nomlarini
     ko'rsatish/yashirish sozlamasi"] Ikonka o'lchami endi CSS o'zgaruvchi
     orqali (hb-ui.js::hbApplyBottomNavIconSize) — SVG'ning o'zidagi qattiq
     width/height (18px) HTML atributi CSS qoidasi bilan bosib o'tiladi
     (CSS har doim ustun, presentation atributi faqat boshlang'ich qiymat). */
  .hb-bnav-ic{font-size:18px;line-height:1}
  .hb-bnav-ic svg{width:var(--hb-bnav-icon-size, 18px);height:var(--hb-bnav-icon-size, 18px)}
  /* 2026-09-08: Chat tugmasidagi o'qilmaganlar soni (hbSetDiscussBadge, hb_shell_base.html) */
  .hb-bnav-ic{position:relative}
  .hb-bnav-badge{position:absolute;top:-6px;right:-10px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--hb-danger);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid var(--hb-bnav-bg-mix, var(--hb-bg2))}
  .hb-bnav-badge[hidden]{display:none}
  /* Nom (label) — ikkinchi <span>, alohida klassi yo'q (hb_shell_base.html
     va hb-settings-drawer.js::applyBottomNavToDom() ikkalasida ham bir xil
     <span class="hb-bnav-ic">...</span><span data-hb-i18n>Nom</span>
     tuzilishi) — shu bois ":not()" bilan ajratiladi, ikkala manba uchun
     ham ishlaydi. `#hbBottomNav`ga qo'yiladigan klass orqali yashiriladi. */
  #hbBottomNav.hb-bnav-labels-hidden .hb-bnav > span:not(.hb-bnav-ic){display:none}
  #hbBottomNav.hb-bnav-labels-hidden .hb-bnav{gap:0}
  /* 2026-08-24 (buyurtmachi: "pastki navbarni ... butkul o'chirish"
     imkoni) — UserPreference.bottomnav_visible=False bo'lganda
     hb-settings-drawer.js::applyBottomNavToDom() shu klassni qo'yadi.
     `.hb-content`ning pastki bo'shlig'i (yuqorida, 88px) `.hb-bottomnav`
     balandligiga BOG'LIQ EMAS (izohiga qarang — faqat AI tugmasi
     yo'lagi uchun), shu bois panel yashirilganda alohida joy
     hisob-kitobi KERAK EMAS. */
  .hb-bottomnav.hb-bottomnav-userhidden{ display:none; }
  /* Xodim yashirgan (lekin ro'yxatdan butunlay olib tashlamagan)
     alohida tugma — `.hb-navitem-userhidden`/`.hb-card-userhidden`
     bilan bir xil naqsh (CSS klassi orqali, style.display emas). */
  .hb-bnav.hb-bnav-userhidden{ display:none; }
  /* 6 tadan ko'p tugma — gorizontal aylanadigan panelga o'tadi (dizayn
     qarori: sig'maydigan miqdorda tugmalar torayib siqilib ketmasin).
     Klass FAQAT >6 bandda qo'shiladi (applyBottomNavToDom), shu bois
     ≤6 (jumladan hozirgi 5 ta zavod tugma) uchun HECH QANDAY vizual
     farq yo'q. `scrollbar-width`/`::-webkit-scrollbar` — platformaning
     boshqa gorizontal-skroll konteynerlari bilan bir xil "ko'rinmas
     skrollbar" naqshi. */
  .hb-bottomnav.hb-bnav-scroll{
    overflow-x:auto; overflow-y:hidden; justify-content:flex-start;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .hb-bottomnav.hb-bnav-scroll::-webkit-scrollbar{ display:none; }
  .hb-bottomnav.hb-bnav-scroll .hb-bnav{ flex:0 0 auto; min-width:62px; }
}

/* ── Drawer (mobil yon menyu) ── */
.hb-drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:70;display:none}
.hb-drawer-bg.open{display:block}
.hb-drawer{position:fixed;top:0;left:0;bottom:0;width:270px;background:var(--hb-bg2);z-index:71;transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.8,.3,1);display:grid;grid-template-rows:auto 1fr auto}
.hb-drawer.open{transform:none}

/* ═══════════════════════════════════════════════════════════════════════
   MOBIL DRAWER — zumrad dok bilan bir xil palitra (2026-08-20)
   Drawer = dok'ning mobil ko'rinishi, shu bois u ham har ikkala temada
   to'q zumrad bo'lib qoladi (aks holda desktopda zumrad, mobilda oq —
   bir platformaning ikki xil yon menyusi bo'lib qolardi).
   MEXANIZM O'ZGARMAGAN: `.hb-navsub` bu yerda AVVALGIDEK inline
   kengayadi (suzuvchi flyout EMAS) — faqat ranglari moslashtirildi.
   Kontent maydoni / topbar / pastki navigatsiya TEGILMAGAN — ular
   avvalgidek yorug'/qorong'i tema tokenlariga ergashadi.
   ═══════════════════════════════════════════════════════════════════════ */
.hb-drawer{background:var(--hb-dock-bg); color:rgba(255,255,255,.92)}
.hb-drawer .hb-sidebar-name{color:var(--hb-dock-ink-on)}
.hb-drawer .hb-sidebar-domain{color:rgba(255,255,255,.55)}
.hb-drawer .hb-navitem{color:rgba(255,255,255,.76)}
.hb-drawer .hb-navitem:hover{background:var(--hb-dock-hover);color:var(--hb-dock-ink-on)}
.hb-drawer .hb-navitem.active{
  background:var(--hb-dock-acc); color:var(--hb-dock-ink-on);
  box-shadow:0 4px 16px rgba(16,185,129,.4);
}
/* Ikonka — keng desktop paneli bilan bir xil: fonsiz, matn yonida
   (avvalgi kulrang "chip" fon yangi zumrad palitrada dog' bo'lib
   ko'rinardi). Ikonka o'lchami 2026-08-19 dagi kattalashtirishga mos. */
.hb-drawer .hb-navitem-ic{background:transparent; border-radius:0; color:inherit; width:22px; height:22px}
.hb-drawer .hb-navitem-ic svg{width:20px; height:20px}
.hb-drawer .hb-navitem.active .hb-navitem-ic{background:transparent; color:var(--hb-dock-ink-on)}
.hb-drawer .hb-navitem-chevron{color:rgba(255,255,255,.55)}
.hb-drawer .hb-navitem-badge{background:var(--hb-dock-dot); color:var(--hb-dock-bg)}
/* ⚠️ `.hb-navsub` / `.hb-navsub-item` / `.hb-navscroll-cue` uchun drawer
   qoidalari ATAYLAB BU YERDA TAKRORLANMAYDI — ular yuqoridagi
   "ZUMRAD YON PANEL" blokida `#hbSidebar ..., .hb-drawer ...` juft
   selektori bilan BIR MARTA yozilgan (keng panel va mobil drawer bir xil
   inline ko'rinishga ega). Bu yerga nusxa qo'yilsa, bir xil
   spetsifiklikda (0,2,0) FAYLDA KEYINGI qoida g'olib chiqib, yuqoridagi
   umumiy uslubni jimgina bekor qilardi. */

/* ── Sheet / Modal (bitta komponent, media-query bilan) ── */
/* z-index 80 → 180 (2026-08-20, QA #18): AI suzuvchi tugmasi (150) va AI
   paneli (149) MODAL OYNANING USTIDA chizilardi — bildirishnoma oynasi
   ochilganda tugma qoraytirilgan fon ustida "suzib" turardi (jonli
   tekshiruvda tasdiqlangan: elementFromPoint → hb-ai-fab). 180 tanlandi:
   FAB/panel (150/149) va flyout/til menyusidan (85/90) YUQORI, lekin
   toast (200), rasm lightbox (200), kiruvchi qo'ng'iroq (400) va
   navigatsiya yo'lagidan (600) PAST — ular modal ustida chiqishi kerak.
   UI Kit oynasi (hbk-modal-ov, 1200) allaqachon yuqorida edi. */
.hb-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:180;display:flex;align-items:flex-end;justify-content:center;animation:hb-toastin .15s ease both}
.hb-sheet{width:100%;max-height:88vh;overflow-y:auto;background:var(--hb-sfc);border-radius:var(--hb-radius) var(--hb-radius) 0 0;padding:20px;animation:hb-sheetup .22s cubic-bezier(.2,.8,.3,1) both;border-top:1px solid var(--hb-brd)}
@media (min-width:700px){
  .hb-sheet-bg{align-items:center;padding:24px}
  .hb-sheet{width:min(640px,100%);max-height:85vh;border-radius:var(--hb-radius);border:1px solid var(--hb-brd);animation:hb-popin .18s cubic-bezier(.2,.8,.3,1) both;box-shadow:var(--hb-shadow)}
}
.hb-sheet-title{font-weight:800;font-size:17px;margin:0 0 14px;letter-spacing:-.2px}
.hb-sheet-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:99px;background:var(--hb-sfc2);display:grid;place-items:center;cursor:pointer;color:var(--hb-mut)}
.hb-sheet-close:hover{color:var(--hb-txt)}

/* ── Buttons ── */
.hb-btn{height:44px;padding:0 18px;border-radius:var(--hb-radius-sm);background:var(--hb-acc);color:var(--hb-acc-ink);border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:13px;font-family:inherit;cursor:pointer;transition:background .15s,transform .1s}
.hb-btn:hover{background:var(--hb-acc-d)}
.hb-btn:active{transform:scale(.98)}
.hb-btn-ghost{height:44px;padding:0 16px;border-radius:var(--hb-radius-sm);background:transparent;border:1px solid var(--hb-brd);color:var(--hb-mut);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:13px;font-family:inherit;cursor:pointer;transition:.15s}
.hb-btn-ghost:hover{color:var(--hb-txt);border-color:var(--hb-brd2)}
.hb-btn-danger{height:44px;padding:0 16px;border-radius:var(--hb-radius-sm);background:transparent;border:1px solid var(--hb-brd);color:var(--hb-mut);font-weight:700;font-size:13px;cursor:pointer;transition:.15s}
.hb-btn-danger:hover{color:var(--hb-danger);border-color:var(--hb-danger)}
.hb-btn-sm, .hb-btn-ghost.hb-btn-sm, .hb-btn-danger.hb-btn-sm{height:34px;padding:0 13px;font-size:12px;border-radius:var(--hb-radius-sm)}
.hb-fab{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:99px;background:var(--hb-acc);color:var(--hb-acc-ink);display:grid;place-items:center;font-size:24px;box-shadow:var(--hb-glow);cursor:pointer;z-index:40;animation:hb-fabbob 2.4s ease-in-out infinite}

/* ── Yuklash yo'lagi (SPA navigatsiya, 2026-08-09) — static/shared/hb-ui.js::
   hbNavProgressStart/Finish/Abort. Bosilgan zahoti ko'rinadigan, ~82%gacha
   sudralib boradigan, tugaganda 100%ga yugurib so'nadigan yupqa chiziq —
   z-index eng balandda (600) — hattoki .hb-photo-zoom/.hb-callring (200/400)
   dan ham ustida, chunki navigatsiya BOSHIDA istalgan boshqa overlay hali
   ochiq bo'lishi mumkin. `transform:scaleX()` ATAYLAB (width EMAS) —
   compositor-thread animatsiya, asosiy oqim band bo'lsa ham silliq davom
   etadi. */
.hb-navprogress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:600;pointer-events:none}
.hb-navprogress-bar{width:100%;height:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--hb-acc);box-shadow:0 0 10px 1px rgba(var(--hb-acc-rgb),.55)}

/* ── Card ── */
.hb-card{border-radius:var(--hb-radius);background:var(--hb-sfc);border:1px solid var(--hb-brd)}
.hb-card-lg{border-radius:var(--hb-radius);background:var(--hb-sfc);border:1px solid var(--hb-brd);padding:20px}
.hb-card-pad{padding:16px}
.hb-card-hover{cursor:pointer;transition:border-color .15s,transform .15s}
.hb-card-hover:hover{border-color:var(--hb-acc);transform:translateY(-2px)}

/* ── Chip / Badge ── */
.hb-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--hb-pill);font-size:11px;font-weight:800;background:var(--hb-sfc2);color:var(--hb-mut);white-space:nowrap}
.hb-chip-acc{background:var(--hb-acc);color:var(--hb-acc-ink)}
.hb-chip-ok{color:var(--hb-ok)} .hb-chip-danger{color:var(--hb-danger)} .hb-chip-warning{color:var(--hb-warning)} .hb-chip-info{color:var(--hb-info)}
.hb-badge{padding:2px 7px;border-radius:var(--hb-pill);background:var(--hb-acc);color:var(--hb-acc-ink);font-size:10px;font-weight:800}

/* ── Tabs ── */
.hb-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.hb-tab{height:38px;padding:0 18px;display:grid;place-items:center;border-radius:var(--hb-pill);font-weight:700;font-size:12.5px;white-space:nowrap;cursor:pointer;border:1px solid var(--hb-brd);background:transparent;color:var(--hb-mut);transition:.15s}
.hb-tab:hover{color:var(--hb-txt)}
.hb-tab.active{background:var(--hb-acc);color:var(--hb-acc-ink);border-color:var(--hb-acc)}

/* ═══════════════════════════════════════════════════════════════════════
   NATIVE FORMA BOSHQARUVLARI (2026-08-20, QA #9) — <select> va
   <input type=date|time|month|week|datetime-local>
   ═══════════════════════════════════════════════════════════════════════
   Asosiy tuzatish `color-scheme` (hb-tokens.css) — brauzer O'ZI chizadigan
   qismlar (ochiluvchi ro'yxat, kalendar oynasi, spinner) faqat shu orqali
   temaga bo'ysunadi. Quyidagilar — CSS yetib boradigan qolgan qismlar:

   1. `:where(...)` — SPETSIFIKLIK NOL qo'shadi, ya'ni bu qoida `.hb-input`/
      `.hb-select`/ilovaning o'z klassi bilan TENG (0,1,0) bo'lib qoladi va
      manba tartibida ULARDAN OLDIN turgani uchun HAR DOIM yutqazadi —
      demak KLASSSIZ (hech kim uslublamagan) boshqaruvlargagina ta'sir
      qiladi. Klass bergan hech bir sahifa uslubi buzilmaydi.
   2. `option`/`optgroup` — ro'yxat elementlari (Chrome/Firefox, Linux/
      Windows) tokenlardan bo'yaladi; ular `<select>`dan rangni MEROS
      OLMAYDI, alohida e'lon SHART.
   3. Kalendar/soat ikonkasi — `color-scheme` uni allaqachon oq/qora qilib
      to'g'ri chizadi; bu yerda faqat ko'rinuvchanlik/kursor jilolanadi
      (`filter` BILAN BO'YASH ATAYLAB ISHLATILMADI — u yorug' temada
      ikonkani ko'rinmas qilib qo'yardi). */
.hb :where(select:not([multiple]):not([size]), input[type="date"], input[type="time"],
           input[type="month"], input[type="week"], input[type="datetime-local"]){
  background:var(--hb-sfc); color:var(--hb-txt);
  border:1px solid var(--hb-brd); border-radius:var(--hb-radius-sm);
  font-family:inherit; font-size:13px; padding:0 12px; height:40px;
}
.hb select option, .hb select optgroup{background:var(--hb-sfc); color:var(--hb-txt)}
.hb input[type="date"]::-webkit-calendar-picker-indicator,
.hb input[type="time"]::-webkit-calendar-picker-indicator,
.hb input[type="month"]::-webkit-calendar-picker-indicator,
.hb input[type="week"]::-webkit-calendar-picker-indicator,
.hb input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  opacity:.7; cursor:pointer; transition:opacity .15s ease;
}
.hb input[type="date"]:hover::-webkit-calendar-picker-indicator,
.hb input[type="time"]:hover::-webkit-calendar-picker-indicator,
.hb input[type="month"]:hover::-webkit-calendar-picker-indicator,
.hb input[type="week"]:hover::-webkit-calendar-picker-indicator,
.hb input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator{opacity:1}
/* Bo'sh sana maydonining "mm/dd/yyyy" andozasi — matn bilan bir xil
   emas, ko'makchi rangda (placeholder qoidasi bilan bir xil ohang). */
.hb input[type="date"]:not(:focus):invalid::-webkit-datetime-edit,
.hb input[type="date"]::-webkit-datetime-edit-text,
.hb input[type="time"]::-webkit-datetime-edit-text{color:var(--hb-mut)}

/* ── Input / Search ── */
.hb-input{height:44px;padding:0 14px;border-radius:var(--hb-radius-sm);background:var(--hb-sfc);border:1px solid var(--hb-brd);color:var(--hb-txt);font-family:inherit;font-size:13px;font-weight:600;width:100%}
.hb-input:focus{outline:none;border-color:var(--hb-acc)}
.hb-input::placeholder{color:var(--hb-mut);font-weight:600}
textarea.hb-input{height:auto;padding:12px 14px;resize:vertical}
.hb-search{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--hb-pill);background:var(--hb-sfc);border:1px solid var(--hb-brd);color:var(--hb-mut);transition:border-color .15s}
.hb-search:focus-within{border-color:var(--hb-acc)}
.hb-search input{flex:1;min-width:0;height:100%;background:transparent;border:none;outline:none;color:var(--hb-txt);font-family:inherit;font-size:12.5px;font-weight:600}
.hb-search input:focus-visible{outline:none}
.hb-label{font-size:11.5px;font-weight:700;color:var(--hb-mut);display:block;margin-bottom:6px}

/* ── Custom select (native <select> restyle) ── */
.hb-select{height:44px;padding:0 14px;border-radius:var(--hb-radius-sm);background:var(--hb-sfc);border:1px solid var(--hb-brd);color:var(--hb-txt);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}

/* ── Bell (bildirishnoma) ── */
.hb-bell{position:relative}
.hb-bell-dot{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--hb-danger);color:#fff;font-size:9.5px;font-weight:800;display:none;align-items:center;justify-content:center;line-height:1;border:2px solid var(--hb-bg)}
.hb-bell-dot.show{display:flex}
.hb-notif-item{display:flex;gap:10px;padding:12px 4px;border-bottom:1px solid var(--hb-brd);cursor:pointer}
.hb-notif-item:last-child{border-bottom:none}
.hb-notif-item.unread{background:var(--hb-sfc2)}
.hb-notif-dot{width:8px;height:8px;border-radius:99px;background:var(--hb-acc);flex:none;margin-top:6px;visibility:hidden}
.hb-notif-item.unread .hb-notif-dot{visibility:visible}
.hb-notif-body{flex:1;min-width:0}
.hb-notif-title{font-weight:700;font-size:12.5px;line-height:1.3}
.hb-notif-msg{color:var(--hb-mut);font-size:11.5px;margin-top:2px;line-height:1.35}
.hb-notif-time{color:var(--hb-mut);font-size:10.5px;margin-top:4px}
.hb-notif-empty{padding:28px 4px;text-align:center;color:var(--hb-mut);font-size:12.5px;font-weight:600}

/* ── Avatar ── */
.hb-avatar{width:34px;height:34px;border-radius:99px;background:var(--hb-sfc2);color:var(--hb-txt);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none;overflow:hidden}
/* 2026-08-19 kechqurun (buyurtmachi: "profil chetida ko'k rang qilib
   ketgan") — dumaloq avatar atrofida fokus-halqa (yoki brauzerning
   standart ko'k outline'i) chiroyli ko'rinmaydi, chunki halqa TO'RTBURCHAK
   bo'lib, dumaloq rasmdan tashqariga chiqib qoladi. Shu ikkita joyda
   (avatarning o'zi + uni o'rab turgan profil tugmasi) outline butunlay
   o'chiriladi — boshqa joylardagi fokus-ko'rinish (klaviatura navigatsiyasi
   uchun muhim) TEGILMAYDI, faqat shu dumaloq holat uchun. */
.hb-avatar, .hb-sidebar-profile, #hbTopAvatar{outline:none!important}
.hb-avatar img{width:100%;height:100%;object-fit:cover}
.hb-avatar-lg{width:56px;height:56px;font-size:18px}
.hb-avatar-acc{background:var(--hb-acc);color:var(--hb-acc-ink)}

/* ── Rasm lightbox (kattalashtirilgan ko'rinish) ── */
.hb-photo-zoom-bg{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;animation:hb-pz-in .15s ease both}
@keyframes hb-pz-in{from{opacity:0}to{opacity:1}}
.hb-photo-zoom-img{max-width:min(90vw,640px);max-height:88vh;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5);object-fit:contain;animation:hb-pz-pop .2s cubic-bezier(.2,.8,.3,1) both}
@keyframes hb-pz-pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.hb-photo-zoom-close{position:fixed;top:18px;right:20px;width:40px;height:40px;border-radius:999px;background:var(--hb-sfc);color:var(--hb-txt);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3)}

/* ── Stat / KPI card ── */
.hb-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.hb-stat{padding:16px;border-radius:var(--hb-radius-md);background:var(--hb-sfc);border:1px solid var(--hb-brd);display:flex;flex-direction:column;gap:8px;animation:hb-popin .3s cubic-bezier(.2,.8,.3,1) both}
.hb-stat-hover{cursor:pointer;transition:border-color .15s,transform .15s}
.hb-stat-hover:hover{border-color:var(--hb-brd2);transform:translateY(-2px)}
.hb-stat-top{display:flex;align-items:center;justify-content:space-between}
.hb-stat-label{color:var(--hb-mut);font-size:11.5px;font-weight:700;letter-spacing:.1px}
.hb-stat-ic{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--hb-sfc2)}
.hb-stat-val{font-weight:800;font-size:28px;letter-spacing:-.6px;line-height:1}
.hb-stat-sub{font-size:11.5px;font-weight:700;color:var(--hb-mut)}
.hb-stat-sub.ok{color:var(--hb-ok)} .hb-stat-sub.danger{color:var(--hb-danger)} .hb-stat-sub.warning{color:var(--hb-warning)}

/* ── "Primary" stat-karta (2026-08-15, Boshqaruv paneli audit #7) — har
   tabda BITTA eng muhim ko'rsatkichga vizual ustunlik berish uchun (masalan
   Xodimlar: Jami xodim, Davomat: Bugun kelganlar %). `.hb-grid-auto` ichida
   ATAYLAB `grid-column:span 2` — akцент fon + kattaroq raqam bilan darhol
   ko'zga tashlanadi, lekin qolgan kartalar bilan bir xil balandlik/joylashuv
   naqshini buzmaydi (hover/drill xatti-harakati o'zgarmaydi). */
.hb-stat-primary{
  background:linear-gradient(135deg, rgba(var(--hb-acc-rgb),.14) 0%, var(--hb-sfc) 78%);
  border-color:rgba(var(--hb-acc-rgb),.45);
  grid-column:span 2;
}
.hb-stat-primary .hb-stat-val{font-size:38px}
.hb-stat-primary .hb-stat-ic{background:rgba(var(--hb-acc-rgb),.22);color:var(--hb-acc-text)}
.hb-stat-primary.hb-stat-hover:hover{border-color:var(--hb-acc)}
@media (max-width:520px){ .hb-stat-primary{grid-column:span 1} }

/* ── Module tile (Bosh sahifa, §9.1 — data-free) ── */
.hb-tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.hb-tile{position:relative;min-height:96px;padding:14px;border-radius:var(--hb-radius-md);background:var(--hb-sfc);border:1px solid var(--hb-brd);display:flex;flex-direction:column;justify-content:space-between;gap:10px;cursor:pointer;transition:border-color .15s,transform .15s}
.hb-tile:hover{border-color:var(--hb-acc);transform:translateY(-2px)}
.hb-tile-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--hb-sfc2);font-size:16px}
.hb-tile-name{font-weight:700;font-size:12.5px;line-height:1.3}
.hb-tile-badge{position:absolute;top:12px;right:12px;min-width:20px;height:20px;padding:0 6px;border-radius:var(--hb-pill);background:var(--hb-acc);color:var(--hb-acc-ink);display:grid;place-items:center;font-size:10.5px;font-weight:800}

/* ── Data table (.hb-table) — desktop table + mobile card fallback ── */
/* 2026-08-04, responsiv audit: avval `overflow:hidden` edi — burchaklarni
   yumaloqlash uchun to'g'ri edi, lekin jadval o'z konteynеridan KENGROQ
   bo'lganda (masalan 761-900px oralig'ida — .hb-mobile-list ALLAQACHON
   yashirin, lekin ustunlar hali sig'may qoladi) oxirgi ustun (odatda "Amal" —
   tahrirlash/o'chirish tugmalari) HECH QANDAY skroll TAKLIF QILINMASDAN butunlay
   ko'rinmas bo'lib qolardi (Vakansiyalar jadvali, 768px'da tasdiqlangan —
   playwright: wrap 622px, jadval 696px, "Amal" ustuni x:697-770, ya'ni butunlay
   konteyner tashqarisida). Yechim: gorizontal skroll yoqiladi (overflow-x:auto),
   burchak yumaloqligi Y o'qi bo'yicha overflow-y:hidden bilan saqlanadi. */
.hb-table-wrap{border-radius:var(--hb-radius);background:var(--hb-sfc);border:1px solid var(--hb-brd);overflow-x:auto;overflow-y:hidden}
.hb-table{width:100%;font-size:13px;border-collapse:collapse}
.hb-table thead tr{background:var(--hb-bg2)}
.hb-table th{text-align:left;padding:12px 18px;color:var(--hb-mut);font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--hb-brd)}
.hb-table th.sortable{cursor:pointer}
.hb-table th.right, .hb-table td.right{text-align:right}
.hb-table td{padding:11px 18px;border-bottom:1px solid var(--hb-brd)}
.hb-table tbody tr{transition:background .12s}
.hb-table tbody tr.clickable{cursor:pointer}
.hb-table tbody tr.clickable:hover{background:var(--hb-sfc2)}
.hb-table-name{display:flex;align-items:center;gap:11px}
.hb-mobile-row{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--hb-brd);cursor:pointer}
@media (max-width:760px){ .hb-table-wrap table{display:none} }
@media (min-width:761px){ .hb-mobile-list{display:none} }

/* ── Kanban board ── */
.hb-kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;align-items:start}
.hb-kanban-col{width:288px;flex:none;display:flex;flex-direction:column;gap:10px;padding:12px 6px;border-radius:var(--hb-radius);background:transparent;border:2px dashed transparent;transition:background .18s ease,border-color .18s ease}
.hb-kanban-col.dragover{background:rgba(var(--hb-acc-rgb),.10);border-color:var(--hb-acc)}
.hb-kanban-col-head{display:flex;align-items:center;gap:8px;padding:2px 4px}
.hb-kanban-col-dot{width:8px;height:8px;border-radius:99px;background:var(--hb-mut);flex:none}
.hb-kanban-col-name{font-weight:800;font-size:13px;flex:1}
.hb-kanban-col-count{color:var(--hb-mut);font-weight:800;font-size:11.5px}
.hb-kanban-list{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow-y:auto}
.hb-kanban-card{padding:13px;border-radius:var(--hb-radius-md);background:var(--hb-sfc);border:1px solid var(--hb-brd);display:flex;flex-direction:column;gap:9px;cursor:grab;transition:border-color .15s}
.hb-kanban-card:hover{border-color:var(--hb-brd2)}
.hb-kanban-card.dragging{opacity:.4}
.hb-kanban-card-top{display:flex;align-items:center;gap:9px}
.hb-kanban-card-name{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-kanban-card-sub{color:var(--hb-mut);font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-kanban-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hb-kanban-empty{padding:22px 12px;border-radius:var(--hb-radius-md);border:1px dashed var(--hb-brd2);color:var(--hb-mut);text-align:center;font-size:11.5px;font-weight:700}

/* ── Progress bar ── */
.hb-progress{height:8px;border-radius:99px;background:var(--hb-sfc2);overflow:hidden}
.hb-progress-fill{height:100%;border-radius:99px;background:var(--hb-acc);transform-origin:left;animation:hb-bargrowx .5s cubic-bezier(.2,.8,.3,1) both}
.hb-progress-fill.ok{background:var(--hb-ok)}

/* ── Funnel bar row (pipeline) ── */
.hb-pipe-row{display:flex;align-items:center;gap:10px;font-size:12px;margin-bottom:8px}
.hb-pipe-label{width:160px;flex-shrink:0;color:var(--hb-mut);font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-pipe-bar-bg{flex:1;background:var(--hb-sfc2);border-radius:8px;height:18px;overflow:hidden}
.hb-pipe-bar-fill{background:var(--hb-acc);height:100%;border-radius:8px}
.hb-pipe-bar-fill.ok{background:var(--hb-ok)}
.hb-pipe-count{width:34px;flex-shrink:0;font-weight:800;text-align:right}

/* ── Toast ── */
.hb-toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:200}
.hb-toast{padding:12px 16px;border-radius:var(--hb-radius-sm);background:var(--hb-sfc);border:1px solid var(--hb-brd);box-shadow:var(--hb-shadow);font-weight:700;font-size:12.5px;animation:hb-toastin .2s ease both;max-width:320px}
.hb-toast-ok{border-color:var(--hb-ok);color:var(--hb-acc-text)}
.hb-toast-err{border-color:var(--hb-danger);color:var(--hb-danger)}
/* 2026-08-04, responsiv audit (P2): mobilda (<=860px) `.hb-bottomnav` ekran
   pastini egallaydi (yuqorida) — `.hb-toasts`ning `bottom:20px`i mutlaq ekran
   pastidan hisoblanib, bottom nav USTIGA chiqib xabar matnini QOPLAB qo'yardi
   (Kalendar "Kun" ko'rinishi playwright bilan tasdiqlandi: toast
   top:835/bottom:880, bottomnav top:839 — ~41px ustma-ust). [TUZOQ] bu qoida
   AYNAN shu yerda — `.hb-toasts` bazaviy e'loni (yuqorida)DAN KEYIN — turishi
   shart: bir xil aniqlikdagi (bitta klass) qoidalarda CSS manba tartibi hal
   qiladi, @media yuqorida (bottom nav blokida) turganida bazaviy qoida uni
   BEKOR qilardi (2026-08-04 birinchi urinish shu sababli ishlamagan edi). */
@media (max-width:860px){
  .hb-toasts{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}
/* [2026-08-25, foydalanuvchi skrinshotida topilgan] `.hb-fab` (Kalendar "+",
   Loyihalar) xuddi yuqoridagi `.hb-toasts` bilan bir xil muammoga uchragan
   edi — `bottom:20px` mutlaq ekran pastidan hisoblanib, mobilda bottom-nav
   USTIGA chiqib qolardi. Xuddi shu 78px+safe-area formulasi qo'llanildi. */
@media (max-width:860px){
  .hb-fab{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}

/* ── Empty state ── */
.hb-empty{padding:38px 18px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--hb-mut)}
.hb-empty-ic{width:56px;height:56px;border-radius:var(--hb-radius-md);background:var(--hb-sfc2);display:grid;place-items:center;font-size:22px}

/* ── Skeleton ── */
.hb-skel{background:var(--hb-sfc);border:1px solid var(--hb-brd);border-radius:var(--hb-radius);padding:18px}
.hb-skel .hb-ln{height:12px;border-radius:6px;background:var(--hb-sfc2);margin:8px 0;animation:hb-pulse 1.3s ease infinite}

/* ── File upload ── */
.hb-upload{border:1px dashed var(--hb-brd2);border-radius:var(--hb-radius-md);padding:22px;text-align:center;color:var(--hb-mut);cursor:pointer;transition:border-color .15s,color .15s}
.hb-upload:hover, .hb-upload.dragover{border-color:var(--hb-acc);color:var(--hb-acc-text)}

/* ── Helpers ── */
.hb-hint{color:var(--hb-mut);font-size:11.5px;font-weight:600}
.hb-section-title{font-weight:800;font-size:15px;margin:18px 0 10px}

/* ═══════════════════════════════════════════════════════════════════════
   MODULLARDAN YIG'ILGAN QO'SHIMCHA KOMPONENTLAR (2026-07-29)
   Manba: WP-1 (surveys) / WP-2 (attendance) / WP-3 (fines) migratsiya hisobotlari —
   har uch modul mustaqil ravishda shu bir xil naqshlarni o'z ichida qayta yozgan edi.
   Yumshoq fon `color-mix()` bilan hisoblanadi: dark/light temada avtomatik moslashadi,
   har rang uchun alohida --*-rgb token e'lon qilish shart emas. Eski brauzer uchun
   avval oddiy `background` fallback beriladi.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Yumshoq fonli status chip (hb-chip faqat matn rangini beradi) ── */
.hb-chip-soft{background:var(--hb-sfc2);color:var(--hb-mut)}
.hb-chip-soft-ok{background:var(--hb-sfc2);background:color-mix(in srgb,var(--hb-ok) 16%,transparent);color:var(--hb-acc-text)}
.hb-chip-soft-acc{background:var(--hb-sfc2);background:color-mix(in srgb,var(--hb-acc) 16%,transparent);color:var(--hb-acc-text)}
.hb-chip-soft-warn{background:var(--hb-sfc2);background:color-mix(in srgb,var(--hb-warning) 18%,transparent);color:var(--hb-warning)}
.hb-chip-soft-danger{background:var(--hb-sfc2);background:color-mix(in srgb,var(--hb-danger) 16%,transparent);color:var(--hb-danger)}
.hb-chip-soft-info{background:var(--hb-sfc2);background:color-mix(in srgb,var(--hb-info) 16%,transparent);color:var(--hb-info)}
.hb-chip-soft-violet{background:var(--hb-sfc2);background:color-mix(in srgb,var(--hb-violet) 16%,transparent);color:var(--hb-violet)}
.hb-chip-soft-muted{background:var(--hb-sfc2);color:var(--hb-mut)}

/* ── "Jonli holat" nuqtasi (check-in ishlayapti va h.k.) ── */
.hb-status-dot{width:8px;height:8px;border-radius:99px;background:var(--hb-mut);flex:none;display:inline-block}
.hb-status-dot.live{background:var(--hb-acc);animation:hb-pulse 1.6s ease infinite}
.hb-status-dot.warn{background:var(--hb-warning)}
.hb-status-dot.danger{background:var(--hb-danger)}

/* ── Ro'yxat / voqealar oqimi qatori ── */
.hb-row{display:flex;align-items:center;gap:12px;padding:13px 15px;background:var(--hb-sfc);border:1px solid var(--hb-brd);border-radius:var(--hb-radius-md);transition:border-color .15s}
.hb-row:hover{border-color:var(--hb-brd2)}
.hb-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hb-row-t{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-row-s{color:var(--hb-mut);font-size:11.5px;font-weight:600}
.hb-row-side{display:flex;align-items:center;gap:8px;flex:none}
@media (max-width:480px){ .hb-row{flex-direction:column;align-items:stretch} .hb-row-side{justify-content:flex-start} }

/* ── Kvadrat ikonka tugma ── */
.hb-iconbtn{width:36px;height:36px;border-radius:var(--hb-radius-sm);display:grid;place-items:center;background:var(--hb-sfc2);border:1px solid var(--hb-brd);color:var(--hb-txt);cursor:pointer;flex:none;font-size:14px;transition:border-color .15s,background .15s}
.hb-iconbtn:hover{border-color:var(--hb-brd2);background:var(--hb-sfc)}
.hb-iconbtn-sm{width:30px;height:30px;font-size:12.5px}
.hb-iconbtn-danger:hover{border-color:var(--hb-danger);color:var(--hb-danger)}

/* ── Forma bloki ── */
.hb-field{display:flex;flex-direction:column;gap:6px}
.hb-field > label{font-size:11.5px;font-weight:800;color:var(--hb-mut);letter-spacing:.02em}
.hb-field-hint{color:var(--hb-mut);font-size:11px;font-weight:600}
.hb-field-err{color:var(--hb-danger);font-size:11px;font-weight:700}
.hb-field.err .hb-input{border-color:var(--hb-danger)}
.hb-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){ .hb-fgrid{grid-template-columns:1fr} }
.hb-checkline{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;cursor:pointer}

/* ── Tanlov kartasi (radio/checkbox varianti) ── */
.hb-choice{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--hb-brd);border-radius:var(--hb-radius-sm);background:var(--hb-sfc);cursor:pointer;font-size:12.5px;font-weight:600;transition:border-color .15s,background .15s}
.hb-choice:hover{border-color:var(--hb-brd2)}
.hb-choice.sel{border-color:var(--hb-acc);background:var(--hb-sfc2);color:var(--hb-txt)}

/* ── Nomlangan bar-chart qatori (hb-pipe-* dan farqi: qiymat ustuni + mobil moslashuv) ── */
.hb-bar-row{display:flex;align-items:center;gap:10px;font-size:12px;margin-bottom:8px}
.hb-bar-label{width:150px;flex:none;color:var(--hb-mut);font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* display:block — <span> bilan ham ishlashi uchun (inline elementga height ta'sir qilmaydi) */
.hb-bar-track{display:block;flex:1;min-width:0;background:var(--hb-sfc2);border-radius:var(--hb-pill);height:18px;overflow:hidden}
.hb-bar-fill{display:block;background:var(--hb-acc);height:100%;border-radius:var(--hb-pill);transform-origin:left;animation:hb-bargrowx .5s cubic-bezier(.2,.8,.3,1) both}
.hb-bar-val{width:76px;flex:none;font-weight:800;text-align:right;font-size:11.5px}
@media (max-width:560px){ .hb-bar-label{width:88px} .hb-bar-val{width:60px} }

/* ── Progress ostidagi izoh qatori ── */
.hb-progress-lbl{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;font-weight:700;margin-top:6px}
.hb-progress-lbl > :first-child{color:var(--hb-mut)}

/* ── Yuklanish aylanasi (tugma ichida ham ishlaydi) ── */
.hb-spin{width:14px;height:14px;border-radius:99px;border:2px solid currentColor;border-top-color:transparent;display:inline-block;animation:hb-spin-rot .7s linear infinite;vertical-align:-2px}
.hb-spin-lg{width:26px;height:26px;border-width:3px}
@keyframes hb-spin-rot{to{transform:rotate(360deg)}}

/* ── Asboblar qatori (qidiruv + filtrlar + asosiy tugma) ── */
.hb-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hb-toolbar > .hb-search, .hb-toolbar > .hb-input[type="search"]{flex:1;min-width:180px}

/* ── Sahifalash ── */
.hb-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 0;font-size:12px;font-weight:700}
.hb-pager-info{color:var(--hb-mut);font-weight:600}

/* ── Accent fonli bo'lim banneri ── */
.hb-banner-acc{background:var(--hb-acc);color:var(--hb-acc-ink);border-radius:var(--hb-radius);padding:18px 20px;font-weight:800}
.hb-banner-acc .hb-hint{color:var(--hb-acc-ink);opacity:.72}

/* ── Xarita konteyneri (Leaflet) ── */
.hb-map{border-radius:var(--hb-radius);border:1px solid var(--hb-brd);overflow:hidden}
.hb-map .leaflet-control-zoom a{background:var(--hb-sfc);color:var(--hb-txt);border-color:var(--hb-brd)}
.hb-map .leaflet-control-zoom a:hover{background:var(--hb-sfc2)}
.hb-map .leaflet-tooltip,.hb-map .leaflet-popup-content-wrapper{background:var(--hb-sfc);color:var(--hb-txt);border:1px solid var(--hb-brd);box-shadow:var(--hb-shadow-sm)}

/* ── Sheet kenglik variantlari (asosiy .hb-sheet desktopda 640px) ── */
@media (min-width:600px){
  .hb-sheet-sm{width:min(460px,100%)}
  .hb-sheet-wide{width:min(880px,100%)}
}

/* ── Ommaviy (shell'siz) sahifa konteyneri — hr_portal karyera sahifalari ── */
.hb-pub{max-width:880px;margin:0 auto;padding:24px 20px 60px}
.hb-pub-brand{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.hb-pub-logo{width:34px;height:34px;border-radius:11px;background:var(--hb-acc);color:var(--hb-acc-ink);display:grid;place-items:center;font-weight:800;font-size:16px;flex:none}

/* ── Havola sifatidagi tugma: .hb a{color:--hb-acc-text} qoidasini bosib o'tadi ──
   Sabab: hb-tokens.css:67 barcha `.hb a` ni accent rangga bo'yaydi, natijada
   <a class="hb-btn"> laym fonda laym matn bo'lib o'qilmay qolardi (WP-5 topdi). */
.hb a.hb-btn, a.hb-btn{color:var(--hb-acc-ink)}
.hb a.hb-btn:hover, a.hb-btn:hover{color:var(--hb-acc-ink);text-decoration:none}
.hb a.hb-btn-ghost, a.hb-btn-ghost, .hb a.hb-btn-danger, a.hb-btn-danger{color:var(--hb-mut)}
.hb a.hb-btn-ghost:hover, a.hb-btn-ghost:hover{color:var(--hb-txt);text-decoration:none}
.hb-btn-block{width:100%}
/* <a class="hb-iconbtn"> ham accent rangga bo'yalib ketmasin (WP-4B topdi) */
.hb a.hb-iconbtn, a.hb-iconbtn{color:var(--hb-txt);text-decoration:none}
.hb a.hb-iconbtn:hover, a.hb-iconbtn:hover{text-decoration:none}
.hb a.hb-iconbtn-danger:hover, a.hb-iconbtn-danger:hover{color:var(--hb-danger)}
/* To'ldirilgan destruktiv tugma (tasdiq dialoglari uchun; hb-btn-danger — ghost variant) */
.hb-btn-danger-solid{height:44px;padding:0 18px;border-radius:var(--hb-radius-sm);background:var(--hb-danger);color:var(--hb-sfc);border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:13px;font-family:inherit;cursor:pointer;transition:filter .15s}
.hb-btn-danger-solid:hover{filter:brightness(.93)}
.hb a.hb-btn-danger-solid, a.hb-btn-danger-solid{color:var(--hb-sfc);text-decoration:none}

/* ── Forma javob xabari ── */
.hb-alert{padding:12px 14px;border-radius:var(--hb-radius-sm);font-size:12.5px;font-weight:700;border:1px solid var(--hb-brd);background:var(--hb-sfc)}
.hb-alert-ok{border-color:var(--hb-ok);color:var(--hb-acc-text)}
.hb-alert-err{border-color:var(--hb-danger);color:var(--hb-danger)}


/* ── Kiruvchi qo'ng'iroq — BUTUN ERP bo'ylab (L13, 2026-08-01) ───────────
   Buyurtmachi: «telefon qilish faqat shu chat ichida ishlayapti, Loyihalar
   ichida bo'lsa ko'rib bo'lmayapti». Bu banner har sahifada chiqadi;
   javob berish Suhbatlar sahifasiga olib o'tadi (mikrofon o'sha yerda). */
.hb-callring{position:fixed;right:18px;top:18px;z-index:400;display:flex;
  align-items:center;gap:12px;padding:12px 14px;border-radius:16px;
  background:var(--hb-sfc,#1e1d24);border:1px solid var(--hb-brd2,rgba(255,255,255,.15));
  box-shadow:0 18px 44px rgba(0,0,0,.42);max-width:min(360px,calc(100vw - 36px));
  animation:hb-callring-in .22s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes hb-callring-in{from{opacity:0;transform:translateY(-10px) scale(.96)}
  to{opacity:1;transform:none}}
.hb-callring-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-weight:800;font-size:17px;
  background:var(--hb-acc,#24C29A);color:var(--hb-acc-ink,#0B1F19);
  animation:hb-callring-pulse 1.4s ease-in-out infinite}
@keyframes hb-callring-pulse{0%,100%{box-shadow:0 0 0 0 rgba(36,194,154,.5)}
  60%{box-shadow:0 0 0 12px rgba(36,194,154,0)}}
.hb-callring-mid{display:flex;flex-direction:column;min-width:0;flex:1}
.hb-callring-mid b{font-size:13.5px;font-weight:800;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hb-callring-mid span{font-size:11px;font-weight:600;color:var(--hb-mut,#9b9aa3)}
.hb-callring-ok{flex:none;border:0;cursor:pointer;font:inherit;font-size:12px;
  font-weight:800;padding:8px 12px;border-radius:999px;
  background:var(--hb-ok,#3ecf6d);color:#0b1a10}
.hb-callring-ok:hover{filter:brightness(1.08)}
.hb-callring-no{flex:none;border:0;cursor:pointer;width:30px;height:30px;
  border-radius:50%;background:var(--hb-sfc2,#29282f);color:var(--hb-mut,#9b9aa3);
  font-size:14px}
.hb-callring-no:hover{color:var(--hb-txt,#f5f4f7)}
@media (max-width:640px){.hb-callring{left:12px;right:12px;max-width:none}}

/* ── AI Yordamchi — GLOBAL suzuvchi tugma + chat karta (2026-08-09) ───────
   Har qanday shell sahifasida ko'rinadi (hb_shell_base.html'da bir marta
   qo'shiladi — Academy'ning eski "Tez yordam" to'liq sahifasi o'rniga).
   Ba'zi sahifalarda (masalan Kalendar "+" Yangi voqea) allaqachon o'z
   `.hb-fab`i bor, xuddi shu burchakda (right:20/bottom:20) — shu bilan
   ustma-ust tushmasligi uchun AI tugmasi undan BIROZ YUQORIDA turadi
   (vertikal stek, ikkalasi ham ko'rinadi). */
/* ── 2026-08-20 (QA #18): TUGMA KONTENT USTIGA CHIQIB QOLARDI ────────────
   Uchta joyda tasdiqlandi (jonli, 1440x900 va 390x844): bosh sahifadagi
   tug'ilgan kun nishoni ("🎂 23"), CMS menyu qatoridagi o'chirish tugmasi
   va Akademiya mobil stat-kartasi AYNAN tugma ostida qolardi (oxirgi
   ikkitasi BOSIB HAM BO'LMASDI).

   Uchta sabab, uchtasiga ham shu yerda javob berildi:

   1. `bottom:90px` — tugma burchakda emas, kontentning O'RTASIDA osilib
      turardi. 90px faqat sahifaning O'Z `.hb-fab`i (Kalendar "+", Loyihalar)
      ustiga "stek" qilish uchun edi — lekin sahifalarning KO'PIDA bunday
      tugma YO'Q. Endi odatiy burchak (20px), stek esa FAQAT haqiqatan
      `.hb-fab` bor sahifada (`body:has(.hb-fab)`, pastda).
   2. Kontent ostida qolib KETMASLIGI uchun `.hb-content`ga pastki
      "xavfsiz yo'lak" berildi (pastga qarang) — sahifaning oxirgi qatori
      (odatda amal tugmalari) endi hech qachon tugma tagida qolmaydi.
   3. Ustma-ust tushgan joyda tugma kontentga "yopishib" ketmasin —
      sahifa foni rangidagi halqa (`box-shadow`ning ikkinchi qismi) uni
      ostidagidan ajratib turadi. Tokenlardan → ikkala temada ishlaydi. */
.hb-ai-fab{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:99px;
  background:var(--hb-acc);color:var(--hb-acc-ink);border:none;padding:0;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 0 0 5px var(--hb-bg), var(--hb-glow);
  z-index:150;animation:hb-fabbob 2.4s ease-in-out infinite}
.hb-ai-fab:hover{background:var(--hb-acc-d)}
/* Sahifaning O'Z suzuvchi tugmasi bo'lsa — ikkalasi vertikal stek bo'ladi
   (ikkalasi ham ko'rinadi, avvalgi xatti-harakat aynan saqlanadi). */
body:has(.hb-fab) .hb-ai-fab{bottom:90px}
.hb-ai-fab svg{display:block}
@media (max-width:860px){
  /* `.hb-bottomnav` ostiga kirib qolmasligi — `.hb-toasts` bilan bir xil hisob-kitob.
     ⚠️ Ikkinchi selektor SHART: `body:has(.hb-fab) .hb-ai-fab` (yuqorida)
     spetsifikligi (0,2,1) — yalang'och `.hb-ai-fab` (0,1,0) undan past
     bo'lgani uchun media-query ichida ham YUTQAZARDI va mobilda tugma
     pastki navigatsiya ostiga tushib qolardi. */
  /* 2026-08-20 (QA #18): mobilda BO'SH burchak umuman yo'q (pastda nav,
     ustida kartalar to'ri) — joyini surish faqat MUAMMONI KO'CHIRADI
     (o'lchandi: 6px pastga surilganda karta ikonkasi o'rniga karta
     QIYMATINI yopa boshladi). Shu bois joy TEGILMAYDI, faqat o'lcham
     56 → 48px (yopilgan maydon ~26% kichrayadi va u eski maydonning
     ICHIDA qoladi; barmoq uchun minimal 44px'dan hamon katta). */
  .hb-ai-fab,
  body:has(.hb-fab) .hb-ai-fab{width:48px;height:48px;
    bottom:calc(78px + env(safe-area-inset-bottom,0px) + 12px)}
  .hb-ai-fab svg{width:21px;height:21px}
  /* Torroq ekranda panel "to'liqroq sheet" sifatida XUDDI SHU burchak-hisobi
     bilan ochiladi (pastda) — FAB bilan bir xil bottom formula ustma-ust
     tushib qolar edi (FAB'ning z-index'i balandroq bo'lgani uchun panelning
     pastki-o'ng burchagi ustiga "chiqib qolardi"). Panel ochiq bo'lganda
     (`:not([hidden])`) FAB shu holatda ko'rinmaydi — o'zining header'idagi
     yopish tugmasi/Escape/tashqariga bosish orqali yopiladi. `:has()` DOM
     holatiga reaktiv (JS eventsiz), shu bois panel yopilganda FAB avtomatik
     qaytadan ko'rinadi. */
  .hb-ai-fab:has(~ .hb-ai-panel:not([hidden])){display:none !important}
}

/* Panel tugma USTIDA ochiladi — 2026-08-20 (QA #18) tugma 90 → 20 ga
   tushgani uchun panel ham 154 → 84 (20 + 56 tugma + 8 oraliq). Sahifaning
   o'z `.hb-fab`i bo'lsa tugma 90da qoladi, panel ham 154da (pastda). */
.hb-ai-panel{position:fixed;right:20px;bottom:84px;width:min(400px,calc(100vw - 40px));
  height:min(70vh,560px);background:var(--hb-sfc);border:1px solid var(--hb-brd);
  border-radius:var(--hb-radius);box-shadow:var(--hb-shadow);z-index:149;
  display:flex;flex-direction:column;overflow:hidden;
  animation:hb-popin .18s cubic-bezier(.2,.8,.3,1) both}
.hb-ai-panel[hidden]{display:none}
/* `:not(.hb-ai-max)` SHART — "kattalashtirilgan" holat ataylab 20px'ga
   tushadi (pastda), lekin bu selektor spetsifikligi undan yuqori bo'lgani
   uchun `:not`siz uni bosib ketardi. */
body:has(.hb-fab) .hb-ai-panel:not(.hb-ai-max){bottom:154px}
/* 2026-08-09: "Kattalashtirish" holati — kompaktdan ancha kattaroq, ammo shell
   chrome'ga nisbatan oqilona chegaralangan o'lcham. Pastki chegara ham 20px'ga
   siljiydi (154px emas) — bo'sh joydan to'liqroq foydalanish uchun; shu bois FAB
   pastdagi qoida orqali shu holatda yashiriladi (ustma-ust tushmasligi uchun). */
.hb-ai-panel.hb-ai-max{width:min(900px,90vw);height:min(800px,90vh);bottom:20px}
.hb-ai-fab:has(~ .hb-ai-panel.hb-ai-max:not([hidden])){display:none !important}
/* Sudrab-o'zgartirish paytida matn belgilanishining oldini olish. */
.hb-ai-panel.hb-ai-resizing{user-select:none}
.hb-ai-panel-head{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--hb-brd);flex:none}
.hb-ai-panel-title{font-weight:800;font-size:14px;flex:1}
.hb-ai-panel-max,.hb-ai-panel-close{width:30px;height:30px;border-radius:99px;background:var(--hb-sfc2);
  border:none;color:var(--hb-mut);display:grid;place-items:center;cursor:pointer;flex:none}
.hb-ai-panel-max:hover,.hb-ai-panel-close:hover{color:var(--hb-txt)}
/* Yuqori-chap burchakdagi sudrab-o'zgartirish tutqichi — panel pastki-o'ngga
   langarlangan, shu bois shu burchakdan sudrash orqali kengaytirish/torraytirish
   tabiiy his qiladi. Faqat desktop (≤860px'da pastda yashiriladi). */
.hb-ai-panel-resize{position:absolute;top:0;left:0;width:22px;height:22px;
  display:grid;place-items:center;cursor:nwse-resize;color:var(--hb-mut);
  z-index:2;touch-action:none}
.hb-ai-panel-resize:hover{color:var(--hb-acc)}
.hb-ai-panel-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-height:0}
.hb-ai-msg{display:flex;max-width:100%}
.hb-ai-msg.user{justify-content:flex-end}
.hb-ai-msg.ai{justify-content:flex-start}
.hb-ai-bubble{max-width:88%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.55;
  word-break:break-word;overflow-x:auto}
.hb-ai-msg.ai .hb-ai-bubble{background:var(--hb-sfc2);color:var(--hb-txt);border-bottom-left-radius:4px}
.hb-ai-msg.user .hb-ai-bubble{background:var(--hb-acc);color:var(--hb-acc-ink);font-weight:600;border-bottom-right-radius:4px}
.hb-ai-bubble p{margin:0 0 6px}
.hb-ai-bubble p:last-child{margin-bottom:0}
.hb-ai-bubble ul{margin:4px 0;padding-left:18px}
.hb-ai-bubble b{font-weight:800}
.hb-ai-bubble table{border-collapse:collapse;width:100%;margin:6px 0;font-size:11.5px}
.hb-ai-bubble th,.hb-ai-bubble td{border:1px solid var(--hb-brd);padding:5px 8px;text-align:left}
.hb-ai-bubble th{background:var(--hb-bg2);font-weight:800}
.hb-ai-empty{color:var(--hb-mut);font-size:12.5px;text-align:center;padding:20px 10px}
.hb-ai-panel-foot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--hb-brd);flex:none}
.hb-ai-panel-input{flex:1;min-width:0}
.hb-ai-panel-send{flex:none;width:40px;height:40px;border-radius:99px;background:var(--hb-acc);
  color:var(--hb-acc-ink);border:none;display:grid;place-items:center;cursor:pointer}
.hb-ai-panel-send:hover{background:var(--hb-acc-d)}
.hb-ai-panel-send:disabled{opacity:.5;cursor:default}
@media (max-width:860px){
  /* Torroq ekranda kichik suzuvchi karta uchun joy yo'q — to'liqroq "sheet"
     ko'rinishiga o'tadi (pastdan chiqadigan, keng), `.hb-sheet` naqshiga o'xshash.
     Kattalashtirish/sudrab-o'zgartirish — desktopga xos funksiya (JS ham
     window.innerWidth>860 orqali shu chegarani takrorlaydi) — mobil sheet
     allaqachon deyarli to'liq ekran, shu bois bu ikkalasi shu yerda yashiriladi. */
  /* ⚠️ Ikkinchi selektor — `body:has(.hb-fab) .hb-ai-panel:not(.hb-ai-max)`
     (yuqorida) spetsifikligi bu qoidadan yuqori bo'lgani uchun mobilda ham
     yutib ketardi (2026-08-20). */
  .hb-ai-panel,
  body:has(.hb-fab) .hb-ai-panel:not(.hb-ai-max){left:12px;right:12px;width:auto;
    bottom:calc(78px + env(safe-area-inset-bottom,0px) + 12px);
    height:min(78vh,640px)}
  .hb-ai-panel-max{display:none}
  .hb-ai-panel-resize{display:none}
}

/* [2026-08-10] Global scroll-progress — #hbMainContent qay darajada
   aylantirilganini ekran o'ng chetida ingichka chiziq bilan ko'rsatadi.
   Butun platformada bir xil (hb_shell_base.html'da bitta joyda). */
.hb-scrollbar{
  position:fixed; top:50%; right:14px; transform:translateY(-50%); width:2px; height:150px;
  background:var(--hb-brd); border-radius:999px; z-index:60; overflow:hidden; pointer-events:none;
}
.hb-scrollbar-fill{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background:var(--hb-acc); border-radius:999px;
}
@media (max-width:860px){ .hb-scrollbar{ display:none } }

/* Xodim ismi — profilga o'tuvchi (2026-08-18, hb-ui.js::HB_EMP).
   Atribut FAQAT huquqi borlarga qo'yiladi, shu bois uslub ham
   avtomatik ravishda faqat o'shalarda ko'rinadi. */
[data-hb-emp] { cursor: pointer; text-decoration: none;
  text-underline-offset: 3px; transition: color .12s ease; }
[data-hb-emp]:hover { color: var(--hb-accent, var(--accent, #16745C));
  text-decoration: underline; text-decoration-thickness: 1.5px; }
[data-hb-emp]:focus-visible { outline: 2px solid var(--hb-accent, var(--accent, #16745C));
  outline-offset: 2px; border-radius: 4px; }

/* ═══ "Nima yangilandi?" paneli (2026-08-18) ══════════════════════════════
   Bildirishnoma tasmasidan ATAYLAB farqli ko'rinish: yangilik — o'qiladigan
   qisqa e'lon (turi, bo'limi, sanasi + tavsif), hodisa emas.
   DIQQAT: bu qobiq (hb_shell_base) ichida ishlaydi, shu bois RANGLAR
   `--hb-*` tokenlaridan olinadi (hb-tokens.css) — `--hb-panel`/`--hb-ink`
   kabi nomlar bu yerda MAVJUD EMAS va qorong'i mavzuda kartalar oppoq
   bo'lib qolardi (birinchi versiyada aynan shunday bo'ldi). */
.hb-wn-item { padding: 13px 14px; border: 1px solid var(--hb-brd);
  border-radius: var(--hb-radius-sm, 14px); margin-bottom: 10px;
  background: var(--hb-sfc); }
.hb-wn-item.fresh { border-color: color-mix(in srgb, var(--hb-acc) 45%, transparent);
  background: color-mix(in srgb, var(--hb-acc) 8%, var(--hb-sfc)); }
.hb-wn-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.hb-wn-kind { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: var(--hb-pill, 999px);
  letter-spacing: .01em; white-space: nowrap; }
.hb-wn-kind.new      { background: color-mix(in srgb, var(--hb-acc) 16%, transparent);
                       color: var(--hb-acc-text, var(--hb-acc)); }
.hb-wn-kind.improved { background: color-mix(in srgb, var(--hb-info) 16%, transparent);
                       color: var(--hb-info); }
.hb-wn-kind.fixed    { background: color-mix(in srgb, var(--hb-warning) 16%, transparent);
                       color: var(--hb-warning); }
.hb-wn-mod { font-size: 11px; font-weight: 700; color: var(--hb-mut);
  padding: 3px 8px; border-radius: var(--hb-pill, 999px); background: var(--hb-sfc2); }
.hb-wn-date { font-size: 11px; color: var(--hb-mut); margin-left: auto; white-space: nowrap; }
.hb-wn-title { font-size: 14.5px; font-weight: 800; line-height: 1.35; color: var(--hb-txt); }
.hb-wn-body { font-size: 13px; line-height: 1.6; color: var(--hb-mut); margin-top: 4px;
  white-space: pre-wrap; word-break: break-word; }
/* Havolasi bor yozuv — BUTUN karta bosiladi (2026-08-18) */
.hb-wn-item.go { cursor: pointer; transition: border-color .14s ease, transform .12s ease,
  box-shadow .14s ease; }
.hb-wn-item.go:hover { border-color: var(--hb-acc); transform: translateY(-1px);
  box-shadow: var(--hb-shadow-sm); }
.hb-wn-item.go:active { transform: translateY(0); }
.hb-wn-item.go:focus-visible { outline: 2px solid var(--hb-acc); outline-offset: 2px; }
.hb-wn-go { margin-top: 9px; font-size: 12.5px; font-weight: 800;
  color: var(--hb-acc-text, var(--hb-acc)); display: inline-flex; align-items: center; gap: 4px; }
.hb-wn-item.go:hover .hb-wn-go { text-decoration: underline; text-underline-offset: 3px; }

/* Yangilikning to'liq ko'rinishi (2026-08-18) — oyna ICHIDA ochiladi */
.hb-wn-detail { padding: 2px; }
.hb-wn-back { font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
  padding: 6px 12px; border-radius: var(--hb-pill, 999px); border: 1px solid var(--hb-brd);
  background: var(--hb-sfc2); color: var(--hb-txt); transition: .13s; }
.hb-wn-back:hover { border-color: var(--hb-acc); color: var(--hb-acc-text, var(--hb-acc)); }
.hb-wn-dtitle { font-size: 19px; font-weight: 800; line-height: 1.3; margin: 4px 0 8px;
  color: var(--hb-txt); }
.hb-wn-details { margin-top: 12px; padding: 13px 15px; border-radius: var(--hb-radius-sm, 14px);
  background: var(--hb-sfc2); border: 1px solid var(--hb-brd);
  font-size: 13.5px; line-height: 1.7; color: var(--hb-txt);
  white-space: pre-wrap; word-break: break-word; }
.hb-wn-nodetail { margin-top: 12px; font-size: 12.5px; color: var(--hb-mut); font-style: italic; }
.hb-wn-open { margin-top: 14px; width: 100%; font: inherit; font-size: 13.5px; font-weight: 800;
  cursor: pointer; padding: 11px 16px; border-radius: var(--hb-radius-sm, 14px); border: none;
  background: var(--hb-acc); color: var(--hb-acc-ink, #fff); transition: .13s; }
.hb-wn-open:hover { filter: brightness(1.06); }

/* ═══════════════════════════════════════════════════════════════════════
   Wave 1 (2026-08-21) — GLOBAL dinamik viewport + virtual klaviatura
   arxitekturasi + Spotlight qidiruv. TZ: platforma bo'ylab umumiy shell/
   input balandligi va klaviatura ochilganda suzuvchi elementlarning
   avtomatik yashirilishi. Faqat QO'SHIMCHA qoidalar — mavjud
   #hbSidebar/.hb-topbar/.hb-bottomnav/.hb-ai-fab qoidalariga TEGILMAGAN.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1) Dinamik viewport — #hbSidebar'da ALLAQACHON bor edi (100vh→100dvh
   fallback naqshi), shu bois shu YAGONA naqsh #hbSidebar bilan BIR XIL
   tartibda .hb-shell'ga ham qo'shiladi (zaxira qatlam — .hb-shell asosan
   `position:fixed;inset:0` bilan ishlaydi, bu allaqachon zamonaviy
   brauzerlarda vizual viewport'ga ergashadi, lekin fallback zararsiz). ── */
.hb-shell{min-height:100vh; min-height:100dvh}

/* ── 2) Klaviatura ochiq bo'lganda suzuvchi elementlar avtomatik
   yashiriladi — past balandlik (≤540px) virtual klaviatura ochilganining
   ishonchli ko'rsatkichi (haqiqiy telefon ekran balandligi hech qachon
   540px dan kam bo'lmaydi, klaviatura esa ekranning ~40-50%ini oladi).
   Aniq klass nomlari: .hb-bottomnav (pastki navigatsiya), .hb-ai-fab
   (AI Yordamchi suzuvchi tugmasi), .hb-fab (umumiy sahifa darajasidagi
   suzuvchi tez-amal tugmasi, masalan Loyihalar/Davomat). ── */
@media (max-height:540px){
  .hb-bottomnav, .hb-ai-fab, .hb-fab{display:none !important; pointer-events:none !important}
}

/* ── 3) Fokus-skroll himoyasi — inputlar/matn maydonlari pastki suzuvchi
   panel (footer/bottomnav/klaviatura) ostida qolib ketmasin. Platforma
   bo'ylab BARCHA matn kiritish elementlariga qo'llanadi. ── */
.hb input, .hb select, .hb textarea, .hb .hb-input{scroll-margin-bottom:120px}

/* ── 4) Gorizontal teginish-dok — ko'p qatorga o'raladigan tab/filtr/pill
   qatorlari uchun umumiy yordamchi klass (yangi/eski komponentlar shu
   klassni qo'shishi mumkin — hb-tabs allaqachon o'z overflow-x qoidasiga
   ega, bu FAQAT boshqa joylarda flex-wrap:wrap bilan qolgan qatorlar
   uchun qo'shimcha yordamchi). ── */
.hb-touchdock{display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important;
  -webkit-overflow-scrolling:touch; gap:8px; scrollbar-width:none; width:100%}
.hb-touchdock::-webkit-scrollbar{display:none}
.hb-touchdock > *{flex:none}

/* ═══════════════════════════════════════════════════════════════════════
   Spotlight qidiruv (⌘K / Ctrl+K) — topbar qidiruv kapsulasi + natija
   ro'yxati. Oyna o'zi .hbk-modal konvensiyasidan foydalanadi (UI.openModal
   orqali, static/shared/ui/hb-kit.css) — bu yerda FAQAT kapsula tugmasi
   va natija-ro'yxati/guruh sarlavhalarining o'ziga xos uslubi.
   ═══════════════════════════════════════════════════════════════════════ */
.hb-spot-btn{display:flex; align-items:center; gap:8px; height:38px; padding:0 12px 0 12px;
  border-radius:var(--hb-pill); background:var(--hb-sfc); border:1px solid var(--hb-brd);
  color:var(--hb-mut); cursor:pointer; font:inherit; font-size:12.5px; font-weight:600;
  transition:border-color .15s, color .15s; min-width:0}
.hb-spot-btn:hover{border-color:var(--hb-acc); color:var(--hb-txt)}
.hb-spot-btn svg{flex:none}
.hb-spot-btn-label{white-space:nowrap}
.hb-spot-kbd{flex:none; display:inline-flex; align-items:center; gap:2px; padding:2px 6px;
  border-radius:6px; background:var(--hb-sfc2); border:1px solid var(--hb-brd);
  font-size:10.5px; font-weight:800; color:var(--hb-mut); letter-spacing:.3px}
/* 2026-09-08 (buyurtmachi: "tepadagi qidirishni faqat ikoni qolsin, input
   ko'rinmasin") — avval faqat ≤640px'da bo'lgan "faqat lupa" holati endi
   BARCHA kengliklarda: kapsula/yozuv/⌘K yo'q, boshqa topbar tugmalari
   (.hb-menubtn, 38px) bilan bir xil o'lcham va burchak. Funksiya (⌘K,
   spotlight) tegilmagan. */
.hb-spot-btn-label, .hb-spot-kbd{display:none}
.hb-spot-btn{width:38px; padding:0; justify-content:center; border-radius:var(--hb-radius-sm); color:var(--hb-txt)}
/* 2026-09-10 (buyurtmachi: "qidiruvdagi iconing o'zi qolsin ora fonini
   olib tashla") — faqat lupa belgisi qolsin, orqasidagi to'ldirilgan
   kapsula fon/chegara YO'Q. Hover'da hamon zaif fon chiqadi (pastda). */
.hb-spot-btn{background:transparent; border-color:transparent}
.hb-spot-btn:hover{background:var(--hb-sfc2); border-color:transparent}

.hb-spot-input-wrap{display:flex; align-items:center; gap:10px; padding:2px 2px 12px;
  border-bottom:1px solid var(--hb-brd); margin-bottom:10px}
.hb-spot-input-wrap svg{flex:none; color:var(--hb-mut)}
.hb-spot-input{flex:1; min-width:0; border:none; outline:none; background:transparent;
  color:var(--hb-txt); font:inherit; font-size:15px; font-weight:600}
.hb-spot-input::placeholder{color:var(--hb-mut); font-weight:600}
.hb-spot-esc{flex:none; font-size:10.5px; font-weight:800; color:var(--hb-mut);
  padding:3px 7px; border-radius:6px; background:var(--hb-sfc2); border:1px solid var(--hb-brd)}
.hb-spot-section{margin-bottom:6px}
.hb-spot-section:last-child{margin-bottom:0}
.hb-spot-section-h{font-size:10.5px; font-weight:800; color:var(--hb-mut); text-transform:uppercase;
  letter-spacing:.5px; padding:6px 8px 4px}
.hb-spot-item{display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:var(--hb-radius-sm);
  cursor:pointer; color:var(--hb-txt)}
.hb-spot-item:hover, .hb-spot-item.active{background:var(--hb-sfc2)}
.hb-spot-item-ic{flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--hb-sfc2); font-size:14px}
/* 2026-09-05: xodim rasmi — ic konteyner o'zi doiraviy ramka, ichidagi
   <img> uni to'liq to'ldiradi (object-fit:cover). Rasm yuklanmasa
   (onerror → hb-spot-ic-broken) img yashiriladi va ::before orqali
   ismning bosh harflari (yoki umumiy belgi) ko'rsatiladi — hech qachon
   bo'sh doira qolmaydi. */
.hb-spot-item-ic-photo{overflow:hidden; font-size:11px; font-weight:700; color:var(--hb-mut)}
.hb-spot-item-ic-photo img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block}
.hb-spot-item-ic-photo.hb-spot-ic-broken img{display:none}
.hb-spot-item-ic-photo.hb-spot-ic-broken::before{content:attr(data-fallback)}
.hb-spot-item-mid{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; justify-content:center}
.hb-spot-item-title{font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hb-spot-item-sub{font-size:11.5px; color:var(--hb-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hb-spot-empty{padding:28px 10px; text-align:center; color:var(--hb-mut); font-size:12.5px}
.hb-spot-hint{padding:10px 8px 2px; text-align:center; color:var(--hb-mut); font-size:11px}

/* ── Topbar avatar+chevron dropdown (2026-08-21, Wave 1) — #hbLangMenu
   bilan BIR XIL naqsh (o'ram ICHIDA joylashgan absolyut menyu, o'ngga
   tekislangan, shu bois tugma qayerda bo'lishidan qat'iy nazar ekrandan
   chiqib ketmaydi). ── */
.hb-avatarwrap{position:relative}
.hb-avatarbtn{display:flex; align-items:center; gap:4px; background:none; border:none; padding:2px;
  border-radius:999px; cursor:pointer; color:var(--hb-mut)}
.hb-avatarbtn:hover{color:var(--hb-txt)}
.hb-avatar-chev{flex:none; transition:transform .15s ease}
.hb-avatarbtn[aria-expanded="true"] .hb-avatar-chev{transform:rotate(180deg)}
.hb-avatar-menu{position:absolute; top:calc(100% + 8px); right:0; min-width:200px; z-index:120;
  background:var(--hb-sfc); border:1px solid var(--hb-brd); border-radius:var(--hb-radius-sm);
  box-shadow:var(--hb-shadow); padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s}
.hb-avatar-menu.open{opacity:1; visibility:visible; transform:none}
.hb-avatar-menu-item{display:block; width:100%; text-align:left; background:none; border:none;
  padding:9px 10px; border-radius:10px; font:inherit; font-size:12.5px; font-weight:700;
  color:var(--hb-txt); cursor:pointer}
.hb-avatar-menu-item:hover{background:var(--hb-sfc2)}
.hb-avatar-menu-danger{color:var(--hb-danger)}
.hb-avatar-menu-sep{height:1px; background:var(--hb-brd); margin:6px 4px}

/* 2026-08-22 (buyurtmachi so'rovi): mobilda (≤860px) topbar'da FAQAT
   qo'ng'iroq+profil qolsin — qidiruv/mavzu/til/yangiliklar tugmalari
   profil-menyusiga ko'chiriladi (yuqoridagi .hb-avatar-menu-item-mobile
   bandlari, hb_shell_base.html). Desktopda bu bandlar yashirin (haqiqiy
   tugmalar topbar'da alohida-alohida ko'rinadi). */
.hb-avatar-menu-item-mobile{display:none}
@media (max-width:860px){
  .hb-avatar-menu-item-mobile{display:block}
  .hb-topbar .hb-spot-btn,
  .hb-topbar [data-hb-theme-toggle],
  .hb-topbar #hbWnBtn{display:none !important}
  /* #hbLangBtn'ning O'ZI (trigger) yashiriladi, lekin uning o'rami
     (position:relative) DOM'da qoladi — #hbLangMenu shu o'ramga nisbatan
     joylashadi (position:absolute). Agar butun o'ram display:none
     bo'lganida, ichidagi menyu HAM umuman ko'rinmay qolardi. Wrapper
     matnsiz/bo'sh bo'lgani uchun 0 o'lchamga qisqaradi — buyurtmachi
     so'ragan "faqat qo'ng'iroq+profil" ko'rinishini buzmaydi, shu bilan
     birga #hbLangMenu pastda `position:fixed`ga o'tkazilib, chekkada
     ishonchli joylashadi (wrapper'ning haqiqiy piksel joylashuviga
     bog'liq bo'lmasin). */
  .hb-topbar #hbLangBtn{display:none !important}
  .hb-topbar .hb-lang-menu{position:fixed !important; top:calc(56px + var(--tg-safe-top,0px)) !important; right:12px !important; left:auto !important}
}

/* 2026-09-07 (buyurtmachi skrinshoti, 110px sinovi: "yopishib qoldi") —
   tor sidebar'da pastki band yorliqlari ("Jarima / e'tirof") bir necha
   qatorga sinib, brend nomi ikki qatorga tushardi. Endi har qanday
   kenglikda (tortib toraytirilganda ham) bir qatorda, "…" bilan qisqaradi —
   `.hb-navitem-name` uchun allaqachon shunday edi, sub-band va brend uchun
   yo'q edi. */
#hbSidebar .hb-navsub-item > span:not(.hb-navsub-ic){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hbSidebar .hb-sidebar-brand > div{min-width:0}
#hbSidebar .hb-sidebar-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hbSidebar .hb-navsect-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}