/* ==========================================================================
   components.css — UI komponentlari (D0)
   Har komponent: `.c-<nom>`; variant `--<variant>`; holat `is-<holat>`.
   Ranglar/oraliqlar faqat `tokens.css` dan. Inline `<style>` YOZILMAYDI.
   ========================================================================== */

/* ==========================================================================
   0. Karkas — app shell: chap sidebar + tepa panel + kontent (D1)
   Tuzilish: .app > .app__sidebar + .app__main(.app__topbar + .app__content)
   Mobil (<= 900px): sidebar drawer'ga aylanadi (Alpine `open` holati).
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- Sidebar ------------------------------------------------------------- */
.app__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: var(--bg-sidebar);
  color: var(--text-on-sidebar);
  overflow-y: auto;
  /* Uzun sahifada ham menyu ko'rinib tursin. */
  position: sticky;
  top: 0;
  height: 100vh;
}

.app__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-4);
  color: #fff;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}
.app__brand:hover { text-decoration: none; }
.app__brand .icon { width: 22px; height: 22px; }

.app__nav-title {
  padding: var(--space-3) var(--space-2) var(--space-1);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-accent-300);
  opacity: 0.85;
}

.app__nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-on-sidebar);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.app__nav-link:hover {
  background: var(--bg-sidebar-hover);
  color: #fff;
  text-decoration: none;
}
.app__nav-link.is-active {
  background: var(--bg-sidebar-active);
  color: #fff;
}
.app__nav-link .icon {
  width: 18px;
  height: 18px;
  opacity: 0.9;
}

/* --- Asosiy ustun -------------------------------------------------------- */
.app__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app__topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--topbar-height);
  padding: var(--space-2) var(--space-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}

.app__page-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

/* Tepa paneldagi qidiruv (#168). `min-width: 0` — flex ichida qisqara olsin. */
.app__search {
  flex: 0 1 320px;
  min-width: 0;
  margin-inline: var(--space-4);
}

.app__content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-6);
}
/* Keng jadvalli sahifalar (davomat panjarasi, dars jadvali): chegara olib
   tashlanadi va chekinish kichrayadi — bo'shagan joy jadvalga beriladi (#170). */
.app__content.is-wide {
  max-width: none;
  padding: var(--space-4) var(--space-5);
}

/* Mobil drawer tugmasi — faqat tor ekranda ko'rinadi.
   `.app` bilan birga yoziladi: `.c-btn-icon` (1-bo'lim) keyinroq kelgani uchun teng
   spetsiflikda uni yengib, tugmani desktopda ham ko'rsatib yuborardi. */
.app .app__menu-btn { display: none; }

/* Drawer ochiq bo'lganda orqa fon (mobil). */
.app__scrim { display: none; }

/* --- Mobil: sidebar -> drawer -------------------------------------------- */
@media (max-width: 900px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .app__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-drawer);
    width: min(var(--sidebar-width), 82vw);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease);
    box-shadow: var(--shadow-3);
  }
  .app.is-open .app__sidebar {
    transform: translateX(0);
  }

  .app.is-open .app__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: rgba(14, 19, 27, 0.5);
  }

  .app .app__menu-btn { display: inline-flex; }

  .app__topbar { padding-inline: var(--space-4); }
  .app__content { padding: var(--space-4); }

  /* ⚠️ Ilgari sahifa nomi mobilda **yashirilardi** — u pastdagi `h1` bilan bir
     xil matn edi. #168 da o'sha `h1` olib tashlandi (nom ikki joyda turardi),
     ya'ni endi bu yagona nom: yashirsak sahifa nomsiz qolardi.
     Tor ekranda ikki qatorga tushmasligi uchun qisqartiriladi.

     ⭐ #184 (telefon ko'rigi, 375px): `max-width` 40vw (150px) edi, lekin nomga
     amalda **45px** tegardi va «Moliya» ham sig'masdi — «Mol…» bo'lib qolardi.
     Sabab kengligida emas, **raqobatda**: profil tugmasi login yozuvi bilan
     137px ni egallardi, ya'ni sahifa nomidan uch barobar ko'p.
     Yechim pastda — telefonda login yashiriladi; bu yerda esa bo'shagan joydan
     foydalana olishi uchun chegara kengaytiriladi. */
  .app__page-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* `flex: 1 1 auto` + `min-width` — nom **birinchi navbatda** joy oladi va
       hech qachon noldan kichik bo'lib ketmaydi. Ilgari `0 1 auto` edi: ikkita
       filialli markazda (jonli holat!) almashtirgich qo'shilgach nomga **0px**
       qolardi, ya'ni u butunlay yo'qolardi. */
    flex: 1 1 auto;
    min-width: 4.5rem;
    max-width: 55vw;
  }

  /* Ikonka tugmalar **ezilmaydi**: ular kvadrat va ichidagi belgi kichraysa
     bosib bo'lmay qoladi (ko'rikda 36px o'rniga **19px** ga tushgandi). */
  .app__topbar .c-btn-icon { flex: 0 0 auto; }

  /* Filial nomi esa **qisqarishi mumkin** — qaysi binodaligini birinchi
     harflaridan ham bilib olinadi, sahifa nomi esa butunlay yo'qolmasin.
     Almashtirgichning o'zi (ADR-092 bo'yicha majburiy) joyida qoladi. */
  .app__topbar .c-dropdown { min-width: 0; }
  .app__topbar .c-dropdown .truncate { max-width: 4.5rem; }

  /* Profil tugmasidagi **login** telefonda chizilmaydi — avatar (va bosiladigan
     tugmaning o'zi) qoladi. Hech narsa yo'qolmaydi: ism, rol va telefon menyu
     ichidagi `c-userbox` da baribir turadi.

     Nega aynan shu matn tanlandi: telefonda odam **o'z nomini biladi**, qaysi
     sahifada turganini esa yo'q. Joy taqchil bo'lganda navigatsiya ustun. */
  .app__user-name { display: none; }

  /* Teginish nishoni: `c-btn--sm` sichqoncha uchun ixcham, barmoq uchun esa past
     (telefon ko'rigida «Shablonlar» tugmasi **28px** chiqdi). Tavsiya 44px;
     bu yerda 36px — ekran tartibini buzmaydigan, lekin sezilarli yaxshilanish. */
  .c-btn--sm { min-height: 36px; }

  /* Qidiruv maydoni telefonda chizilmaydi: tepa panel u yerda allaqachon to'la
     (menyu · nom · filial · mavzu · profil). Qidiruv `/qidiruv/` sahifasida. */
  .app__search { display: none; }
}

/* Mavzu almashtirgichi: light'da oy (qorong'iga o'tish), dark'da quyosh. */
.theme-icon--dark { display: none; }
[data-theme="dark"] .theme-icon--light { display: none; }
[data-theme="dark"] .theme-icon--dark { display: block; }

/* ==========================================================================
   1. Tugmalar
   ========================================================================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.c-btn:hover {
  text-decoration: none;
}

.c-btn:disabled,
.c-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variantlar */
.c-btn--primary {
  background: var(--accent-bg);
  color: var(--text-inverse);
}
.c-btn--primary:hover { background: var(--accent-bg-hover); }
.c-btn--primary:active { background: var(--accent-bg-active); }

.c-btn--secondary {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-strong);
}
.c-btn--secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }

.c-btn--ghost {
  background: transparent;
  color: var(--text-default);
}
.c-btn--ghost:hover { background: var(--bg-hover); }

.c-btn--danger {
  background: var(--danger-solid);
  color: var(--text-inverse);
}
.c-btn--danger:hover { filter: brightness(0.92); }

/* O'lchamlar */
.c-btn--sm { height: 28px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.c-btn--lg { height: 44px; padding: 0 var(--space-6); font-size: var(--text-md); }

.c-btn--block { width: 100%; }

/* Faqat ikonkali tugma */
.c-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.c-btn-icon:hover { background: var(--bg-hover); color: var(--text-strong); }
.c-btn-icon--sm { width: 28px; height: 28px; }

/* ==========================================================================
   2. Formalar
   ========================================================================== */
.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.c-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}

