/* ============================================================================
   AURORA+ VERSIYALARNI BOSHQARISH — RESPONSIVE QATLAM
   ----------------------------------------------------------------------------
   NIMA UCHUN ALOHIDA FAYL: `aurora-ds.css` — Claude Design'dagi "Aurora Design
   System" bundle'ining BAYT-ANIQ nusxasi (tokens + fonts + bundle merge).
   Uni joyida tuzatish DesignSync bilan rasinxron bo'ladi va keyingi tortishda
   yo'qoladi. Shuning uchun telefon/planshet tuzatishlari shu ustama qatlamda.

   ULANISH TARTIBI MUHIM: bu fayl har sahifada `<style>` blokidan KEYIN
   ulanadi — shunda sahifaning o'z qoidalari (masalan `.page { padding }`,
   `@media (max-width: 900px)`) bir xil aniqlikda ham ustidan yoziladi va
   `!important` kerak bo'lmaydi.

   TAYANCH NUQTALAR
     ≤ 1000px  planshet — sahifa hoshiyasi
     ≤  860px  chrome ikki qator bo'ladi, menyu gorizontal suriladi
     ≤  700px  TELEFON — jadval kartaga, modal pastdan chiqadigan varaqqa,
               tipografiya bir pog'ona yuqoriga, teginish nishoni 38px
     ≤  420px  tor telefon — qo'shimcha zichlik

   ESLATMA: `.page` klassi login.html'da BOShQA element (tashqi grid), shuning
   uchun sahifa konteyneri hamma joyda `main.page` deb yoziladi.
   ========================================================================== */

/* ---- barcha o'lchamlar ---------------------------------------------------- */

/* 100vh telefon brauzerida manzil paneli ostiga kirib ketadi — dvh haqiqiy
   ko'rinadigan balandlik. */
.app { min-height: 100dvh; }

/* Gorizontal oqishga to'siq: rasm/oldindan formatlangan matn hech qachon
   sahifani kengaytirmasin. */
img, svg, pre { max-width: 100%; }

/* Telefondagi saralash qatori — faqat ≤700px da ko'rinadi (pastda) */
.m-sort { display: none; }

/* ---- ≤ 1000px — planshet ------------------------------------------------- */
@media (max-width: 1000px) {
  main.page { padding-left: var(--sp-10); padding-right: var(--sp-10); }
  .chrome-top, .chrome-nav, .page-foot { padding-left: var(--sp-10); padding-right: var(--sp-10); }
}

