/* ==========================================================================
   MARK1 CRM — DASHBOARD POLISH v1.0
   ui-ux-pro-max review qatlamı (dashboard.html uchun, premium-theme keyin)
   Muhimlik tartibi: A11y → Touch → Performance → Style → Layout → Type
   ========================================================================== */

/* ─── 1. ACCESSIBILITY: global focus-visible (WCAG 2.4.7) ────────────────── */
/* Bootstrap/premium `outline:none` qiladi — shuning uchun yuqori spesifiklik
   + !important bilan klaviatura fokusini qaytarish SHART. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--brand-primary) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--brand-surface) !important;
}
.skip-link:focus-visible { outline-offset: 0; }

/* ─── 2. REDUCED MOTION (prefers-reduced-motion) ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── 3. GLOBAL COMPONENT BASE ────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.6; }

/* Card yuzasi — dashboard ichidagi 30+ takroriy inline style o'rniga */
.card {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
}

/* Form nazoratlari — minimal-balandlik (touch target) */
.form-control,
.form-select,
select.form-control {
  min-height: 42px;
}
textarea.form-control { min-height: 0; }
.form-label { letter-spacing: 0.01em; }

/* Raqamlar tabular — animatsiyali counter'larda raqam "sakramasligi" uchun */
.counter,
.daily-c,
.daily-counter,
.tranzik-text,
#totalSum,
#overdueAmount,
#upcomingAmount,
#totalAmount,
.profit-preview,
.table td.num,
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ─── 3b. WCAG AA CONTRAST (axe color-contrast topilgan 3 ta buzilish) ───── */
/* .text-danger var(--danger)=#EF4444 da 11px matn faqat 3.76:1 edi.
   Kichik delta matnlari uchun quyuqroq semantic-text tokenlari ishlatiladi. */
.counter-change.text-danger,
.counter-change.text-danger * { color: var(--danger-text) !important; }
.counter-change.text-success,
.counter-change.text-success * { color: var(--success-text) !important; }

/* Stock kartalari: style.css `.stock-card.danger` fonni #fff5f5 qilib qo'yadi
   (premium `.stock-card` dan spesifikroq) — shuning uchun matn ranglari
   shu och fon uchun ham AA'dan yuqori bo'lishi shart. */
.stock-category { color: var(--text-muted); }
.stock-status.danger { color: var(--danger-text); }
.stock-status.warning { color: var(--warning-text); }

/* Qorong'i mavzuda och rangli danger/warning kartalarni ham tokenlarga o'tkazamiz */
.dark-mode .stock-card.danger {
  background: var(--danger-bg);
  border-color: rgba(248, 113, 113, 0.35);
}
.dark-mode .stock-card.warning {
  background: var(--warning-bg);
  border-color: rgba(251, 191, 36, 0.35);
}
.dark-mode .stock-category { color: var(--text-muted); }
.dark-mode .stock-status.danger { color: var(--danger-text); }
.dark-mode .stock-status.warning { color: var(--warning-text); }

