/* ==========================================================================
   MARK1 CRM — DESIGN SYSTEM LAYER (v1.0)
   --------------------------------------------------------------------------
   Bu fayl mavjud palitrani (premium-theme.css tokenlari) O'ZGARTIRMAYDI.
   Faqat: spacing, tipografiya o'lchamlari, holatlar (hover/focus/disabled/
   loading/empty/error), responsive qoidalar va komponent izchilligi.
   Yuklanish tartibi: barcha sahifalarda ENG OXIRIDA.
   ========================================================================== */

/* ─── 1. Spacing / type / control tokens ─────────────────────────────────── */
:root {
  --mk-space-1: 4px;
  --mk-space-2: 8px;
  --mk-space-3: 12px;
  --mk-space-4: 16px;
  --mk-space-5: 20px;
  --mk-space-6: 24px;
  --mk-space-8: 32px;
  --mk-space-10: 40px;

  --mk-control-h: 44px;
  --mk-control-h-sm: 36px;

  --mk-fs-xs: 12px;
  --mk-fs-sm: 13px;
  --mk-fs-base: 14px;
  --mk-fs-md: 16px;
  --mk-fs-lg: 18px;
  --mk-fs-xl: 24px;
  --mk-fs-2xl: 28px;
  --mk-fs-3xl: 32px;

  --mk-focus-ring: 0 0 0 3px rgba(68, 85, 238, 0.35);
  --mk-z-drawer: 1040;
  --mk-z-overlay: 1030;

  /* Yagona shrift qatlami. Inter dashboard.html'da <link> bilan yuklanadi,
     lekin ilgari hech qayerda qo'llanilmagan — brauzer Arial/Liberation'ga
     tushib qolardi va login/landing bilan tipografika mos kelmasdi. */
  --mk-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html, body { font-family: var(--mk-font-sans); }
/* Forma elementlari brauzer standart shriftini meros qilmaydi. */
button, input, select, textarea, optgroup { font-family: inherit; }
.mk-mono, code, kbd, pre, samp { font-family: var(--mk-font-mono); }

/* ─── 2. Accessibility: focus, motion, targets ───────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-primary, #4455EE);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 2000;
  padding: 10px 16px;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.skip-link:focus {
  left: 8px;
}

@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. App shell: sidebar / content ────────────────────────────────────── */
body > .d-flex {
  min-height: 100vh;
  min-height: 100dvh;
  align-items: stretch;
}

.sidebar {
  flex: 0 0 232px;
  width: 232px;
  min-width: 232px;
  min-height: 100vh;
  height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--mk-space-2);
  padding: var(--mk-space-5) var(--mk-space-3);
  border-right: 1px solid var(--border-subtle);
  z-index: 20;
}

.sidebar .nav {
  flex: 1 1 auto;
  /* Flex kolonka ichida min-height:auto bo'lsa, kontent sig'masa nav
     kengayib, oyoqchi (foot) pastga siqib ketadi va scroll ichkarida
     emas, butun sidebar bo'ylab qo'shilardi. */
  min-height: 0;
  /* Bootstrap `.nav { flex-wrap: wrap }` tufayli balandlik kam bo'lganda
     elementlar yangi "ustun"ga o'tib, ustma-ust tushardi (kuzatildi:
     300px viewportda). Sidebar nav'ida wrap kerak emas. */
  flex-wrap: nowrap;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: var(--mk-space-4);
}

.sidebar .nav-item {
  min-height: 42px;
  margin: 0;
  padding: 10px 12px;
  font-size: var(--mk-fs-base);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Planshet drawer'ida eski style.css qoidasi matnni markazga
     surib yuborardi. Drawer ham, doimiy sidebar ham chapga tekis. */
  justify-content: flex-start;
}

.sidebar .nav-item:focus-visible {
  outline-offset: -2px;
}

/* Sidebar pastki qismi (foydalanuvchi + chiqish) */
.mk-sidebar-foot {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--mk-space-3);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
}
.mk-sidebar-foot .mk-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-surface);
  color: var(--brand-text);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex: 0 0 34px;
}
.mk-sidebar-foot .mk-user-meta {
  min-width: 0;
  line-height: 1.2;
}
.mk-sidebar-foot .mk-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-sidebar-foot .mk-user-store {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar collapse (desktop) */
.mk-sidebar-toggle {
  display: none;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  flex: 0 0 auto;
}
body.mk-sidebar-collapsed .sidebar {
  flex-basis: 76px;
  width: 76px;
  min-width: 76px;
  padding-left: 10px;
  padding-right: 10px;
}
body.mk-sidebar-collapsed .sidebar .nav-item {
  justify-content: center;
  padding: 10px 0;
  font-size: 0;
  gap: 0;
}
body.mk-sidebar-collapsed .sidebar .nav-item .svg-icon {
  width: 22px;
  height: 22px;
}
body.mk-sidebar-collapsed .sidebar .logo img {
  max-width: 44px;
}
body.mk-sidebar-collapsed .sidebar .mk-sidebar-foot {
  justify-content: center;
}
/* Eski qoldiq: bu yerda `display: none` tufayli hover kengayganda ham
   user ismi qaytmas edi (opacity/max-width tranzitsiyasi ishlamay qolardi).
   Endi yashirish mark1-os.css'dagi opacity/visibility/max-width orqali —
   silliq chiqadi, "galti" sakrash yo'q. */
body.mk-sidebar-collapsed .sidebar .mk-sidebar-toggle span {
  display: none;
}
body.mk-sidebar-collapsed .sidebar .nav-item::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 50;
}
body.mk-sidebar-collapsed .sidebar .nav-item:hover::after,
body.mk-sidebar-collapsed .sidebar .nav-item:focus-visible::after {
  opacity: 1;
}