/* ---- ≤ 860px — chrome ikki qator, menyu suriladi ------------------------- */
@media (max-width: 860px) {
  /* Sticky menyu ishlashi uchun: DS'da `.app { overflow-x: hidden }` — bitta
     o'q hidden bo'lsa ikkinchisi ham `auto`ga aylanadi va `.app` scroll
     konteyner bo'lib qoladi, sticky esa viewport'ga nisbatan ishlamaydi.
     `clip` xuddi shunday qirqadi, lekin scroll konteyner YASAMAYDI. */
  .app { overflow-x: clip; }

  .chrome-nav {
    position: sticky; top: 0; z-index: 30;
    height: auto; min-height: 0; padding: 0; overflow: visible;
    flex-wrap: wrap; align-items: stretch; gap: 0;
  }
  /* "Versiyalar" yorlig'i va cho'zuvchi — tepadagi ws-tab allaqachon
     qaysi modul ekanini aytadi, telefonda takror. */
  .chrome-nav .nav-mod, .chrome-nav .nav-spacer { display: none; }

  /* 1-qator: kim kirgan + amallar */
  .chrome-nav .nav-right {
    order: 1; width: 100%; min-height: 40px;
    padding: var(--sp-2) var(--sp-10); gap: var(--sp-5);
    justify-content: flex-end; flex-shrink: 1; min-width: 0;
    border-bottom: 1px solid var(--line-2);
  }
  .chrome-nav .nav-user > span:not(.nav-ava),
  .chrome-nav .whoami > span:not(.nav-ava) {
    max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Holat yorlig'i: index'da soat (qisqa), admin'da "gitlab: off · …" (uzun) —
     ikki qatorga sakramasin. */
  .chrome-nav .nav-badge {
    max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* 2-qator: bo'limlar — gorizontal suriladigan tasma */
  .chrome-nav .nav-scroll {
    order: 2; width: 100%; overflow-x: auto; overflow-y: hidden;
    padding: var(--sp-3) var(--sp-10); gap: var(--sp-2);
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chrome-nav .nav-scroll::-webkit-scrollbar { display: none; }
  .chrome-nav .nav-item { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ---- ≤ 820px — JADVAL → KARTA -------------------------------------------
   Bu chegara telefondan kengroq: 768px planshetda ham 9 ustunli jadval
   ~1120px joy talab qiladi, ya'ni gorizontal suriladi va eng muhim ustun —
   mijoz nomi — ekrandan chiqib ketadi. Karta ko'rinishi hamma maydonni
   ko'rsatadi va qator kimga tegishli ekanini yo'qotmaydi.
   ---------------------------------------------------------------------- */
@media (max-width: 820px) {
  /* == teginish nishoni: barmoq uchun 38px pol (DS'da 26–30px).
        Planshet ham teginish qurilmasi, shuning uchun 700px emas, shu
        chegarada — sichqonchaga kattaroq nishon zarar qilmaydi. == */
  .icon-btn, .icon-btn.sm,
  #clients-table .icon-btn.sm { width: 38px; height: 38px; border-radius: var(--radius-sm); }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .rt-btn { min-width: 38px; height: 38px; }
  .nav-item { min-height: 34px; }
  .eye { width: 38px; height: 38px; }              /* login: parolni ko'rsatish */
  .inp-wrap .inp { padding-right: 52px; }

  /* == JADVAL → KARTA ====================================================
     Telefonda 6–9 ustunli jadval gorizontal scroll bo'lardi va eng muhim
     ustun — mijoz nomi — ekrandan chiqib ketardi. Shuning uchun har qator
     alohida karta: sarlavha = nom, qolgani "yorliq → qiymat" juftliklari.
     Yorliqlar `data-label` atributidan olinadi (index.html'dagi labelCells
     har render'dan keyin thead sarlavhalarini yacheykalarga yozadi). ==== */
  .tbl-wrap { overflow: visible; background: none; border: 0; box-shadow: none; margin-top: 0; }
  .tbl { display: block; width: 100%; min-width: 0; }
  .tbl caption { display: none; }
  .tbl thead { display: none; }
  .tbl tbody { display: grid; gap: var(--sp-6); }

  .tbl tbody tr {
    display: block; padding: var(--sp-2) var(--sp-7) var(--sp-3);
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  }
  .tbl tbody tr:hover { background: var(--card); }
  .tbl tbody tr:last-child td { border-bottom: 1px solid var(--line-2); }

  /* Yorliq — QIYMAT USTIDA, alohida blok.
     NIMA UCHUN grid/flex EMAS: yacheyka ichida bir nechta bola bo'lishi
     mumkin (`.upd-abs` + `.upd-rel`) va hatto xom matn ("… · …") — grid
     ularni yorliq ustuniga tashlab yuboradi, flex esa inline oqimni
     buzadi. Blok yorliq har qanday markup bilan ishlaydi va render
     funksiyalari bilan bog'lanib qolmaydi. */
  .tbl tbody td {
    display: block; padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line-2); vertical-align: baseline;
  }
  .tbl tbody tr td:last-child { border-bottom: 0; }
  .tbl tbody td::before {
    content: attr(data-label); display: block; margin-bottom: var(--sp-1);
    font-size: var(--text-2xs); font-weight: var(--fw-bold); line-height: 1.4;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;
  }
  /* yorliqsiz yacheyka: thead'da bo'sh sarlavha, "hech narsa topilmadi"
     qatori (colspan) va amallar ustuni (tugmalarga yorliq kerak emas) */
  .tbl tbody td[data-label=""]::before,
  .tbl tbody td[colspan]::before,
  .tbl tbody td:has(> .row-actions)::before { display: none; }
  .tbl tbody td[colspan] { border-bottom: 0; text-align: center; }

  /* kartaning sarlavhasi: identifikator ustuni (nom) — yorliqsiz, yirik */
  #clients-table tbody td:first-child,
  #plans-table tbody td:first-child,
  #users-table tbody td:first-child {
    padding: var(--sp-5) 0 var(--sp-4);
    font-size: var(--text-2xl); font-weight: var(--fw-bold);
  }
  #clients-table tbody td:first-child::before,
  #plans-table tbody td:first-child::before,
  #users-table tbody td:first-child::before { display: none; }
  /* renderTable nomga inline `style="font-size:var(--text-xl)"` beradi —
     inline uslubni faqat !important bosadi */
  #clients-table tbody td:first-child .pname { font-size: var(--text-2xl) !important; }

  .tbl tbody td:has(> .row-actions) { padding-top: var(--sp-5); }
  .row-actions, #clients-table .row-actions { gap: var(--sp-4); }

  /* Bo'sh maydon ("—") kartada butun qator egallamasin: yorliq va chizig'i
     bir satrda. Faqat yolg'iz `.dash` bo'lgan yacheykaga — boshqa mazmun
     bilan aralashgan tire tegmaydi. */
  .tbl tbody td:has(> .dash:only-child),
  .tbl tbody td:has(> :only-child > .dash:only-child) {
    display: flex; align-items: baseline; gap: var(--sp-4);
    padding: var(--sp-3) 0;
  }
  .tbl tbody td:has(> .dash:only-child)::before,
  .tbl tbody td:has(> :only-child > .dash:only-child)::before { margin-bottom: 0; }

  /* karta ichida kenglik cheklovlari va min-width'lar keraksiz */
  .note-cell { max-width: none; }
  #audit-table, #login-table { min-width: 0; }
  .tbl select, .tbl .inp { min-width: 0; width: 100%; }
  /* qator markup'ida inline `style="max-width:130px"` bor — kartada keraksiz */
  .tbl tbody td .inp, .tbl tbody td select { max-width: none !important; }
  .vcell { flex-direction: row; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }

  /* == TELEFONDA SARALASH ================================================
     thead yashiringani uchun sarlavhani bosib saralash imkoni yo'qoladi —
     jadval ustidagi tasma o'sha th.sortable larni bosadi (mantiq bitta
     joyda qoladi). Tuzuvchisi: index.html → buildSortBar(). ============ */
  .m-sort {
    display: flex; align-items: center; gap: var(--sp-2);
    margin: 0 0 var(--sp-6); padding-bottom: var(--sp-2);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .m-sort::-webkit-scrollbar { display: none; }
  .m-sort-lbl {
    flex: 0 0 auto; padding-right: var(--sp-3);
    font-size: var(--text-2xs); font-weight: var(--fw-bold);
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;
  }
  .m-sort-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-3);
    min-height: 34px; padding: 0 var(--sp-6);
    border: 1px solid var(--line); border-radius: var(--radius-full);
    background: var(--card); color: var(--ink-2);
    font: var(--fw-semibold) var(--text-md)/1 var(--font-sans); cursor: pointer;
  }
  .m-sort-btn.on { border-color: var(--brand); background: var(--brand-050); color: var(--brand-700); }
  .m-sort-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
  .m-sort-ic { font-variant-numeric: tabular-nums; }

  /* Planshetda karta tor bo'lib qolmasin — ikki ustun. Telefonda (≤560px)
     bitta ustun. */
  @media (min-width: 561px) {
    .tbl tbody { grid-template-columns: 1fr 1fr; align-items: start; }
    .tbl tbody td[colspan] { grid-column: 1 / -1; }
  }
}

/* ---- ≤ 700px — TELEFON --------------------------------------------------- */
@media (max-width: 700px) {

  /* == tipografiya: DS shkalasi 12–13px — sichqoncha va 24" monitor uchun.
        Telefonda bir pog'ona yuqoriga. Tokenlar orqali — shunda hamma
        komponent birgalikda o'sadi, qoidalarni yakka tuzatish kerak emas. == */
  :root {
    --text-2xs: 11px;
    --text-xs:  12px;
    --text-sm:  12.5px;
    --text-base: 13px;
    --text-md:  13.5px;
    --text-lg:  14.5px;
    --text-xl:  15px;
    --text-2xl: 16.5px;
    --text-3xl: 18px;
    --text-4xl: 22px;
    --text-5xl: 26px;
  }

  main.page { padding: var(--sp-8) var(--sp-8) var(--sp-16); }
  .chrome-top, .chrome-nav .nav-right, .chrome-nav .nav-scroll,
  .page-foot { padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .chrome-top { gap: var(--sp-4); }

  section { margin-top: var(--sp-12); }

  /* == kiritish maydonlari 16px: iOS Safari kichik shriftli maydonga fokus
        bo'lganda sahifani O'ZI kattalashtiradi (16px — chegara) == */
  .inp, .textarea, select, textarea,
  .search-box input, .tbl .filter-row input, .tbl .filter-row select,
  input[type="text"], input[type="password"], input[type="search"],
  input[type="email"], input[type="number"], input[type="date"], input[type="time"],
  input[type="datetime-local"] { font-size: 16px; }
  .search-box.sm { height: 40px; }
  .toolbar .tabs, .toolbar .seg, .toolbar .btn, .toolbar select,
  .toolbar .search-box, .toolbar .field-date { height: auto; min-height: 40px; }

  /* == sarlavha va asosiy amal == */
  .page-head { margin-bottom: var(--sp-7); gap: var(--sp-3); }
  .page-head .ph-action { margin-left: 0; width: 100%; }
  .page-head .ph-action .btn { width: 100%; }

  /* == asboblar qatori: qidiruv butun kenglikda, filtr chiplari suriladi ==
        (qidiruv qutisiga inline `style` berilgan — shuning uchun !important) */
  .toolbar { gap: var(--sp-5); margin-bottom: var(--sp-6); }
  .toolbar .search-box { flex: 1 1 100% !important; max-width: none !important; }
  .toolbar .tabs, #fchips {
    max-width: 100%; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .toolbar .tabs::-webkit-scrollbar, #fchips::-webkit-scrollbar { display: none; }
  .toolbar .tabs > * { flex: 0 0 auto; }


  /* == DRIFT RO'YXATI (imzo element) ======================================
     Desktopda 4 ustun: nom · versiya · bar · orqada qolganlik. Telefonda
     bar butun kenglikni oladi — ya'ni imzo element kichraymaydi, kuchayadi.
       nom          orqada
       versiya
       ━━━━━━━━━━━━━━━━━━  == */
  .drift-card { padding: var(--sp-5) var(--sp-7) var(--sp-6); }
  .drift { gap: 0; }
  .drift-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name lag" "ver ver" "track track";
    row-gap: var(--sp-3); column-gap: var(--sp-5);
    padding: var(--sp-6) var(--sp-1); border-radius: 0;
    border-bottom: 1px solid var(--line-2);
  }
  .drift-row:last-child { border-bottom: 0; }
  .drift-row > :nth-child(1) { grid-area: name; }
  .drift-row > :nth-child(2) { grid-area: ver; }
  .drift-row > :nth-child(3) { grid-area: track; }
  .drift-row > :nth-child(4) { grid-area: lag; }
  .drift-name { font-size: var(--text-2xl); }
  .drift-track { height: 8px; }

  /* == MODAL → pastdan chiqadigan varaq ===================================
     Telefonda markazdagi oyna barmoqdan uzoq va klaviatura ochilganda
     siqilib qoladi. Pastga yopishtiramiz: tugmalar barmoq ostida. == */
  .cn-modal-bg { align-items: end; padding: 0; }
  .cn-modal, .fm-modal, .rel-modal {
    width: 100%; max-width: none; max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
  }
  .cn-modal-head { padding: var(--sp-7) var(--sp-8) var(--sp-6); }
  .cn-modal-body { padding: var(--sp-7) var(--sp-8); }
  .cn-modal-foot {
    padding: var(--sp-6) var(--sp-8);
    padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom));
    flex-wrap: wrap; gap: var(--sp-4);
  }
  .cn-modal-foot .btn { flex: 1 1 auto; justify-content: center; }
  .fm-msg { flex: 1 1 100%; margin-right: 0; }
  .fm-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .rel-modal .cn-modal-head { flex-wrap: wrap; }
  .rel-modal-links { width: 100%; order: 3; }

  /* == relizlar ro'yxati == */
  .rel-item { padding: var(--sp-6) var(--sp-7); }
  .rel-head { gap: var(--sp-3) var(--sp-5); }
  .rel-links { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .rel-desc { max-width: none; }
  .rel-more-row { padding: var(--sp-6) var(--sp-7); }

  /* == mijoz sahifasi va rich-text muharriri == */
  .cd-top { flex-wrap: wrap; gap: var(--sp-4); }
  .cd-top .btn { width: 100%; }
  .doc-head { padding: var(--sp-6) var(--sp-7); gap: var(--sp-4); }
  .doc-head .btn { flex: 1 1 auto; }
  /* Muharrir paneli: 14 tugma 375px'ga sig'sin — hoshiya ixcham, lekin
     teginish nishoni 38px saqlanadi (balandlik hisobiga). */
  .rt-bar { padding: var(--sp-3) var(--sp-5); gap: var(--sp-1); }
  .rt-bar .sep { margin: 0 var(--sp-1); }
  .rt-btn { padding: 0 var(--sp-3); }
  .rt-doc { padding: var(--sp-7) var(--sp-7); }
  .rt-doc ul, .rt-doc ol { padding-left: var(--sp-12); }
  /* mijoz yozgan jadval sahifani kengaytirmasin */
  .rt-doc table { display: block; overflow-x: auto; }
  .doc-foot { padding: var(--sp-6) var(--sp-7); }
  .doc-hint { margin-right: 0; flex: 1 1 100%; }

  /* == pastki qator == */
  .page-foot { flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-16); }

  /* == login sahifasi == */
  .login-note, .setup-note { font-size: var(--text-md); }
}