.c-hint {
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.c-error {
  font-size: var(--text-2xs);
  color: var(--danger-text);
}

.c-input,
.c-select,
.c-textarea {
  width: 100%;
  padding: 0 var(--space-3);
  height: 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.c-textarea {
  height: auto;
  min-height: 88px;
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-snug);
  resize: vertical;
}

/* O'ngdan-chapga (arab) matn uchun (#218): yo'nalish matnning o'zidan (`dir="auto"`). Faqat matn
   elementiga — yonida lotincha yorliq (`A)`, daraja) bo'lgan konteynerga emas. */
.u-bidi { unicode-bidi: plaintext; text-align: start; }

/* Katta matn maydoni (ommaviy yuklash, #217): karta balandligi qancha bo'lsa, maydon shuncha
   cho'ziladi (yonidagi karta bilan bir qatorda turganda pastgacha). Eng kami 24rem;
   foydalanuvchi baribir o'zi ham cho'za oladi.
   Ishlatish: `c-card--fill` > `form` > `c-field--grow` > `c-textarea--fill`. */
.c-card--fill {
  display: flex;
  flex-direction: column;
}
.c-card--fill > form {
  flex: 1 1 auto;
}
.c-field--grow {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.c-field--grow > .c-textarea--fill {
  flex: 1 1 auto;
  min-height: 24rem;
}

.c-input::placeholder,
.c-textarea::placeholder {
  color: var(--text-subtle);
}

.c-input:hover,
.c-select:hover,
.c-textarea:hover {
  border-color: var(--border-strong);
}

.c-input:focus,
.c-select:focus,
.c-textarea:focus {
  outline: none;
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px var(--accent-soft-bg);
}

.c-input:disabled,
.c-select:disabled,
.c-textarea:disabled {
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: not-allowed;
}

.c-input.is-invalid,
.c-select.is-invalid,
.c-textarea.is-invalid {
  border-color: var(--danger-solid);
}

.c-select {
  appearance: none;
  padding-right: var(--space-8);
  /* Ochiluvchi ko'rsatkich — token rangidan mustaqil neytral uchburchak. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--space-4) center, right var(--space-3) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Checkbox / radio */
.c-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}
.c-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-bg);
  cursor: pointer;
}

/* Chip — belgilanadigan yorliq (checkbox/radio ustida).

   ⚠️ Dizayn ko'rigida (#136) topildi: hafta kunlarini ettita jadval qatori qilib
   berish ekranni cho'zardi va "qaysi kunlar tanlangan?" degan savolga bir qarashda
   javob bermasdi. Chip qatori — bitta qator, hammasi ko'rinib turadi.

   Belgilangan holat `--accent-bg` + `--text-inverse` — birlamchi tugma bilan bir xil
   juftlik, ya'ni kontrasti allaqachon tekshirilgan. */
.c-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.c-chip {
  position: relative;
  display: inline-flex;
}
/* Haqiqiy input ko'rinmaydi, lekin **o'chirilmaydi**: klaviatura va skrinrider
   uchun o'sha-o'sha checkbox/radio bo'lib qoladi (`display:none` buni buzardi).

   ⚠️ Avval `opacity: 0` + `inset: 0` edi — chip butun maydonni qoplardi, lekin
   `opacity: 0` elementni yordamchi texnologiyalar daraxtidan chiqarib yuborardi
   (brauzer ko'rigida chiplar umuman ro'yxatga tushmadi). Endi standart "sr-only"
   qirqimi: input daraxtda qoladi, bosish esa uni o'rab turgan `<label>` orqali. */