/* ─── 4. Topbar ──────────────────────────────────────────────────────────── */
.topbar {
  min-height: 68px;
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
  gap: var(--mk-space-3);
  position: sticky;
  top: 12px;
  z-index: 30;
}
.topbar h1 {
  font-size: var(--mk-fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mk-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mk-topbar-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
  /* Uzun izoh tor ekranda sarlavhani ikki qatorga bo'lib, topbar
     balandligini o'zgartirmasligi uchun bir qatorda kesamiz. */
  max-width: min(52vw, 420px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-mobile-menu {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
}
.theme-toggle-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

/* ─── 5. Page rhythm ─────────────────────────────────────────────────────── */
.content {
  padding: var(--mk-space-5) var(--mk-space-6) var(--mk-space-10);
  background: var(--bg-main);
}
.section > .row,
.section .row {
  --bs-gutter-x: 1rem;
}
.section h2.h4,
.section > .d-flex h2 {
  font-size: var(--mk-fs-xl);
  letter-spacing: -0.02em;
}
.section p.text-muted {
  font-size: var(--mk-fs-sm);
  color: var(--text-muted) !important;
}
/* Katta ekranlarda ham kontent to'liq kenglikda ishlaydi — sidebar qisqarganda
   kontent bo'shab qolgan butun maydonni to'liq egallaydi (kattalashadi). */
@media (min-width: 1600px) {
  .content > .section {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ─── 6. Cards / KPI ─────────────────────────────────────────────────────── */
.card,
.card-box,
.low-stock-section,
.overdue-wrapper {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.card-box {
  padding: var(--mk-space-5);
  height: 100%;
}
.card-box:hover {
  transform: none;
  box-shadow: var(--shadow-card);
}
.card-box h3.counter,
.card-box h3.daily-c {
  font-size: var(--mk-fs-2xl);
  line-height: 1.15;
  margin: 6px 0 4px;
}
.card-box h3.counter small,
.card-box h3.daily-c small {
  font-size: var(--mk-fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}
.card-box small.counter-smal {
  font-size: var(--mk-fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.counter-change {
  font-size: var(--mk-fs-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
}
.counter-change.positive::before { content: "▲"; font-size: 9px; }
.counter-change.negative::before { content: "▼"; font-size: 9px; }
.counter-change.neutral::before  { content: "•"; font-size: 12px; }

/* AI tahlil kartasidagi o'sish/pasayish foizi.
   premium-theme.css `.mk-ai-change.counter-up { color: var(--success) }` —
   light rejimda #10B981 oq fonda faqat 2.54:1 (AA uchun 4.5 kerak).
   Matn uchun to'qroq semantik token ishlatamiz. */
.mk-ai-change.counter-up { color: var(--success-text, #065F46) !important; }
.mk-ai-change.counter-down { color: var(--danger-text, #991B1B) !important; }
html.dark-mode .mk-ai-change.counter-up { color: var(--success, #34D399) !important; }
html.dark-mode .mk-ai-change.counter-down { color: var(--danger, #F87171) !important; }

/* KPI kartalari: izoh (counter-change) har doim pastga tekislanadi.
   Ilgari 3-kartada izoh qiymat ostida, qolganlarida eng pastda turardi —
   bir qatordagi kartalar ritmi buzilardi. */
.mk-stats .card-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mk-stats .card-box .counter-change {
  margin-top: auto;
  padding-top: 10px;
}
/* 3 va 4-kartalarda izoh oddiy <small class="text-success|text-muted"> —
   ular ham pastga tekislanishi kerak, aks holda qator ritmi buziladi. */
.mk-stats .card-box > small:last-child {
  margin-top: auto;
  padding-top: 10px;
}

/* ─── 7. Buttons / inputs / badges ───────────────────────────────────────── */
.btn {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: var(--mk-fs-base);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-sm {
  min-height: var(--mk-control-h-sm);
  padding: 6px 12px;
  font-size: var(--mk-fs-sm);
}
.btn:disabled,
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}
.btn.is-loading {
  pointer-events: none;
  opacity: 0.8;
}
.btn.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: mk-spin 0.7s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }

.form-control,
.form-select {
  min-height: var(--mk-control-h);
  font-size: var(--mk-fs-base);
  border-radius: 10px;
  padding: 10px 12px;
}
.form-control::placeholder { font-size: var(--mk-fs-sm); }
.form-label {
  font-size: var(--mk-fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Auth formalaridagi placeholder va disabled CTA o'qiladigan bo'lsin:
   past opacity matnni ham, fonni ham birga yuvib yuboradi.
   MUHIM: disabled holat kulrang (#59657a) emas — brend tusli bo'lishi kerak,
   aks holda asosiy CTA "o'chirilgan neytral tugma" bo'lib ko'rinadi va
   login sahifasida brend butunlay yo'qoladi. */
input.field-input::placeholder { color: #626d82; opacity: 1; }
.dark-mode input.field-input::placeholder { color: #a3adc2; }
.btn-primary-auth:disabled {
  opacity: 1;
  background: var(--mk-disabled-bg, #E7E9F8);
  color: var(--mk-disabled-text, #565C86);
  border: 1px solid var(--mk-disabled-border, #D6DAF3);
  cursor: not-allowed;
  box-shadow: none;
}
.dark-mode .btn-primary-auth:disabled {
  background: #22304C;
  color: #97A4C0;
  border-color: #2E3D5C;
}
.mk-field-error {
  display: none;
  margin-top: 4px;
  font-size: var(--mk-fs-xs);
  color: var(--danger-text);
}
.mk-field-error.show { display: block; }

.badge {
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ─── 8. Tables ──────────────────────────────────────────────────────────── */
.table {
  margin-bottom: 0;
  font-size: var(--mk-fs-base);
}
.table thead th {
  font-size: var(--mk-fs-xs);
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--text-muted) !important;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 14px;
  white-space: nowrap;
}
.table tbody td {
  padding: 12px 14px;
  vertical-align: middle;
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
.table-hover tbody tr:hover > * {
  background: var(--bg-hover);
}
.table-responsive {
  border-radius: var(--radius-md);
}

/* Jadval ichidagi amal tugmalari */
.table .btn-icon {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 8px;
}

/* ─── 9. Charts ──────────────────────────────────────────────────────────── */
.mk-chart {
  position: relative;
  width: 100%;
  height: 280px;
  min-height: 220px;
}
.mk-chart canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.mk-chart-sm { height: 240px; }
.mk-chart-empty {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  color: var(--text-muted);
  background: linear-gradient(to bottom, transparent, var(--bg-card) 65%);
  border-radius: var(--radius-md);
  font-size: var(--mk-fs-sm);
}
.mk-chart-empty.show { display: flex; }
.mk-chart-empty i { font-size: 26px; opacity: 0.7; }
.mk-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mk-chart-head h3 { margin: 0; font-size: var(--mk-fs-md); font-weight: 700; }
.mk-chart-head p { margin: 2px 0 0; font-size: var(--mk-fs-xs); color: var(--text-muted); }
.mk-seg {
  display: inline-flex;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.mk-seg button {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  min-height: 30px;
}
.mk-seg button.active {
  background: var(--bg-card);
  color: var(--brand-text);
  box-shadow: var(--shadow-sm);
}

/* ─── 10. Alerts / empty / skeleton ──────────────────────────────────────── */
.mk-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: var(--mk-fs-sm);
  border: 1px solid transparent;
}
.mk-alert-error   { background: var(--danger-bg);  color: var(--danger-text);  border-color: rgba(239,68,68,.25); }
.mk-alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: rgba(245,158,11,.25); }
.mk-alert-success { background: var(--success-bg); color: var(--success-text); border-color: rgba(16,185,129,.25); }
.mk-alert-info    { background: var(--brand-surface); color: var(--brand-text); border-color: rgba(68,85,238,.2); }

.mk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--mk-fs-sm);
}
.mk-empty i { font-size: 28px; opacity: 0.65; }
.mk-empty strong { color: var(--text-primary); font-size: var(--mk-fs-base); }

.mk-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
  border-radius: 8px;
}
.mk-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: mk-shimmer 1.2s infinite;
}
.dark-mode .mk-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}
@keyframes mk-shimmer { to { transform: translateX(100%); } }

/* ─── 11. Modals ─────────────────────────────────────────────────────────── */
.modal-debtors-content,
.modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-floating);
}
.modal-debtors-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-debtors-header h2 {
  font-size: var(--mk-fs-lg);
  margin: 0;
  font-weight: 700;
}
.modal-debtors-content form,
.modal-debtors-content .mk-modal-body {
  padding: 20px;
}
.modal-debtors-content .form-group {
  margin-bottom: 14px;
}
.modal-debtors-content label {
  font-size: var(--mk-fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 6px;
}
.mk-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ─── 12. POS cart ───────────────────────────────────────────────────────── */
.mk-pos-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: var(--mk-space-4);
  align-items: start;
}
@media (max-width: 1100px) {
  .mk-pos-grid { grid-template-columns: 1fr; }
}
.mk-pos-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--mk-space-5);
  box-shadow: var(--shadow-sm);
}
.mk-pos-panel h3 {
  font-size: var(--mk-fs-md);
  font-weight: 700;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mk-pos-product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px auto;
  gap: 8px;
  align-items: end;
}
@media (max-width: 520px) {
  .mk-pos-product-row { grid-template-columns: 1fr; }
}
.mk-cart {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.mk-cart th {
  font-size: var(--mk-fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.mk-cart td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--mk-fs-sm);
  vertical-align: middle;
}
.mk-cart .mk-cart-name { font-weight: 600; color: var(--text-primary); }
.mk-cart .mk-cart-sub { font-size: 12px; color: var(--text-muted); }
.mk-cart-qty {
  width: 74px;
  min-height: 34px;
  padding: 4px 8px;
  text-align: center;
}
.mk-cart-remove {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
}
.mk-cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0 6px;
  font-size: var(--mk-fs-sm);
  color: var(--text-secondary);
}
.mk-cart-total strong {
  font-size: var(--mk-fs-2xl);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.mk-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.mk-pay-grid .btn { min-height: 46px; }
.mk-pay-grid .mk-pay-debt { grid-column: 1 / -1; }
.mk-pos-hint {
  font-size: var(--mk-fs-xs);
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.5;
}

/* ─── 13. Toast ──────────────────────────────────────────────────────────── */
#mk-toast-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.mk-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-floating);
  font-size: var(--mk-fs-sm);
  color: var(--text-primary);
  animation: mk-toast-in 0.18s ease-out;
  pointer-events: auto;
}
.mk-toast.is-error { border-left: 4px solid var(--danger); }
.mk-toast.is-success { border-left: 4px solid var(--success); }
.mk-toast.is-info { border-left: 4px solid var(--brand-primary); }
@keyframes mk-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── 14. Mobile: drawer, bottom nav, tables ─────────────────────────────── */
@media (max-width: 991px) {
  .mk-mobile-menu { display: inline-flex; }
  .mk-sidebar-toggle { display: none; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: min(300px, 84vw);
    min-width: 0;
    flex-basis: auto;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    z-index: var(--mk-z-drawer);
    box-shadow: var(--shadow-floating);
  }
  body.mk-nav-open .sidebar {
    transform: translateX(0);
    display: flex !important;
  }
  .mk-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 35, 0.5);
    z-index: calc(var(--mk-z-drawer) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.mk-nav-open .mk-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  body.mk-nav-open { overflow: hidden; }
  .content { padding: 12px 12px 96px; }
  .topbar { top: 8px; padding: 10px 12px; min-height: 60px; }
  .topbar h1 { font-size: 16px; }
}

@media (max-width: 767px) {
  .section h2.h4,
  .section > .d-flex h2 { font-size: 20px; }
  .card-box { padding: 16px; }
  .card-box h3.counter,
  .card-box h3.daily-c { font-size: 22px; }
  .content { padding-left: 10px; padding-right: 10px; }
  .mk-chart { height: 220px; }

  /* Umumiy jadval → karta (data-label app-shell.js tomonidan qo'yiladi) */
  .mk-cards-mobile thead { display: none; }
  .mk-cards-mobile tbody tr {
    display: block;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-card);
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .mk-cards-mobile tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 6px 0;
    border: 0;
    text-align: right;
    font-size: 13px;
  }
  .mk-cards-mobile tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    flex: 0 0 auto;
    max-width: 45%;
  }
  .mk-cards-mobile tbody td > * { min-width: 0; }
}

/* ─── 15. Dark mode consistency ──────────────────────────────────────────── */
.dark-mode .card-box,
.dark-mode .card {
  background: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
}
.dark-mode .table thead th {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
}
.dark-mode .mk-seg { background: var(--bg-surface); }
.dark-mode .mk-seg button.active { background: var(--bg-card); }
.dark-mode .topbar { background: var(--bg-card); }

/* ─── 16. Utility ────────────────────────────────────────────────────────── */
.mk-hstack { display: flex; align-items: center; gap: 8px; }
.mk-vstack { display: flex; flex-direction: column; gap: 8px; }
.mk-wrap { flex-wrap: wrap; }
.mk-grow { flex: 1 1 auto; min-width: 0; }
.mk-muted { color: var(--text-muted); font-size: 12px; }
.mk-nowrap { white-space: nowrap; }
.mk-mt-2 { margin-top: 8px; }
.mk-mt-4 { margin-top: 16px; }
.mk-hidden { display: none !important; }
.mk-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ─── 17. Product thumbnails / overdue cards ─────────────────────────────── */
.product-img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--border-subtle, #E2E8F0);
  background: var(--bg-surface, #F8FAFC);
}
.product-img-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #64748B);
  font-size: 20px;
  padding: 8px;
  object-fit: contain;
}
.overdue-mini-phone {
  font-size: 12px;
  color: var(--text-muted, #64748B);
  margin-top: 2px;
}
.overdue-mini-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.overdue-card-mini[role="button"] {
  cursor: pointer;
}
.overdue-card-mini[role="button"]:focus-visible {
  outline: 3px solid var(--brand-primary, #4455EE);
  outline-offset: 2px;
}

/* ─── 18. Toolbar / filters ──────────────────────────────────────────────── */
.mk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.mk-toolbar-search {
  flex: 1 1 260px;
  max-width: 420px;
  width: 100%;
}
.mk-filter-select {
  min-width: 150px;
  width: auto;
  max-width: 100%;
}
.mk-toolbar-count {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted, #64748B);
}
@media (max-width: 575.98px) {
  .mk-toolbar-search,
  .mk-filter-select {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }
  .mk-toolbar .btn {
    width: 100%;
  }
}

/* ─── Planshet jadvallari ────────────────────────────────────────────────────
   premium-theme.css 768px gacha jadvallarni kartaga aylantiradi. Telefonda
   bu qulay, lekin 576–768px da 7 ustunli jadval juda uzun va chalkash
   ko'rinadi. Shu oralig'da oddiy jadval qoldirib, gorizontal scroll
   ishlatamiz (`.table-responsive` allaqachon mavjud). */
@media (min-width: 576px) and (max-width: 768px) {
  #productsSection .table { display: table; width: 100%; }
  #productsSection .table thead { display: table-header-group; }
  #productsSection .table tbody { display: table-row-group; }
  #productsSection .table tbody tr {
    display: table-row;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #productsSection .table tbody td {
    display: table-cell;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: middle;
  }
  #productsSection .table tbody td::before { content: none; display: none; }

  /* Sahifa sarlavhasi + amallar qatori planshetda ustma-ust tushmasin */
  #debtors > .d-flex.justify-content-between,
  #productsSection > .d-flex.justify-content-between,
  #daily-sales > .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start !important;
  }
  #debtors > .d-flex.justify-content-between > div:last-child,
  #productsSection > .d-flex.justify-content-between > div:last-child,
  #daily-sales > .d-flex.justify-content-between > div:last-child {
    width: 100%;
    justify-content: flex-start;
  }
  #searchInput { max-width: none !important; flex: 1 1 200px; }
}

/* ─── Qarzdorlar jadvalidagi amallar ────────────────────────────────────────
   `.action-buttons-grid` uchun stil yo'q edi: tor ekranda 7 ta tugma
   tasodifiy 3 ustunga o'ralib, karta juda uzun bo'lib ketardi. Endi
   ular bir tekis flex qatoriga joylashadi. */
.action-buttons-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  #debtors .table tbody td[data-label="Amallar"] {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  #debtors .table tbody td[data-label="Amallar"]::before {
    flex: 1 1 100%;
    margin-bottom: 2px;
  }
  #debtors .table tbody td[data-label="Amallar"] .action-buttons-grid {
    width: 100%;
    justify-content: flex-start;
  }
  /* style.css ning mobil media so'rovida `.action-btn { width: 100% }`
     bor — flex qatorda bu har bir tugmani alohida qatorga tushirardi. */
  #debtors .action-buttons-grid .action-btn {
    width: 36px;
    flex: 0 0 36px;
  }
}

/* ─── Telefon: sahifa sarlavhasi va amallar ──────────────────────────────── */
@media (max-width: 575.98px) {
  #debtors > .d-flex.justify-content-between,
  #productsSection > .d-flex.justify-content-between,
  #daily-sales > .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start !important;
  }
  /* style.css mobil rejimda `.d-flex.gap-2` ni ustunga aylantiradi —
     qidiruv + CSV + CTA uch qatorga bo'linib ketardi. Qidiruvni to'liq
     qatorga, ikkita tugmani esa bitta qatorga joylaymiz. */
  #debtors > .d-flex.justify-content-between > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px;
    width: 100%;
  }
  #searchInput { flex: 1 1 100%; max-width: none !important; width: 100%; }
  #exportDebtorsBtn { flex: 0 0 auto; width: auto; }
  #debtors > .d-flex.justify-content-between > div:last-child .btn-primary {
    flex: 1 1 140px;
    width: auto;
  }
  #productsSection > .d-flex.justify-content-between > .btn {
    width: 100%;
  }
}

/* ─── Desktop/planshet: qarzdorlar sarlavhasidagi amallar bir qatorda ──────
   Bootstrap `.form-control { width: 100% }` flex konteyner ichida qidiruv
   maydonining bazaviy kengligini shishirib, "Yangi qarzdor" tugmasini
   ikkinchi qatorga tushirib yuborardi. */
@media (min-width: 576px) {
  #debtors > .d-flex.justify-content-between > div:last-child {
    flex-wrap: nowrap !important;
  }
  #searchInput {
    flex: 0 0 240px;
    width: 240px;
  }
}

/* ─── 19. Telefon: sidebar o'rniga to'liq tab bar ───────────────────────────
   Telefonda yon panel (drawer) va uning hamburger tugmasi butunlay
   o'chiriladi. Navigatsiya faqat pastdagi 6 bo'limli tab bar orqali
   ishlaydi: Asosiy, Mahsulot, Sotish, Tarix, Qarzlar, Sozlama.
   Ranglar mavjud tokenlardan olinadi — palitra o'zgartirilmagan. */
@media (max-width: 767px) {
  .sidebar,
  body.mk-nav-open .sidebar { display: none !important; }
  .mk-mobile-menu { display: none !important; }
  .mk-nav-backdrop { display: none !important; }
  body.mk-nav-open { overflow: auto !important; }

  .content {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    justify-content: initial;
    gap: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(68px + env(safe-area-inset-bottom, 0px));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-card, #fff);
    border-top: 1px solid var(--border-subtle, #e2e8f0);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10);
    z-index: 9999;
    box-sizing: border-box;
  }

  .mobile-bottom-nav button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 4px 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary, #64748B);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease, background-color 0.18s ease;
  }

  .mobile-bottom-nav button i {
    display: block;
    font-size: 21px;
    line-height: 1;
  }

  .mobile-bottom-nav button span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.1px;
    line-height: 1.1;
  }

  .mobile-bottom-nav button.active,
  .mobile-bottom-nav button:active {
    color: var(--brand-primary, #4455EE);
    background: transparent;
  }

  .mobile-bottom-nav button.active::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 24px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--brand-primary, #4455EE);
    transform: translateX(-50%);
  }

  .mobile-bottom-nav button.active i { color: var(--brand-primary, #4455EE); }

  .mobile-bottom-nav button:focus-visible {
    outline: 2px solid var(--brand-primary, #4455EE);
    outline-offset: -2px;
  }
}

/* 320–359px: 6 bo'limni bitta qatorga sig'dirish.
   Bu yerda yorliq matni baribir kesiladi ("Sozlamal…"), shuning uchun
   faqat ikonka qoldiriladi — tugmalarda aria-label bor, ya'ni ekran
   o'quvchi uchun nom saqlanadi. */
@media (max-width: 359.98px) {
  .mobile-bottom-nav { padding-left: 2px; padding-right: 2px; }
  .mobile-bottom-nav button { padding: 8px 0; }
  .mobile-bottom-nav button span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .mobile-bottom-nav button i { font-size: 22px; }
}

/* ─── 20. Bo'sh holat (Qarzdorlar) — yashil ajratilgan blok ───────────────── */
.mk-empty-cell {
  padding: 8px !important;
  border: 0 !important;
  background: transparent !important;
}
.mk-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 34px 20px;
  border-radius: 14px;
  border: 1px dashed var(--success, #10B981);
  background: var(--success-bg, #ECFDF5);
}
.mk-empty-state .mk-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.14);
  color: var(--success-text, #065F46);
  font-size: 26px;
  line-height: 1;
}
.mk-empty-state .mk-empty-title {
  margin-bottom: 6px;
  color: var(--success-text, #065F46);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.mk-empty-state .mk-empty-text {
  max-width: 42ch;
  color: var(--text-secondary, #64748B);
  font-size: 13px;
  line-height: 1.5;
}
.dark-mode .mk-empty-state {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(16, 185, 129, 0.10);
}
.dark-mode .mk-empty-state .mk-empty-icon {
  background: rgba(16, 185, 129, 0.18);
}
@media (max-width: 575.98px) {
  .mk-empty-state { padding: 26px 14px; }
  .mk-empty-state .mk-empty-icon { width: 48px; height: 48px; font-size: 22px; }
  /* Tor ekranda uzun izoh "..." bo'lib kesilardi. Sarlavha o'zi
     bo'limni aniq bildiradi, shuning uchun izoh yashiriladi. */
  .mk-topbar-sub { display: none; }
}

/* ─── Qarzdorlar: filtr tugmalari ──────────────────────────────────────────
   Bootstrap'ning outline-hover qoidalari "Yaqinlashmoqda" tugmasini
   to'liq sariq/oranj rangga bo'yab, u faol tugmadek ko'rinardi. Endi
   hover faqat yumshoq fon beradi; faol holat esa bitta va aniq. */
.filter-tabs {
  gap: 8px;
  margin-bottom: 0;
}
.filter-tabs .btn,
.filter-tabs button {
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
}
.filter-tabs .btn:hover,
.filter-tabs .btn:focus,
.filter-tabs .btn:active {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: none !important;
}
.filter-tabs .btn.active,
.filter-tabs .btn[aria-pressed="true"] {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-color: var(--brand-primary) !important;
}
.filter-tabs .btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  /* Telefonda filtr tugmalari gorizontal skroll o'rniga 2 qatorga
     chiroyli o'raladi — na kesilish, na yashirin tugma. */
  .filter-tabs {
    flex-wrap: wrap;
    overflow-x: visible !important;
  }
}

/* ─── Qarzdorlar jadvali: ixcham va tekis qatorlar ────────────────────────
   Ilgari "Amallar" ustuni 90px ga siqilib, 7 ta tugma 313px balandlikda
   ustma-ust tushardi; jadval esa konteynerdan chiqib ketardi. Endi
   ustunlar foizda taqsimlangan, tugmalar 26px va bir necha qatorda. */
@media (min-width: 769px) {
  #debtors .table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  #debtors table {
    width: 100%;
    min-width: 810px;
    table-layout: fixed;
    margin-bottom: 0;
  }
  #debtors table th,
  #debtors table td {
    padding: 9px 8px;
    vertical-align: middle;
    overflow-wrap: anywhere;
  }
  #debtors table th {
    white-space: normal;
    line-height: 1.25;
    font-size: 12px;
  }
  #debtors table th:nth-child(1),
  #debtors table td:nth-child(1) { width: 15%; }
  #debtors table th:nth-child(2),
  #debtors table td:nth-child(2) { width: 12%; }
  #debtors table th:nth-child(3),
  #debtors table td:nth-child(3) { width: 15%; }
  #debtors table th:nth-child(4),
  #debtors table td:nth-child(4) { width: 11%; }
  #debtors table th:nth-child(5),
  #debtors table td:nth-child(5) { width: 12%; }
  #debtors table th:nth-child(6),
  #debtors table td:nth-child(6) { width: 15%; }
  #debtors table th:nth-child(7),
  #debtors table td:nth-child(7) { width: 20%; }

  #debtors .action-buttons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
    width: 100%;
  }
  #debtors .action-buttons-grid .action-btn {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    font-size: 12px;
    border-radius: 7px;
  }
}

