/* ======================================================================
   HISOBOT VA TAHLIL EKRANI — ixcham ko'rinish
   ----------------------------------------------------------------------
   Maqsad: KPI, filtr, grafik va "Batafsil jadval" oxirigacha aylantirmasdan
   ko'rinsin. Hammasi `.rep` konteyneri ichiga cheklangan (app.css va boshqa
   ekranlarga tegmaydi), oyna (modal) sinflari esa `rep-` prefiksi bilan
   noyob. Ranglar/radius/soyalar — app.css tokenlaridan.
   ====================================================================== */

/* Tokenlar FAQAT shu ekran doirasida (app.css global qiymatlariga
   tegilmaydi): jadval ixcham, o'tishlar bir xil tezlikda. */
.rep {
  /* Oraliq pog'onasi: BLOKLAR orasi `--gap-block` (24), blok ichi
     `--gap-grid` (16) — panel bilan bir xil ritm */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-block, var(--s6));
  /* Dizayn talabi: karta radiusi 14 px — shu ekrandagi HAMMA karta
     uchun bir xil (app.css global qiymatiga tegilmaydi) */
  --r-card: 14px;
  --thead-h: 34px;
  --trow-h: 38px;
  --rep-out: cubic-bezier(.22, .61, .36, 1);     /* ease-out */

  /* --- Matn pog'onasi — paneldagi bilan BIR XIL qoida (dashboard.css
     ga qarang): SON → YORLIQ → IZOH, uchtadan ortiq qalinlik yo'q
     (400/600/700), ranglar tokenlardan hosil qilinadi. Hisobot ekranida
     kataklar `--card-2` ustida ham turadi, shuning uchun yorliq rangi
     bir qadam to'qroq (o'lchangan: `--ink-2` u yerda 4,42:1 beradi). */
  --rep-label: color-mix(in srgb, var(--ink-2) 72%, var(--ink));
  --rep-faint: color-mix(in srgb, var(--ink-2) 93%, var(--ink));
  --rep-ink-blue: var(--blue-ink, color-mix(in srgb, var(--blue) 76%, var(--ink)));
  /* Jadval "zebra" qatori va filtr polosasi — kartadan bir qadam quyi
     yuza (mavzu bilan birga o'zgaradi) */
  --rep-band: color-mix(in srgb, var(--card-2) 45%, var(--card));

  --rep-row-hover: var(--card-hover);
  --rep-lift: var(--shadow-hover);
}

/* Natija bloklari (grafiklar va jadval) orasi */
.rep .stack, .rep .grid { gap: var(--gap-grid, var(--s4)); }

/* Karta ichki oralig'i — butun mahsulotdagi bilan bir xil (`--pad-card`) */
.rep .card__head { padding: var(--pad-card, var(--s4)) var(--pad-card, var(--s4)) 0; gap: var(--s3); }
.rep .card__body { padding: var(--s3) var(--pad-card, var(--s4)) var(--pad-card, var(--s4)); }
.rep .card__title { font-size: 13.5px; }
.rep .card__sub { font-size: 11px; }

/* ----------------------------------------------------------------------
   1. Umumiy KPI polosasi (oylik, formula bilan)

   ⚠ Bu polosa KARTA EMAS. Avval borderli kartaning ichida borderli 9 ta
   katak turardi — "quti ichida quti", ekrandagi eng shovqinli joy. Endi
   kataklar to'g'ridan-to'g'ri sahifa fonida, bir-biridan FAQAT ingichka
   chiziq bilan ajraladi (chiziq konteyner foni orqali chiziladi: qator
   qanday bo'linishidan qat'i nazar hech qachon "yolg'iz" chiziq
   qolmaydi). Ekranning asosiy obyekti — pastdagi jadval.
   ---------------------------------------------------------------------- */
.rep-sec { display: grid; gap: var(--gap-grid, var(--s4)); min-width: 0; }

/* Bo'lim sarlavhasi — mayda, jim, ostida hairline */
.rep-band {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.rep-band__title {
  margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rep-label);
}
.rep-band__note { font-size: var(--fs-meta); font-weight: 400; color: var(--rep-faint); }

.rep-kpis { display: grid; gap: var(--s2); }
/* Ikkala qator ham BIR XIL ustun soniga ega — shunda ustun chetlari
   ustma-ust tushadi. Avval `auto-fit` ishlatilgani uchun yuqori qator
   5 ta 230px, pastkisi 4 ta 287px katakdan iborat bo'lib, ustunlar
   bir-biriga mos kelmasdi (mijoz: "tartibsiz turibdi").
   Kataklar endi o'z chegarasi va oralig'iga ega, shuning uchun to'lmay
   qolgan oxirgi qator ham bo'sh kulrang katak qoldirmaydi. */
