/* ═══════════════════════════════════════════════════════════════════════
   calendar.css — Kalendar moduli (L1 — Yadro)
   TZ: TZ/calendar/L1_YADRO.md §7.2

   [QOIDA] Bu faylda HECH QANDAY rang qiymati (#hex / rgb()) yozilmaydi —
   faqat var(--hb-*). rgba(var(--hb-*-rgb), a) shakli bundan mustasno.
   Tekshiruv (D1):  grep -E '#[0-9a-fA-F]{3,6}' calendar.css  →  bo'sh
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────────────────── */
.hbcal-wrap { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }

/* L6 (2026-07-31): oy/hafta almashganda yumshoq o'tish — mavjud hb-screenin
   keyframe (hb-tokens.css), bespoke animatsiya YOZILMAYDI. JS (calendar.js
   syncTitle) klassni olib tashlab-qayta qo'yib qayta ishga tushiradi. */
#hbcalRoot.hbcal-transition { animation: hb-screenin .25s cubic-bezier(.2,.8,.3,1) both; }

/* L7 (2026-07-31): oy/hafta Oldingi/Keyingi — yo'naltirilgan "varoq ag'darish"
   o'tishi. JS (calendar.js playExit/syncTitle) yo'nalishga qarab
   hbcal-flip-out-* → (FullCalendar sahifasi almashadi) → hbcal-flip-in-*
   klasslarini navbat bilan qo'yadi. Faqat CSS transform/opacity — yangi
   kutubxona YO'Q. prefers-reduced-motion JS tarafida hurmat qilinadi
   (animatsiya butunlay o'tkazib yuboriladi). */
#hbcalRoot.hbcal-flip-out-next { animation: hbcal-flip-out-next .15s cubic-bezier(.4,0,1,1) both; transform-origin: right center; }
#hbcalRoot.hbcal-flip-out-prev { animation: hbcal-flip-out-prev .15s cubic-bezier(.4,0,1,1) both; transform-origin: left center; }
#hbcalRoot.hbcal-flip-in-next  { animation: hbcal-flip-in-next  .2s  cubic-bezier(.2,.8,.3,1) both; transform-origin: left center; }
#hbcalRoot.hbcal-flip-in-prev  { animation: hbcal-flip-in-prev  .2s  cubic-bezier(.2,.8,.3,1) both; transform-origin: right center; }
@keyframes hbcal-flip-out-next { to   { transform: translateX(-4%) rotateY(-10deg) scale(.98); opacity: .25; } }
@keyframes hbcal-flip-out-prev { to   { transform: translateX(4%)  rotateY(10deg)  scale(.98); opacity: .25; } }
@keyframes hbcal-flip-in-next  { from { transform: translateX(4%)  rotateY(10deg)  scale(.98); opacity: .25; } to { transform: none; opacity: 1; } }
@keyframes hbcal-flip-in-prev  { from { transform: translateX(-4%) rotateY(-10deg) scale(.98); opacity: .25; } to { transform: none; opacity: 1; } }

.hbcal-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; padding-bottom: 13px; }
/* "Varoqlanadigan stol kalendari" nishonasi — spiral teshiklarini eslatuvchi
   nuqtali chiziq, asboblar paneli ostida (perforatsiya chizig'i kabi). Faqat
   var(--hb-*) — QOIDA (D1) buzilmaydi. */
.hbcal-bar::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 1px;
  background-image: radial-gradient(circle, var(--hb-brd2) 1.5px, transparent 1.7px);
  background-size: 14px 1px; background-repeat: repeat-x; opacity: .9;
}
.hbcal-bar-spacer { flex: 1 1 auto; }
.hbcal-title {
  font-weight: 800; font-size: 15px; color: var(--hb-txt);
  min-width: 128px; letter-spacing: -.2px;
}
.hbcal-nav { display: flex; align-items: center; gap: 4px; }