/* Qator ichidagi holat va kun matni ustma-ust emas, ixcham ustunda. */
#debtors .debtor-status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
#debtors .debtor-days {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.2;
}
#debtors .sms-status-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  width: auto;
  max-width: 100%;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#debtors .debtor-phone {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--brand-text, #3b82f6);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
  text-decoration: none;
  white-space: nowrap;
}
#debtors .debtor-phone:focus-visible {
  outline: 2px solid var(--brand-primary, #4455EE);
  outline-offset: 1px;
}
#debtors .debtor-amount {
  display: block;
  color: var(--danger, #dc2626);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  /* Katta summalarda ("22 222 222 222 so'm") qator qarindoshi Telefon
     ustuniga oqib ketmasligi uchun wrapping yoqilgan. */
  white-space: normal;
  overflow-wrap: anywhere;
}
#debtors td[data-label="Olingan sana"] strong,
#debtors td[data-label="Qaytarish sanasi"] strong {
  font-size: 12px;
  white-space: nowrap;
}
@media (min-width: 769px) and (max-width: 1250px) {
  /* 1150px atrofida telefon ustuni tor: ikonka o'rniga raqamning o'ziga
     joy beramiz, aks holda raqam qo'shni ustunga chiqib ketadi. */
  #debtors .debtor-phone i { display: none; }
}