.rep-kpis__row {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* 5 ta ustun ATAYLAB: asosiy ko'rsatkichlar aynan 5 ta — ular bitta
   to'la qatorga sig'adi, qo'shimcha 4 tasi esa ostidagi qatorda AYNAN
   shu ustunlarga tushadi. Ikki qator = butun polosa. */
@media (max-width: 1250px) { .rep-kpis__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .rep-kpis__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .rep-kpis__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .rep-kpis__row { grid-template-columns: 1fr; } }

/* Katak: CHAPDA yorliq va formula, O'NGDA raqam. Kenglik shu bilan
   ishlatiladi — avval raqam chapda turib, o'ng yarmi bo'sh qolardi,
   formula esa joy yetmay "…" bilan kesilardi. */
.rep-kpi {
  position: relative; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s2); row-gap: 1px; align-items: baseline;
  padding: 9px 12px 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-input);
  text-align: left; color: var(--ink); font: inherit; cursor: pointer;
  transition: background 140ms var(--rep-out, ease-out),
              border-color 140ms var(--rep-out, ease-out);
}
.rep-kpi:hover { background: var(--card-hover); border-color: var(--line-strong); }
.rep-kpi:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* Asosiy ko'rsatkich — yirikroq raqam (yuza emas, TIPOGRAFIYA farqi) */
.rep-kpi--lead .rep-kpi__value { font-size: 19px; }
.rep-kpi--sub .rep-kpi__value { font-size: 16.5px; }
.rep-kpi--sub .rep-kpi__label { color: var(--rep-faint); }

/* "Izoh ochiladi" ishorasi — faqat sichqoncha ustiga kelganda yoki
   fokusda. Avval 9 ta katakda 9 ta mayda belgi doim ko'rinib, polosani
   shovqinli qilardi; izoh matni `title`/`aria-label` da qoladi. */
.rep-kpi__go {
  position: absolute; top: 6px; right: 6px;
  display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; color: var(--rep-faint);
  opacity: 0;
  transition: opacity 140ms var(--rep-out, ease-out),
              background 140ms var(--rep-out, ease-out),
              color 140ms var(--rep-out, ease-out);
}
.rep-kpi:hover .rep-kpi__go, .rep-kpi:focus-visible .rep-kpi__go {
  opacity: 1; background: var(--blue); color: var(--on-accent);
}
/* Ohang — rangli SLAB emas, yorliq oldidagi kichik nuqta (faqat ohangi
   bor kataklarda; "info" — neytral, nuqtasiz) */
.rep-kpi--ok .rep-kpi__label::before,
.rep-kpi--warn .rep-kpi__label::before,
.rep-kpi--crit .rep-kpi__label::before,
.rep-kpi--muted .rep-kpi__label::before {
  content: ""; display: inline-block; vertical-align: 1px;
  width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
  background: var(--rep-dot, var(--blue));
}
.rep-kpi--ok    { --rep-dot: var(--green); }
.rep-kpi--warn  { --rep-dot: var(--amber); }
.rep-kpi--crit  { --rep-dot: var(--red); }
.rep-kpi--muted { --rep-dot: var(--line-strong); }

/* Yorliq va formula CHAP ustunda, raqam esa O'NGDA — birinchi qatorni
   ikkovi bo'lishadi, formula pastda butun kenglikni oladi. */