.c-chip > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.c-chip > span {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 56px;
  height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-default);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  transition: background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.c-chip:hover > span {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.c-chip > input:checked + span {
  background: var(--accent-bg);
  border-color: var(--accent-bg);
  color: var(--text-inverse);
}
.c-chip > input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Vaqt oralig'i — "14:00 – 16:00" bitta qatorda. */
.c-timerange {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.c-timerange .c-input {
  width: auto;
  min-width: 116px;
}
.c-timerange__dash {
  color: var(--text-subtle);
}

/* Forma varag'i — tor markazlashgan ustun. Uzun forma butun ekran kengligiga
   yoyilsa ko'z qatordan qatorga sakraydi; 760px — qulay o'qish kengligi. */
.c-formsheet {
  width: min(760px, 100%);
  margin-inline: auto;
}

/* Ikkita maydon **yonma-yon** (#166). `grid grid-lg` dan farqi: ustun soni
   `auto-fit` arifmetikasiga bog'liq emas, **doim ikkita**.

   ⚠️ Nega kerak bo'ldi: panel ichida (`c-drawer` — 560px) `grid-lg` ning
   `minmax(320px, …)` sharti hech qachon bajarilmasdi va juftliklar jimgina
   bitta ustunga tushib turardi — hech qanday xato bermasdan (M-044 oilasidan).
   `grid-sm` ga o'tkazish esa keng sahifada **uch** ustun berib yuborardi.

   Telefonda bitta ustunga tushadi: 520px dan tor ekranda ikkita maydon
   o'qilmas darajada siqilib qoladi. */
.c-fieldpair {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 520px) {
  .c-fieldpair { grid-template-columns: 1fr; }
}

/* Forma bo'limi — kartochka ichidagi ingichka ajratgich (alohida kartochkalar
   o'rniga: to'rtta kartochka formani to'rtta alohida ish kabi ko'rsatardi). */
.c-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.c-fieldset + .c-fieldset {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.c-fieldset__legend {
  display: block;
  margin-bottom: var(--space-3);
  padding: 0;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Yopishqoq amal paneli — "saqlash qayerda?" degan savol tug'ilmasligi uchun
   tugma uzun formada ham doim ko'rinib turadi. */
.c-formbar {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Majburiy maydon belgisi */
.c-req {
  color: var(--danger-text);
}

/* Kirish maydoni ichida ikonka (qidiruv) */
.c-input-icon {
  position: relative;
  display: flex;
  align-items: center;
}
.c-input-icon .icon {
  position: absolute;
  left: var(--space-3);
  color: var(--text-subtle);
  pointer-events: none;
}
.c-input-icon .c-input {
  padding-left: var(--space-8);
}

/* Filtr paneli (sahifa ustidagi qator) */
.c-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  /* Ixchamlashtirildi (#168) — yuqoridagi `c-kpi` bilan bir xil mulohaza. */
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

/* Filtr qobig'i (`<details>`): telefonda yopiladi, desktopda **har doim ochiq**.
   Desktopda `summary` chizilmaydi — u yerda yig'ib qo'yadigan narsa yo'q, joy yetarli.
   `open` atributini `ui.js` boshqaradi; JS o'chiq bo'lsa filtr ochiq qoladi. */
.c-filters > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
}
.c-filters > summary::-webkit-details-marker { display: none; }
.c-filters > summary:hover {
  background: var(--bg-hover);
  color: var(--text-strong);
}
.c-filters > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.c-filters[open] > summary { margin-bottom: var(--space-2); }

@media (min-width: 601px) {
  .c-filters > summary { display: none; }
}

/* Telefonda filtr maydonlari **ikkitadan** joylashadi. Ilgari har maydon o'z
   qatorini olardi va blok ~370px bo'lib ketardi — natijada ro'yxatning o'zi
   (sahifaning butun mazmuni) birinchi ekranga umuman tushmasdi.
   Birinchi maydon — qidiruv — to'liq kenglikda qoladi: u eng ko'p ishlatiladi
   va yarim kenglikda placeholder matni kesilib ketadi. */
@media (max-width: 600px) {
  .c-filterbar > .c-field {
    flex: 1 1 calc(50% - var(--space-3));
    min-width: 0;
  }
  .c-filterbar > .c-field:first-child { flex-basis: 100%; }
}

/* ==========================================================================
   3. Sirtlar: kartochka, sahifa sarlavhasi
   ========================================================================== */
.c-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.c-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.c-card__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
/* ⚠️ Kartochka sarlavhasi **atoqli ot** bo'lganda (guruh nomi, o'quvchi F.I.Sh.)
   katta harfga aylantirilmaydi: «226-GURUH (KATTA GURUH)» o'qishga og'ir va
   uzun chiqadi — foydalanuvchi buni 9-rasmda belgiladi (#170). */
.c-card__title--name {
  font-size: var(--text-md);
  color: var(--text-strong);
  text-transform: none;
  letter-spacing: normal;
}

.c-card__body {
  padding: var(--space-5);
}

.c-card__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.c-card--flush .c-card__body { padding: 0; }

/* Butunlay bosiladigan kartochka (guruh plitasi). */
.c-card--link {
  display: block;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}
.c-card--link:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}

.c-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.c-page-header__title {
  font-size: var(--text-xl);
  color: var(--text-strong);
}

.c-page-header__sub {
  margin-top: var(--space-1);
  color: var(--text-muted);
}

/* Ixcham sahifa qatori (#168) — `c-page-header` o'rniga **takrorlanmaydigan** boshi.

   ⚠️ Muammo: sahifa nomi ikki joyda turardi — tepa panelda (`app__page-title`,
   menyudan keladi) **va** sahifa ichida `<h1>` bo'lib. Foydalanuvchi buni jonli
   ko'rikda ko'rsatdi: «O'quvchilar» so'zi ekranda ikki marta. Ikkinchisi bundan
   tashqari ~90px balandlikni yeb, ro'yxatni pastga itarardi.

   Yechim: sahifa ichida nom **yozilmaydi** (u tepada bor), faqat izoh qatori va
   amal tugmasi qoladi — bitta qatorda (namuna: LC-UP). */
.c-page-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.c-page-bar__sub {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ==========================================================================
   4. Ma'lumot: KPI, jadval, progres, badge, daraja chipi
   ========================================================================== */
.c-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  /* Raqam kartochka kengligiga qarab moslashsin (`cqi` quyida). */
  container-type: inline-size;
  /* ⚠️ Ixchamlashtirildi (#168): ilgari `space-4 space-5` edi va uchta kartochka
     ro'yxatni birinchi ekrandan pastga itarardi. Raqam baribir eng katta element
     bo'lib qolgani uchun o'qilishi yomonlashmaydi. */
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.c-kpi__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.c-kpi__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  /* Pul summasi **hech qachon** ikkiga bo'linmasin: `6 300 000` → `6 300` / `000`
     1200px atrofidagi ekranlarda (1280x800, 1366x768) shunday bo'lardi. Tor kartochkada
     shrift kichrayadi, keng kartochkada esa to'liq 2xl bo'lib qoladi. */
  white-space: nowrap;
  font-size: clamp(1.25rem, 13cqi, var(--text-2xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}

.c-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
/* O'sish chipi — oldingi teng davrga nisbatan (`+12%` / `−18%`).

   Faqat **oqim** ko'rsatkichlarida chiziladi: holat ko'rsatkichlarida (faol o'quvchi,
   qarzdor) tarix yo'q va foiz to'qib chiqarilgan bo'lardi. */
.c-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: 1.6;
  white-space: nowrap;
}
.c-trend--up { background: var(--success-bg); color: var(--success-text); }
.c-trend--down { background: var(--danger-bg); color: var(--danger-text); }
.c-trend--flat { background: var(--bg-subtle); color: var(--text-muted); }

/* Mayda grafik — kartochka tagidagi kunlik chiziq (inline SVG, tashqi JS yo'q). */
.c-spark {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: var(--space-2);
  overflow: visible;
}
.c-spark__line {
  fill: none;
  stroke: var(--accent-bg);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Polosali ro'yxat — «kurslar bo'yicha o'quvchilar» kabi kesimlar.
   Jadval emas: uch ustunli jadval telefonda siqilib ketardi, bu esa qatorlarga bo'linadi. */
.c-rank {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.c-rank__row {
  display: grid;
  /* Qiymat ustuni **mazmunga qarab** (`auto`): ilgari 3.5rem qat'iy edi va «61 nafar»
     ikki qatorga bo'linib, kartochka chetidan chiqib ketardi (foydalanuvchi, 2026-10-11). */
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.c-rank__index {
  color: var(--text-subtle);
  font-size: var(--text-2xs);
}
.c-rank__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
}
.c-rank__value {
  white-space: nowrap;
  text-align: right;
  color: var(--text-strong);
  font-weight: var(--weight-medium);
}
.c-rank__track {
  grid-column: 2 / -1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-active);
  overflow: hidden;
}
.c-rank__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent-bg);
}

/* Ochiluvchi boshqaruv — kamdan-kam kerak bo'ladigan sozlama (masalan sana oralig'i).
   `<details>` ustida: JS kerak emas va ochilganda kontentni pastga suradi. */
.c-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
}
.c-disclosure > summary::-webkit-details-marker { display: none; }
.c-disclosure > summary:hover {
  background: var(--bg-hover);
  color: var(--text-strong);
}
.c-disclosure > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ⚠️ **`c-role` uslublari #188 da olib tashlandi.** AI agentlar ekrani
   tashkiliy sxemaga aylandi va rol kartochkasi o'rnini `c-person` egalladi
   (odam shaklidagi kartochka: avatar · ism · «AI» yorlig'i). O'lik CSS
   qoldirilmadi — u keyingi dasturchini chalg'itardi. Yangi uslublar fayl
   oxirida, «AI agentlar — TASHKILIY SXEMA» blokida. */

/* Vazifa ro'yxati — kartochka ICHIDA, shuning uchun ramkasiz: ramka ichida
   ramka ko'zni chalg'itadi. Ajratish faqat chiziq bilan. */
.c-task-list {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.c-task + .c-task {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
}
.c-task__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.c-task__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}
.c-task__summary {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.c-task__meta {
  margin: var(--space-2) 0 0;
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* ── Yonma-yon tanlov (radio) va juft maydon (#183) ──────────────────────────
   Namuna: LC-UP to'lov paneli. To'lov usuli ro'yxat (`<select>`) emas,
   **ko'rinib turadigan** tanlov bo'lishi kerak: kassir uchta variantni bir
   qarashda ko'radi va bitta bosishda tanlaydi (ro'yxatda ikki bosish).

   ⚠️ `flex-wrap` shart: uchta usul tor panelga sig'masa, pastga tushadi va
   panelni gorizontal siljitmaydi. */
.c-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.c-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-default);
  cursor: pointer;
}
.c-choice input {
  accent-color: var(--accent-bg);
  cursor: pointer;
}

/* Ikki maydon yonma-yon (oy + sana). Tor ekranda ustunga tushadi —
   `minmax(0, 1fr)` maydon mazmuniga qarab cho'zilib ketmasligi uchun. */
.c-pair {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 26rem) {
  .c-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Chek namunasi (#183) — `iframe` ichida chiziladi: chek o'z CSS'i bilan
   keladi (58mm qog'oz) va sahifaga to'g'ridan-to'g'ri qo'yilsa dashboard
   uslublarini buzardi. Balandlik qat'iy: chek qisqa hujjat, ichida siljish
   kerak bo'lsa `iframe` o'zi beradi. */
.c-receipt-preview {
  display: block;
  width: 100%;
  height: 28rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* Chek — to'lov qabul qilingandan keyin (#211). `iframe`: chekni alohida
   hujjat sifatida chop etish uchun. Balandlikni skript chekka moslaydi;
   bu — skript ishlamasa zaxira. */
.c-receipt-frame {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: 30rem;
  margin: 0 auto;
  border: 0;
  background: #fff;
}

/* Davr tanlash — segmentli tugmalar qatori (Bugun · Hafta · Oy · Dan–gacha). */
.c-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}
.c-segmented__item {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.c-segmented__item:hover {
  background: var(--bg-hover);
  color: var(--text-strong);
  text-decoration: none;
}
.c-segmented__item.is-active {
  background: var(--accent-bg);
  color: var(--text-inverse);
}
.c-segmented__item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Bosiladigan ko'rsatkich — bosh sahifadagi «e'tibor» kartochkalari.

   Nega havola: son o'z-o'zicha ish emas. «Telefonsiz xodim 5 ta» bosilganda aynan
   o'sha beshtasining ro'yxati ochilishi kerak, aks holda xodim yana qo'lda qidiradi. */
.c-kpi--link {
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}
.c-kpi--link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
.c-kpi--link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Chap chekkadagi rangli chiziq — shoshilinchlik darajasi. */
.c-kpi--warning { border-left: 3px solid var(--warning-solid); }
.c-kpi--info { border-left: 3px solid var(--info-solid); }

.c-kpi__delta--up { color: var(--success-text); }
.c-kpi__delta--down { color: var(--danger-text); }

/* Jadval — keng bo'lsa o'z ichida gorizontal siljiydi (sahifa siljimaydi). */
.c-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.c-table th,
.c-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.c-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-2xs);
  white-space: nowrap;
}

.c-table tbody tr:hover {
  background: var(--bg-hover);
}

.c-table tbody tr:last-child td {
  border-bottom: 0;
}

.c-table td.num,
.c-table th.num {
  text-align: right;
}

/* Issiqlik xaritasi — guruh × daraja matritsasi. Katak foni MA'LUMOTDAN keladi
   (`rgba(...)`, ulushga mutanosib), shuning uchun shablonda `style="background: ..."`. */
.c-heatmap {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.c-heatmap th,
.c-heatmap td {
  border: 1px solid var(--border-subtle);
  padding: var(--space-2);
  text-align: center;
}
.c-heatmap thead th {
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.c-heatmap .c-heatmap__label {
  text-align: left;
  white-space: nowrap;
}
.c-heatmap__cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}
.c-heatmap__share {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}
.c-heatmap__total td {
  background: var(--bg-subtle);
  font-weight: var(--weight-bold);
}

/* Telefonda **hamma daraja ustuni ekranga sig'sin**. Ilgari jadval 520px dan tor
   bo'lolmasdi va gorizontal skrollda 🟠/🔴 ustunlari o'ngda qolib ketardi — ya'ni
   sahifaning eng muhim ma'lumoti (xavf ostidagi o'quvchi) ko'rinmasdi.
   Sarlavhadagi daraja **nomi** `sr-only` ga o'tadi (emoji qoladi), guruh nomi
   esa qatorga sig'masa ko'chadi. */
@media (max-width: 600px) {
  .c-heatmap { min-width: 0; }
  .c-heatmap th,
  .c-heatmap td { padding: var(--space-1); }
  .c-heatmap .c-heatmap__label { white-space: normal; }
  .c-heatmap__tier-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* --- Davomat panjarasi (G1, #164) ---------------------------------------
   O'quvchilar × dars sanalari. Chap ustun **yopishqoq**: o'ngga skroll
   qilinganda ham kimning qatori ekani ko'rinib turishi kerak — aks holda
   uzun ro'yxatda noto'g'ri katak bosiladi.

   Rang **ma'lumot**: keldi/kelmadi/sababli — holat tokenlari (success/danger/
   warning), daraja ranglari bilan aralashtirilmaydi (dizayn tizimi qoidasi). */
.c-att-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-xs);
}
.c-att-grid th,
.c-att-grid td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
  white-space: nowrap;
}
/* ⚠️ Selektor **ataylab** ikki qismli: `.c-att-grid th, td` (element + klass)
   og'irroq va oddiy `.c-att-grid__name` ni yengib qo'yardi. Natijada `text-align:
   left` yozilgan turardi, lekin ism ustuni markazda chizilardi — foydalanuvchi
   buni 9-rasmda qizil chiziq bilan belgiladi (#170). */
.c-att-grid th.c-att-grid__name,
.c-att-grid td.c-att-grid__name {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 10rem;
  background: var(--bg-surface);
  text-align: left;
  font-weight: var(--weight-medium);
}
/* Tartib raqami — ro'yxatdagi raqam bilan bir xil (namuna: LC-UP 8-rasm). */
.c-att-grid__num {
  display: inline-block;
  min-width: 1.5rem;
  color: var(--text-subtle);
  font-weight: var(--weight-regular);
}
.c-att-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
}
.c-att-grid thead .c-att-grid__name { z-index: 3; }
.c-att-grid__day.is-canceled { text-decoration: line-through; }
.c-att-grid__daybtn {
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.c-att-grid__daybtn:hover { background: var(--bg-hover); color: var(--text-strong); }
.c-att-grid__daybtn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Katak: doira. Bo'sh — faqat kontur, ya'ni «hali belgilanmagan» ko'rinadi.
   ⚠️ Bo'sh va «kelmadi» **boshqa-boshqa**: birinchisi ustoz belgilamagani,
   ikkinchisi bolaning kelmagani. Ular bir xil ko'rinsa hisobot yolg'on bo'ladi. */
/* ⚠️ O'lcham **barmoqqa** qarab tanlangan (#184, foydalanuvchi talabi: «yo'qlama
   qilish uchun doirani ham biroz kattaroq qilish kerak»). Ilgari 1.75rem (28px)
   edi — sichqoncha uchun yetarli, barmoq uchun past. Telefonda 2.75rem (44px)
   ga chiqadi — bu teginish nishoni uchun tavsiya etilgan eng kichik o'lcham.
   Panjara kengayadi, lekin u `c-table-wrap` ichida **o'z ichida** siljiydi. */
.c-att-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
}
/* ⚠️ **M-079:** bu blok ataylab shu yerda — ta'rifdan **keyin**. Ilgari u
   fayl boshidagi umumiy `@media (max-width: 900px)` ichida edi va pastroqda
   turgan asosiy `.c-att-cell` (bir xil og'irlik) uni **bosib qo'yardi**:
   telefonda katak 44px emas, 32px bo'lib qolaverdi. `TP-5` (#184) yozilganidan
   beri qoida **o'lik** edi va buni faqat brauzerda o'lchash ko'rsatdi (#187). */
@media (max-width: 900px) {
  /* Yo'qlama katagi telefonda **44px** — bir tegishda to'g'ri katak bosilsin
     (#184). Ustoz darsni olib borayotib, tez va xato qilmay belgilashi kerak. */
  .c-att-cell {
    width: 2.75rem;
    height: 2.75rem;
  }
}

.c-att-cell:hover { border-color: var(--accent-bg); }
.c-att-cell:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.c-att-cell--present {
  border-color: var(--success-solid);
  background: var(--success-solid);
  color: var(--text-inverse);
}
.c-att-cell--absent {
  border-color: var(--danger-solid);
  background: var(--danger-solid);
  color: var(--text-inverse);
}
.c-att-cell--excused {
  border-color: var(--warning-solid);
  background: var(--warning-solid);
  color: var(--text-inverse);
}
.c-att-cell--late {
  border-color: var(--info-solid);
  background: var(--info-solid);
  color: var(--text-inverse);
}
.c-att-cell--canceled {
  border-style: dashed;
  color: var(--text-muted);
  cursor: default;
}
/* Yopiq katak (kelajakdagi dars yoki 24 soat o'tgan) — belgisi ko'rinadi, lekin bosilmaydi. */
.c-att-cell--locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.c-att-grid__day.is-locked {
  opacity: 0.6;
}

/* Progres-bar */
.c-progress {
  height: 8px;
  width: 100%;
  background: var(--bg-active);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.c-progress__bar {
  height: 100%;
  background: var(--accent-bg);
  border-radius: var(--radius-pill);
}
.c-progress--sm { height: 6px; }
.c-progress__bar--success { background: var(--success-solid); }
.c-progress__bar--warning { background: var(--warning-solid); }
.c-progress__bar--danger { background: var(--danger-solid); }

/* Nomlangan chiziq (voronka bosqichi, reyting qatori): nom + polosa + son.
   To'ldirish rangi MA'LUMOTGA bog'liq bo'lsa (bosqich rangi) shablonda `style="background: ..."`
   bilan beriladi — shuning uchun bu yerda faqat neytral standart rang. */
.c-meter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.c-meter + .c-meter {
  margin-top: var(--space-2);
}
.c-meter__label {
  flex: none;
  width: 140px;
  font-size: var(--text-xs);
}
.c-meter__track {
  flex: 1;
  height: 20px;
  background: var(--bg-active);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.c-meter__fill {
  height: 100%;
  min-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--accent-bg);
}
.c-meter__value {
  flex: none;
  width: 44px;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* Badge / pill */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-default);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  white-space: nowrap;
}
.c-badge--success { background: var(--success-bg); color: var(--success-text); }
.c-badge--warning { background: var(--warning-bg); color: var(--warning-text); }
.c-badge--danger { background: var(--danger-bg); color: var(--danger-text); }
.c-badge--info { background: var(--info-bg); color: var(--info-text); }
.c-badge--accent { background: var(--accent-soft-bg); color: var(--accent-soft-text); }
/* `--neutral` — standart badge bilan bir xil; shablonda tone o'zgaruvchisi bo'lganda ishlatiladi. */
.c-badge--neutral { background: var(--bg-subtle); color: var(--text-default); }
/* `--solid` — foni MA'LUMOTDAN keladigan badge (agent rangi kabi): fonni shablon
   `style="background: ..."` bilan beradi, bu yerda faqat kontrast matn rangi. */
.c-badge--solid { color: #fff; }

/* Daraja chipi — MA'LUMOT rangi (UI holati ranglaridan alohida) */
.c-tier {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.c-tier::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* Nuqta — MA'LUMOT rangi (asl daraja rangi); matn esa o'qilishi uchun to'qroq. */
  background: var(--tier-dot);
}
.c-tier--green { background: var(--tier-green-soft); color: var(--tier-green-text); --tier-dot: var(--tier-green); }
.c-tier--yellow { background: var(--tier-yellow-soft); color: var(--tier-yellow-text); --tier-dot: var(--tier-yellow); }
.c-tier--orange { background: var(--tier-orange-soft); color: var(--tier-orange-text); --tier-dot: var(--tier-orange); }
.c-tier--red { background: var(--tier-red-soft); color: var(--tier-red-text); --tier-dot: var(--tier-red); }

/* Ulush polosasi — bir chiziqda bir necha segment (daraja taqsimoti).
   Segment rangi/kengligi MA'LUMOTDAN keladi → shablonda inline `style`. */
.c-stacked {
  display: flex;
  height: 24px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-active);
}
.c-stacked--sm { height: 14px; }
.c-stacked > span { height: 100%; }

/* Diagramma izohi (rang namunasi + matn). */
.c-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.c-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.c-legend__sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

/* Rangli chekkali ro'yxat elementi (o'quvchi kartochkasi kabi). Chekka rangi —
   MA'LUMOT (daraja rangi), shablonda `style="border-left-color: ..."`. */
.c-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* Rangli nuqta — jadval katagida daraja belgisi (rang ma'lumotdan). */
.c-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: var(--space-2);
  border-radius: 50%;
  vertical-align: middle;
}
/* Qarzdorlik nuqtasi (#170): qizil — qarzi bor, yashil — yo'q. Ma'no `title` da
   ham yozilgan: rang yolg'iz o'zi yetarli belgi emas. */
.c-dot--danger { background: var(--danger-solid); }
.c-dot--warning { background: var(--warning-solid); }
.c-dot--info { background: var(--info-solid); }
.c-dot--ok { background: var(--success-solid); }

/* Afsona — ro'yxat tepasidagi rang izohi (#170, namuna: LC-UP). */
.c-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: 0 var(--space-5) var(--space-2);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.c-legend__item {
  display: inline-flex;
  align-items: center;
}

/* Avatar (bosh harflar) */
.c-avatar--img {
  object-fit: cover;
}
.c-avatar--lg {
  width: 72px;
  height: 72px;
  font-size: var(--text-lg);
}
.c-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft-bg);
  color: var(--accent-soft-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}


/* Taxta (kanban) — bosqich ustunlari, ustun ichida kartochkalar.

   Ustunlar **o'z konteyneri ichida** yon tomonga suriladi (`overflow-x`), sahifa emas:
   loyiha qoidasi — sahifa tanasi hech qachon gorizontal siljimasin (M-036). */
.c-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x proximity;
}

.c-board__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  scroll-snap-align: start;
}