/* ==========================================================================
   MARK1 DESIGN SYSTEM — v2 (Premium refinement layer)
   --------------------------------------------------------------------------
   Maqsad: mavjud tokenlarni saqlab, sahifalar orasidagi vizual ierarxiyani
   bir xillashtirish: sahifa sarlavhalari, KPI panellari, jadvallar, bo'sh
   holatlar, POS va mobil zichlik.
   Yuklanish tartibi: barcha sahifalarda ENG OXIRIDA (bu fayl).
   ========================================================================== */

/* ─── 21. Token kengaytmasi ──────────────────────────────────────────────── */
:root {
  --mk-space-7: 28px;
  --mk-space-9: 36px;
  --mk-space-12: 48px;
  --mk-space-16: 64px;

  --mk-radius-xs: 6px;
  --mk-radius-sm: 8px;
  --mk-radius-md: 12px;
  --mk-radius-lg: 16px;
  --mk-radius-xl: 20px;

  --mk-line: var(--border-subtle);
  --mk-line-strong: var(--border-strong);
  --mk-surface: var(--bg-card);
  --mk-surface-2: var(--bg-surface);
  --mk-surface-3: var(--bg-main);

  --mk-ring: 0 0 0 3px rgba(68, 85, 238, 0.28);
  --mk-shadow-xs: 0 1px 2px rgba(13, 15, 26, 0.05);
  --mk-shadow-sm: 0 1px 3px rgba(13, 15, 26, 0.06), 0 1px 2px rgba(13, 15, 26, 0.04);
  --mk-shadow-md: 0 4px 16px rgba(13, 15, 26, 0.07);
  --mk-shadow-lg: 0 16px 48px rgba(13, 15, 26, 0.14);

  --mk-sidebar-w: 248px;
  --mk-topbar-h: 64px;
  --mk-tap: 44px;
}