.rep-kpi__label {
  grid-column: 1; grid-row: 1; min-width: 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rep-label); line-height: 1.35; overflow-wrap: anywhere;
}
.rep-kpi__value {
  grid-column: 2; grid-row: 1; justify-self: end; white-space: nowrap;
  font-size: 19px; font-weight: 700; line-height: 1.15; letter-spacing: -.3px;
  color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.rep-kpi__unit {
  font-size: 12px; font-weight: 400; color: var(--rep-faint); margin-left: 3px;
  font-variant-numeric: tabular-nums;
}
/* Formula endi KESILMAYDI: joy yetmasa ikkinchi qatorga o'tadi.
   Avval `nowrap` + `ellipsis` edi va TO'QQIZTA katakdan BESHTASI
   "…" bilan tugab, ekran tugallanmagandek ko'rinardi. */
.rep-kpi__hint {
  grid-column: 1 / -1; grid-row: 2; min-width: 0;
  font-size: 10.5px; font-weight: 400; color: var(--rep-faint); line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Tor ekranda yorliq va raqam bitta qatorga sig'masa (masalan
   "BIR BUYURTMA TANNARXI" yonida "23 368 so'm"), yorliq 49px'gacha
   siqilib, so'z katakdan chiqib ketardi. 1250px'dan pastda raqam
   O'Z QATORIGA tushadi — siqilish umuman bo'lmaydi. */
@media (max-width: 1250px) {
  .rep-kpi { grid-template-columns: minmax(0, 1fr); }
  .rep-kpi__value { grid-column: 1; grid-row: 2; justify-self: start; }
  .rep-kpi__hint { grid-row: 3; }
}

/* ----------------------------------------------------------------------
   2. BITTA boshqaruv polosasi
   ----------------------------------------------------------------------
   Avval: tab kartasi + uning ichida boshqa rangdagi filtr polosasi, har
   bir maydon ustida yana yorliq = uch qavat. Endi bitta yuza, ikki
   qator: yuqorida hisobot turi (to'ldirilgan tabletka), ostida davr va
   filtrlar. Yorliqlar maydonning O'ZIGA ko'chdi ("Mijoz: barchasi").
   ---------------------------------------------------------------------- */
/* Boshqaruv polosasi — SOYASIZ: ekranda ko'tarilgan yagona obyekt
   pastdagi jadval (`.card--raised`), polosa esa faqat hairline bilan
   ajraladi ("ikki balandlik" qoidasi). */
.rep-bar {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
/* Hisobot turlari — pastdagi uzun chiziq o'rniga to'ldirilgan tabletka.
   Bu qator polosaning YUQORI qavati: shrifti ixcham, orasi tig'iz. */
.rep-bar .tabs {
  padding: 10px var(--pad-card, var(--s4));
  border-bottom: 0; gap: 4px;
}
.rep-bar .tab {
  padding: 6px 11px; font-size: 12px; border-radius: var(--r-pill);
  white-space: nowrap; letter-spacing: -.01em;
  border-bottom: 0; margin-bottom: 0;          /* tag chizig'i kerak emas */
}
.rep-bar .tab:hover { background: var(--card-2); color: var(--ink); }
/* To'ldirilgan tabletka — `--blue` EMAS, `--blue-strong`: oq matn
   `--blue` ustida navy mavzuda 2,82:1 berardi (o'lchandi), `--blue-strong`
   ustida esa 4,77:1 (yorug' mavzuda 6,4:1). */
.rep-bar .tab[aria-selected="true"] {
  background: var(--blue-strong); color: var(--on-accent);
}
/* Tanlangan tabletka hover'da o'zgarmaydi — u allaqachon tanlangan */
.rep-bar .tab[aria-selected="true"]:hover {
  background: var(--blue-strong); color: var(--on-accent);
}

/* Filtr qatori — polosaning PASTKI qavati. Mijoz talabi: ikki qator
   bir-biridan ajralib tursin. Shuning uchun ingichka chiziq va juda
   yengil fon: hisobot TURI (yuqorida) va uning KESIMI (bu yerda)
   endi bir qarashda ikki xil narsa ko'rinadi. */
.rep-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s2);
  padding: 8px var(--pad-card, var(--s4));
  background: var(--card-2); border-top: 1px solid var(--line);
}
.rep-filters .field { display: flex; flex-direction: column; gap: 0; min-width: 0; }
/* Yorliqlar maydonning ichiga ko'chdi — bo'sh `<label>` joy egallamasin */
.rep-filters .field > label:empty { display: none; }
/* Filtrlar qolgan joyni TENG bo'lishadi — polosa oxirida "yarim bo'sh"
   joy ham, yolg'iz qolgan maydon ham bo'lmaydi */
.rep-filters .field { flex: 1 1 150px; max-width: 220px; }
.rep-filters .select {
  min-height: 31px; height: 31px; width: 100%; padding: 0 28px 0 9px;
  font-size: 12px; letter-spacing: -.01em;
}
.rep-filters .input--date { height: 31px; width: 124px; font-size: 12px; }
.rep-filters__row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.rep-filters__dates { display: flex; align-items: center; gap: 6px; }
.rep-filters__dates[hidden] { display: none; }
.rep-filters__dash { color: var(--rep-faint); }
.rep-filters__end {
  margin-left: auto; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}
/* Davr — polosaning boshida, o'z kengligida */
.rep-filters .field--period { flex: 0 0 auto; max-width: none; }