/* Tepadagi rangli chiziq — bosqichning MA'LUMOT rangi; shablon `--stage-color` beradi. */
.c-board__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 3px solid var(--stage-color, var(--border-default));
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.c-board__count { margin-left: auto; }

.c-board__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  /* Uzun ustun butun sahifani cho'zmasin — ustun ichida suriladi. */
  max-height: 60vh;
  overflow-y: auto;
}

.c-board__card {
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
}
.c-board__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}
.c-board__empty {
  padding: var(--space-4);
  color: var(--text-subtle);
  font-size: var(--text-2xs);
  text-align: center;
}

/* Bekor qilingan to'lov qatori (FIN-1): chizilgan va xira — o'chirilmagan, lekin hisobda yo'q. */
.c-table tr.is-struck td { color: var(--text-subtle); text-decoration: line-through; }
.c-table tr.is-struck td .c-badge,
.c-table tr.is-struck td .c-btn-icon { text-decoration: none; }

/* Bo'lim kartochkasi (L-2, ADR-163): «Nemis tili yanvar 2026 (3)». `<details>` — JS'siz ochiladi;
   ichida lid qatorlari (`c-board__lead`, sudrab o'tkaziladi) va bo'lim amallari. */
.c-board__sect {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
}
.c-board__sect-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}
.c-board__sect-head::-webkit-details-marker { display: none; }
.c-board__sect-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.c-board__chevron { display: inline-flex; color: var(--text-muted); transition: transform 0.15s; }
.c-board__sect[open] > .c-board__sect-head .c-board__chevron,
.c-board__sect.is-open > .c-board__sect-head .c-board__chevron { transform: rotate(180deg); }
.c-board__sect-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
}
.c-board__lead {
  /* Ixcham: 25 ta lid ham ekranga sig'sin (foydalanuvchi, 2026-10-25) — ism + «···» bir qatorda. */
  padding: var(--space-2) var(--space-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: grab;
}
.c-board__lead.is-dragging { opacity: 0.45; }
.c-board__lead-top { display: flex; align-items: center; gap: var(--space-2); }
.c-board__lead-top .c-board__title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.c-board__note { white-space: pre-line; overflow-wrap: anywhere; }
.c-board__body.is-over { outline: 2px dashed var(--accent-bg); outline-offset: -4px; }
.c-board__sect-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

/* Kartochka amallari — `<details>`, ochilganda kartochkani cho'zadi.
   `c-dropdown` bo'lmasligi shart: ustun `overflow-y: auto`, mutlaq menyu qirqilardi. */
.c-board__more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  cursor: pointer;
  list-style: none;
}
.c-board__more > summary::-webkit-details-marker { display: none; }
.c-board__more > summary:hover { color: var(--text-strong); }

