/* ============================================================
   Zakaz Panel — Responsive layer (mobile + tablet)
   CSS-only. Yuklanish tartibi: eng oxirgi import (styles.css).
   Breakpointlar:
     <= 1024px  planshet (tablet)
     <=  768px  katta telefon / kichik planshet
     <=  600px  telefon
     <=  400px  tor telefon
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   0. Gorizontal overflow qo'riqchisi
   Sahifa (body) hech qachon yonga siljimaydi; faqat
   ichki konteynerlar (jadval) siljiydi.
   ───────────────────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: clip; }

/* Grid/flex bolalari default `min-width:auto` tufayli konteynerni
   kengaytirib yuboradi — panel ichida buni to'xtatamiz. */
.zp-main .row > [class*="col-"] { min-width: 0; }

img, svg, video, canvas { max-width: 100%; }

/* ─────────────────────────────────────────────────────────
   1. Jadval scroll konteyneri (.zp-tw)
   base.html dagi kichik skript o'ralmagan har bir <table> ni
   shu div ichiga soladi. Sahifa emas — jadval siljiydi.
   ───────────────────────────────────────────────────────── */
.zp-tw {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.zp-tw > table { min-width: max-content; }
/* Jadval o'z kartasining burchaklaridan chiqmasin */
.zp-tw::-webkit-scrollbar { height: 8px; }
.zp-tw::-webkit-scrollbar-track { background: transparent; }
.zp-tw::-webkit-scrollbar-thumb {
  background: rgba(108, 120, 144, 0.32);
  border-radius: 999px;
}
.zp-tw::-webkit-scrollbar-thumb:hover { background: rgba(108, 120, 144, 0.55); }

/* Yonga siljish mumkinligini bildiruvchi nozik soya (faqat touch) */
@media (max-width: 1024px) {
  .zp-tw.is-scrollable {
    background:
      linear-gradient(90deg, var(--surface-card) 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
      linear-gradient(270deg, var(--surface-card) 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(15,23,42,0.14), rgba(0,0,0,0)) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,0.14), rgba(0,0,0,0)) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ─────────────────────────────────────────────────────────
   2. PLANSHET  (<= 1024px)
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .zp-main { padding: var(--space-5) var(--space-5) var(--space-8); }

  /* 4 ustunli KPI qatorlari planshetda 2 ga tushadi */
  .kpi-grid,
  .mini-grid,
  .kpi-row,
  .it-stats,
  .hr-kpi-row,
  .tl-kpi-row,
  .th-kpi-row,
  .bl-stat-row,
  .sa-kpi-row,
  .st-kpi-row,
  .sup-kpi-row,
  .zp-statgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Ikki ustunli sahifa maketlari bitta ustunga */
  .dash-grid,
  .hr-grid-2,
  .bl-duo { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ─────────────────────────────────────────────────────────
   3. TELEFON + kichik planshet  (<= 768px)
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .zp-main { padding: var(--space-4) var(--space-4) var(--space-10); }

  /* Sahifa sarlavhalari — ekranga mos o'lcham */
  .zp-main h1 { font-size: clamp(1.25rem, 5.2vw, 1.6rem); }
  .zp-main h2 { font-size: clamp(1.05rem, 4.4vw, 1.35rem); }
  .zp-main h3 { font-size: clamp(0.95rem, 4vw, 1.15rem); }

  /* Kartalar ichki bo'shlig'i kichrayadi */
  .card > .card-body { padding: var(--space-4); }

  /* Jadval hujayralari ixchamroq */
  .ds-table th { padding: 8px 10px; font-size: 10.5px; }
  .ds-table td { padding: 8px 10px; font-size: 12.5px; }
  .ds-table td, .ds-table th { white-space: nowrap; }

  /* Tugma / input — barmoq uchun qulay o'lcham */
  .btn,
  button:not(.zp-nav-toggle):not(.zp-burger):not(.icon-btn):not([class*="close"]),
  .form-control,
  .form-select,
  select,
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="date"] {
    min-height: 40px;
  }
  .btn-sm, .btn.btn-sm { min-height: 34px; }

  /* Bootstrap qatorlari mobilda yopishib qolmasin */
  .zp-main .row { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }

  /* Filtr paneli — vertikal stack, to'liq kenglik */
  .zp-filterbar {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: var(--space-2);
  }
  .zp-filterbar > * { width: 100% !important; max-width: 100% !important; }
}

/* ─────────────────────────────────────────────────────────
   4. TELEFON  (<= 600px)
   ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .zp-main { padding: var(--space-3) var(--space-3) var(--space-12); }

  /* KPI kartalar telefonda 2 ustun — foydalanuvchi so'rovi:
     "cardlarni kichraytir telefon uchun" */
  .kpi-grid,
  .mini-grid,
  .kpi-row,
  .it-stats,
  .hr-kpi-row,
  .tl-kpi-row,
  .th-kpi-row,
  .bl-stat-row,
  .sa-kpi-row,
  .st-kpi-row,
  .sup-kpi-row,
  .zp-statgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-2) !important;
  }

  /* Ixcham KPI karta ko'rinishi */
  .zp-main .kpi-card,
  .zp-main .mini-card,
  .zp-main .kpi-box,
  .zp-main .stat-card {
    padding: 10px !important;
  }

  /* Sarlavhali qismlar bir-biriga tiqilmasin */
  .card > .card-header,
  .ds-card-header {
    padding: 12px 14px 10px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Modal — telefonda deyarli butun ekran */
  .modal-dialog { margin: 8px; max-width: calc(100vw - 16px); }
}

/* ─────────────────────────────────────────────────────────
   5. Tor telefon (<= 400px)
   ───────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .zp-main { padding: 10px 10px var(--space-12); }
  .ds-table th { padding: 7px 8px; font-size: 10px; }
  .ds-table td { padding: 7px 8px; font-size: 12px; }
}

/* ─────────────────────────────────────────────────────────
   6. Umumiy yordamchi klasslar (sahifalarda qayta ishlatiladi)
   ───────────────────────────────────────────────────────── */

/* Avtomatik moslashuvchi statistika grid — yangi sahifalar shuni ishlatsin */
.zp-statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

/* Mobilda yashirinadigan / ko'rinadigan elementlar */
@media (max-width: 600px) {
  .zp-hide-mobile { display: none !important; }
}
@media (min-width: 601px) {
  .zp-only-mobile { display: none !important; }
}

/* Jadvalning birinchi ustunini "yopishtirish" (uzun nomli jadvallar) */
@media (max-width: 1024px) {
  .zp-tw.zp-sticky-first th:first-child,
  .zp-tw.zp-sticky-first td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface-card);
    box-shadow: 1px 0 0 var(--border-subtle);
  }
  .zp-tw.zp-sticky-first thead th:first-child {
    z-index: 3;
    background: var(--navy-900) !important;
  }
}