/* Avtomobillar / Haydovchilar / Texnik xizmat ekranlari:
   ro'yxat usti KPI qatori, ro'yxat jadvali va to'liq KARTOCHKA
   (dashboard ko'rinishi).
   Barcha rang/oraliq qiymatlari `app.css` dagi `:root` tokenlaridan
   olinadi, yangi palitra kiritilmaydi. */

/* Ohang (tone) -> rang. Har blok o'z ohangini `data-tone` bilan beradi. */
/* `--rec-color` — TO'LDIRISH va ikonka rangi (grafik element, 3:1 kifoya).
   `--rec-ink`  — SHU OHANGDAGI MATN rangi: brend rangi o'zi mayda matnda
   4,5:1 ni bermaydi (masalan sariq oq karta ustida 2,28:1 — o'lchangan),
   shuning uchun `--ink` bilan aralashtiriladi va mavzu bilan birga
   moslashadi. */
.rec-tone {
  --rec-color: var(--blue); --rec-soft: var(--blue-soft);
  --rec-ink: var(--blue-ink, color-mix(in srgb, var(--blue) 76%, var(--ink)));
}
.rec-tone[data-tone="ok"] {
  --rec-color: var(--green); --rec-soft: var(--green-soft);
  --rec-ink: color-mix(in srgb, var(--green) 55%, var(--ink));
}
.rec-tone[data-tone="info"] {
  --rec-color: var(--blue); --rec-soft: var(--blue-soft);
  --rec-ink: var(--blue-ink, color-mix(in srgb, var(--blue) 76%, var(--ink)));
}
.rec-tone[data-tone="warn"] {
  --rec-color: var(--amber); --rec-soft: var(--amber-soft);
  --rec-ink: color-mix(in srgb, var(--amber) 52%, var(--ink));
}
.rec-tone[data-tone="crit"] {
  --rec-color: var(--red); --rec-soft: var(--red-soft);
  --rec-ink: color-mix(in srgb, var(--red) 62%, var(--ink));
}
.rec-tone[data-tone="muted"] {
  --rec-color: var(--ink-2); --rec-soft: var(--muted-soft);
  --rec-ink: color-mix(in srgb, var(--ink-2) 72%, var(--ink));
}

/* ======================================================================
   1. KARTOCHKANING TUZILISHI — UCH DARAJA

   Mijoz e'tirozi: kartochka bir xil og'irlikdagi qutilar uyumi edi —
   qaysi biri javob, qaysi biri yordamchi ekani ko'rinmasdi. Endi ANIQ
   uch daraja bor va ular BIR-BIRIDAN FARQ QILADI:

     1) `.rec-hero`  — ekran javob beradigan SAVOL ("bu mashina hozir
                       ishlay oladimi, yo'q bo'lsa nega"). Sahifadagi
                       YAGONA tonlangan va ko'tarilgan yuza.
     2) KPI qatori   — asosiy raqamlar (`BL.statCard`, umumiy komponent).
     3) `.rec-sec`   — yordamchi bo'limlar: QUTI EMAS. Faqat jim sarlavha,
                       ostida ingichka chiziq va kontent. Shu sabab
                       kartochkada oldingi 6 ta chegaralangan kartadan
                       birortasi ham qolmadi.

   Oraliqlar — mahsulotning UMUMIY tokenlaridan: bloklar orasida
   `--gap-block` (24px), blok ichida `--gap-in` (16px). Bir xil
   munosabat = bir xil oraliq, hamma ekranda.
   ====================================================================== */
.rec-detail { gap: var(--gap-block, var(--s6)); }

.rec-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: var(--s5);
  padding: var(--gap-in, var(--s4)) var(--pad-page, var(--s6));
  /* Yuza, chegara, radius va soya — UMUMIY `.card` / `.card--raised`
     komponentidan (markupda shu sinflar bor). Bu yerda faqat OHANG
     qo'shiladi: yumshoq tus va chap chetdagi rangli qirra. Soya bu
     faylda QAYTA yozilmaydi — ekranda ko'tarilgan yuza bittagina
     bo'lishi kerak. */
  background:
    linear-gradient(120deg, var(--rec-soft) 0%, transparent 62%),
    var(--card);
  border-left: 4px solid var(--rec-color);
}
.rec-hero__main { min-width: 0; display: grid; gap: var(--s2); align-content: start; }
.rec-hero__badge {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: start; justify-self: start;
  height: 26px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
  background: var(--rec-soft); color: var(--rec-ink);
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: .2px;
}
.rec-hero__dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
/* Faol holat (yo'lda) — yengil "tirik" puls; harakat sezgirligi hurmat qilinadi */
.rec-hero__dot--live { animation: rec-pulse 2.2s var(--ease) infinite; }
@keyframes rec-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rec-color) 45%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* Sarlavha — kartochkaning ASOSIY gapi ("hozir nima bo'lyapti"):
   ekrandagi eng yirik matn, ko'z birinchi shunga tushadi */