/* ── FullCalendar konteyneri ─────────────────────────────────────────── */
.hbcal {
  /* FullCalendar o'z tokenlarini hb- ga ulaymiz — kutubxona temasini "ustidan
     bo'yash" o'rniga o'zgaruvchi darajasida moslashtirish */
  --fc-page-bg-color: transparent;
  --fc-border-color: var(--hb-brd);
  --fc-neutral-bg-color: var(--hb-sfc2);
  --fc-neutral-text-color: var(--hb-mut);
  --fc-today-bg-color: rgba(var(--hb-acc-rgb), .07);
  --fc-now-indicator-color: var(--hb-danger);
  --fc-highlight-color: rgba(var(--hb-acc-rgb), .16);
  --fc-event-bg-color: var(--hb-sfc2);
  --fc-event-border-color: var(--hb-brd2);
  --fc-event-text-color: var(--hb-txt);
  --fc-more-link-bg-color: transparent;
  --fc-more-link-text-color: var(--hb-acc-text);
  --fc-small-font-size: 11px;

  font-family: var(--hb-font);
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow-sm);
  padding: 10px;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  perspective: 1400px;   /* varoq ag'darish animatsiyasi uchun (#hbcalRoot) */
}
/* "Stol kalendari" spirali — kartaning yuqori qirrasidan chiqib turgan ikkita
   halqa (faqat dekorativ, CSS-only, hb- tokenlaridan). Kichik ekranlarda olib
   tashlanadi (joy tanqis, kontent muhimroq). */
.hbcal::before, .hbcal::after {
  content: ""; position: absolute; top: -7px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--hb-sfc2); border: 1px solid var(--hb-brd2);
  box-shadow: var(--hb-shadow-sm); z-index: 1;
}
.hbcal::before { left: 26px; }
.hbcal::after  { right: 26px; }
@media (max-width: 640px) { .hbcal::before, .hbcal::after { display: none; } }

.hbcal .fc { height: 100%; }
.hbcal .fc-scrollgrid { border-radius: var(--hb-radius-sm); overflow: hidden; }
.hbcal .fc-scrollgrid-section > * { border-left-width: 0; }
.hbcal .fc-theme-standard td, .hbcal .fc-theme-standard th { border-color: var(--hb-brd); }

.hbcal .fc-col-header-cell-cushion {
  color: var(--hb-mut); font-weight: 700; font-size: 11.5px;
  padding: 8px 4px; text-decoration: none;
}
.hbcal .fc-daygrid-day-number {
  color: var(--hb-txt); font-weight: 600; font-size: 12px;
  padding: 5px 7px; text-decoration: none;
}
.hbcal .fc-day-today .fc-daygrid-day-number { color: var(--hb-acc-ink); }
.hbcal .fc-day-today .fc-daygrid-day-top {
  display: flex; justify-content: flex-end;
}
.hbcal .fc-day-today .fc-daygrid-day-number {
  background: var(--hb-acc); border-radius: var(--hb-pill);
  min-width: 22px; text-align: center; margin: 3px;
  box-shadow: var(--hb-glow);
}
.hbcal .fc-day-other .fc-daygrid-day-number { opacity: .38; }
.hbcal .fc-timegrid-slot-label-cushion { color: var(--hb-mut); font-size: 11px; }
.hbcal .fc-timegrid-axis-cushion { color: var(--hb-mut); font-size: 10.5px; }
.hbcal .fc-day-sat, .hbcal .fc-day-sun { background: rgba(var(--hb-acc-rgb), .012); }

/* ── Kun katakchalari — "karta" ko'rinishi (premium stol kalendari) ──────
   FullCalendar o'z DOM tuzilishini beradi (.fc-daygrid-day-frame) — bizda
   maxsus wrapper yo'q, shu bois shu klass ustida ishlaymiz (D1 investigatsiya
   hisobotida qayd etilgan). Yumshoq radius + hover ko'tarilish + BUGUN uchun
   butun katak bo'ylab modul ranggi (--hb-mod-calendar) urg'usi. */
.hbcal .fc-daygrid-day-frame {
  border-radius: var(--hb-radius-sm);
  margin: 1px;
  transition: background .15s ease, box-shadow .15s ease;
}
.hbcal .fc-daygrid-day:hover .fc-daygrid-day-frame {
  background: var(--hb-sfc2);
}
.hbcal .fc-day-today .fc-daygrid-day-frame {
  background: color-mix(in srgb, var(--hb-mod-calendar) 11%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hb-mod-calendar) 42%, transparent);
}
.hbcal .fc-day-today:hover .fc-daygrid-day-frame {
  background: color-mix(in srgb, var(--hb-mod-calendar) 16%, transparent);
}
.hbcal .fc-timegrid-col.fc-day-today {
  background: color-mix(in srgb, var(--hb-mod-calendar) 6%, transparent);
}