/* Kunlik | Haftalik | Oylik | Oraliq — filtr qatorining o'zi endi
   fonli, shuning uchun segment guruhi karta rangida turadi (aks holda
   fon ustida fon bo'lib, chegarasi ko'rinmay qolardi). */
.rep-filters .segmented { padding: 2px; background: var(--card); }
.rep-filters .segmented__item {
  padding: 4px 10px; font-size: 12px; letter-spacing: -.01em;
}

/* Faol filtrlar — bir qarashda ko'rinadi va shu yerdan o'chiriladi */
.rep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-chips .chip { height: 26px; }

/* ----------------------------------------------------------------------
   3. Hisobot xulosasi — JADVAL kartasining ichida, uning sarlavhasi
   ostida. Bu kataklar aynan shu jadvalning kesimini almashtiradi,
   shuning uchun ular endi alohida "suzuvchi" karta emas: fonsiz, bitta
   ingichka chiziq ortidagi polosa.
   ---------------------------------------------------------------------- */
/* Ustun soni ATAYLAB 8 ni teng bo'ladi (8 / 4 / 2 / 1). `auto-fit`
   ishlatilganda 1024px'da 5 ta ustun chiqib, oxirgi qatorda IKKITA
   bo'sh kulrang katak qolardi — chiziqlar `gap: 1px` orqali chizilgani
   uchun bo'sh katak ko'rinib, jadval tugallanmagandek turardi. */
.rep-metrics {
  display: grid; gap: 1px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 0 var(--pad-card, var(--s4)) var(--s3);
  background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-input);
  overflow: hidden;
}
@media (max-width: 1250px) { .rep-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ≤720px uchun 2 ta ustun quyidagi telefon blokida berilgan */
.rep-metric {
  position: relative; min-width: 0; display: grid; gap: 1px;
  align-content: start; min-height: 56px;
  padding: 8px 24px 9px 12px;
  background: var(--card); border: 0; border-radius: 0; box-shadow: none;
  text-align: left; color: var(--ink); font: inherit;
  transition: background 140ms var(--rep-out, ease-out);
}

/* Kesim bo'la oladigan katak — bosiladi, ishora bilan */
.rep-metric--act { cursor: pointer; }
.rep-metric--act:hover { background: var(--card-hover); }
.rep-metric--act:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.rep-metric__go {
  position: absolute; top: 7px; right: 7px;
  display: grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; color: var(--rep-faint); opacity: .5;
  transition: opacity 140ms var(--rep-out, ease-out),
              background 140ms var(--rep-out, ease-out),
              color 140ms var(--rep-out, ease-out);
}
.rep-metric--act:hover .rep-metric__go,
.rep-metric--act:focus-visible .rep-metric__go {
  opacity: 1; background: var(--blue); color: var(--on-accent);
}
/* Tanlangan kesim — katak "yoqilgan" holatda qoladi */
.rep-metric--on { background: var(--blue-soft); }
.rep-metric--on .rep-metric__go { opacity: 1; background: var(--blue); color: var(--on-accent); }
.rep-metric--on .rep-metric__label { color: var(--rep-ink-blue); }
.rep-metric--on .rep-metric__label::before { background: var(--blue); }
/* Kesim bo'lolmaydigan katak — bosiladigandek ko'rinmaydi ham */
.rep-metric--flat {
  cursor: default; background: var(--rep-band); padding-right: 12px;
}
/* Ohang — rangli slab emas, yorliq oldidagi nuqta */
.rep-metric--ok .rep-metric__label::before,
.rep-metric--warn .rep-metric__label::before,
.rep-metric--crit .rep-metric__label::before {
  content: ""; display: inline-block; vertical-align: 1px;
  width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
  background: var(--rep-dot, var(--blue));
}
.rep-metric--ok   { --rep-dot: var(--green); }
.rep-metric--warn { --rep-dot: var(--amber); }
.rep-metric--crit { --rep-dot: var(--red); }
/* Yorliq kesilmasin: "Bekor qilingan" va "O'rtacha kechikish"
   "BEKOR QILING…" / "O'RTACHA KE…" bo'lib chiqardi. Endi ikkinchi
   qatorga o'tadi; kataklar bir xil balandlikda turishi uchun
   `.rep-metric` da min-balandlik bor. */
.rep-metric__label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rep-label); line-height: 1.3;
}
.rep-metric__value {
  font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -.3px;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.rep-metric__value small {
  font-size: 11.5px; font-weight: 400; color: var(--rep-faint);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------
   4. Batafsil jadval
   ---------------------------------------------------------------------- */
.rep-table .card__head { padding-bottom: 10px; }
.rep-table__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: 11px; font-weight: 400; color: var(--rep-faint); margin-top: 3px;
}
.rep-table__hint { color: var(--rep-ink-blue); font-weight: 600; }
.rep-table__note { color: var(--rep-faint); }

/* Tanlangan kesim chipi — nomi ko'rinib turadi, × bilan bekor qilinadi */
.rep-focus {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 7px 3px 10px; min-height: 24px;
  border: 1px solid var(--blue); border-radius: var(--r-pill);
  background: var(--blue-soft); color: var(--rep-ink-blue);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background 140ms var(--rep-out, ease-out),
              color 140ms var(--rep-out, ease-out);
}
.rep-focus b { font-weight: 600; }
.rep-focus__x {
  display: grid; place-items: center; width: 15px; height: 15px;
  border-radius: 50%; font-size: 12px; line-height: 1;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}
.rep-focus:hover { background: var(--blue); color: var(--on-accent); }
.rep-focus:hover .rep-focus__x {
  background: color-mix(in srgb, var(--on-accent) 30%, transparent);
}
.rep-focus:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Grafik ostidagi bir qatorli ishora */
.rep-tip {
  display: flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 10.5px; font-weight: 400; color: var(--rep-faint); line-height: 1.3;
}
.rep-tip svg { flex: 0 0 auto; }

/* Jadval o'z maydonida aylanadi: sarlavha tepada, JAMI pastda doim ko'rinadi,
   sahifa esa cho'zilib ketmaydi (22 qatorli hisobot ham bir ekranga sig'adi). */
.rep-table .table-wrap { max-height: min(58vh, 560px); overflow: auto; }
.rep-table .table thead th {
  top: 0; z-index: 3; background: var(--card); box-shadow: inset 0 -1px 0 var(--line);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rep-label);
  height: 34px; padding: 0 12px;
}
/* Katak matni oddiy qalinlikda va jim turadi; raqam ustunlari esa to'q
   va qalinroq (pastdagi qoida) - ko'z avval SONGA tushadi. */