.rec-hero__headline {
  margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25;
  color: var(--ink); letter-spacing: -.2px;
  /* Javob — gap, ustun emas: uzun qatorda ko'z qatordan qatorga
     adashmasin (o'qish uchun qulay uzunlik). */
  max-width: 46ch;
}
.rec-hero__meta {
  font-size: var(--fs-table); font-weight: 400; color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
}
.rec-hero__meta b { color: var(--ink); font-weight: 600; }
.rec-hero__side {
  min-width: 0; display: grid; gap: var(--s4); align-content: start;
  padding-left: var(--s5); border-left: 1px solid var(--line);
}

/* --- sabab qatorlari ---
   AVVAL: har sabab alohida chegarali, fonli, soyali QUTI edi — ya'ni
   chegarali kartaning ichida yana 3-4 ta karta. Mijoz e'tirozining
   aynan o'zi. ENDI: chiziq bilan ajratilgan oddiy QATORLAR. Bosiladigani
   hover'da ko'tarilmaydi (u suzuvchi element emas) — chetga chiqqan
   yumshoq tus bilan belgilanadi. */
.rec-reasons {
  display: grid; margin-top: var(--s3);
  border-top: 1px solid var(--line);
}
.rec-reason {
  position: relative; z-index: 0;
  display: flex; gap: var(--s3); align-items: flex-start; width: 100%;
  text-align: left; padding: var(--s3) 0; border: 0;
  border-bottom: 1px solid var(--line);
  background: none; color: var(--ink); font: inherit;
}
.rec-reasons > .rec-reason:last-child { border-bottom: 0; }
/* Hover tusi qatorning matnidan kengroq (chetga 12px chiqadi), lekin
   AJRATGICH CHIZIQLAR tekis turadi — shuning uchun tus alohida qatlamda. */
.rec-reason--link { cursor: pointer; }
.rec-reason--link::before {
  content: ""; position: absolute; z-index: -1;
  inset: 2px calc(var(--s3) * -1); border-radius: 10px;
  background: var(--rec-soft); opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.rec-reason--link:hover::before { opacity: 1; }
.rec-reason--link:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.rec-reason__icon {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px;
  display: grid; place-items: center; margin-top: 1px;
  background: var(--rec-soft); color: var(--rec-color);
}
.rec-reason__icon svg { width: 15px; height: 15px; }
.rec-reason__body { min-width: 0; display: grid; gap: 2px; flex: 1 1 auto; }
.rec-reason__body b { font-size: var(--fs-table); font-weight: 600; }
.rec-reason__body small { font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.4; }
.rec-reason__go { color: var(--ink-3); flex: 0 0 auto; align-self: center; }
.rec-reason__go svg { width: 15px; height: 15px; }
.rec-reason--link:hover .rec-reason__go { color: var(--rec-color); }

/* --- o'ng tomondagi tezkor faktlar --- */
.rec-fact { display: flex; gap: 10px; align-items: center; min-width: 0; }
.rec-fact__icon {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--rec-soft); color: var(--rec-color);
}
.rec-fact__icon svg { width: 15px; height: 15px; }
.rec-fact__body { min-width: 0; display: grid; }
/* Faktning yorlig'i - qiymatidan mayda va jim */
.rec-fact__label {
  font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2);
}
.rec-fact__value {
  font-size: var(--fs-body); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* `<b>` uchun standart `bolder` qiymati 600 li ota-element ichida 900 ga
   aylanadi — ekranda to'rtinchi qalinlik paydo bo'lardi. Shuning uchun
   qalinlik aniq yoziladi. */
.rec-fact__value b { font-weight: 700; }
.rec-fact__value small { font-weight: 400; color: var(--ink-2); }

/* ======================================================================
   1b. YORDAMCHI BO'LIM (`rec.panel`) — CHEGARASIZ

   Avval har bo'lim `.card` edi: oq fon + chegara + soya. Kartochkada
   ularning oltitasi yonma-yon turardi va hech biri ajralmasdi. Endi
   bo'lim — sarlavha, ingichka chiziq va kontent, xolos. Sahifadagi
   yagona "quti" — holat bloki (`.rec-hero`).
   ====================================================================== */
.rec-sec { display: grid; gap: var(--gap-in, var(--s4)); align-content: start; min-width: 0; }
.rec-sec__head {
  display: flex; align-items: flex-end; gap: var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--line);
}
.rec-sec__title {
  font-size: var(--fs-card); font-weight: var(--fw-card); color: var(--ink);
  line-height: 1.3;
}
.rec-sec__sub {
  font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px;
  line-height: 1.35;
}
.rec-sec__actions { margin-left: auto; display: flex; gap: var(--s2); flex: 0 0 auto; }
.rec-sec__body { min-width: 0; display: grid; gap: var(--gap-in, var(--s4)); }
/* Bo'lim ichidagi ixcham ustun. Avval har joyda `style="gap:14px"` yozilgan
   edi — 8px shkalasidan tashqarida; endi bitta sinf, bitta qiymat. */