/* ─── 4. SIDEBAR ──────────────────────────────────────────────────────────── */
.sidebar .nav-item {
  min-height: 44px;                 /* touch target 44px (AA 2.5.8) */
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.sidebar .nav-item .svg-icon {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.sidebar .nav-item:hover .svg-icon { transform: scale(1.06); }
.sidebar .nav-item[aria-current="page"] {
  background: var(--brand-surface);
  color: var(--brand-text);
}

/* ─── 5. TOPBAR ───────────────────────────────────────────────────────────── */
.topbar {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.topbar h1, .topbar h5 {
  color: var(--text-primary) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.theme-toggle-btn {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--text-primary);
  width: 44px;                      /* touch target 44px */
  height: 44px;
}
.theme-toggle-btn:hover {
  background: var(--bg-hover);
  border-color: var(--brand-primary);
  color: var(--brand-text);
}
.profile-trigger {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  min-height: 44px;
}
.profile-trigger:hover { background: var(--bg-hover); }

/* ─── 6. KPI STAT CARD ────────────────────────────────────────────────────── */
.card-box {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
/* Ikonka-chip: SVG ustida birxil vizual qatlam */
.card-box small.counter-smal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.card-box small.counter-smal svg.svg-icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--brand-surface);
  color: var(--brand-text);
  box-sizing: border-box;
  flex-shrink: 0;
}
.card-box h3.counter,
.card-box h3.daily-c {
  color: var(--text-primary) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.counter-change { font-weight: 500; }

/* Grafik kartalari sarlavhasi */
.card-box h3.h6 { color: var(--text-primary) !important; letter-spacing: 0.01em; }

/* ─── 7. SECTION SARYAVHASI + IKONKA CHIP ─────────────────────────────────── */
.low-stock-section .section-header .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: 18px;
  flex-shrink: 0;
}
.overdue-title, .overdue-subtitle { color: var(--text-primary); }
.overdue-subtitle { color: var(--text-muted); }

/* ─── 8. SOTISH: to'lov tugmalari rang-kodi ───────────────────────────────── */
/* Naqd=yashil, Karta=brand, Qarzga=amber — har biri alohida ma'no beradi */
#addSaleCash,
#addSaleCard,
#addSaleDebt {
  min-height: 46px;                 /* touch target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  flex: 1 1 0;
}
#addSaleCash { background: var(--success); border-color: var(--success); color: #fff; }
#addSaleCash:hover, #addSaleCash:focus { background: #0EA374; border-color: #0EA374; color: #fff; }
#addSaleCard { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
#addSaleCard:hover, #addSaleCard:focus { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
#addSaleDebt { background: var(--warning); border-color: var(--warning); color: #3D2B00; }
#addSaleDebt:hover, #addSaleDebt:focus { background: #E08A00; border-color: #E08A00; color: #3D2B00; }

/* To'lov turidagi radio-lar */
.debt-sale-payment-type label,
input[name="debtSalePaymentType"] + span { cursor: pointer; }

/* Jami daromad pill */
#totalSum { font-weight: 800; letter-spacing: -0.01em; }

/* ─── 9. JADVAL ───────────────────────────────────────────────────────────── */
.table thead th {
  letter-spacing: 0.07em;
  white-space: nowrap;
  user-select: none;
}
.table thead th[onclick] { cursor: pointer; }
.table tbody td { font-size: 0.875rem; }
.table-responsive.border { border-color: var(--border-subtle) !important; }

/* ─── 10. FILTR TABLARI ───────────────────────────────────────────────────── */
.filter-tabs button {
  min-height: 40px;                 /* touch target */
  padding: 0.5rem 1.1rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.filter-tabs button[aria-pressed="true"] {
  background: var(--brand-primary);
  color: #fff;
  border-color: transparent;
}

/* ─── 11. MODALLAR (modal-debtors) ────────────────────────────────────────── */
.close-modal-debtors {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: 1.5rem;
  line-height: 1;
  margin: -8px -8px 0 0;
  transition: background 0.15s ease;
}
.close-modal-debtors:hover { background: var(--bg-hover); }
.modal-debtors-content { max-height: calc(100vh - 48px); overflow-y: auto; }
.modal-debtors-header h2 { color: var(--text-primary); letter-spacing: -0.01em; }

/* ─── 12. MOBIL PASTKI NAVIGATSIYA (≤5 element, safe-area, 48dp target) ──── */
@media (max-width: 767px) {
  .mobile-bottom-nav {
    height: auto;
    min-height: 64px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  }
  .mobile-bottom-nav button {
    min-height: 48px;               /* Android 48dp touch target */
    gap: 4px;
    font-size: 12px;                /* QA: 10px juda kichik edi, keyin 11px — 12px qabul qilindi */
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mobile-bottom-nav button i { font-size: 20px; }
  .mobile-bottom-nav button span { font-weight: 600; white-space: nowrap; }
  .mobile-bottom-nav button.active,
  .mobile-bottom-nav button:active {
    color: var(--brand-text);
    background: var(--brand-surface);
  }
  .content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ─── 13. DARK MODE qo'shimchalari (token bilan) ──────────────────────────── */
.dark-mode .btn-warning,
.dark-mode #addSaleDebt { color: #241700; }
.dark-mode .profile-trigger { background: var(--bg-card); }
.dark-mode .card-box small.counter-smal svg.svg-icon {
  background: var(--brand-surface);
  color: var(--brand-text);
}

/* ─── 14. EMPTY STATE + YUKLANISH ─────────────────────────────────────────── */
.empty-state { text-align: center; color: var(--text-muted); }
.empty-icon { font-size: 2.5rem; opacity: 0.75; }

/* ─── 15. PRINT (ixtiyoriy) ───────────────────────────────────────────────── */
@media print {
  .sidebar, .mobile-bottom-nav, .top-actions, .profile-wrapper { display: none !important; }
  .content { padding: 0; }
  .card-box { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}

/* ============================================================
   16. ALIGNMENT + RESPONSIVE + 12px QA (2026-10-08)
   Faqat geometriya va shrift o'lchami. Ranglar/palitra O'ZGARMAYDI.
   ============================================================ */

/* 16.1 Bootstrap gutter modelini qaytaramiz:
   .section gorizontal padding 0 → .row -15px → .col 15px padding.
   Natija: topbar ↔ section sarlavhasi ↔ kartalar bitta vertical chiziqda
   (ilgari 43px = 28px section + 15px col sapmasi bor edi). */
.section { padding: 2rem 0; }
.section > .row { margin-left: -15px; margin-right: -15px; }

/* Kartochka ichidagi sarlavha va forma maydonlari ham teng chiziqda
   (p-4 = 21px > 15px gutter, shuning uchun overflow yo'q). */
.card-body.p-4 .row { margin-left: -15px; margin-right: -15px; }
.modal-body .row { margin-left: -15px; margin-right: -15px; }

/* Modal sarlavh (15px) va forma maydonlari (15px) bir xilInset. */
.modal-header,
.modal-body,
.modal-footer { padding: 15px; }

/* 16.2 Mobilda .content yon paddingini 16px qilib, -15px .row
   chegarasi .content skroll hududidan chiqib ketmasligini ta'minlaydi
   (aks holda 3-7px gorizontal skroll paydo bo'lardi). */
@media screen and (max-width: 767px) {
  .content {
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 16.3 Tablet (768-991px): statistika kartalari 4 o'rniga 2×2 —
   "1,755 UZS", "Oylik tushum" kesilmasin va bloklar kattalashsin. */
@media (min-width: 768px) and (max-width: 991px) {
  .section > .row > .col-md-3.col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Sidebar ikonka-reakali rejim (style.css 70px sidebar) —
     shu fayldagi font-size: 0.9rem uni buzib, matnni kesib qolgan edi. */
  .sidebar { padding: 20px 10px; }
  .sidebar .nav-item {
    font-size: 0;
    padding: 12px 10px;
    gap: 6px;
    justify-content: center;
  }
  .sidebar .nav-item svg { font-size: 20px; }
}

/* 16.4 style.css dagi qattiq 420px — 768-1200px oralig'ida ustun
   kontent qutisidan (359px) kengroq chiqib, blokdan tashqariga
   siqilardi. Ikki ustun endi teng kenglikda. */
.overdue-wrapper { width: 100%; }

/* 992-1015px oralig'ida 4-ustunli kartada 30px ikonka + katta so'z
   (INVENTAR/BALANSI) sig'may, yuqori qismi kesilardi. Ikkinchi qatorga. */
.card-box small.counter-smal { flex-wrap: wrap; }

/* 16.10 SOTUV FORMASI: 768-1199px oralig'ida 4 ustun (3+2+3+4) daromad
   tugmalar guruhini (Naqd/Karta/Qarzga = 266px) tor ustunga (185px)
   sig'dirmay, kartadan tashqariga chiqarib, .content ichida gorizontal
   skroll hosil qilayotgan edi (bu MUAMMO polish'dan ham OLDIN bor edi:
   .content 724>698). Shu oraliqda 2x2 tartibga o'tiladi — kichik
   bloklar ham kattalashadi (Miqdor ustuni 78px o'rniga 293px). */
@media (min-width: 768px) and (max-width: 1199px) {
  #selling .card-body .row > .col-md-2,
  #selling .card-body .row > .col-md-3,
  #selling .card-body .row > .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* 16.11 Mobilda tugmalar guruchi ustma-ust tushadi, ammo `.btn + .btn`
   qoldig'i 4px qolib, har bir tugma ustundan 4px tashqariga chiqayotgan
   edi (nosimmetrik chet). Blok ichida yashirilgan bo'lsa ham,
   tashqi chetlari 4px siljigan. */
@media (max-width: 767px) {
  .btn-group .btn + .btn { margin-left: 0; }
}

/* 16.12 MOBIL QARZDORLAR JADVALI — kontent kesilmasligi uchun.
   style.css `#debtorTableBody td::before { min-width: 100px }` +
   `margin-right: 12px` label uchun 112px ajratadi; qiymat tomonidagi
   `.sms-status-badge` esa `white-space: nowrap` bilan 164px.
   112 + 164 = 276px, holatda esa 203px — natijada jadvalning ~73px
   qismi `.table-responsive { overflow-x: hidden }` sababli mobilda
   butunlay ko'rinmas va bosilmas bo'lib qolayotgan edi.
   Endi: label tabiiy kenglikka o'tadi, qiymat esa zarur bo'lsa
   qatorga tushadi. (Ayni paytda badge shrifti 10.5px edi — 12px.) */
@media (max-width: 767px) {
  #debtorTableBody td::before { min-width: 0; font-size: 12px; }
  #debtorTableBody td > div { min-width: 0; }
}
.sms-status-badge { font-size: 12px; white-space: normal; }

/* 16.9 JADVAL USTUNLARI KESILMASLIGI UCHUN.
   Qarzdorlar jadvali 7 ustun / 1121px. premium-theme dagi
   .table-responsive { overflow: hidden } tufayli 992-1400px oraliqda
   oxirgi 1-3 ustun ("Qaytarish sana", "Holati", "Amallar") butunlay
   kesilib, ko'rinmay va bosilmay qolayotgan edi.
   >=769px da gorizontal skroll qaytariladi (Bootstrap standarti);
   <=768px da jadval blok-kartachaga aylantirilgani uchun o'zgarmaydi. */
@media (min-width: 769px) {
  .table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* 16.5 Counter qatorga sig'masa — kesilmaydi, qatorga tushadi. */
.counter,
.daily-c,
.daily-counter,
.card-box h3.counter,
.card-box h3.daily-c {
  flex-wrap: wrap;
  white-space: normal;
}

/* 16.6 Statistika kartalari balandligi teng (ilgari 134/137/136/159px). */
.section > .row > .col-md-3.col-sm-6 > .card-box { height: 100%; }

/* 16.7 12px minimal shrift. Root font-size 14px sababli
   0.7rem=9.8px, 0.75rem=10.5px, 0.8rem=11.2px, 0.85rem=11.9px
   — barchasi 12px dan pastga tushgan. */
.small,
small { font-size: 12px; }

.btn.btn-sm { font-size: 12px; }
.badge { font-size: 12px; }
.table thead th { font-size: 12px; }

.profile-avatar-fallback,
.profile-badge,
.stat-label,
.stat-label-date,
.debt-count-badge,
.stock-text,
.currency,
.price-info .currency,
.product-category,
.time-text,
.qty-unit,
.payment-badge,
.status-badge,
.sms-status-badge,
.mk-ai-section-title,
.mk-ai-heading,
.overdue-subtitle,
.low-stock-section .section-header p { font-size: 12px; }

.overdue-mini-days { font-size: 12px; }

h3 small,
.mk-ai-value small,
.mk-ai-tvalue small,
.mk-ai-meta small,
.mk-ai-sub small,
.mk-ai-inventory small { font-size: 12px; }

/* script.js UZS birliklariga INLINE font-size:0.55em/0.6em yozadi.
   Inline style CSS dan yuqori bo'lgani uchun mayda ekranda
   10.78px / 11.76px ga tushayotgan edi — 12px polni majburlaymiz. */
.counter small,
.daily-c small,
.daily-counter small { font-size: 12px !important; }