html.dark-mode {
  --mk-ring: 0 0 0 3px rgba(143, 160, 255, 0.35);
  --mk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --mk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --mk-shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45);
  --mk-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6);
}

/* ─── 22. Global typography & surface ────────────────────────────────────── */
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--bg-main);
  color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }
p { color: inherit; }

::selection { background: var(--brand-surface); color: var(--brand-text); }

/* ─── 23. App shell: sidebar + topbar ────────────────────────────────────── */
@media (min-width: 1200px) {
  .sidebar {
    flex-basis: var(--mk-sidebar-w);
    width: var(--mk-sidebar-w);
    min-width: var(--mk-sidebar-w);
    padding: 20px 14px;
    background: var(--bg-sidebar);
  }
}

.sidebar .logo {
  padding: 4px 8px 18px;
  margin-bottom: 4px;
}
.sidebar .logo img { max-height: 32px; width: auto; }

.sidebar .nav { gap: 2px; }

.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  transition: background .15s ease, color .15s ease;
}
.sidebar .nav-item .svg-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: .85;
}
.sidebar .nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sidebar .nav-item.active {
  background: var(--brand-surface);
  color: var(--brand-text);
  font-weight: 600;
}
.sidebar .nav-item.active .svg-icon { opacity: 1; }
.sidebar .nav-item.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-primary);
}

.mk-nav-label {
  list-style: none;
  margin: 14px 0 4px;
  padding: 0 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: .85;
  /* Yig'ilgan ↔ kengaygan holat orasida silliq o'tish. */
  transition: font-size var(--m1-dur, 120ms) var(--m1-ease, ease),
              height var(--m1-dur, 120ms) var(--m1-ease, ease),
              margin var(--m1-dur, 120ms) var(--m1-ease, ease);
}
.mk-nav-label:first-child { margin-top: 0; }

.mk-sidebar-foot {
  padding: 12px 4px 0;
  gap: 10px;
}
.mk-sidebar-foot .mk-avatar {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 10px;
  font-size: 12.5px;
}

.topbar {
  min-height: var(--mk-topbar-h);
  padding: 10px 18px;
  border-radius: var(--mk-radius-md);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: var(--mk-shadow-xs);
}
.topbar h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.mk-topbar-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  max-width: min(58vw, 520px);
}

.theme-toggle-btn,
.mk-mobile-menu,
.mk-sidebar-toggle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.theme-toggle-btn:hover,
.mk-mobile-menu:hover,
.mk-sidebar-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.profile-trigger {
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.profile-trigger:hover {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
}
.profile-name { font-size: 13px; font-weight: 600; }
.profile-store { font-size: 11.5px; }

/* ─── 24. Page rhythm & header ───────────────────────────────────────────── */
.content {
  padding: 16px 24px 40px;
  min-height: 100vh;
}

.content > .section { animation: mk-fade-in .22s ease both; }
@keyframes mk-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Ichki sahifa sarlavhasi (topbar allaqachon h1 beradi).
   Takroriy sarlavhalar olib tashlangan, amallar uchun ixcham qator qoladi. */
.mk-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--mk-space-4);
}
.mk-page-actions .form-control { min-width: 220px; }
.mk-page-actions .btn { white-space: nowrap; }