.stack--tight { gap: var(--s3); }

/* Ohangli ikonka maydoni (hujjat qatori va shunga o'xshashlar) — rang
   `data-tone` dan, ya'ni mavzu bilan birga o'zgaradi. */
.rec-icon { background: var(--rec-soft); color: var(--rec-color); }

/* ======================================================================
   2. HUJJAT MUDDATLARI
   ====================================================================== */
.rec-docs { display: grid; gap: 10px; }
/* Yorliq ustuni chiziqdan KENGROQ: unda endi hujjat nomi bilan birga
   raqami ham bor ("Majburiy sug'urta polisi № POL-481152"), chiziq esa
   faqat yordamchi ko'rsatkich. */
.rec-doc {
  display: grid; grid-template-columns: minmax(150px, 1.7fr) minmax(56px, 1fr) auto;
  gap: var(--s3); align-items: center;
}
.rec-doc__label { min-width: 0; display: grid; }
.rec-doc__label b { font-size: var(--fs-table); font-weight: 600; line-height: 1.3; }
.rec-doc__label small { font-size: var(--fs-meta); color: var(--ink-2); }
.rec-bar {
  height: 7px; border-radius: var(--r-pill); background: var(--muted-soft);
  overflow: hidden;
}
.rec-bar i { display: block; height: 100%; border-radius: inherit;
             background: var(--rec-color); }
.rec-doc__days {
  font-size: var(--fs-meta); font-weight: 600; color: var(--rec-ink);
  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
}

/* ======================================================================
   3. HODISALAR TASMASI (app.css dagi `.timeline` ustiga ohang qo'shadi)
   ====================================================================== */
.timeline__dot.rec-tone { background: var(--rec-soft); color: var(--rec-ink); }
.rec-feed-note { font-size: var(--fs-meta); color: var(--ink-2); margin-bottom: var(--s3); }
/* Havola-tugma mayda matn: `--blue` o'zi 4,1:1 beradi (o'lchangan) */
.rec-link-btn {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--blue-ink, color-mix(in srgb, var(--blue) 76%, var(--ink)));
  font: inherit; font-weight: 600; text-align: left;
}
.rec-link-btn:hover { text-decoration: underline; }

/* ======================================================================
   4. KICHIK YORDAMCHILAR
   ====================================================================== */
/* Izoh — bo'limdagi eng KAM muhim matn. Shuning uchun u eng jim va
   o'qish uchun qulay uzunlikda (juda uzun qator ekranni egallab,
   asosiy raqamlardan ko'ra kattaroq blok bo'lib qolardi). */
.rec-note {
  font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.5;
  display: flex; gap: var(--s2); align-items: flex-start;
  max-width: 76ch;
  /* Chapdagi ingichka chiziq — bu matn bo'limning ASOSIY kontenti emas,
     chetdagi izoh ekanini bir qarashda bildiradi (quti qo'shmasdan). */
  padding-left: var(--s3); border-left: 2px solid var(--line);
}
.rec-note svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: var(--ink-3); }
/* Bo'sh holat — "yozuv yo'q" ni HALOL aytadi, lekin quti emas:
   yumshoq yuza, chegarasiz (punktir ramka yana bitta quti edi). */
.rec-empty {
  padding: var(--s5) var(--s4); text-align: center; color: var(--ink-2);
  font-size: var(--fs-table); background: var(--card-2); border-radius: 12px;
}
.rec-empty b { display: block; color: var(--ink); font-size: var(--fs-body); margin-bottom: 3px; }