.rep-table .table tbody td {
  height: 38px; padding: 6px 12px; font-weight: 400; color: var(--rep-faint);
  border-bottom: 1px solid var(--line);
}
.rep-table .table tbody td b { font-weight: 600; color: var(--ink); }
.rep-table .table td.num, .rep-table .table th.num {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.rep-table .table tbody tr:nth-child(even) td { background: var(--rep-band); }
.rep-table .table tbody tr:hover td { background: var(--rep-row-hover); }
.rep-table .table tbody tr[aria-selected="true"] td { background: var(--blue-soft); }
.rep-table .table tbody tr.clickable:focus-visible {
  outline: 2px solid var(--blue); outline-offset: -2px;
}

/* Tanlangan kesim ustuni — qaysi raqam bo'yicha saralanganini ko'rsatadi.
   Tanlovchi juft qatorlar qoidasidan kuchliroq bo'lishi SHART (aks holda
   zebra fon uni bosib ketadi). */
.rep-table .table tbody tr td.rep-col--on,
.rep-table .table tfoot tr td.rep-col--on,
.rep-table .table thead tr th.rep-col--on {
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--blue) 18%, transparent),
              inset -1px 0 0 color-mix(in srgb, var(--blue) 18%, transparent);
}
.rep-table .table thead tr th.rep-col--on { color: var(--rep-ink-blue); }
.rep-table .table tbody tr:hover td.rep-col--on {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
}
/* JAMI qatori - jadvalning XULOSASI: eng qalin va eng to'q matn */
.rep-table .table tfoot td {
  position: sticky; bottom: 0; z-index: 3; height: 40px; padding: 6px 12px;
  box-shadow: inset 0 2px 0 var(--line-strong);
  border-top: 0; background: var(--card-2);
  font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.rep-table .table td:last-child { padding-right: 12px; }

/* Birinchi ustun: kesim nomi + izoh (kun hisobotida hafta kuni) */
.rep-dimcell { display: flex; flex-direction: column; gap: 0; line-height: 1.25; }
.rep-dimcell b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.rep-dimcell small { font-size: 10.5px; font-weight: 400; color: var(--rep-faint); }
.rep-dimcell--empty b { color: var(--rep-faint); font-weight: 400; font-style: italic; }
.rep-table .table tbody tr.rep-row--weekend td:first-child { box-shadow: inset 3px 0 0 var(--line-strong); }

/* Raqam katagi: son + (asosiy ustunda) ingichka ulush chizig'i.
   Avval HAR BIR raqam ostida chiziq bor edi — qator baland va "shovqinli"
   chiqardi. Endi chiziq faqat asosiy ustun va foizda. */
.rep-cell { display: inline-flex; flex-direction: column; align-items: flex-end; min-width: 54px; }
.rep-cell b {
  font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.rep-cell .bar { width: 100%; height: 3px; margin-top: 4px; }
/* Nol - yo'qlikni bildiradi: qalinligi ham, rangi ham past */
.rep-num--zero { color: var(--rep-faint); font-weight: 400; }
.rep-pct { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; }
.rep-pct .bar { width: 46px; height: 5px; flex: 0 0 46px; }
.rep-pct b {
  font-weight: 600; color: var(--ink); min-width: 42px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* "Batafsil" — qatorning bosilishini bildiruvchi belgi */
.rep-table .table td.rep-more { width: 34px; padding-left: 0; }
.rep-more__icon { color: var(--ink-3); display: inline-flex; }
.rep-table .table tbody tr:hover .rep-more__icon { color: var(--blue); }

/* Eksport tugmalari jadval sarlavhasida */
.rep-export { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* ----------------------------------------------------------------------
   4b. Qo'shimcha jadvallar (Reyslar hisoboti, L-18): kunlik jami, reys
   vaqtlari, GPS. Asosiy jadval bilan bir xil ixcham qator va sarlavha,
   lekin KO'TARILMAGAN (ekrandagi yagona ko'tarilgan obyekt — «Batafsil
   jadval»). Uzun ro'yxat o'z maydonida aylanadi, JAMI pastda turadi.
   ---------------------------------------------------------------------- */
.rep-sub { overflow: hidden; }
.rep-sub .table-wrap { max-height: min(46vh, 440px); overflow: auto; }
.rep-sub .table thead th {
  top: 0; z-index: 3; background: var(--card); box-shadow: inset 0 -1px 0 var(--line);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rep-label);
  height: 34px; padding: 0 12px;
}
.rep-sub .table tbody td {
  height: 36px; padding: 6px 12px; font-weight: 400; color: var(--rep-faint);
  border-bottom: 1px solid var(--line);
}
.rep-sub .table tbody td b { font-weight: 600; color: var(--ink); }
.rep-sub .table td.num, .rep-sub .table th.num {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.rep-sub .table tbody tr:nth-child(even) td { background: var(--rep-band); }
.rep-sub .table tbody tr:hover td { background: var(--rep-row-hover); }
.rep-sub .table tfoot td {
  position: sticky; bottom: 0; z-index: 3; height: 38px; padding: 6px 12px;
  box-shadow: inset 0 2px 0 var(--line-strong);
  border-top: 0; background: var(--card-2);
  font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.rep-sub .table td:last-child { padding-right: 12px; }

/* ----------------------------------------------------------------------
   5. Qator tafsiloti (drilldown) va eksport tarixi oynalari
   ---------------------------------------------------------------------- */
.rep-drill { display: grid; gap: 14px; }
.rep-drill__section { display: grid; gap: 8px; }
.rep-drill__caption {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rep-label);
}
.rep-drill__stats {
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
}
.rep-drill__stat {
  position: relative; padding: 8px 10px 9px 12px; border-radius: 10px;
  background: var(--card-2); border: 1px solid var(--line); min-width: 0;
}
.rep-drill__stat::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--blue);
}
.rep-drill__stat--ok::before { background: var(--green); }
.rep-drill__stat--warn::before { background: var(--amber); }
.rep-drill__stat--crit::before { background: var(--red); }
.rep-drill__stat--muted::before { background: var(--line-strong); }
.rep-drill__stat dt {
  font-size: 10.5px; color: var(--rep-label); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rep-drill__stat dd {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.3px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rep-drill__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-size: 11.5px; font-weight: 400; color: var(--rep-faint);
}
.rep-drill__head b { color: var(--ink); font-size: 13px; font-weight: 600; }
.rep-drill .table-wrap { max-height: 46vh; overflow: auto; }
.rep-drill .table thead th { top: 0; z-index: 3; background: var(--card); }
.rep-drill__link { color: var(--rep-ink-blue); font-weight: 600; }
.rep-drill__open { color: var(--ink-3); display: inline-flex; }
.rep-drill .table tbody tr:hover .rep-drill__open { color: var(--blue); }
.rep-drill__note { font-size: 11px; font-weight: 400; color: var(--rep-faint); }

/* Eksport tarixi */
.rep-exp { display: grid; gap: 10px; }
.rep-exp__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 400; color: var(--rep-faint);
}
.rep-exp__fmt {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border-radius: 6px; background: var(--blue-soft); color: var(--rep-ink-blue);
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
}
.rep-exp .table tbody td { height: 44px; }
.rep-exp__live { display: inline-flex; align-items: center; gap: 6px; color: var(--rep-faint); }
.rep-exp__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  animation: rep-pulse 1.1s ease-in-out infinite;
}
@keyframes rep-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rep-exp__dot { animation: none; } }