/* ==========================================================================
   5. Holatlar: bo'sh, yuklanmoqda (skeleton), ogohlantirish
   ========================================================================== */
.c-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--text-muted);
}
.c-empty .icon {
  width: 28px;
  height: 28px;
  color: var(--text-subtle);
}
.c-empty__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.c-skeleton {
  height: 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bg-subtle), var(--bg-active), var(--bg-subtle));
  background-size: 200% 100%;
  animation: c-skeleton-shimmer 1.4s var(--ease) infinite;
}
.c-skeleton--title { height: 20px; width: 40%; }
.c-skeleton--line { width: 100%; }
.c-skeleton--short { width: 60%; }

@keyframes c-skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.c-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent-bg);
  border-radius: 50%;
  animation: c-spin 0.7s linear infinite;
}

@keyframes c-spin {
  to { transform: rotate(360deg); }
}

.c-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.c-alert .icon { margin-top: 2px; }
.c-alert--info { background: var(--info-bg); color: var(--info-text); border-color: var(--info-solid); }
.c-alert--success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-solid); }
.c-alert--warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-solid); }
.c-alert--danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-solid); }

/* ==========================================================================
   6. Fikr-mulohaza: toast, modal
   ========================================================================== */
.c-toasts {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(360px, calc(100vw - var(--space-8)));
}

.c-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  font-size: var(--text-sm);
  animation: c-toast-in var(--duration-base) var(--ease);
}
.c-toast--success { border-left-color: var(--success-solid); }
.c-toast--warning { border-left-color: var(--warning-solid); }
.c-toast--danger { border-left-color: var(--danger-solid); }
.c-toast__title { font-weight: var(--weight-semibold); color: var(--text-strong); }
.c-toast__body { color: var(--text-muted); font-size: var(--text-xs); }

@keyframes c-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.c-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(14, 19, 27, 0.5);
}

.c-modal {
  width: min(520px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.c-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.c-modal__title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); }
.c-modal__body { padding: var(--space-5); }
.c-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}


/* Yon panel (drawer) — o'ngdan ochiladigan forma (#149).

   Nega modal emas: foydalanuvchi namunasida (LC-up) yangi o'quvchi **ro'yxat ustida**
   kiritiladi — orqa fonda kimlar borligi, telefoni va guruhi ko'rinib turadi. Alohida
   sahifa esa butun ekranni band qilardi va kontekstni yo'qotardi. */
.c-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  justify-content: flex-end;
  background: rgba(14, 19, 27, 0.45);
}

.c-drawer {
  display: flex;
  flex-direction: column;
  /* ⚠️ 560 → 480 (#168): panel ekranning katta qismini egallab qolardi va
     orqadagi ro'yxat ko'rinmasdi — holbuki panel aynan ro'yxat ustida ochiladi.
     `c-fieldpair` ichkarida ~2×200px bo'ladi, ya'ni juftliklar baribir sig'adi. */
  width: min(480px, 100%);
  max-height: 100dvh;
  background: var(--bg-surface);
  box-shadow: var(--shadow-3);
  animation: c-drawer-in var(--duration-base) var(--ease);
}
@keyframes c-drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.c-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  /* Ixchamlashtirildi (#168) — sarlavha ostidagi bo'sh maydon ko'zga tashlanardi. */
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.c-drawer__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
/* Tanasi — **yagona** siljiydigan qism: sarlavha va tugmalar joyida qoladi. */
.c-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-4);
}
.c-drawer__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

/* Qator amallari menyusi — jadvaldagi uch nuqta (#149).
   `c-dropdown__menu` o'ngga tekislanadi: oxirgi ustunda chapga ochilsa chetga chiqardi. */
.c-rowmenu {
  position: relative;
  display: inline-flex;
}
.c-rowmenu .c-dropdown__menu {
  right: 0;
  left: auto;
}

/* Tasdiq ro'yxati — modal ichidagi "kalit → qiymat" qatorlari.
   Jadval emas: uch ustunli jadval telefonda siqilib ketardi. */
.c-summary {
  display: flex;
  flex-direction: column;
}
.c-summary__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.c-summary__row + .c-summary__row {
  border-top: 1px solid var(--border-subtle);
}
.c-summary__key {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.c-summary__val {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}

/* ==========================================================================
   7. Navigatsiya: yorliqlar (tabs), sahifalash, ochiluvchi menyu
   ========================================================================== */
.c-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
  /* Ko'p yorliq (Moliya — 8 ta) telefonda sahifani emas, o'zini siljitadi. */
  overflow-x: auto;
  scrollbar-width: thin;
}
.c-tab {
  flex-shrink: 0;
  white-space: nowrap;
  padding: var(--space-2) var(--space-4);
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
}
.c-tab:hover { color: var(--text-strong); text-decoration: none; }
.c-tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent-bg); }

.c-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.c-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-default);
  font-size: var(--text-xs);
}
.c-pagination__item:hover { background: var(--bg-hover); text-decoration: none; }
.c-pagination__item.is-active {
  background: var(--accent-bg);
  color: var(--text-inverse);
  font-weight: var(--weight-semibold);
}

.c-dropdown {
  position: relative;
  display: inline-block;
}
.c-dropdown__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-sticky);
  min-width: 200px;
  padding: var(--space-1);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}
.c-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-default);
  font-size: var(--text-sm);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.c-dropdown__item:hover { background: var(--bg-hover); text-decoration: none; }
.c-dropdown__item--danger { color: var(--danger-text); }
/* O'chiq band — bosilmaydi, lekin **ko'rinadi**: xodim imkoniyat borligini bilsin
   va nega hozir ishlamasligini o'sha joyda o'qisin. */
.c-dropdown__item.is-disabled {
  color: var(--text-subtle);
  cursor: not-allowed;
}
.c-dropdown__item.is-disabled:hover { background: transparent; }

/* Menyu boshidagi foydalanuvchi bloki (#168) — kim kirgani ko'rinib tursin.
   Bosilmaydi: bu ma'lumot, tanlov emas. */
.c-userbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
}
.c-userbox__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--text-sm);
}

/* Menyu boshidagi **sarlavha** — bosilmaydi (ADR-092, namuna: LC-UP).
   Havola emas, `<span>`: «Filialni tanlang» — ko'rsatma, tanlov emas. Shu sabab
   u `:hover` da yonmaydi va klaviatura bilan ham nishonga olinmaydi. */
