/*
 * PIKSELL — mobil/planshet moslashuvi (2026-09-22).
 *
 * Sayt ~24 ta sahifada BIR XIL asosiy struktura ishlatadi:
 *   .shell (flex konteyner) > .sidebar (240px, chapda) + .main (qolgan joy)
 *     .main ichida .topbar (yuqori panel: qidiruv, do'kon tanlash, bildirishnoma...)
 *
 * Shu umumiylikka tayanib, HAR BIR sahifani alohida qayta yozish o'rniga,
 * BITTA umumiy CSS (shu fayl) + BITTA umumiy JS (responsive-nav.js) barcha
 * sahifalarga ulanadi. Sidebar mobil ekranda "tortma panel" (off-canvas
 * drawer)ga aylanadi, uni ochish/yopish tugmasini esa responsive-nav.js
 * o'zi DINAMIK ravishda .topbar ichiga qo'shadi - shuning uchun har bir
 * HTML faylning o'zini qo'lda tahrirlashning hojati yo'q.
 *
 * Bu fayl BARCHA sahifadagi <style> bloklaridan KEYIN ulanishi kerak
 * (CSS tartibi bo'yicha ustunlik uchun) - shuning uchun <link> teglari
 * doim </head> yopilishidan oldin, oxirgi qatorda joylashtiriladi.
 */

/* ============ Umumiy, barcha o'lchamlar uchun ============ */

/* Juda uzun so'z/matn tufayli gorizontal skroll chiqib ketmasligi uchun. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Mobil-tortma panel ochish/yopish tugmasi (JS tomonidan qo'shiladi) -
   standart holatda ko'rinmaydi, faqat kichik ekranlarda chiqadi. */
.pk-hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--border, #333);
  background: var(--surface, #161F31);
  color: var(--text, #FAFAFA);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.pk-hamburger-btn svg { width: 19px; height: 19px; }

/* Sidebar orqasidagi qoraytiruvchi qatlam (mobil tortma panel ochilganda) -
   tashqarisiga bosilsa panelni yopish uchun. */
.pk-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
}
.pk-sidebar-overlay.pk-open { display: block; }

/* ============ Planshet va kichikroq (<=1024px) ============ */
@media (max-width: 1024px) {
  /* Ko'p sahifada jadval/kartochka gridlari qattiq ustunlarga
     bo'lingan (masalan "grid-template-columns: repeat(4, 1fr)") -
     bularni siqmasdan, mumkin bo'lgancha moslashtiramiz. */
  .stats-grid, .kpi-grid, .cards-grid, .summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  }
}

/* ============ Mobil va kichik planshet (<=880px) ============ */
@media (max-width: 880px) {
  /* --- Sidebar: statik ustundan, tortma (off-canvas) panelga --- */
  .shell { display: block; height: auto; min-height: 100vh; overflow: visible; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 78vw;
    max-width: 280px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.35);
  }
  .sidebar.pk-open { transform: translateX(0); }

  .main {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  /* Hamburger tugmasi endi ko'rinadi. */
  .pk-hamburger-btn { display: flex; }

  /* --- Topbar: qidiruv qutisi va do'kon tanlash tugmasi torroq joyga
     sig'ishi uchun moslashadi, hamburger tugmasi eng chapda chiqadi. --- */
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    position: sticky;
  }
  .search-box { order: 3; max-width: 100%; flex-basis: 100%; }
  .topbar-right { margin-left: 0; }

  /* --- Kontent bloklari: yon panellar (masalan "ikki ustunli" layout)
     bitta ustunga tushadi - bu deyarli barcha sahifalarda ishlatiladigan
     umumiy naming konvensiyasi. --- */
  .content, .page-content, .dashboard-grid, .two-col, .split-layout,
  .layout-2col, .grid-2, .analytics-grid {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* --- Statistik kartochkalar: 2 ustunga tushadi (0 ustunga emas,
     shunda hali ham ixcham ko'rinadi). --- */
  .stats-grid, .kpi-grid, .cards-grid, .summary-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* --- Jadvallar: gorizontal skroll bilan, siqilib buzilmasdan --- */
  table { min-width: 640px; }
  .table-scroll-wrap, .fin-table-wrap, .table-wrap, .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Agar jadval hech qanday "-wrap" konteynersiz to'g'ridan-to'g'ri
     joylashtirilgan bo'lsa ham (ba'zi eski sahifalarda), baribir
     gorizontal skroll bilan ko'rsatiladi, sahifa butunlay buzilib
     ketmasligi uchun. */
  table:not(.table-scroll-wrap table):not(.table-wrap table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Modal/popup oynalar: ekran kengligiga moslashadi --- */
  .modal, .modal-content, .popup, .dialog {
    width: 92vw !important;
    max-width: 92vw !important;
  }
}

/* ============ Kichik telefon (<=480px) ============ */
@media (max-width: 480px) {
  .topbar { padding: 10px 12px; }
  .brand { font-size: 15.5px; }
  .icon-btn { width: 32px; height: 32px; }
  .stats-grid, .kpi-grid, .cards-grid, .summary-grid {
    grid-template-columns: 1fr !important;
  }
}