/* ----------------------------------------------------------------------
   5b. KPI izohi oynasi ("qanday hisoblanadi")
   ---------------------------------------------------------------------- */
.rep-explain { display: grid; gap: 12px; }
.rep-explain__value {
  padding: 10px 14px; border-radius: 10px;
  background: var(--blue-soft); color: var(--rep-ink-blue);
  font-size: 26px; font-weight: 700; letter-spacing: -.4px; line-height: 1.15;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.rep-explain__value--ok {
  background: var(--green-soft);
  color: color-mix(in srgb, var(--green) 55%, var(--ink));
}
.rep-explain__value--warn {
  background: var(--amber-soft);
  color: color-mix(in srgb, var(--amber) 52%, var(--ink));
}
.rep-explain__value--crit {
  background: var(--red-soft);
  color: color-mix(in srgb, var(--red) 62%, var(--ink));
}
.rep-explain__rows { display: grid; gap: 8px; margin: 0; }
.rep-explain__rows > div {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px;
  align-items: baseline;
}
.rep-explain__rows dt {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rep-label);
}
.rep-explain__rows dd { margin: 0; font-size: 12.5px; color: var(--ink); line-height: 1.45; }
.rep-explain__note {
  padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 400; color: var(--rep-faint); line-height: 1.45;
}