.c-dropdown__label {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--text-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: default;
}

/* --- Qidiriladigan tanlov (combobox, D22) --------------------------------
   `c-dropdown` dan farqi: menyu maydonning BUTUN kengligini egallaydi (ichida ikki
   qatorli matn bor) va chapga tekislanadi — o'qish maydondagi matndan davom etadi. */
.c-combobox {
  position: relative;
}
.c-combobox__menu {
  position: absolute;
  z-index: var(--z-sticky);
  top: calc(100% + var(--space-1));
  right: 0;
  left: 0;
  /* Ro'yxat uzun bo'lsa ham sahifani cho'zmaydi — ichida aylantiriladi. */
  max-height: 17rem;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}
/* Pastda joy qolmasa ro'yxat tepaga ochiladi (`combobox.js` → `fit()`). */
.c-combobox__menu.is-up {
  top: auto;
  bottom: calc(100% + var(--space-1));
}
.c-combobox__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  cursor: pointer;
}
.c-combobox__item:hover,
.c-combobox__item.is-active { background: var(--bg-hover); }
.c-combobox__text {
  flex: 1;
  /* `min-width: 0` bo'lmasa uzun nom nishonni menyudan tashqariga itarib yuboradi. */
  min-width: 0;
}
.c-combobox__name {
  display: block;
  color: var(--text-default);
  font-size: var(--text-sm);
}
.c-combobox__sub {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
}
/* Terilgan harflar — rang bilan emas, FON bilan ajratiladi: qorong'i rejimda ham
   kontrast saqlanadi va nom rangi o'zgarmaydi. */
.c-combobox__name mark,
.c-combobox__sub mark {
  background: var(--accent-soft-bg);
  color: var(--accent-soft-text);
  font-weight: var(--weight-semibold);
}
.c-combobox__empty {
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* --- Ish maydoni: chapda kartochka, o'ngda bo'limlar (D25) -----------------
   Guruh sahifasining naqshi: chap ustun **tor va qat'iy** (guruh ma'lumoti va
   o'quvchilar ro'yxati), o'ng ustun qolgan joyni egallaydi.

   `minmax(0, 1fr)` — ataylab: oddiy `1fr` da ichkaridagi keng jadval ustunni
   konteynerdan tashqariga itarib yuboradi (`min-width: auto` standart qiymati). */
.c-workspace {
  display: grid;
  /* ⚠️ 340px da o'quvchi ro'yxatidagi ism 32px ga siqilib qolardi (#169,
     brauzer o'lchovi bilan topildi). Ism — ro'yxatning butun mazmuni. */
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* ==========================================================================
   8. Mobil moslashuv
   ========================================================================== */
@media (max-width: 960px) {
  /* Tor ekranda ustunlar ustma-ust: 340px + jadval sig'maydi. */
  .c-workspace { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .c-card__body,
  .c-card__header { padding: var(--space-4); }

  .c-page-header { margin-bottom: var(--space-4); }

  .c-meter__label { width: 96px; }

  .c-toasts {
    right: var(--space-2);
    left: var(--space-2);
    bottom: var(--space-2);
    width: auto;
  }

  /* Jadval -> kartochka: har katak `data-label` bilan o'z sarlavhasini oladi.
     Shablonda `<td data-label="Ism">` yozilsa, mobil ko'rinish avtomatik. */
  .c-table--cards thead { display: none; }
  .c-table--cards tbody tr {
    display: block;
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
  }
  .c-table--cards tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px dashed var(--border-subtle);
    text-align: right;
  }
  .c-table--cards tbody td:last-child { border-bottom: 0; }
  .c-table--cards tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-weight: var(--weight-medium);
    text-align: left;
    /* `.num` katagida shrift monoshriftga o'tadi va yorliq ham undan meros oladi —
       telefonda «Narx (so'm)» qolgan yorliqlardan farq qilib turardi. Yorliq —
       matn, son emas. */
    font-family: var(--font-sans);
  }
}

/* --- Kirish sahifasi (D6) -------------------------------------------------
   App shell'siz yagona ekran: kirmagan foydalanuvchiga ko'rsatadigan navigatsiya
   yo'q. Tokenlar o'shalar — kirgandan keyin ko'rinish uzilib qolmaydi. */
.c-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-5);
  background: var(--bg-app);
}

.c-auth__card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.c-auth__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--accent-text);
}

.c-auth__title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}