/* ── "Ko'proq" havolasi → hodisalar-soni nishonchasi (badge) ────────────
   JS (calendar.js moreLinkContent) matnni "+N" ga qisqartiradi — bu yerda
   pill-shakldagi nishonga aylantiramiz (ko'p-hodisali kunlar uchun vizual
   hisoblagich). */
.hbcal .fc-daygrid-more-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 17px; padding: 0 6px; margin: 1px 2px 0;
  border-radius: var(--hb-pill); font-size: 10px; font-weight: 800;
  background: color-mix(in srgb, var(--hb-mod-calendar) 20%, transparent);
  color: var(--hb-mod-calendar); text-decoration: none;
  transition: background .12s ease;
}
.hbcal .fc-daygrid-more-link:hover {
  background: color-mix(in srgb, var(--hb-mod-calendar) 32%, transparent);
}
.hbcal .fc-highlight { background: rgba(var(--hb-acc-rgb), .16); }

/* FullCalendar'ning o'z "+N ko'proq" popoveri — rangi allaqachon --fc-neutral-*
   orqali hb- tokenlariga ulangan (yuqorida), bu yerda faqat radius/soya
   qo'shamiz (kartalar bilan bir xil til). */
.hbcal .fc-popover {
  border-radius: var(--hb-radius-sm); box-shadow: var(--hb-shadow); overflow: hidden;
}
.hbcal .fc-popover-header { padding: 8px 10px; font-weight: 700; }

/* ── Voqea kartasi ───────────────────────────────────────────────────── */
.hbcal .fc-event { border: 0; background: transparent; box-shadow: none; }
.hbcal .fc-event-main { padding: 0; }
.hbcal .fc-daygrid-event { margin-top: 2px; }
.hbcal .fc-timegrid-event .fc-event-main { padding: 0; }
.hbcal .fc-v-event, .hbcal .fc-h-event { background: transparent; border: 0; }