.section > .d-flex.justify-content-between { margin-bottom: var(--mk-space-4) !important; }
.section h2.h4 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ─── 25. KPI / stat grid ────────────────────────────────────────────────── */
.mk-stats {
  display: grid !important;
  gap: 12px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.mk-stats > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}
.mk-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1600px) {
  .mk-stats-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .mk-stats,
  .mk-stats-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .mk-stats,
  .mk-stats-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

.card-box {
  padding: 16px 18px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--mk-radius-md);
  box-shadow: var(--mk-shadow-sm);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.card-box:hover {
  border-color: var(--border-strong);
  box-shadow: var(--mk-shadow-md);
}

.card-box small.counter-smal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.3;
}
.card-box small.counter-smal .svg-icon {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 8px;
  background: var(--brand-surface);
  color: var(--brand-text);
  flex: 0 0 28px;
  stroke-width: 1.6;
}

.card-box h3.counter,
.card-box h3.daily-c {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 10px 0 2px;
  color: var(--text-primary);
  word-break: break-word;
}
.card-box h3.counter small,
.card-box h3.daily-c small {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
}

.card-box .counter-change {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 8px;
  line-height: 1.4;
  display: block;
}

/* Daily-sales / debtors KPI kartalari (Bootstrap .card) */
.mk-stats .card {
  height: 100%;
  border-radius: var(--mk-radius-md);
  box-shadow: var(--mk-shadow-sm);
  background: var(--bg-card);
}
.mk-stats .card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}
.mk-stats .card-body > p:first-child {
  font-size: 11px !important;
  letter-spacing: .05em !important;
  color: var(--text-muted) !important;
  margin-bottom: 6px !important;
}
.mk-stats .card-body h3 {
  font-size: 24px !important;
  letter-spacing: -0.03em;
  margin-bottom: 6px !important;
  line-height: 1.15;
}
.mk-stats .card-body > p:last-child,
.mk-stats .card-body > div:last-child {
  font-size: 11.5px !important;
  margin-top: auto;
}

/* ─── 26. Charts ─────────────────────────────────────────────────────────── */
.mk-chart { height: 300px; }
.mk-chart-sm { height: 300px; }
.mk-chart-empty {
  background: transparent;
  gap: 4px;
  color: var(--text-muted);
}
.mk-chart-empty i { font-size: 22px; opacity: .5; }
.mk-chart-empty strong { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.mk-chart-empty span { font-size: 12px; max-width: 260px; line-height: 1.5; }

.mk-seg {
  padding: 3px;
  border-radius: 9px;
  background: var(--bg-surface);
}
.mk-seg button {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.mk-seg button.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--mk-shadow-xs);
}

/* ─── 27. Tables ─────────────────────────────────────────────────────────── */
.table thead th {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted) !important;
  background: var(--bg-surface);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.table tbody td {
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.table-hover tbody tr { transition: background .12s ease; }

/* Qatorlarni ajratish: 8 ustunli jadvalda (mahsulotlar, savdo tarixi)
   chiziqsiz qatorlar ko'z bilan kuzatishni qiyinlashtiradi. Faqat
   desktopda — mobil "karta" rejimida bu chiziqlar kerak emas. */
@media (min-width: 768px) {
  .table > tbody > tr + tr > td {
    border-top: 1px solid var(--border-subtle);
  }
}

/* Mahsulotlar bo'limidagi asosiy amal — boshqa boshqaruv elementlari
   kabi 44px balandlikda bo'lishi kerak (WCAG 2.5.8 / vizual izchillik). */
#productsSection .mk-page-actions .btn {
  min-height: var(--mk-control-h, 44px);
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* Mahsulot rasmi: buzilgan img o'rniga ixcham fallback */
.mk-thumb,
.product-thumb {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  overflow: hidden;
}
.mk-thumb img,
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-thumb.is-empty,
.product-thumb.is-empty { color: var(--text-muted); font-size: 16px; }
img.mk-img-broken { display: none !important; }

/* Jadval amallari: xavfli amal kamroq "baqiradi" */
.table .btn-danger,
.table .btn-outline-danger {
  background: transparent;
  border: 1px solid transparent;
  color: var(--danger);
  box-shadow: none;
}
.table .btn-danger:hover,
.table .btn-outline-danger:hover {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger-text);
}

/* ─── 28. Empty / error states ───────────────────────────────────────────── */
.mk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
}
.mk-empty .mk-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 20px;
  margin-bottom: 4px;
}
.mk-empty strong { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.mk-empty span { font-size: 12.5px; max-width: 320px; line-height: 1.55; }

/* Qarzdorlar bo'sh holati: yashil dashed "drop-zone" ko'rinishi olib tashlandi */
#debtors .empty-state,
#debtors .empty-state-box,
#debtors .debtor-empty,
.mk-empty-dashed {
  border: 0 !important;
  border-radius: var(--mk-radius-md) !important;
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  padding: 32px 20px !important;
  box-shadow: none !important;
}
#debtors .empty-state h4,
#debtors .empty-state strong { color: var(--text-primary) !important; }

/* ─── 29. POS ────────────────────────────────────────────────────────────── */
#selling > .card {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--mk-radius-lg) !important;
  box-shadow: var(--mk-shadow-sm) !important;
  background: var(--bg-card) !important;
}
#selling > .card > .card-body { padding: 20px !important; }
#selling > .card > .card-body > :is(h2, h3).h5 {
  font-size: 15px;
  letter-spacing: -0.01em;
  margin-bottom: 16px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* MUHIM: ikki ustunli POS faqat katta ekranlarda.
   Ilgari bu qoida media-query'siz turardi va yuqoridagi
   `@media (max-width: 1100px) { .mk-pos-grid { grid-template-columns: 1fr } }`
   ni cascade bo'yicha bekor qilardi — natijada 768/390/320 px da chap panel
   8px (320 px da 0px) ga siqilib, POS butunlay buzilardi. */