/* --- Bo'lim ichidagi raqamlar qatori -------------------------------
   AVVAL: har qiymat chegarali, fonli tabletka edi — bo'lim ichida yana
   5-6 ta mayda quti. ENDI: qiymat tepada, yorlig'i ostida, orasida
   faqat ingichka ajratgich. Ohang endi FONDA emas, qiymat rangida
   (va oldidagi nuqtada) ko'rinadi. */
.rec-chips {
  display: flex; flex-wrap: wrap; gap: var(--s3) 0;
  align-items: stretch;
}
.rec-chip {
  display: inline-grid; gap: 1px; align-content: start;
  padding: 0 var(--s5); border-left: 1px solid var(--line);
  font-size: var(--fs-meta); color: var(--ink-2);
}
.rec-chip:first-child { padding-left: 0; border-left: 0; }
.rec-chip b {
  font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
/* Ohangli qiymat — rangi va oldidagi nuqtasi bilan ajralib turadi */
.rec-chip--tone b { color: var(--rec-ink); }
.rec-chip--tone b::before {
  content: ""; display: inline-block; vertical-align: 2px;
  width: 7px; height: 7px; margin-right: 6px; border-radius: 50%;
  background: var(--rec-color);
}

/* ======================================================================
   4b. RO'YXAT USTIDAGI KPI QATORI — BOSILADIGAN kartalar
   Mijoz talabi: bu kartalar "o'lik to'rtburchak" emas, boshqaruv bo'lishi
   kerak. Karta bosilganda O'Z ekranini ochadi (`?metric=...`), shuning
   uchun u "yoqilgan/o'chirilgan" holatga EGA EMAS — bosilishidan oldin
   kursor, ko'tarilish va o'ng chetdagi strelka bilan "ichiga kiriladi"
   degan ishorani beradi, xolos.
   `kpi--open` sinfi faqat HAQIQATAN bosiladigan kartaga qo'yiladi: soni
   0 bo'lgan karta (ortida yozuv yo'q) tekis va tinch ko'rinadi.
   ====================================================================== */
/* Kartaning O'ZI (o'lcham, chegara, soya, yorliq, izoh, strelka) —
   `BL.statCard` / `app.css` ning ishi. Bu yerda faqat SHU EKRANGA
   xos xulq qoladi: butun mahsulotda KPI kartasi bitta komponent
   bo'lishi kerak, shuning uchun uning ko'rinishi bu faylda QAYTA
   YOZILMAYDI (avval bu yerda padding/radius/soya/yorliq uslubi
   takrorlanardi — o'sha nusxa olib tashlandi). */
.rec-kpi .kpi--open:hover { border-color: var(--rec-color); }

/* FAQAT O'QISH uchun kartalar (kartochka ichidagi raqamlar): ostida
   filtrlanadigan ro'yxat yo'q — demak bosiladigandek ham ko'rinmaydi. */
.rec-metrics .kpi { cursor: default; }
.rec-metrics .kpi:hover {
  transform: none; border-color: var(--line);
  background: var(--card); box-shadow: none;
}

/* ======================================================================
   5. RO'YXATDAGI QATORLAR — bosiladigani ko'rinib tursin
   ====================================================================== */
/* Ixcham qator: bir qatorli katak 40px, ikki qatorlisi esa o'z
   balandligini oladi (jadval katagida `height` — eng KICHIK balandlik). */
.rec-list { --trow-h: 40px; }
.rec-list .table thead th {
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.rec-list .table tbody td { padding: 6px var(--s4); }
.rec-list .table td.num, .rec-list .table th.num {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* Raqam ustuni - jadvaldagi eng muhim qiymat: to'q va qalinroq */
.rec-list .table tbody td.num { font-weight: 600; color: var(--ink); }
.rec-list .table tbody td b { font-weight: 600; color: var(--ink); }
.rec-list .table tbody tr.clickable:hover td { background: var(--card-hover); }
.rec-list .table tbody tr.clickable:focus-visible {
  outline: 2px solid var(--blue); outline-offset: -2px;
}
.rec-list .table tbody tr.clickable td:first-child {
  box-shadow: inset 3px 0 0 0 transparent; transition: box-shadow .14s var(--ease);
}
.rec-list .table tbody tr.clickable:hover td:first-child,
.rec-list .table tbody tr.clickable:focus-visible td:first-child {
  box-shadow: inset 3px 0 0 0 var(--blue);
}
/* Oxirgi ustundagi "ochish" belgisi — sichqoncha kelganda siljiydi */
.rec-open { color: var(--ink-3); display: inline-flex; }
.rec-open svg { width: 16px; height: 16px; transition: transform .14s var(--ease); }
.rec-list .table tbody tr.clickable:hover .rec-open { color: var(--blue); }
.rec-list .table tbody tr.clickable:hover .rec-open svg { transform: translateX(3px); }
.rec-list .record-card:hover { background: var(--blue-soft); }
.rec-list .record-card:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* Holat segmentlari (`.status-tabs`) va ular ostidagi asboblar qatori —
   BITTA boshqaruv bandi bo'lib o'qilsin. Avval ular orasida 20px bor
   edi va ekranda uchta mustaqil chiziq ko'rinardi: segmentlar,
   asboblar, jadval sarlavhasi. Endi segmentlar ro'yxatga YOPISHIB
   turadi (8px) — ya'ni "ro'yxatning boshqaruvi" ekani ko'rinadi.
   ⚠ Segmentlarni asboblar qatorining O'ZIGA ko'chirish `BL.listPage`
   da mos joy (search'dan OLDINGI slot) bo'lishini talab qiladi —
   hisobotda yozilgan. */
.page > .status-tabs + * { margin-top: var(--s2); }

.rec-hint {
  font-size: var(--fs-meta); color: var(--ink-2);
  display: flex; align-items: center; gap: 6px; padding: 0 var(--s5) var(--s3);
}
.rec-hint svg { width: 13px; height: 13px; color: var(--ink-3); }

/* ======================================================================
   6. TOR EKRAN (telefon)
   ====================================================================== */
@media (max-width: 1150px) {
  .rec-hero { grid-template-columns: 1fr; padding: var(--s5); }
  .rec-hero__side {
    padding-left: 0; padding-top: var(--s4);
    border-left: 0; border-top: 1px solid var(--line);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Telefon: KPI kartalari BITTA emas, IKKITA ustunda (bir ekranda to'rttasi
   ham ko'rinadi — ular endi boshqaruv, ularni qidirib aylantirish kerak
   emas). `app.css` dagi `.grid--kpi { 1fr }` bilan ustunlik bir xil —
   `records.css` keyin yuklanadi, shuning uchun shu qoida ustun turadi. */
@media (max-width: 720px) {
  .rec-kpi, .rec-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }

  /* Barmoq uchun: tegish maydoni kamida 40px. Element bilan birga
     yoziladi (`select.select`) — `app.css` dagi `.filters .select`
     qoidasidan ustun bo'lishi uchun. */
  .rec-list .btn, .rec-list select.select, .rec-list input.input,
  .rec-list .toolbar .input { min-height: 40px; }
  .rec-list .page-btn { min-width: 40px; height: 40px; }
  .rec-list .pagination select.select { min-height: 40px; height: 40px; }
  .rec-tabs .status-tab { min-height: 40px; }
  /* Haydovchilar ekranining o'ng panelidagi tablar (Faoliyat / Statistika /
     Hujjatlar) — barmoq uchun kamida 40 px */
  .rec-rail .vdetail__tab { min-height: 40px; display: inline-flex;
                            align-items: center; }
  .rec-rail .soft-button { min-height: 40px; }
  .rec-list .chip { height: 32px; }
  .rec-list .chip button { width: 24px; height: 24px; position: relative; }
  .rec-list .chip button::after { content: ""; position: absolute; inset: -8px; }
  .rec-list .record-card { min-height: 56px; }

  /* Matn-havola (hodisa tasmasidagi "…buyurtmasini ochish", haydovchi
     nomi) barmoq uchun kichik edi — 20px. Ko'rinishi O'ZGARMAYDI, faqat
     tegish maydoni 40px gacha kengaytiriladi (ko'rinmas qoplama). */
  .rec-link-btn { position: relative; }
  .rec-link-btn::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 40px; transform: translateY(-50%);
  }
}

@media (max-width: 600px) {
  .rec-hero { padding: var(--s4); gap: var(--s4); }
  .rec-hero__headline { font-size: 19px; }
  .rec-hero__side { grid-template-columns: 1fr; }
  .rec-doc { grid-template-columns: minmax(0, 1fr) auto; }
  .rec-doc .rec-bar { grid-column: 1 / -1; order: 3; }
  .rec-hint { padding: 0 var(--s4) var(--s3); }
  /* Raqamlar qatori tor ekranda ustun-ustun emas, IKKI USTUN bo'ladi:
     chiziqli ajratgich o'rniga panjara (aks holda qatorlar cho'zilib,
     bo'lim juda uzun bo'lib ketardi). */
  .rec-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: var(--s3) var(--s4); }
  .rec-chip { padding: 0; border-left: 0; }
  .rec-sec__head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-hero__dot--live { animation: none; }
}