/* ---- ≤ 420px — tor telefon ---------------------------------------------- */
@media (max-width: 420px) {
  main.page { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .chrome-top, .chrome-nav .nav-right, .chrome-nav .nav-scroll,
  .page-foot { padding-left: var(--sp-6); padding-right: var(--sp-6); }

  /* Foydalanuvchi nomi tushib qoladi — avatar qoladi (chrome qatori bitta
     satrda sig'sin). */
  .chrome-nav .nav-user > span:not(.nav-ava),
  .chrome-nav .whoami > span:not(.nav-ava) { display: none; }

  /* 320px: soat + avatar + 2 tugma bir satrga zo'rg'a sig'adi. Oraliq va
     tugma hoshiyasini qisqartiramiz; soat esa qisqarmasin — "1…" degan
     yorliqning ma'nosi yo'q (u ma'lumot tirikligini ko'rsatadi). */
  .chrome-nav .nav-right { gap: var(--sp-3); }
  .chrome-nav .nav-badge { flex-shrink: 0; max-width: none; }
  .chrome-nav .nav-right .btn-sm { padding-left: var(--sp-5); padding-right: var(--sp-5); }

  .tbl tbody tr { padding-left: var(--sp-6); padding-right: var(--sp-6); }

  .drift-card { padding: var(--sp-4) var(--sp-6) var(--sp-5); }
  .rel-item, .rel-more-row { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .rt-doc { padding: var(--sp-6); }
}

/* ---- ≤ 360px — eng tor telefonlar ---------------------------------------- */
@media (max-width: 360px) {
  /* Bu kenglikda soat + avatar + 2 tugma sig'maydi: avatar tushadi (kim
     kirgani /admin sahifasida ko'rinadi), soat va tugmalar qoladi. */
  .chrome-nav .nav-user, .chrome-nav .whoami { display: none; }
}