.c-auth__lead {
  margin: calc(var(--space-3) * -1) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.c-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.c-auth__submit {
  width: 100%;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Parol maydoni + «ko'rsatish» tugmasi (kirish sahifasi va xodim formasi, namuna: LC-UP). */
.c-pwfield {
  position: relative;
}
.c-pwfield .c-input {
  padding-right: calc(var(--space-6) + var(--space-2));
}
.c-pwfield__eye {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.c-pwfield__eye:hover {
  color: var(--text-strong);
}
.c-pwfield__eye-off,
.c-pwfield.is-shown .c-pwfield__eye-on {
  display: none;
}
.c-pwfield.is-shown .c-pwfield__eye-off {
  display: inline-block;
}

/* Matn ko'rinishidagi tugma (masalan «Avtomatik parol»). */
.c-linkbtn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-text);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Rasm tashlash maydoni (namuna: LC-UP «Faylni bu yerga olib keling yoki bosing»). */
.c-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 132px;
  padding: var(--space-4);
  border: 2px dashed var(--border-strong, var(--border-subtle));
  border-radius: var(--radius-md);
  background: var(--bg-subtle, transparent);
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
}
.c-dropzone:hover,
.c-dropzone.is-over {
  border-color: var(--accent-text);
  color: var(--text-strong);
}
.c-dropzone__preview {
  max-width: 96px;
  max-height: 96px;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.c-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.c-auth__note {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* --- Bo'lim sarlavhasi ---------------------------------------------------
   Sahifa ichidagi mantiqiy guruh boshi (sahifa sarlavhasi emas — u `c-page-header`).
   Chapda nom, o'ngda qisqa meta; tor ekranda ostma-ost tushadi. */
.c-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.c-section-head__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  color: var(--text-strong);
}

.c-section-head__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --- Agent kartochkasi ---------------------------------------------------
   AI agentlar sahifasi (A0.4). Kartochka **ta'rifni** ko'rsatadi: nima qiladi,
   qanday avtonomiyada, kim tasdiqlaydi. Holat rangi `c-badge` orqali keladi —
   bu yerda xom rang yozilmaydi (D0 qoidasi). */
.c-agent {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.c-agent__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.c-agent__name {
  font-size: var(--text-md);
  color: var(--text-strong);
}

.c-agent__summary {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.c-agent__meta {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}

.c-agent__meta > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.c-agent__meta dt {
  min-width: 9.5rem;
  color: var(--text-muted);
}

.c-agent__meta dd {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-default);
}

/* --- Sahifa oxiridagi izoh ---------------------------------------------- */
.c-note {
  margin-top: var(--space-6);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ==========================================================================
   Dars jadvali — xona × vaqt panjarasi (#168)
   ========================================================================== */

/* Havola-chip: `c-chip` checkbox ustida ishlaydi, bu esa oddiy `<a>` (kun tablari). */
.c-chip--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-default);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}
.c-chip--link:hover { border-color: var(--accent-bg); text-decoration: none; }
.c-chip--link.is-active {
  background: var(--accent-bg);
  border-color: var(--accent-bg);
  color: var(--text-inverse);
}

/* Panjara. ⚠️ Gorizontal siljish **jadvalning o'zida** (`c-table-wrap`) —
   32 ta ustun hech qanday ekranga sig'maydi va sahifa siljishi mumkin emas. */
.c-timetable {
  border-collapse: collapse;
  /* Ustunlar teng bo'lsin: `auto` da uzun guruh nomi ustunni cho'zib yuborardi. */
  table-layout: fixed;
  min-width: 100%;
}
.c-timetable th,
.c-timetable td {
  border: 1px solid var(--border-subtle);
  vertical-align: top;
}

/* Xona ustuni — chapda **yopishib** turadi: 32 ta ustunni siljitganda
   «bu qaysi xona?» degan savol tug'ilmasin. */
.c-timetable__room {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 150px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: left;
}

.c-timetable__time {
  width: 64px;
  padding: var(--space-2) var(--space-1);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.c-timetable__slot { padding: 2px; }

/* Dars kartochkasi. Katak `colspan` bilan cho'zilgani uchun kenglik o'zi keladi. */
.c-timetable__lesson {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--accent-soft-bg);
  border-left: 3px solid var(--accent-bg);
  color: var(--text-strong);
  font-size: var(--text-2xs);
}
.c-timetable__lesson:hover { text-decoration: none; filter: brightness(0.97); }

/* Kichik input — tepa paneldagi qidiruv uchun (panel balandligi oshmasin). */
.c-input--sm { height: 32px; font-size: var(--text-xs); }

/* ==========================================================================
   Umumiy qidiruv natijalari (#168)
   ========================================================================== */
.c-searchlist { list-style: none; margin: 0; padding: 0; }
.c-searchlist > li + li { border-top: 1px solid var(--border-subtle); }

.c-searchlist__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-default);
}
.c-searchlist__item:hover { background: var(--bg-hover); text-decoration: none; }

.c-searchlist__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Guruh kartochkasi — ixcham faktlar (#169, namuna: LC-UP 5-rasm)

   `c-summary` dan farqi: u kalit bilan qiymatni ikki chetga **ajratadi**
   (`space-between`), ya'ni har fakt butun qatorni egallaydi. Guruh ma'lumoti
   esa o'nta qatordan iborat — namunada ular «Kalit: qiymat» bo'lib yonma-yon
   va zich turadi, butun kartochka bitta nigohga sig'adi.
   -------------------------------------------------------------------------- */
.c-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.c-facts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.c-facts__key {
  color: var(--text-muted);
}
.c-facts__key::after {
  content: ":";
}
.c-facts__val {
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   O'quvchilar ro'yxati — raqamlangan qatorlar (#169)

   Namunadagi tartib raqami bekorga emas: xodim telefonda «o'n ettinchi bola»
   deb aytadi va ro'yxatdan shuni topadi. `c-summary` da raqam uchun joy yo'q
   edi — ism va telefon ikki chetga tortilardi.
   -------------------------------------------------------------------------- */
.c-roster {
  display: flex;
  flex-direction: column;
}
/* ⚠️ **Bitta qator — o'ralmaydi** (#184, foydalanuvchi talabi).
   `#169` da teskari qaror qabul qilingan edi: `flex-wrap: wrap` bilan joy
   yetmasa telefon pastki qatorga tushardi, ism esa hech qachon qisqarmasdi.
   Foydalanuvchi telefonda ko'rib, buni **noto'g'ri** dedi: «har qanday holatda
   ham tel raqam pastga tushib ketmasin».
   Yangi kelishuv teskari: **telefon qatorda qoladi, uzun ism qisqaradi**
   (`.c-roster__name > a` da `ellipsis` allaqachon bor). */
.c-roster__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}
.c-roster__row + .c-roster__row {
  border-top: 1px solid var(--border-subtle);
}
.c-roster__num {
  flex: 0 0 1.5rem;
  font-size: var(--text-2xs);
  color: var(--text-subtle);
  text-align: right;
}
.c-roster__name {
  display: inline-flex;
  /* ⚠️ Asos **`auto`**, `12rem` emas (#170, o'lchab topildi): qat'iy asos
     420px qatorda ham telefonni pastki qatorga itarib yuborardi. `auto` bilan
     ism o'z kengligini oladi va telefon yoniga sig'adi — foydalanuvchi talabi
     aynan shu edi («tel raqam bir qatorda»). Uzun ism bo'lsa — o'raladi. */
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-2);
  /* ⚠️ `min-width` **kichik** (#184): telefon qatorda qolishi uchun ism
     qisqara olishi kerak. 6rem bo'lganda tor telefonda raqam chetga chiqib
     ketardi. 3.5rem — ismdan kamida bir necha harf doim ko'rinadi. */
  min-width: 3.5rem;
}
.c-roster__name > a {
  /* ⚠️ `min-width: 0` bo'lmasa flex elementi qisqarmaydi — natijada yonidagi
     holat yorlig'i ismni 32px gacha siqib qo'yadi (o'lchab topilgan, #169). */
  flex: 1 1 auto;
  min-width: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Holat yorlig'i ismdan joy tortib olmasin: u qo'shimcha ma'lumot, asosiysi emas. */
.c-roster__name > .c-badge {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-roster__side {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* ⚠️ `flex: 0 0 auto` — telefon **qisqarmaydi va o'ralmaydi** (#184).
     Qator tor bo'lsa ism qisqaradi; raqam esa to'liq o'qilishi kerak, chunki
     xodim uni ko'chirib yoki terib ishlatadi. */
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: auto;
  padding-left: var(--space-3);
  /* ⚠️ Ism bilan **bir xil kattalikda** (foydalanuvchi talabi, #170): telefon
     ham o'qiladigan ma'lumot, izoh emas. Rangi bilan ajralib turadi. */
  font-size: var(--text-sm);
  color: var(--text-muted);
}
/* ⚠️ Chizilgan ism — namunadagi arxiv ko'rinishi. Rang bilan birga ishlatiladi:
   faqat chiziq rangni ko'rmaydiganlar uchun yetarli belgi emas. */
.c-roster__row--archived .c-roster__name > a {
  color: var(--text-subtle);
  text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   Davomat katagi — bosilganda to'rtta tanlov (#170, namuna: LC-UP 7-rasm)

   ⚠️ Menyu **katakning ustida** suzadi (`position: absolute`), jadval
   oqimidan tashqarida: aks holda u ustunni kengaytirib, butun panjarani
   siljitib yuborardi.
   -------------------------------------------------------------------------- */
.c-att-pick {
  position: relative;
  display: inline-flex;
}
.c-att-pick__menu {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--z-sticky);
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-raised);
  box-shadow: var(--shadow-2);
}
/* Hozirgi holat — qayta bosilsa tozalanadi, shuning uchun ajratib ko'rsatiladi. */
.c-att-pick__menu .is-active {
  outline: 2px solid var(--border-accent);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Qidiruv maydoni ostidagi jonli ro'yxat (#170, namuna: LC-UP 3-rasm)

   ⚠️ `position: absolute` — maydon ostida **suzadi**. Oqimda qolsa tepa
   panelni pastga cho'zib, butun sahifani siljitib yuborardi.
   -------------------------------------------------------------------------- */
.app__search { position: relative; }
.app__suggest {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  left: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface-raised);
  box-shadow: var(--shadow-3);
}
.app__suggest .c-dropdown__item { justify-content: flex-start; gap: var(--space-2); }

/* --------------------------------------------------------------------------
   Ustunli grafik — oxirgi kunlar kassasi (#171)

   ⚠️ Kutubxona qo'shilmadi: bu yerda ettita ustun bor, ya'ni diagramma emas,
   **zich raqam**. Butun grafik kutubxonasi shu uchun 100KB dan ortiq JS
   olib kelardi — telefon internetida bu sezilarli.
   -------------------------------------------------------------------------- */
.c-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 7rem;
}
.c-bars__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: var(--space-1);
}
.c-bars__fill {
  width: 100%;
  min-height: 2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--accent-bg);
}
/* Bugun ajratib ko'rsatiladi — rahbar avval shuni qidiradi. */
.c-bars__col.is-today .c-bars__fill { background: var(--success-solid); }
.c-bars__label {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   AI agentlar — TASHKILIY SXEMA (#188, ADR-118)
   --------------------------------------------------------------------------
   Foydalanuvchi talabi: raqamli xodimlar «odamlar shakliga xos» ko'rinish
   olsin va vazifasi, vakolati, bo'ysunuviga ko'ra joylashtirilsin.

   ⚠️ Chiziqlar **agentdan odamga** boradi, agentdan agentga emas: bizda
   orkestrator yo'q va rol — vakolat emas (ADR-073 §11.4).
   ========================================================================== */

.c-org {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Tepadagi markaz — butun sxemaning egasi. */
.c-org__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.c-org__topicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--accent-bg);
  color: var(--text-inverse);
}
.c-org__topname {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.c-org__topnote {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Ustunlar — har biri bitta **odam** va unga xizmat qiladigan raqamli xodimlar. */
.c-org__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.c-org__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Ustun sarlavhasi — qaror egasining nomi. */
.c-org__owner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--border-accent);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}
.c-org__ownerdot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--accent-bg);
}
.c-org__ownername {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.c-org__ownernote {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-2xs);
}

/* --- Raqamli xodim kartochkasi ------------------------------------------- */
.c-person {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  /* Chap chekkadagi rangli chiziq — rolni bir qarashda ajratadi. */
  border-left: 3px solid var(--border-default);
}
.c-person--info { border-left-color: var(--info-solid); }
.c-person--success { border-left-color: var(--success-solid); }
.c-person--warning { border-left-color: var(--warning-solid); }
.c-person--danger { border-left-color: var(--danger-solid); }
.c-person--accent { border-left-color: var(--accent-bg); }
.c-person--neutral { border-left-color: var(--border-strong); }

.c-person__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* ⛔ Avatar — **bosh harf**, soxta inson surati emas (ADR-118). */
.c-person__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  color: var(--text-strong);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
.c-person__id { min-width: 0; }
.c-person__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
/* ⚠️ «AI» yorlig'i **doim** ko'rinadi: odam dastur bilan ishlayotganini
   bir qarashda bilishi shart (ADR-118 sharti). */