@media (min-width: 1101px) {
  .mk-pos-grid { gap: 16px; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); }
}
.mk-pos-panel {
  padding: 18px;
  border-radius: var(--mk-radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
}
.mk-pos-panel h3 { font-size: 14px; margin-bottom: 14px; }
.mk-pos-panel h3 i { color: var(--brand-text); }

/* Ichma-ich karta effektini yo'qotish */
#selling .mk-pos-panel .card,
#selling .mk-pos-panel .card-box {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

.mk-cart th { padding: 8px 8px; border-bottom: 1px solid var(--border-subtle); }
.mk-cart td { padding: 10px 8px; }
.mk-cart tbody tr:last-child td { border-bottom: 0; }

#selling .mk-pay-grid { margin-top: 16px; }
#selling .mk-pay-grid .btn { min-height: 44px; font-weight: 600; }

/* ─── 30. Forms ──────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  min-height: 42px;
  font-size: 14px;
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control:hover,
.form-select:hover { border-color: var(--text-muted); }
.form-control:focus,
.form-select:focus {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--brand-primary);
  box-shadow: var(--mk-ring);
  outline: none;
}
.form-control:disabled,
.form-select:disabled {
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: not-allowed;
}
.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-text { font-size: 12px; color: var(--text-muted); }

.form-check.form-switch .form-check-input {
  -webkit-appearance: none;
  appearance: none;
  width: 44px !important;
  height: 24px !important;
  margin: 0 !important;
  border: 1px solid var(--border-strong);
  border-radius: 999px !important;
  background-color: var(--border-strong);
  /* Chrome/Edge'da checkbox — almashtiriladigan element, shu sabab dumaloq
     "thumb" radial-gradient bilan chiziladi (::after ishonchli ishlamaydi). */
  background-image: radial-gradient(circle at 12px 50%, #fff 0 8px, transparent 8.5px) !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.form-check.form-switch .form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  background-image: radial-gradient(circle at 32px 50%, #fff 0 8px, transparent 8.5px) !important;
}
.form-check.form-switch .form-check-input:focus-visible {
  box-shadow: var(--mk-ring);
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ─── 31. Buttons ────────────────────────────────────────────────────────── */
.btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
}
.btn-primary:active { transform: translateY(1px); }
.btn-outline-primary {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-card);
}
.btn-outline-primary:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn-outline-secondary {
  border-color: var(--border-strong);
  color: var(--text-secondary);
  background: var(--bg-card);
}
.btn-outline-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-link { color: var(--brand-text); font-weight: 600; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* ─── 32. Modals & dropdowns ─────────────────────────────────────────────── */
.modal-content {
  border: 1px solid var(--border-subtle);
  border-radius: var(--mk-radius-lg);
  background: var(--bg-card);
  box-shadow: var(--mk-shadow-lg);
  color: var(--text-primary);
}
.modal-header,
.modal-footer { border-color: var(--border-subtle); }
.modal-title { font-size: 17px; font-weight: 700; }
.modal-backdrop.show { opacity: .55; }

.profile-dropdown {
  border: 1px solid var(--border-subtle);
  border-radius: var(--mk-radius-md);
  box-shadow: var(--mk-shadow-lg);
  background: var(--bg-card);
}
.dropdown-item { border-radius: 8px; font-size: 13.5px; }
.dropdown-item:hover { background: var(--bg-hover); }
.dropdown-item.logout { color: var(--danger); }

/* ─── 33. Mobile density ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .content { padding: 10px 16px 96px; }
  .topbar { top: 8px; padding: 8px 10px; border-radius: 12px; }
  .topbar h1 { font-size: 16px; }
  .mk-topbar-sub { display: none; }
  .profile-info { display: none; }
  .profile-trigger { padding: 3px; border: 0; }

  .card-box { padding: 12px 12px; min-height: 104px; border-radius: 12px; }
  .card-box small.counter-smal { font-size: 10px; gap: 6px; letter-spacing: .03em; }
  .card-box small.counter-smal .svg-icon { width: 24px; height: 24px; flex-basis: 24px; padding: 5px; }

  /* KPI yorlig'i mobil 2 ustunda turlicha balandlikka o'ralib ketardi
     (30 / 56 / 75px) — natijada qo'shni kartalardagi raqamlar turli
     balandlikda boshlanardi. Ikonka endi matn bilan bir qatorda turadi,
     yorliq maydoni esa 2 qatorga mo'ljallangan qat'iy balandlik oladi. */
  .mk-stats .card-box small.counter-smal {
    flex-wrap: nowrap;
    align-items: flex-start;
    line-height: 1.25;
    min-height: 38px;
  }
  .mk-stats .card-box small.counter-smal .svg-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    padding: 4px;
    margin-top: 1px;
  }
  .card-box h3.counter,
  .card-box h3.daily-c { font-size: 19px; margin: 8px 0 2px; }
  .card-box h3.counter small,
  .card-box h3.daily-c small { font-size: 10.5px; }
  .card-box .counter-change { font-size: 10.5px; padding-top: 6px; }

  .mk-stats .card-body { padding: 12px 12px; min-height: 104px; }
  .mk-stats .card-body h3 { font-size: 19px !important; }

  .mk-chart,
  .mk-chart-sm { height: 240px; }

  .mk-page-actions { justify-content: stretch; }
  .mk-page-actions .form-control { min-width: 0; flex: 1 1 100%; }
  .mk-page-actions .btn { flex: 1 1 auto; }

  .mk-pos-panel { padding: 14px; }
  .mk-pos-product-row { grid-template-columns: 1fr; }

  .mobile-bottom-nav { padding-bottom: max(env(safe-area-inset-bottom), 6px); }
}

/* Planshet: sidebar drawer, kontent to'liq kenglik */
@media (min-width: 768px) and (max-width: 1199px) {
  .content { padding: 16px 18px 40px; }
  .mk-stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1920px) {
  .content > .section { max-width: none !important; width: 100% !important; margin: 0 !important; }
}

/* ─── 34. Dark mode: chuqurlik va kontrast ───────────────────────────────── */
html.dark-mode .card-box,
html.dark-mode .mk-pos-panel,
html.dark-mode .mk-stats .card {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  box-shadow: none;
}
html.dark-mode .card-box:hover {
  border-color: var(--border-strong);
  box-shadow: var(--mk-shadow-md);
}
html.dark-mode .topbar { background: color-mix(in srgb, var(--bg-card) 90%, transparent); }
html.dark-mode .form-control,
html.dark-mode .form-select {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
}
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus { background: var(--bg-surface); }
html.dark-mode .btn-outline-primary,
html.dark-mode .btn-outline-secondary { background: transparent; }
html.dark-mode .table thead th { background: var(--bg-surface); }
html.dark-mode .mk-seg button.active { background: var(--bg-hover); }

/* ─── 35. Print ──────────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .mobile-bottom-nav, .no-print { display: none !important; }
  .content { padding: 0; }
  .card-box, .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ─── 36. Badge semantikasi (Bootstrap 4'da badge-info yo'q) ─────────────── */
.badge-info {
  background: rgba(37, 99, 235, .12);
  color: #1D4ED8;
}
html.dark-mode .badge-info {
  background: rgba(96, 165, 250, .16);
  color: #93C5FD;
}
.badge-secondary { background: var(--bg-hover); color: var(--text-secondary); }
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-text); }
html.dark-mode .badge-secondary { background: var(--bg-hover); color: var(--text-secondary); }

/* ─── 37. Bo'sh holat: neytral, premium ko'rinish ────────────────────────── */
.mk-empty-state,
.mk-empty-state-green {
  border: 0;
  border-radius: var(--mk-radius-md);
  background: transparent;
  padding: 28px 20px;
}
.mk-empty-state .mk-empty-icon,
.mk-empty-state-green .mk-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 20px;
  margin-bottom: 10px;
}
.mk-empty-state .mk-empty-title,
.mk-empty-state-green .mk-empty-title {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.mk-empty-state .mk-empty-text,
.mk-empty-state-green .mk-empty-text {
  color: var(--text-muted);
  font-size: 12.5px;
  max-width: 40ch;
  line-height: 1.55;
}
html.dark-mode .mk-empty-state,
html.dark-mode .mk-empty-state-green { background: transparent; border-color: transparent; }
html.dark-mode .mk-empty-state .mk-empty-icon,
html.dark-mode .mk-empty-state-green .mk-empty-icon {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}
.mk-empty-cell { padding: 0 !important; border: 0 !important; }

/* ─── 38. Zaxira progress ────────────────────────────────────────────────── */
.stock-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--bg-hover);
  overflow: hidden;
  margin-top: 6px;
  max-width: 120px;
}
.stock-progress .progress-bar { border-radius: 999px; }
.stock-text { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }

/* ─── 39. Mobil karta-jadval zichligi ────────────────────────────────────── */
@media (max-width: 767px) {
  .mk-cards-mobile tbody tr { padding: 8px 12px; }
  .mk-cards-mobile tbody td { padding: 5px 0; align-items: center; }
  .mk-cards-mobile tbody td::before {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .mk-cards-mobile tbody td[data-label="Rasm"] { justify-content: flex-end; }
  .mk-cards-mobile tbody td[data-label="Rasm"]::before { content: "Rasm"; }
  .mk-cards-mobile .product-img { width: 38px; height: 38px; }
}

/* ─── 40. Kontrast va izchillik tuzatishlari ─────────────────────────────── */
/* style.css da qattiq yozilgan (hardcoded) ranglar dark mode'da o'qilmaydi. */
.product-name { color: var(--text-primary); }
.price-info { color: var(--text-primary); }
.price-info .currency { color: var(--text-muted); }
.qty-value { color: var(--brand-text); }
.qty-unit { color: var(--text-secondary); }
.product-category { color: var(--text-muted); }
.transaction-row { border-bottom-color: var(--border-subtle); }
.transaction-row:hover {
  background: var(--bg-hover);
  box-shadow: none;
}
html.dark-mode .transaction-row:hover { background: var(--bg-hover); }

/* Bootstrap 4 da `gap-*` utility yo'q — KPI sarlavhasidagi ikonka
   matnga yopishib qolmasligi uchun qo'lda gap beramiz. */
.mk-stats .card-body > p.d-flex { gap: 8px !important; }
.mk-stats .card-body > p.d-flex > span { flex: 0 0 auto; display: inline-flex; }

/* Qarzdorlar KPI kartalari — dashboard bilan bir xil neytral ko'rinish,
   faqat chap chegara rangi holatni bildiradi. */
.mk-kpi {
  border-left: 3px solid var(--border-subtle) !important;
  height: 100%;
}
.mk-kpi-danger  { border-left-color: var(--danger)  !important; }
.mk-kpi-warning { border-left-color: var(--warning) !important; }
.mk-kpi-success { border-left-color: var(--success) !important; }
.mk-kpi .card-body h3 { color: var(--text-primary) !important; }
.mk-kpi .mk-kpi-hint { color: var(--text-secondary) !important; }
.mk-kpi .mk-kpi-hint i { opacity: .85; }

/* Qarzdorlar jadvalidagi 7 ta amal tugmasi — rangli kvadratlar o'rniga
   neytral ghost tugmalar (funksiyalar o'zgarmaydi, faqat vizual shovqin
   kamayadi). */
#debtors .action-buttons-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
}
#debtors .action-buttons-grid .action-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  border-radius: 8px !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--bg-hover) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#debtors .action-buttons-grid .action-btn:hover {
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
  border-color: var(--brand-border) !important;
}
#debtors .action-buttons-grid .action-btn-delete:hover {
  background: var(--danger-bg) !important;
  color: var(--danger-text) !important;
  border-color: transparent !important;
}
html.dark-mode #debtors .action-buttons-grid .action-btn { background: var(--bg-surface) !important; }

/* Bootstrap 4 `.form-check-input` position:absolute — Bootstrap 5 switch
   markup bilan birga ishlatilganda tugma kartadan chiqib ketardi. */
.form-check.form-switch {
  padding-left: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  min-height: 24px;
  flex: 0 0 auto;
}
.form-check.form-switch .form-check-input {
  position: static !important;
  margin: 0 !important;
  float: none !important;
}

/* KPI ichidagi qarzdorlar badge'i butun kenglikka cho'zilib, progress-bar
   kabi ko'rinardi. */
.mk-stats .debt-count-badge {
  align-self: flex-start;
  background: var(--bg-hover) !important;
  color: var(--text-secondary) !important;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 7 ta amal tugmasi 2 qatorga tekis joylashsin (6+1 o'rniga 4+3). */
#debtors .action-buttons-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 30px);
  gap: 4px;
  justify-content: start;
}

/* ─── 41. Landing: suzuvchi tema tugmasi ─────────────────────────────────── */
[data-theme-toggle]:focus-visible {
  outline: 2px solid var(--brand, #4455EE);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  [data-theme-toggle] {
    width: 42px !important;
    height: 42px !important;
    bottom: 16px !important;
    right: 16px !important;
    font-size: 18px !important;
    opacity: .92;
  }
}

/* ─── 42. Auth sahifalar: checkbox'lar ───────────────────────────────────── */
/* Brauzerning standart checkbox'i dark mode'da oq kvadrat bo'lib qolardi.
   Yagona, brendga mos nazorat qilinadigan ko'rinishga keltiramiz. */
.auth-check,
.terms-check {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  margin: 0 !important;
  border: 1.5px solid var(--auth-input-border, #cbd5e1) !important;
  border-radius: 6px !important;
  background: var(--auth-input-bg, #fff) !important;
  display: inline-grid !important;
  place-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.auth-check::before,
.terms-check::before {
  content: "";
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform .12s ease-in-out;
  background: #fff;
  clip-path: polygon(14% 46%, 0 62%, 40% 100%, 100% 18%, 85% 4%, 38% 73%);
}
.auth-check:checked,
.terms-check:checked {
  background: var(--auth-accent, #4455EE) !important;
  border-color: var(--auth-accent, #4455EE) !important;
}
.auth-check:checked::before,
.terms-check:checked::before {
  transform: scale(1);
}
.auth-check:focus-visible,
.terms-check:focus-visible {
  outline: 2px solid var(--auth-accent, #4455EE);
  outline-offset: 2px;
}

/* ─── 43. Kontrast tuzatishlari (WCAG 2.2 AA) ────────────────────────────── */
/* Avtomatik kontrast skani topgan real muammolar. Gradient fonli
   elementlar (badge'lar) hisobga olinmagan — ular o'z foni bilan yetarli. */

/* Dark rejim: qorong'i matn qorong'i kartada qolib ketgan holatlar. */
html.dark-mode .overdue-mini-name {
  color: #E2E8F0;
}
html.dark-mode .overdue-mini-amount {
  color: #F87171;
}
html.dark-mode .date-text {
  color: #94A3B8;
}

/* "Naqd" tugmasi: oq matn yorqin yashil fonda 1.9–2.5:1 edi.
   Bootstrap 5.3 rangni CSS o'zgaruvchilari orqali beradi — !important kerak. */
.btn.btn-success,
#addSaleCash,
#debtSaleSubmitBtn {
  background-color: #047857 !important;
  border-color: #047857 !important;
  color: #FFFFFF !important;
}
.btn.btn-success:hover,
.btn.btn-success:focus-visible,
#addSaleCash:hover,
#addSaleCash:focus-visible,
#debtSaleSubmitBtn:hover,
#debtSaleSubmitBtn:focus-visible {
  background-color: #065F46 !important;
  border-color: #065F46 !important;
}

/* Qarzdorlar summasi: #EF4444 oq fonda 3.76:1 — quyuqlashtirildi. */
html:not(.dark-mode) #debtors .debtor-amount {
  color: #DC2626;
}