/* ----------------------------------------------------------------------
   5c. Grafiklar — jim to'r, tabular raqam, bosiladigan ishora
   ---------------------------------------------------------------------- */
.rep .chart-bar {
  cursor: pointer;
  transition: opacity 140ms var(--rep-out, ease-out),
              filter 140ms var(--rep-out, ease-out);
}
.rep .chart-bar:hover {
  opacity: 1;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ink) 30%, transparent));
}
.rep .donut__arc {
  transition: opacity 140ms var(--rep-out, ease-out),
              filter 140ms var(--rep-out, ease-out);
}
.rep .donut__arc:hover {
  opacity: 1;
  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--ink) 28%, transparent));
}
.rep .donut-row { border-radius: var(--r-input); transition: background 140ms var(--rep-out, ease-out); }
.rep .donut-row:hover, .rep .donut-row:focus-visible { background: var(--rep-row-hover); }
.rep .donut-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ----------------------------------------------------------------------
   6. Kichik ekran (telefon — 375 px)
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .rep-filters .select { width: 100%; }
  .rep-filters .field { flex: 1 1 160px; }
}

@media (max-width: 720px) {
  .rep { gap: var(--gap-grid, var(--s4)); }
  .rep-filters { padding: var(--s3) var(--pad-card, var(--s4)); gap: var(--s3); }
  /* Barmoq uchun: telefonda BARCHA boshqaruv 40 px dan past bo'lmaydi
     (o'lchandi: tabletka 33, segment 29, tanlov 34 px edi) */
  .rep-bar .tabs { padding: var(--s3) var(--pad-card, var(--s4)) 0; overflow-x: auto; }
  .rep-bar .tab { min-height: 40px; padding: 9px 14px; }
  .rep-filters .segmented__item { min-height: 40px; }
  .rep-filters .select,
  .rep-filters .input--date { min-height: 40px; height: 40px; }
  .rep-filters__end { margin-left: 0; width: 100%; }
  .rep-filters__end .btn { flex: 1 1 auto; }
  /* Qolgan filtrlar — ikkitadan (bittadan bo'lsa polosa juda cho'ziladi).
     Bu qoida "davr" maydonidan OLDIN turishi kerak: ikkalasining ham
     aniqligi bir xil, keyingisi ustun keladi. */
  .rep-filters .field { flex: 1 1 calc(50% - 7px); }
  /* Davr: tugmalar bir qatorda, ikki sana ostida yonma-yon */
  .rep-filters .field--period { flex: 1 1 100%; }
  .rep-filters .segmented { flex: 1 1 100%; }
  .rep-filters .segmented__item { flex: 1 1 auto; padding: 6px 4px; }
  .rep-filters .input--date { flex: 1 1 0; width: auto; min-width: 0; }
  .rep-kpis__row--lead, .rep-kpis__row--sub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Telefonda katak ~170px: formula ikki qatorga o'ralib, polosani
     uch baravar uzaytirardi. Shuning uchun bu yerda faqat yorliq va
     qiymat; formulani katakni bosib ochiladigan oynada ko'rish mumkin. */
  .rep-kpi__hint { display: none; }
  /* Tegish maydoni kichik bo'lib qolmasin (≥ 40 px) */
  .rep-kpi { min-height: 46px; }
  .rep-metric { min-height: 46px; }
  .rep-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-focus { min-height: 30px; }
  /* Telefonda jadval karta ko'rinishida — balandlik cheklanmaydi.
     Yorliq chapda, son o'ngda: ustunlar kartada ham tekis turadi. */
  .rep-table .table-wrap { max-height: none; }
  .rep-table .record-card { padding: 12px var(--s4); gap: 8px; }
  .rep-table .record-card__meta { gap: 2px; }
  .rep-table .record-card__row { align-items: baseline; gap: 10px; }
  /* Yorliq — qiymatidan mayda va jim, lekin baribir o'qiladi
     (`--ink-2` bu yuzada 4,42:1 beradi — o'lchangan, past) */
  .rep-table .record-card__row dt {
    flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 400;
    color: var(--rep-label);
  }
  /* `<b>` ning standart `bolder` qiymati 600 li `dd` ichida 900 ga
     aylanardi — to'rtinchi qalinlik paydo bo'lmasligi uchun aniq yoziladi */
  .rep-table .record-card__row dd { flex: 0 0 auto; text-align: right; font-weight: 600; }
  .rep-table .record-card__row dd b { font-weight: 600; color: var(--ink); }
  .rep-table .record-card .rep-cell { align-items: flex-end; min-width: 64px; }
  .rep-drill .table-wrap { max-height: none; }
  .rep-drill__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Qo'shimcha jadvallar ham telefonda karta — asosiy jadvaldagidek */
  .rep-sub .table-wrap { max-height: none; }
  .rep-sub .record-card { padding: 12px var(--s4); gap: 8px; }
  .rep-sub .record-card__meta { gap: 2px; }
  .rep-sub .record-card__row { align-items: baseline; gap: 10px; }
  .rep-sub .record-card__row dt {
    flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 400;
    color: var(--rep-label);
  }
  .rep-sub .record-card__row dd { flex: 0 0 auto; text-align: right; font-weight: 600; }
  .rep-sub .record-card__row dd b { font-weight: 600; color: var(--ink); }
}