.c-person__ai {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-active);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
}
.c-person__role {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.c-person__head .c-badge { margin-left: auto; flex: 0 0 auto; }
.c-person__summary {
  margin: 0;
  color: var(--text-default);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.c-person__meta {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
}
.c-person__meta dt {
  color: var(--text-muted);
  margin: 0;
}
.c-person__meta dd {
  margin: 0;
  color: var(--text-default);
}
.c-person__tasks { margin-top: auto; }

/* --- Platforma qatlami (rol emas) ---------------------------------------- */
.c-layer { padding: var(--space-4); }
.c-layer__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.c-layer__head .c-badge { margin-left: auto; }
.c-layer__name {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.c-layer__summary {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Telefonda ustunlar bitta qatorga tushadi — sxema baribir o'qiladi. */
@media (max-width: 900px) {
  .c-org__cols { grid-template-columns: 1fr; gap: var(--space-4); }
  .c-org__top { flex-direction: column; gap: var(--space-3); }
}

/* ==========================================================================
   OMMAVIY SAHIFA BOSHQARUVI (OM-1, #189)
   ========================================================================== */

/* Sozlamalar kirish sahifasidagi kartochka (ADR-120). */
.c-setting {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  color: var(--text-default);
}
.c-setting:hover { text-decoration: none; border-color: var(--border-accent); }
.c-setting__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.c-setting__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-setting__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.c-setting__hint { color: var(--text-muted); font-size: var(--text-xs); }
.c-setting__arrow { margin-left: auto; color: var(--text-subtle); flex: 0 0 auto; }

/* --- Lavha (galereya rasmi) boshqaruv kartochkasi ------------------------- */
.c-shot {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
/* Saytda ko'rinmaydigan lavha — **xira**, lekin yo'qolmaydi: xodim nima
   yashirinligini ko'rib tursin. */
.c-shot.is-hidden { opacity: 0.55; }
.c-shot__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--bg-subtle);
}
.c-shot__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}
.c-shot__caption {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-strong);
}
.c-shot__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  flex-wrap: wrap;
}
.c-shot__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.c-shot__order { display: flex; align-items: center; gap: var(--space-1); }
/* Tartib raqami — ikki belgilik maydon, keng bo'lishi shart emas. */
.c-input--tiny { width: 4.5rem; }


/* ==========================================================================
   Yumshoq ranglar (tint) — kartochkalar uchun mayin, yorqin fon (ADR-144, #212)
   --------------------------------------------------------------------------
   Foydalanuvchi: bosh sahifa ko'rsatkichlari va arxiv kartochkalari «chiroyli,
   yorqin, o'ziga tortuvchi va mayin ranglarda» bo'lsin. Oilalar `tokens.css` da
   (`--tint-<nom>-*`), dark rejimda ham alohida.

   Ishlatish: kartochkaga `c-tint c-tint--<nom>` (KPI uchun `c-kpi`, boshqasi uchun
   `c-card c-card--tint`). Rang MA'NO bermaydi (holat ranglari — `c-badge--*`): faqat
   ko'rinish, shuning uchun har kartochka o'z rangini oladi.
   ========================================================================== */
.c-tint--violet { --t-bg: var(--tint-violet-bg); --t-bg2: var(--tint-violet-bg2); --t-chip: var(--tint-violet-chip); --t-bar: var(--tint-violet-bar); --t-fg: var(--tint-violet-fg); --t-border: var(--tint-violet-border); }
.c-tint--sky { --t-bg: var(--tint-sky-bg); --t-bg2: var(--tint-sky-bg2); --t-chip: var(--tint-sky-chip); --t-bar: var(--tint-sky-bar); --t-fg: var(--tint-sky-fg); --t-border: var(--tint-sky-border); }
.c-tint--emerald { --t-bg: var(--tint-emerald-bg); --t-bg2: var(--tint-emerald-bg2); --t-chip: var(--tint-emerald-chip); --t-bar: var(--tint-emerald-bar); --t-fg: var(--tint-emerald-fg); --t-border: var(--tint-emerald-border); }
.c-tint--amber { --t-bg: var(--tint-amber-bg); --t-bg2: var(--tint-amber-bg2); --t-chip: var(--tint-amber-chip); --t-bar: var(--tint-amber-bar); --t-fg: var(--tint-amber-fg); --t-border: var(--tint-amber-border); }
.c-tint--rose { --t-bg: var(--tint-rose-bg); --t-bg2: var(--tint-rose-bg2); --t-chip: var(--tint-rose-chip); --t-bar: var(--tint-rose-bar); --t-fg: var(--tint-rose-fg); --t-border: var(--tint-rose-border); }
.c-tint--teal { --t-bg: var(--tint-teal-bg); --t-bg2: var(--tint-teal-bg2); --t-chip: var(--tint-teal-chip); --t-bar: var(--tint-teal-bar); --t-fg: var(--tint-teal-fg); --t-border: var(--tint-teal-border); }

.c-kpi.c-tint,
.c-card.c-card--tint {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--t-bg) 0%, var(--t-bg2) 100%);
  border-color: var(--t-border);
  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

/* Burchakdagi yumshoq «shar» — kartochkaga chuqurlik beradi, mazmunga tegmaydi. */
.c-kpi.c-tint::after,
.c-card.c-card--tint::after {
  content: "";
  position: absolute;
  top: -34px;
  right: -34px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--t-chip), transparent 70%);
  opacity: 0.85;
  pointer-events: none;
}

.c-kpi.c-tint > *,
.c-card.c-card--tint > * { position: relative; z-index: 1; }

.c-kpi.c-tint .c-kpi__label { color: var(--t-fg); }
.c-kpi.c-tint .c-kpi__value { color: var(--t-fg); }
.c-kpi.c-tint .c-kpi__delta { color: var(--t-fg); opacity: 0.82; }
.c-kpi.c-tint .c-spark__line { stroke: var(--t-bar); }

.c-kpi--link.c-tint:hover,
a.c-card--tint:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--t-bar);
}

.c-card--tint .c-card__header { border-bottom-color: var(--t-border); }
.c-card--tint .c-card__title { color: var(--t-fg); }
.c-card--tint .c-rank__fill { background: linear-gradient(90deg, var(--t-bar), var(--t-fg)); }
.c-card--tint .c-rank__track { background: color-mix(in srgb, var(--t-chip) 70%, transparent); }
.c-card--tint .c-rank__index { color: var(--t-fg); opacity: 0.7; }

/* Ikonkali yumaloq belgi (arxiv kartochkalari). */
.c-chip-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--t-chip);
  color: var(--t-fg);
}
.c-chip-icon .icon { width: 22px; height: 22px; }

/* ==========================================================================
   Arxiv (ADR-144, #212)
   ========================================================================== */
.c-inline-form { display: inline; margin: 0; }
.c-dropdown__menu .c-inline-form { display: block; }
.c-dropdown__menu .c-inline-form > button { width: 100%; text-align: left; }

/* Arxivdagi odam nomi — qizil (foydalanuvchi namunasi), yonida «o'chirilgan». */
.c-card__title--name.is-archived { color: var(--danger-text); }
.c-archived-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: var(--text-xs);
}
.c-archived-note > span { flex: 1 1 auto; }

/* Arxiv sahifasi: bo'limlar bo'yicha tablar. */
.c-arc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.c-arc-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-default);
  font-size: var(--text-sm);
  text-decoration: none;
}
.c-arc-tab:hover { background: var(--bg-hover); text-decoration: none; }
.c-arc-tab.is-active {
  background: var(--t-chip);
  border-color: var(--t-bar);
  color: var(--t-fg);
  font-weight: var(--weight-semibold);
}

/* Bosh sahifadagi kartochkalar. */
.c-arc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--t-border);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}
.c-arc-card:hover { text-decoration: none; }
.c-arc-card__top { display: flex; align-items: center; gap: var(--space-3); }
.c-arc-card__label { font-weight: var(--weight-semibold); color: var(--t-fg); }
.c-arc-card__blurb { font-size: var(--text-2xs); color: var(--t-fg); opacity: 0.8; }
.c-arc-card__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--t-fg);
  line-height: 1;
}
.c-arc-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* «Oxirgi oy» — kichik qizil raqam (foydalanuvchi talabi). */
.c-arc-month {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Bo'lim tepasidagi xulosa kartasi: chapda katta son, o'ngda polosali qatorlar. */
.c-arc-summary {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}
.c-arc-summary__big { display: flex; align-items: center; gap: var(--space-4); }
.c-arc-summary__lines { display: grid; gap: var(--space-3); }
.c-arc-line__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--t-fg);
}
.c-arc-line__head b { font-variant-numeric: tabular-nums; }
.c-arc-line__track {
  height: 8px;
  margin-top: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--t-chip) 70%, transparent);
  overflow: hidden;
}
.c-arc-line__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--t-bar), var(--t-fg));
}
@media (max-width: 720px) {
  .c-arc-summary { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); }
}

.c-arc-table .is-money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-arc-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.c-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* To'lovlar / oylik hisob jadvali (profil, 2026-10-17): o'ng ustun tor (~650px), 7 ta ustun teng
   bo'linsa sana va summa ikki qatorga o'tib qator 100px dan oshardi. Zichroq oraliq + qisqa
   ustunlar (`is-nowrap`) bir qatorda; uzun matn (guruh, kim qabul qilgan) esa o'raladi. */
.c-table--pay th,
.c-table--pay td {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}
.c-table--pay .is-nowrap { white-space: nowrap; }
.c-table--pay tr.is-muted td { color: var(--text-muted); }