.hbcal-ev {
  border-radius: var(--hb-radius-sm); padding: 4px 8px; border: 1px solid transparent;
  font-size: 11.5px; font-weight: 600; overflow: hidden; height: 100%;
  cursor: pointer; transition: filter .12s ease, box-shadow .15s ease, transform .15s ease;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--hb-txt) 5%, transparent);
}
.hbcal-ev:hover { filter: brightness(1.12); box-shadow: var(--hb-shadow-sm); transform: translateY(-1px); }
.hbcal-ev-row { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.hbcal-ev-time { opacity: .75; font-weight: 500; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.hbcal-ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbcal-ev-loc {
  font-size: 10.5px; opacity: .68; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Split rejimda ustunlar torayadi — @container kartaning O'Z kengligiga qarab
   moslashadi (media query oyna kengligini biladi, kartanikini emas). */
.hbcal .fc-timegrid-event-harness,
.hbcal .fc-daygrid-event-harness { container-type: inline-size; }
@container (max-width: 88px) {
  .hbcal-ev { padding: 2px 4px; font-size: 10.5px; }
  .hbcal-ev-time { display: none; }
  .hbcal-ev-loc { font-size: 9.5px; }
}
@container (max-width: 52px) {
  .hbcal-ev-loc { display: none; }
}

/* 12 ta rang — hammasi mavjud hb- tokenlarining shaffoflik variantlari.
   YANGI rang tokeni kiritilmaydi (README §1.7). */
.hbcal-c1  { background: rgba(var(--hb-acc-rgb), .16); color: var(--hb-acc-text);
             border-color: rgba(var(--hb-acc-rgb), .34); }
.hbcal-c2  { background: color-mix(in srgb, var(--hb-info) 16%, transparent);
             color: var(--hb-info); border-color: color-mix(in srgb, var(--hb-info) 34%, transparent); }
.hbcal-c3  { background: color-mix(in srgb, var(--hb-violet) 16%, transparent);
             color: var(--hb-violet); border-color: color-mix(in srgb, var(--hb-violet) 34%, transparent); }
.hbcal-c4  { background: color-mix(in srgb, var(--hb-warning) 16%, transparent);
             color: var(--hb-warning); border-color: color-mix(in srgb, var(--hb-warning) 34%, transparent); }
.hbcal-c5  { background: color-mix(in srgb, var(--hb-danger) 16%, transparent);
             color: var(--hb-danger); border-color: color-mix(in srgb, var(--hb-danger) 34%, transparent); }
.hbcal-c6  { background: color-mix(in srgb, var(--hb-ok) 18%, transparent);
             color: var(--hb-acc-text); border-color: color-mix(in srgb, var(--hb-ok) 36%, transparent); }
.hbcal-c7  { background: color-mix(in srgb, var(--hb-info) 26%, transparent);
             color: var(--hb-info); border-color: color-mix(in srgb, var(--hb-info) 48%, transparent); }
.hbcal-c8  { background: color-mix(in srgb, var(--hb-violet) 26%, transparent);
             color: var(--hb-violet); border-color: color-mix(in srgb, var(--hb-violet) 48%, transparent); }
.hbcal-c9  { background: color-mix(in srgb, var(--hb-warning) 26%, transparent);
             color: var(--hb-warning); border-color: color-mix(in srgb, var(--hb-warning) 48%, transparent); }
.hbcal-c10 { background: color-mix(in srgb, var(--hb-danger) 26%, transparent);
             color: var(--hb-danger); border-color: color-mix(in srgb, var(--hb-danger) 48%, transparent); }
.hbcal-c11 { background: rgba(var(--hb-acc-rgb), .28); color: var(--hb-acc-text);
             border-color: rgba(var(--hb-acc-rgb), .5); }
.hbcal-c12 { background: var(--hb-sfc2); color: var(--hb-txt); border-color: var(--hb-brd2); }
/* c0 — L2'dagi maskalangan ("Band") voqea uchun zaxira */
.hbcal-c0  { background: var(--hb-sfc2); color: var(--hb-mut); border-color: var(--hb-brd); }

.hbcal-ev--readonly { cursor: default; }
.hbcal-ev--allday .hbcal-ev-time { display: none; }

/* ── Ishtirokchi statuslari (L2 §6.3) ────────────────────────────────── */
/* accepted — bazaviy holat (to'liq rang), qo'shimcha qoida kerak emas */
.hbcal-ev--declined    { text-decoration: line-through; opacity: .5; }
.hbcal-ev--tentative   { background-image: repeating-linear-gradient(45deg,
                           transparent 0 5px, rgba(var(--hb-acc-rgb), .10) 5px 10px); }
.hbcal-ev--needsAction { background: transparent; border-style: dashed; }
.hbcal-ev--alone       { border-color: var(--hb-warning);
                         box-shadow: inset 3px 0 0 var(--hb-warning); }
.hbcal-ev--masked      { background: var(--hb-sfc2); color: var(--hb-mut);
                         border-color: var(--hb-brd); cursor: default;
                         font-style: italic; }
.hbcal-ev--masked .hbcal-ev-title { font-weight: 600; }

/* ── Takrorlanish (L3 §7) ────────────────────────────────────────────── */
.hbcal-ev-mark { font-size: 9px; opacity: .6; flex: 0 0 auto; margin-left: 2px; }
.hbcal-rec {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: var(--hb-radius-sm);
  background: var(--hb-sfc2); border: 1px solid var(--hb-brd);
}
.hbcal-rec[hidden] { display: none; }
.hbcal-rec-preview {
  font-size: 11.5px; font-weight: 700; color: var(--hb-acc-text);
  padding: 8px 10px; border-radius: var(--hb-radius-sm);
  background: rgba(var(--hb-acc-rgb), .10);
}
.hbcal-scope { display: flex; flex-direction: column; gap: 8px; }
.hbcal-scope .hb-choice { display: flex; gap: 10px; align-items: flex-start;
                          font-size: 13px; cursor: pointer; padding: 10px 12px;
                          border-radius: var(--hb-radius-sm); border: 1px solid var(--hb-brd); }
.hbcal-scope .hb-choice:hover { border-color: var(--hb-brd2); background: var(--hb-sfc2); }
.hbcal-scope input { accent-color: var(--hb-acc); margin-top: 2px; flex: none; }

/* ── Yon panel (L2 §6.1) ─────────────────────────────────────────────── */
.hbcal-body { display: flex; gap: 12px; flex: 1 1 auto; min-height: 0; }
.hbcal-side {
  width: 224px; flex: 0 0 224px; align-self: flex-start;
  display: flex; flex-direction: column; gap: 14px;
  max-height: 100%; overflow-y: auto;
}
.hbcal-side .hb-card { padding: 14px; }
.hbcal-side-list { display: flex; flex-direction: column; gap: 2px; }
.hbcal-fitem {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border-radius: var(--hb-radius-sm); cursor: pointer; font-size: 12.5px;
  font-weight: 600; color: var(--hb-txt); user-select: none;
}
.hbcal-fitem:hover { background: var(--hb-sfc2); }
.hbcal-fitem input { accent-color: var(--hb-acc); cursor: pointer; flex: none; }
.hbcal-fdot { width: 9px; height: 9px; border-radius: var(--hb-pill); flex: none; }
.hbcal-fname { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbcal-fitem .hb-iconbtn-sm { opacity: 0; transition: opacity .12s; }
.hbcal-fitem:hover .hb-iconbtn-sm { opacity: 1; }
.hbcal-fsep { height: 1px; background: var(--hb-brd); margin: 6px 0; }
.hbcal-side-more { font-size: 11.5px; font-weight: 700; color: var(--hb-acc-text);
                   cursor: pointer; padding: 4px 6px; }

/* Ishtirokchi rangi — 12 ta hb- variant (nuqta va avatar chegarasi uchun) */
.hbcal-p1  { background: var(--hb-acc); }
.hbcal-p2  { background: var(--hb-info); }
.hbcal-p3  { background: var(--hb-violet); }
.hbcal-p4  { background: var(--hb-warning); }
.hbcal-p5  { background: var(--hb-danger); }
.hbcal-p6  { background: var(--hb-ok); }
.hbcal-p7  { background: var(--hb-info); opacity: .65; }
.hbcal-p8  { background: var(--hb-violet); opacity: .65; }
.hbcal-p9  { background: var(--hb-warning); opacity: .65; }
.hbcal-p10 { background: var(--hb-danger); opacity: .65; }
.hbcal-p11 { background: var(--hb-acc); opacity: .65; }
.hbcal-p12 { background: var(--hb-mut); }

/* ── Popover: ishtirokchilar ─────────────────────────────────────────── */
.hbcal-att-list { display: flex; flex-direction: column; gap: 6px; }
.hbcal-att { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.hbcal-att-state { font-size: 12px; flex: none; width: 16px; text-align: center; }
.hbcal-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbcal-att--declined .hbcal-att-name { text-decoration: line-through; opacity: .6; }
.hbcal-att-org { font-size: 10.5px; color: var(--hb-mut); font-weight: 700; }
.hbcal-warn {
  display: flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 700;
  color: var(--hb-warning); padding: 8px 10px; border-radius: var(--hb-radius-sm);
  background: color-mix(in srgb, var(--hb-warning) 12%, transparent);
}
.hbcal-rsvp { display: flex; gap: 8px; }
.hbcal-rsvp .hb-btn, .hbcal-rsvp .hb-btn-ghost { flex: 1 1 0; padding: 0 10px; }
.hbcal-rsvp-on { border-color: var(--hb-acc); color: var(--hb-acc-text); }

/* ── Ishtirokchi tanlash (formada) ───────────────────────────────────── */
.hbcal-people { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hbcal-person { display: inline-flex; align-items: center; gap: 6px; }
.hbcal-person button { background: none; border: 0; color: inherit; cursor: pointer;
                       font-size: 12px; opacity: .6; padding: 0; }
.hbcal-person button:hover { opacity: 1; color: var(--hb-danger); }
.hbcal-ac { position: relative; }
.hbcal-ac-list {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--hb-sfc); border: 1px solid var(--hb-brd);
  border-radius: var(--hb-radius-sm); box-shadow: var(--hb-shadow);
  max-height: 220px; overflow-y: auto;
}
.hbcal-ac-item { padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.hbcal-ac-item:hover { background: var(--hb-sfc2); }
.hbcal-ac-empty { padding: 10px 12px; font-size: 12px; color: var(--hb-mut); }

/* ── Erishuvchanlik (2026-08-09): quyidagi qatorlar avval <div onclick> edi —
   klaviatura bilan Tab orqali umuman yetib bo'lmasdi. Endi haqiqiy <button>
   (hb-components.css'dagi hb-navitem/hb-menubtn bilan bir xil naqsh — faqat
   brauzer default tugma ko'rinishi tozalanadi, fon/joylashuv o'z klassidan
   o'zgarishsiz qoladi). ── */
button.hbcal-ac-item, button.hbcal-side-more{
  appearance: none; -webkit-appearance: none; margin: 0; font-family: inherit;
  color: inherit; display: block; width: 100%; text-align: left;
}
button.hbcal-notice-item{ appearance: none; -webkit-appearance: none; margin: 0; font-family: inherit; color: inherit; }
button.hbcal-yday{ appearance: none; -webkit-appearance: none; margin: 0; font-family: inherit; }

/* ── Overlay: yuklanish / xato ───────────────────────────────────────── */
.hbcal-overlay {
  position: absolute; inset: 10px; z-index: 5;
  display: grid; place-items: center; border-radius: var(--hb-radius-sm);
  background: color-mix(in srgb, var(--hb-sfc) 72%, transparent);
  backdrop-filter: blur(1.5px);
}
.hbcal-overlay[hidden] { display: none; }

/* ── Kun tafsiloti (L7) — check-in kartasi, kunlik ro'yxat, e'lonlar ────
   openDayDrawer/renderDayChecklist (calendar.js) shu klasslarni ishlatadi. */
.hbcal-section-lbl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--hb-mut); margin: 16px 0 8px;
}
.hbcal-section-lbl:first-child { margin-top: 0; }

.hbcal-checkin-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border-radius: var(--hb-radius-md);
  background: color-mix(in srgb, var(--hb-mod-calendar) 9%, var(--hb-sfc));
  border: 1px solid color-mix(in srgb, var(--hb-mod-calendar) 24%, var(--hb-brd));
}
.hbcal-checkin-ic {
  width: 38px; height: 38px; border-radius: var(--hb-radius-sm); flex: none;
  display: grid; place-items: center; font-size: 17px;
  background: color-mix(in srgb, var(--hb-mod-calendar) 18%, transparent);
}
.hbcal-checkin-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hbcal-checkin-t { font-weight: 800; font-size: 13px; color: var(--hb-txt); }
.hbcal-checkin-s { font-size: 11px; color: var(--hb-mut); font-weight: 600; }

.hbcal-check-row, a.hbcal-check-row {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: var(--hb-radius-sm); border: 1px solid var(--hb-brd);
  background: var(--hb-sfc); margin-bottom: 6px; cursor: pointer;
  transition: border-color .15s, background .15s; color: var(--hb-txt); text-decoration: none;
}
.hbcal-check-row:hover, a.hbcal-check-row:hover { border-color: var(--hb-brd2); background: var(--hb-sfc2); text-decoration: none; }
.hbcal-check-row.done { cursor: default; opacity: .62; }
.hbcal-check-box {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--hb-brd2); flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--hb-acc-ink);
}
.hbcal-check-row.done .hbcal-check-box { background: var(--hb-ok); border-color: var(--hb-ok); }
.hbcal-check-main { flex: 1 1 auto; min-width: 0; }
.hbcal-check-t { font-weight: 700; font-size: 12.5px; color: var(--hb-txt); }
.hbcal-check-s { font-size: 11px; color: var(--hb-mut); font-weight: 600; margin-top: 1px; }

/* ── Kun voqealari ro'yxati — hover'da tezkor tahrirlash/o'chirish ──────
   hb-row/.hbcal-day-row allaqachon bor (hb-components.css); shu yerda faqat
   amallar bloki (mavjud .hb-iconbtn-sm/.hb-iconbtn-danger klasslaridan). */
.hbcal-day-row { cursor: pointer; }
.hbcal-day-actions { display: flex; gap: 4px; flex: none; opacity: 0; transition: opacity .12s ease; }
.hbcal-day-row:hover .hbcal-day-actions { opacity: 1; }
@media (max-width: 640px) { .hbcal-day-actions { opacity: 1; } }

/* ── E'lonlar taxtasi — shu haftadagi boshqa voqealar (mini-ro'yxat) ─── */
.hbcal-notice { display: flex; flex-direction: column; gap: 6px; }
.hbcal-notice-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: var(--hb-radius-sm); background: var(--hb-sfc2); cursor: pointer;
  transition: background .12s ease;
}
.hbcal-notice-item:hover { background: var(--hb-sfc); }
.hbcal-notice-day {
  flex: none; min-width: 40px; text-align: center; font-size: 10.5px; font-weight: 800;
  color: var(--hb-mod-calendar); text-transform: capitalize;
}
.hbcal-notice-t {
  flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 700; color: var(--hb-txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Forma (hb-sheet ichida) ─────────────────────────────────────────── */
.hbcal-form { display: flex; flex-direction: column; gap: 12px; }
.hbcal-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hbcal-form-row > * { flex: 1 1 140px; min-width: 0; }
.hbcal-tagpick { display: flex; gap: 6px; flex-wrap: wrap; }
.hbcal-tagpick .hb-chip { cursor: pointer; user-select: none; }
.hbcal-tagpick .hb-chip[aria-pressed="true"] {
  background: rgba(var(--hb-acc-rgb), .18); border-color: rgba(var(--hb-acc-rgb), .4);
  color: var(--hb-acc-text);
}
.hbcal-form-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.hbcal-form-actions .hbcal-grow { flex: 1 1 auto; }

/* ── Popover (hb-sheet ichida) ───────────────────────────────────────── */
.hbcal-pop-head { display: flex; align-items: flex-start; gap: 8px; }
.hbcal-pop-dot { width: 10px; height: 10px; border-radius: var(--hb-pill); margin-top: 5px; flex: 0 0 auto; }
.hbcal-pop-when { color: var(--hb-mut); font-size: 12px; margin-top: 2px; }
.hbcal-pop-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.hbcal-pop-item { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
.hbcal-pop-item-ic { flex: 0 0 18px; opacity: .8; }
.hbcal-pop-desc { color: var(--hb-mut); font-size: 12.5px; line-height: 1.55; }
.hbcal-pop-desc p { margin: 0 0 6px; }
.hbcal-pop-sep { height: 1px; background: var(--hb-brd); margin: 10px 0; }
.hbcal-pop-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Bandlik va Yillik ko'rinish (L5 §2.5, §7) ───────────────────────── */
.hbcal-panel { position: absolute; inset: 10px; overflow: auto; }
.hbcal-panel[hidden] { display: none; }

.hbcal-fb-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
                    margin-bottom: 14px; }
.hbcal-fb { display: flex; flex-direction: column; gap: 4px; min-width: 560px; }
.hbcal-fb-row { display: flex; align-items: center; gap: 10px; height: 30px; }
.hbcal-fb-head { height: 20px; }
.hbcal-fb-name { flex: 0 0 150px; display: flex; align-items: center; gap: 7px;
                 font-size: 12.5px; font-weight: 600; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
.hbcal-fb-in { color: var(--hb-ok); font-size: 9px; }
.hbcal-fb-track { position: relative; flex: 1 1 auto; height: 100%;
                  background: var(--hb-sfc2); border-radius: var(--hb-radius-sm);
                  border: 1px solid var(--hb-brd); overflow: hidden; }
.hbcal-fb-head .hbcal-fb-track { background: transparent; border: 0; }
.hbcal-fb-tick { position: absolute; top: 0; font-size: 10px; color: var(--hb-mut);
                 font-weight: 700; transform: translateX(-50%); }
/* Birinchi/oxirgi yorliq trek chetidan chiqib kesilmasin */
.hbcal-fb-tick:first-child { transform: none; }
.hbcal-fb-tick:last-child  { transform: translateX(-100%); }
.hbcal-fb-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; }
.hbcal-fb-bar--event { background: color-mix(in srgb, var(--hb-danger) 45%, transparent); }
.hbcal-fb-bar--off_hours {
  background: repeating-linear-gradient(45deg, transparent 0 4px,
              color-mix(in srgb, var(--hb-mut) 30%, transparent) 4px 8px);
}
.hbcal-fb-bar--leave { background: color-mix(in srgb, var(--hb-warning) 55%, transparent); }

.hbcal-slots { display: flex; flex-direction: column; gap: 8px; }
.hbcal-slot { display: flex; justify-content: space-between; align-items: center;
              padding: 11px 14px; border-radius: var(--hb-radius-sm);
              border: 1px solid var(--hb-brd); background: var(--hb-sfc);
              color: var(--hb-txt); font-family: inherit; font-size: 13px;
              cursor: pointer; text-align: left; }
.hbcal-slot:hover { border-color: var(--hb-brd2); background: var(--hb-sfc2); }
.hbcal-slot--free { border-color: rgba(var(--hb-acc-rgb), .45);
                    background: rgba(var(--hb-acc-rgb), .08); }

.hbcal-year { display: grid; gap: 14px;
              grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.hbcal-ymonth { background: var(--hb-sfc2); border: 1px solid var(--hb-brd);
                border-radius: var(--hb-radius-sm); padding: 10px; }
.hbcal-ymonth-name { font-weight: 800; font-size: 12.5px; margin-bottom: 8px;
                     text-transform: capitalize; }
.hbcal-ygrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hbcal-ydow { font-size: 9px; color: var(--hb-mut); text-align: center;
              font-weight: 800; padding-bottom: 3px; }
.hbcal-yday { font-size: 10.5px; text-align: center; padding: 3px 0;
              border-radius: 5px; cursor: pointer; color: var(--hb-mut); }
.hbcal-yday:hover { background: var(--hb-sfc); color: var(--hb-txt); }
.hbcal-yday--pad { visibility: hidden; }
.hbcal-yday--has { background: rgba(var(--hb-acc-rgb), var(--a, .2));
                   color: var(--hb-txt); font-weight: 700; }
.hbcal-yday--today { outline: 1.5px solid var(--hb-acc); }

@media (max-width: 768px) {
  .hbcal-panel { inset: 6px; }
  .hbcal-year { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hbcal-fb-name { flex-basis: 96px; font-size: 11.5px; }
}

/* ── Mobil ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Yon panel — hb-sheet ichiga ko'chadi (toolbar'dagi 👥 tugmasi bilan) */
  .hbcal-side { display: none; }
  .hbcal-side--sheet { display: flex; width: auto; flex: 1 1 auto; max-height: none; }
  .hbcal-side--sheet .hb-card { border: 0; padding: 0; background: transparent; box-shadow: none; }
}
@media (min-width: 1025px) {
  #hbcalSideBtn { display: none; }
}

@media (max-width: 768px) {
  .hbcal { padding: 6px; border-radius: var(--hb-radius-md); }
  .hbcal-title { font-size: 14px; min-width: 92px; }
  .hbcal-bar { gap: 6px; }
  .hbcal .fc-col-header-cell-cushion { font-size: 10.5px; padding: 6px 2px; }
  .hbcal .fc-daygrid-day-number { font-size: 11px; padding: 3px 5px; }
  .hbcal-ev { font-size: 10.5px; padding: 2px 5px; border-radius: 8px; }
  .hbcal-ev-loc { display: none; }
  .hbcal-form-row > * { flex: 1 1 100%; }
}

/* ── Chop etish ──────────────────────────────────────────────────────── */
@media print {
  .hb-sidebar, .hb-topbar, .hb-bottomnav, .hbcal-bar, .hb-fab { display: none !important; }
  .hbcal { box-shadow: none; border: 0; padding: 0; }
  .hbcal::before, .hbcal::after { display: none; }
}

/* ── Harakat kamaytirish tercihi — dekorativ flip animatsiyasi o'chiriladi.
   (JS playExit() ham matchMedia bilan tekshiradi — bu CSS ikkinchi himoya
   qatlami, agar biror joyda klass baribir qo'yilib qolsa.) ── */
@media (prefers-reduced-motion: reduce) {
  #hbcalRoot.hbcal-flip-out-next, #hbcalRoot.hbcal-flip-out-prev,
  #hbcalRoot.hbcal-flip-in-next, #hbcalRoot.hbcal-flip-in-prev,
  #hbcalRoot.hbcal-transition { animation: none; }
}