@media (max-width: 420px) {
  .rep-kpi__value, .rep-kpi--lead .rep-kpi__value { font-size: 17px; }
  .rep-kpi--sub .rep-kpi__value { font-size: 15.5px; }
  .rep-metric__value { font-size: 16px; }
  /* Izoh oynasi: yorliq va qiymat ustma-ust (78 px ustun sig'maydi) */
  .rep-explain__rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rep-explain__value { font-size: 23px; }
}

/* Bosib chiqarishda jadval qirqilmasin: o'z maydonida aylanish va
   "yopishqoq" sarlavha faqat ekran uchun. */
@media print {
  .rep-table .table-wrap, .rep-sub .table-wrap { max-height: none; overflow: visible; }
  .rep-table .table thead th, .rep-table .table tfoot td,
  .rep-sub .table thead th, .rep-sub .table tfoot td { position: static; }
}

/* Harakatni kamaytirish rejimi — hech narsa siljimaydi (app.css global
   qoidasiga qo'shimcha: bu yerdagi "ko'tarilish" ham o'chadi) */
@media (prefers-reduced-motion: reduce) {
  .rep-kpi, .rep-metric, .rep-focus, .rep-kpi__go, .rep-metric__go,
  .rep .chart-bar, .rep .donut__arc, .rep .donut-row { transition: none; }
  .rep-kpi:hover, .rep-metric--act:hover { transform: none; }
}

/* Grafik ostidagi yig'iladigan "jadval ko'rinishi" (charts.js) telefonda
   ochilganda sahifani yon tomonga cho'zib yubormasin — o'z ichida aylanadi */
.rep .chart-alt { max-width: 100%; }
.rep .chart-alt .items-table { display: block; overflow-x: auto; white-space: nowrap; }