/* ==========================================================================
   MARK1 BUSINESS OS — CANONICAL DESIGN SYSTEM (DESIGN.md COMPLIANT)
   --------------------------------------------------------------------------
   Navy Ladder Architecture: Ink (#080D17) -> Navy (#14283A) -> Steel (#24445B)
   Fonts: Manrope (Display, UI, Figures) + Onest (Body, Tables) + JetBrains Mono (IDs)
   Primary Action: #3B66F0 (Used strictly for primary actions & focus)
   ========================================================================== */

/* ─── 01. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Core Apple-inspired Premium SaaS palette (§1.1) */
  --ink: #101828;
  --navy: #1D2939;
  --steel: #526780;
  --mute: #6A839A;
  --mist: #B4D0E2;
  --snow: #F3F7FB;
  --white: #FFFFFF;
  --action: #4455EE;
  --action-hover: #3344DD;

  /* Semantic status colors (§1.1) */
  --ok: #0DAD78;
  --warn: #E9A23B;
  --err: #E5484D;
  --err-solid: #D9383D;
  --info: #4455EE;

  /* Typography families (DESIGN.md §3) */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* M1 semantic bridge (both modes) */
  --m1-brand: var(--action);
  --m1-brand-hover: var(--action-hover);
  --m1-brand-press: #172B73;
  --m1-brand-soft: #DCE6FD;
  --m1-brand-ink: #172B73;
  --m1-brand-line: #8FAEF9;

  /* Ground and surfaces (Light mode defaults: Snow ground, White cards) */
  --m1-canvas: var(--snow);
  --m1-surface: var(--white);
  --m1-surface-2: #F0F6FA;
  --m1-surface-3: #E1ECF4;
  --m1-surface-inset: var(--snow);

  /* Ink */
  --m1-ink: var(--ink);
  --m1-ink-2: #5B6B7C;
  --m1-ink-3: var(--steel);
  --m1-on-brand: var(--white);
  --m1-on-brand-2: var(--white);

  /* Rules */
  --m1-line: #D6E6EE;
  --m1-line-strong: #B4D0E2;
  --m1-line-soft: #EAF3F8;

  /* Semantic status chips */
  --m1-success: var(--ok);
  --m1-success-bg: #D5F4E8;
  --m1-success-ink: #047857;
  --m1-warning: var(--warn);
  --m1-warning-bg: #FDF0D2;
  --m1-warning-ink: #9A4408;
  --m1-danger: var(--err);
  --m1-danger-bg: #FCDCDC;
  --m1-danger-ink: #B42318;
  --m1-info: var(--info);
  --m1-info-bg: #DCE8FD;
  --m1-info-ink: #1D4ED8;

  /* Typography scale */
  --m1-font: var(--font-body);
  --m1-font-display: var(--font-display);
  --m1-font-mono: var(--font-mono);

  --m1-fs-11: 11px;
  --m1-fs-12: 12px;
  --m1-fs-13: 13px;
  --m1-fs-14: 14px;
  --m1-fs-15: 15px;
  --m1-fs-17: 18px;
  --m1-fs-20: 20px;
  --m1-fs-26: 24px;
  --m1-fs-32: 28px;
  --m1-fs-40: 36px;
  --m1-fs-56: 56px;
  --m1-track-tight: -0.01em;
  --m1-track-wide: 0.04em;

  /* Space (4px scale: DESIGN.md §4) */
  --m1-s1: 4px;
  --m1-s2: 8px;
  --m1-s3: 12px;
  --m1-s4: 16px;
  --m1-s5: 20px;
  --m1-s6: 24px;
  --m1-s8: 32px;
  --m1-s10: 40px;
  --m1-s12: 48px;
  --m1-s16: 64px;
  --m1-gutter: 24px;

  /* Shape: §1.3 (Apple card radius 14-16px, inputs 10px) */
  --m1-r-xs: 4px;
  --m1-r-sm: 6px;
  --m1-r-md: 10px;
  --m1-r-lg: 14px;
  --m1-r-xl: 18px;
  --m1-r-pill: 999px;

  /* Elevation: DESIGN.md §4 */
  --m1-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --m1-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --m1-shadow-3: 0 12px 24px -4px rgba(20, 40, 58, 0.15);

  /* Motion: DESIGN.md §9 */
  --m1-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --m1-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --m1-dur: 120ms;

  /* Chrome */
  --m1-sidebar-w: 240px;
  --m1-sidebar-w-collapsed: 72px;
  --m1-topbar-h: 56px;
  --m1-content-max: none;
  --m1-focus: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

html.dark-mode {
  color-scheme: dark;

  /* Dark mode Palette (§1.1) */
  --m1-brand: #4169F5;
  --m1-brand-hover: #2E56E2;
  --m1-brand-press: #1F42BD;
  --m1-brand-soft: rgba(65, 105, 245, 0.18);
  --m1-brand-ink: #9BB3FA;
  --m1-brand-line: rgba(155, 179, 250, 0.35);

  --m1-canvas: #080F19;
  --m1-surface: #0F1C2B;
  --m1-surface-2: #152A3B;
  --m1-surface-3: #1D3A50;
  --m1-surface-inset: #060B12;

  --m1-ink: #ECF3FA;
  --m1-ink-2: #91AFC5;
  --m1-ink-3: #67879F;
  --m1-on-brand: var(--white);
  --m1-on-brand-2: var(--white);

  --m1-line: #25465B;
  --m1-line-strong: #345C75;
  --m1-line-soft: #193140;

  /* Status chip dark tints (§1.1) */
  --m1-success: #19C994;
  --m1-success-bg: rgba(25, 201, 148, 0.15);
  --m1-success-ink: #19C994;
  --m1-warning: #F4B740;
  --m1-warning-bg: rgba(244, 183, 64, 0.15);
  --m1-warning-ink: #F4B740;
  --m1-danger: #FF6269;
  --m1-danger-bg: rgba(255, 98, 105, 0.15);
  --m1-danger-ink: #FF6269;
  --m1-info: #93B4FA;
  --m1-info-bg: #172F5C;
  --m1-info-ink: #93B4FA;

  --m1-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --m1-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
  --m1-shadow-3: 0 16px 32px rgba(0, 0, 0, 0.6);
  --m1-focus: 0 0 0 2px rgba(59, 130, 246, 0.45);
}

/* ─── 02. LEGACY REMAP ───────────────────────────────────────────────────── */
/* Components written before this layer keep working, but resolve to the new
   palette and rhythm. No component gets a hard-coded hex. */
:root {
  --brand-primary: var(--m1-brand);
  --brand-hover: var(--m1-brand-hover);
  --brand-text: var(--m1-brand);
  --brand-surface: var(--m1-brand-soft);

  --bg-main: var(--m1-canvas);
  --bg-card: var(--m1-surface);
  --bg-surface: var(--m1-surface-2);
  --bg-hover: var(--m1-surface-3);
  --bg-sidebar: var(--m1-surface);

  --text-primary: var(--m1-ink);
  --text-secondary: var(--m1-ink-2);
  --text-muted: var(--m1-ink-3);

  --border-subtle: var(--m1-line);
  --border-strong: var(--m1-line-strong);

  --success: var(--m1-success);
  --success-bg: var(--m1-success-bg);
  --success-text: var(--m1-success-ink);
  --warning: var(--m1-warning);
  --warning-bg: var(--m1-warning-bg);
  --warning-text: var(--m1-warning-ink);
  --danger: var(--m1-danger);
  --danger-bg: var(--m1-danger-bg);
  --danger-text: var(--m1-danger-ink);
  --info: var(--m1-info);
  --info-bg: var(--m1-info-bg);
  --info-text: var(--m1-info-ink);

  --radius-sm: var(--m1-r-sm);
  --radius-md: var(--m1-r-md);
  --radius-lg: var(--m1-r-lg);
  --radius-xl: var(--m1-r-xl);

  --shadow-sm: var(--m1-shadow-1);
  --shadow-card: var(--m1-shadow-1);
  --shadow-hover: var(--m1-shadow-2);
  --shadow-floating: var(--m1-shadow-3);

  --mk-radius-md: var(--m1-r-lg);
  --mk-control-h: 42px;
  --mk-focus-ring: var(--m1-focus);
}

html.dark-mode {
  --brand-primary: var(--m1-brand);
  --brand-hover: var(--m1-brand-hover);
  --brand-text: var(--m1-brand-ink);
  --brand-surface: var(--m1-brand-soft);
  --bg-main: var(--m1-canvas);
  --bg-card: var(--m1-surface);
  --bg-surface: var(--m1-surface-2);
  --bg-hover: var(--m1-surface-3);
  --bg-sidebar: var(--m1-surface);
  --text-primary: var(--m1-ink);
  --text-secondary: var(--m1-ink-2);
  --text-muted: var(--m1-ink-3);
  --border-subtle: var(--m1-line);
  --border-strong: var(--m1-line-strong);
}

/* ─── 03. BASE & BROWSER SURFACES ────────────────────────────────────────── */
html { background: var(--m1-canvas); }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--m1-ink);
  background: var(--m1-canvas) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, button, .btn {
  font-family: var(--font-display);
  color: var(--m1-ink) !important;
  text-wrap: balance;
}

h1 { font-size: 30px; font-weight: 700; line-height: 36px; letter-spacing: -0.01em; }
h2 { font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0; }
h3 { font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: 0; }
h4 { font-size: 18px; font-weight: 600; line-height: 26px; letter-spacing: 0; }
p { color: var(--m1-ink-2); line-height: 1.55; }
small { font-size: 14px; line-height: 20px; }

/* Invoices, codes and IDs: JetBrains Mono only (DESIGN.md §3) */
.mono,
[data-mono],
.sku,
[id*="barcode"],
[id*="Barcode"],
td.mono,
th.mono {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* Money and counters: Manrope 800 + tabular-nums (DESIGN.md §3.1) */
.counter,
.counter-change,
.daily-c,
.daily-counter,
.tranzik-text,
.table td,
.table th,
[data-key],
[id*="Amount"],
[id*="Total"],
[id*="total"],
[id*="Sum"],
[id*="sum"],
[id*="Counter"],
[id*="counter"],
.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

::selection { background: var(--m1-brand); color: #fff; }
html.dark-mode ::selection { background: #5C6BF5; color: #fff; }

input, textarea {
  caret-color: var(--m1-brand);
}
html.dark-mode input, html.dark-mode textarea {
  caret-color: var(--m1-brand-hover);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--m1-brand);
  outline-offset: 2px;
  border-radius: var(--m1-r-sm);
  box-shadow: var(--m1-focus);
}

* { scrollbar-width: thin; scrollbar-color: var(--m1-line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--m1-line-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--m1-ink-3); background-clip: content-box; }

hr { border: 0; border-top: 1px solid var(--m1-line); opacity: 1; margin: var(--m1-s6) 0; }

a { color: var(--m1-brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--m1-brand-hover); }

.sr-only,
.mk-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 3000;
  padding: 10px 16px;
  background: var(--m1-ink); color: var(--m1-surface);
  border-radius: var(--m1-r-md);
  font-weight: 600;
  transition: top var(--m1-dur) var(--m1-ease);
}
.skip-link:focus { top: 8px; color: var(--m1-surface); }

/* ─── 04. APP SHELL ──────────────────────────────────────────────────────── */
body > .d-flex {
  display: grid;
  grid-template-columns: var(--m1-sidebar-w) minmax(0, 1fr);
  align-items: stretch;
  min-height: 100vh;
  background: var(--m1-canvas);
}

body.mk-sidebar-collapsed > .d-flex {
  grid-template-columns: var(--m1-sidebar-w-collapsed) minmax(0, 1fr);
}

.sidebar {
  grid-column: 1;
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  width: var(--m1-sidebar-w);
  min-width: 0;
  height: 100vh;
  min-height: 100vh;
  padding: 0 var(--m1-s3) var(--m1-s3);
  background: var(--white) !important;
  border-right: 1px solid var(--m1-line);
  z-index: 40;
  transition: width var(--m1-dur) var(--m1-ease), padding var(--m1-dur) var(--m1-ease);
}
html.dark-mode .sidebar {
  background: var(--navy) !important;
  border-right: 1px solid var(--steel);
}

.sidebar .logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m1-s2);
  padding: 0 16px;
  margin: 0 0 var(--m1-s3);
  height: var(--m1-topbar-h);
  min-height: var(--m1-topbar-h);
  border-bottom: 1px solid var(--m1-line);
}
html.dark-mode .sidebar .logo {
  border-bottom: 1px solid var(--steel);
}
.sidebar .logo img {
  height: 34px;
  max-height: 38px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
  /* Yig'ilgan ↔ kengaygan holat orasida silliq o'tish ("galti" emas). */
  transition: opacity var(--m1-dur) var(--m1-ease),
              max-width var(--m1-dur) var(--m1-ease),
              visibility var(--m1-dur) var(--m1-ease);
}
/* Keng holatda ixcham M logosi yashirin turadi */
.sidebar .logo .mk-logo-mark {
  display: none;
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
}
.sidebar .logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--m1-line);
}
.sidebar .logo {
  text-decoration: none;
  display: flex;
  align-items: center;
}
.sidebar-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--m1-line);
  border-radius: var(--m1-r-sm);
  background: var(--m1-surface);
  color: var(--m1-ink-2);
  cursor: pointer;
  transition: all var(--m1-dur) var(--m1-ease);
}
.sidebar-toggle-btn:hover {
  background: var(--m1-surface-3);
  color: var(--m1-brand);
  border-color: var(--m1-brand-line);
}
body.mk-sidebar-collapsed .sidebar-toggle-btn {
  display: none !important;
}
body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar-toggle-btn {
  display: inline-flex !important;
}
@media (max-width: 991px) {
  .sidebar-toggle-btn { display: none !important; }
}

.sidebar .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--m1-s3);
  min-height: 40px;
  margin: 0;
  padding: 8px 14px;
  border-radius: var(--m1-r-md);
  color: var(--m1-ink-2);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: all var(--m1-dur) var(--m1-ease);
}
.sidebar .nav-item .svg-icon {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  opacity: 0.75;
  stroke-width: 1.8;
  transition: all var(--m1-dur) var(--m1-ease);
}
.sidebar .nav-item:hover {
  background: var(--m1-surface-2);
  color: var(--m1-ink);
}
html.dark-mode .sidebar .nav-item:hover {
  background: rgba(36, 68, 91, 0.45);
  color: var(--snow);
}

/* DESIGN.md §5: Active item in Light mode = #D3E4EF fill + steel, in Dark mode = steel fill + snow */
.sidebar .nav-item.active {
  background: #D3E4EF !important;
  color: var(--steel) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.sidebar .nav-item.active .svg-icon {
  opacity: 1;
  color: var(--steel) !important;
}
html.dark-mode .sidebar .nav-item.active {
  background: var(--steel) !important;
  color: var(--snow) !important;
  box-shadow: none !important;
}
html.dark-mode .sidebar .nav-item.active .svg-icon {
  opacity: 1;
  color: var(--snow) !important;
}
.sidebar .nav-item.active::before { display: none !important; }

.mk-sidebar-foot {
  display: flex;
  align-items: center;
  gap: var(--m1-s3);
  min-height: 56px;
  margin-top: auto;
  padding: var(--m1-s3) var(--m1-s2) var(--m1-s1);
  border-top: 1px solid var(--m1-line);
}
.mk-sidebar-foot .mk-avatar {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: var(--m1-r-md);
  background: var(--m1-ink);
  color: var(--m1-surface);
  font-size: var(--m1-fs-12);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mk-user-meta { min-width: 0; line-height: 1.3; transition: opacity var(--m1-dur) var(--m1-ease), max-width var(--m1-dur) var(--m1-ease), visibility var(--m1-dur) var(--m1-ease); }
.mk-user-name {
  font-size: var(--m1-fs-13);
  font-weight: 600;
  color: var(--m1-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-user-store {
  font-size: var(--m1-fs-11);
  color: var(--m1-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Collapsed rail */
body.mk-sidebar-collapsed .sidebar { padding-left: var(--m1-s2); padding-right: var(--m1-s2); }
body.mk-sidebar-collapsed .sidebar .nav-item {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
  font-size: 0;
}
body.mk-sidebar-collapsed .sidebar .nav-item .svg-icon { width: 20px; height: 20px; flex-basis: 20px; }
body.mk-sidebar-collapsed .mk-nav-label { font-size: 0; padding: 0; margin: var(--m1-s3) 0 var(--m1-s1); }
body.mk-sidebar-collapsed .mk-nav-label::after {
  content: "";
  display: block;
  height: 1px;
  margin: 0 var(--m1-s2);
  background: var(--m1-line);
}
/* Eski holat: `display: none → block` aniq sakrab ko'rinardi ("galti").
   Endi opacity/max-width orqali silliq o'tish. */
body.mk-sidebar-collapsed .mk-user-meta {
  opacity: 0;
  visibility: hidden;
  max-width: 0;
  overflow: hidden;
}
body.mk-sidebar-collapsed .sidebar .logo .mk-logo-full {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  max-width: 0;
}
body.mk-sidebar-collapsed .sidebar .logo .mk-logo-mark {
  display: block !important;
  opacity: 1;
  visibility: visible;
  margin: 0 auto;
}
body.mk-sidebar-collapsed .sidebar .logo { justify-content: center; padding-left: 0; padding-right: 0; }
/* Matnli "M1" o'rniga brendning rasmiy geometrik "M" belgisi qo'yildi */
body.mk-sidebar-collapsed .sidebar .logo::before {
  content: none !important;
  display: none !important;
}
/* Yig'ilgan holatda yorliq matni yashiriladi (font-size:0), lekin konteyner
   25px balandlikda qolib "suzuvchi" bo'shliq hosil qilardi. Endi u ixcham
   1px ajratgichga aylanadi — guruh ajralishi saqlanadi, teshik yo'qoladi. */
body.mk-sidebar-collapsed .mk-nav-label {
  height: 1px;
  margin: 10px var(--m1-s2) !important;
  padding: 0 !important;
  overflow: hidden;
  /* `line-height: 24px` bo'lsa, ko'rinmas matn qatori `::after` chizig'ini
     1px konteynerdan tashqariga siqib chiqarar va u kesilardi. */
  line-height: 0;
  /* `overflow: hidden` tufayli flex'dagi `min-height: auto` 0 bo'ladi — nav
     kontenti sig'maganda (qisqa viewport) flex yorliqni 1px → 0 siqib,
     chizig'ini kesib tashlardi (kuzatildi: 1440×300 da chiziq yo'q edi).
     Yorliq siqilmasin, nav ichki scroll'ga ketsin. */
  flex-shrink: 0;
}
body.mk-sidebar-collapsed .mk-nav-label::after { margin: 0 !important; }
body.mk-sidebar-collapsed .mk-sidebar-foot { justify-content: center; }
body.mk-sidebar-collapsed .sidebar .nav-item:hover::after,
body.mk-sidebar-collapsed .sidebar .nav-item:focus-visible::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  padding: 6px 10px;
  border-radius: var(--m1-r-sm);
  background: var(--m1-ink);
  color: var(--m1-surface);
  font-size: var(--m1-fs-12);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--m1-shadow-2);
}

/* Collapsed sidebar: hover'da vaqtincha kengayadi (labels + user info ko'rinadi) */
body.mk-sidebar-collapsed .sidebar {
  transition: width 0.2s ease, min-width 0.2s ease, box-shadow 0.2s ease;
}
body.mk-sidebar-collapsed:has(.sidebar:hover) > .d-flex {
  grid-template-columns: var(--mk-sidebar-w, 248px) minmax(0, 1fr) !important;
}
body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar {
  width: var(--mk-sidebar-w, 248px) !important;
  min-width: var(--mk-sidebar-w, 248px) !important;
  box-shadow: var(--m1-shadow-3, 0 4px 24px rgba(0,0,0,0.12));
}
body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .nav-item {
  justify-content: flex-start;
  padding: 10px var(--m1-s3);
  gap: var(--m1-s3);
  font-size: var(--m1-fs-14);
}
body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .nav-item .svg-icon {
  width: 24px; height: 24px; flex-basis: 24px;
}
body.mk-sidebar-collapsed:has(.sidebar:hover) .mk-nav-label {
  font-size: var(--m1-fs-10);
  padding: 0 var(--m1-s1);
  margin: var(--m1-s3) 0 var(--m1-s1) !important;
  /* Yig'ilgan holatdagi ixcham ajratgichni bekor qilamiz. */
  height: auto !important;
  overflow: visible !important;
  line-height: 1.4;
}
body.mk-sidebar-collapsed:has(.sidebar:hover) .mk-nav-label::after { content: none; }
body.mk-sidebar-collapsed:has(.sidebar:hover) .mk-user-meta,
body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .logo .mk-logo-full {
  display: block !important;
  opacity: 1;
  visibility: visible;
  max-width: 140px;
}
body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .logo .mk-logo-mark {
  display: none !important;
}
body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .logo {
  justify-content: space-between;
  padding-left: var(--m1-s1);
  padding-right: var(--m1-s1);
}
body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .logo::before { content: none !important; }
body.mk-sidebar-collapsed:has(.sidebar:hover) .mk-sidebar-foot {
  justify-content: flex-start;
  padding-left: var(--m1-s1);
  padding-right: var(--m1-s1);
}
body.mk-sidebar-collapsed:has(.sidebar:hover) .mk-user-meta {
  overflow: hidden;
}

/* ─── 05. MAIN / PAGE FRAME ──────────────────────────────────────────────── */
main.content {
  grid-column: 2;
  min-width: 0;
  min-height: 100vh;
  padding: 0 0 var(--m1-s12);
  background: var(--m1-canvas);
}

.topbar,
.content > .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m1-s4);
  min-height: var(--m1-topbar-h);
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 var(--m1-gutter);
  border: 0;
  border-bottom: 1px solid var(--m1-line);
  border-radius: 0 !important;
  background: var(--m1-surface);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.03);
}
.mk-topbar-left { display: flex; align-items: center; gap: var(--m1-s3); min-width: 0; }
.topbar h1 {
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
  color: var(--m1-ink);
}
.mk-topbar-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--m1-fs-12);
  color: var(--m1-ink-3);
  max-width: min(56vw, 560px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-actions { display: flex; align-items: center; gap: var(--m1-s2); }

.theme-toggle-btn,
.mk-mobile-menu,
.mk-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  min-width: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 1px solid var(--m1-line);
  border-radius: var(--m1-r-md);
  background: var(--m1-surface);
  color: var(--m1-ink-2);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--m1-dur) var(--m1-ease), border-color var(--m1-dur) var(--m1-ease), color var(--m1-dur) var(--m1-ease);
}
.theme-toggle-btn:hover,
.mk-mobile-menu:hover,
.mk-sidebar-toggle:hover {
  background: var(--m1-surface-3);
  border-color: var(--m1-line-strong);
  color: var(--m1-ink);
}
.mk-sidebar-toggle { background: transparent; border-color: transparent; }

/* Desktop: hide mobile menu trigger and drawer close button */
@media (min-width: 992px) {
  .mk-mobile-menu,
  [data-mk-drawer-close] {
    display: none !important;
  }
  .mk-sidebar-toggle {
    display: inline-flex !important;
  }
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: var(--m1-s2);
  padding: 4px 8px 4px 4px;
  border: 1px solid transparent;
  border-radius: var(--m1-r-md);
  cursor: pointer;
  transition: background var(--m1-dur) var(--m1-ease), border-color var(--m1-dur) var(--m1-ease);
}
.profile-trigger:hover { background: var(--m1-surface-3); border-color: var(--m1-line); }
.profile-avatar-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-avatar,
.profile-avatar-fallback {
  width: 34px; height: 34px;
  border-radius: var(--m1-r-md);
  object-fit: cover;
}
.profile-avatar-fallback {
  display: grid; place-items: center;
  background: var(--m1-ink);
  color: var(--m1-surface);
  font-size: var(--m1-fs-11);
  font-weight: 700;
}
.notification-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  top: auto;
  left: auto;
  width: 9px;
  height: 9px;
  border: 2px solid var(--m1-surface, #fff);
  background: var(--m1-success, #22c55e);
  border-radius: 50%;
  z-index: 2;
}
html.dark-mode .notification-dot {
  border-color: var(--m1-surface, #141828);
}
.profile-info { display: flex; flex-direction: column; line-height: 1.25; }
.profile-name { font-size: var(--m1-fs-13); font-weight: 600; color: var(--m1-ink); }
.profile-store { font-size: var(--m1-fs-11); color: var(--m1-ink-3); }
.profile-dropdown-icon { width: 14px; height: 14px; color: var(--m1-ink-3); }

.section { display: none; padding: var(--m1-s6) var(--m1-gutter) var(--m1-s10); width: 100%; max-width: none; margin: 0; }
.section.active { display: block; }
/* Fill-mode 'both' animatsiyani abadiy ushlab, section'ga doimiy stacking
   context berardi — modal (z=2000) qafasda qolib, sidebar/topbar undan
   yuqori chiqardi. Fill-mode'siz (default) 180ms dan keyin context ochiladi. */
.content > .section { animation: m1-section-in 180ms var(--m1-ease-out); }
@keyframes m1-section-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.debtor-amount {
  white-space: nowrap !important;
  font-feature-settings: "tnum" 1;
}

/* Chrome / Safari / Edge autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--m1-surface) inset !important;
  -webkit-text-fill-color: var(--m1-ink) !important;
  caret-color: var(--m1-ink) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Page action row sits at the top of each module. */
.mk-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--m1-s2);
  flex-wrap: wrap;
  margin: 0 0 var(--m1-s5);
}
.mk-page-actions .form-control { min-width: 220px; }
.mk-page-actions .btn { white-space: nowrap; }

/* ─── 06. SURFACES ───────────────────────────────────────────────────────── */
.card,
.card-box {
  background: var(--m1-surface);
  border: 1px solid var(--m1-line);
  border-radius: var(--m1-r-lg);
  box-shadow: none;
  transition: border-color var(--m1-dur) var(--m1-ease), box-shadow var(--m1-dur) var(--m1-ease);
}
.card { overflow: hidden; }
.card-box:hover,
.card:hover { border-color: var(--m1-line-strong); box-shadow: none; transform: none; }
.card-body { padding: var(--m1-s5); }
.card-header {
  padding: var(--m1-s4) var(--m1-s5);
  background: transparent;
  border-bottom: 1px solid var(--m1-line);
}
.card-footer { background: var(--m1-surface-2); border-top: 1px solid var(--m1-line); }

/* Section sub-headers inside surfaces */
.section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--m1-s3);
  padding-bottom: var(--m1-s4);
  margin-bottom: var(--m1-s4);
  border-bottom: 1px solid var(--m1-line);
}
.section-header .icon {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: var(--m1-r-md);
  background: var(--m1-surface-3);
  color: var(--m1-ink-2);
}
.section-header h4 { margin: 0 0 2px; font-size: var(--m1-fs-15); }
.section-header p { margin: 0; font-size: var(--m1-fs-12); color: var(--m1-ink-3); }

/* ─── 07. LEDGER STRIP (dashboard KPI) ───────────────────────────────────── */
.mk-stats {
  display: grid !important;
  gap: var(--m1-s4);
  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-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--m1-s3);
  margin: 0 0 var(--m1-s5) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.mk-stats-6 > [class*="col-"] { display: flex; min-width: 0; }
.mk-stats-6 .card-box {
  width: 100%;
  min-height: 136px;
  height: 100%;
  padding: 16px 16px 14px;
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-lg) !important;
  background: var(--m1-surface) !important;
  box-shadow: var(--m1-shadow-1) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform var(--m1-dur) var(--m1-ease), border-color var(--m1-dur) var(--m1-ease), box-shadow var(--m1-dur) var(--m1-ease);
}
.mk-stats-6 .card-box:hover {
  transform: translateY(-2px);
  border-color: var(--m1-line-strong) !important;
  box-shadow: var(--m1-shadow-2) !important;
}

/* Primary KPI card: subtle border & soft badge tint, not a flat color block */
.mk-stats-6 > [class*="col-"]:first-child .card-box {
  border-color: var(--m1-brand-line) !important;
  background: var(--m1-surface) !important;
  position: relative;
}
.mk-stats-6 > [class*="col-"]:first-child .card-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--m1-r-lg) var(--m1-r-lg) 0 0;
  background: var(--m1-brand);
}
.mk-stats-6 > [class*="col-"]:first-child .card-box small.counter-smal {
  color: var(--m1-brand-ink) !important;
}
.mk-stats-6 > [class*="col-"]:first-child .card-box small.counter-smal .svg-icon {
  background: var(--m1-brand-soft) !important;
  color: var(--m1-brand) !important;
}
.mk-stats-6 > [class*="col-"]:first-child .card-box h3.counter,
.mk-stats-6 > [class*="col-"]:first-child .card-box h3.daily-c {
  color: var(--m1-ink) !important;
  font-size: clamp(20px, 1.6vw, 26px);
  margin-top: 8px;
}
.mk-stats-6 > [class*="col-"]:first-child .card-box h3.counter small,
.mk-stats-6 > [class*="col-"]:first-child .card-box h3.daily-c small {
  color: var(--m1-ink-3) !important;
}
.mk-stats-6 > [class*="col-"]:first-child .card-box .counter-change,
.mk-stats-6 > [class*="col-"]:first-child .card-box .text-success {
  color: var(--m1-success-ink) !important;
}
.mk-stats-6 > [class*="col-"]:first-child .card-box .text-muted,
.mk-stats-6 > [class*="col-"]:first-child .card-box small {
  color: var(--m1-ink-3) !important;
}

.card-box small.counter-smal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 28px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--m1-ink-3);
  line-height: 1.25;
}
.card-box small.counter-smal .svg-icon {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  padding: 5px;
  border-radius: var(--m1-r-sm);
  background: var(--m1-brand-soft);
  color: var(--m1-brand);
  stroke-width: 1.8;
}
.mk-stats-6 > [class*="col-"]:nth-child(2) .card-box small.counter-smal .svg-icon {
  background: #EFF6FF !important;
  color: #3B82F6 !important;
}
.mk-stats-6 > [class*="col-"]:nth-child(3) .card-box small.counter-smal .svg-icon {
  background: #ECFDF5 !important;
  color: #10B981 !important;
}
.mk-stats-6 > [class*="col-"]:nth-child(4) .card-box small.counter-smal .svg-icon {
  background: #F5F3FF !important;
  color: #8B5CF6 !important;
}
.mk-stats-6 > [class*="col-"]:nth-child(5) .card-box small.counter-smal .svg-icon {
  background: #FEF2F2 !important;
  color: #EF4444 !important;
}
.mk-stats-6 > [class*="col-"]:nth-child(6) .card-box small.counter-smal .svg-icon {
  background: #FFFBEB !important;
  color: #F59E0B !important;
}

.card-box h3.counter,
.card-box h3.daily-c {
  margin: 4px 0 !important;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: clamp(19px, 1.45vw, 24px);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--m1-ink);
  font-variant-numeric: tabular-nums;
  word-break: normal;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
}
.card-box h3.counter small,
.card-box h3.daily-c small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--m1-ink-3);
  margin-left: 3px;
  display: inline-block;
}
.card-box .counter-change,
.card-box small.counter-change,
.card-box small.text-muted,
.card-box small.text-success {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  min-height: 24px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--m1-r-pill);
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
}
.card-box .text-success,
.card-box .counter-change:not(.text-danger) {
  background: var(--m1-success-bg);
  color: var(--m1-success-ink) !important;
}
.card-box small.text-muted {
  background: var(--m1-surface-2);
  color: var(--m1-ink-2) !important;
}
.card-box .counter-change.text-danger {
  background: var(--m1-danger-bg);
  color: var(--m1-danger-ink) !important;
}

/* Three-up KPI groups (sales history / debtors) */
.mk-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m1-s4); margin-bottom: var(--m1-s5) !important; }
.mk-stats-3 > [class*="col-"] > .card,
.mk-stats-3 > [class*="col-"] > .card-box { height: 100%; }
.mk-stats .card { border-radius: var(--m1-r-lg); box-shadow: none; background: var(--m1-surface); }
.mk-stats .card-body { padding: var(--m1-s5); }
.mk-stats .card p.text-muted,
.mk-stats .card .text-muted {
  font-size: 10.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
  color: var(--m1-ink-3) !important;
}
.mk-stats .card h3 {
  margin: var(--m1-s2) 0 4px !important;
  font-size: clamp(22px, 1.8vw, 30px) !important;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

/* ─── 08. BUTTONS ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m1-s2);
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--m1-r-md);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  transition: all var(--m1-dur) var(--m1-ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.btn i, .btn svg { font-size: 15px; }

/* Primary: Action blue fill, white label, shadow 0 4px 12px rgba(59,102,240,.25); hover #2A4CC0 (DESIGN.md §5) */
.btn-primary {
  background: var(--action) !important;
  border-color: var(--action) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(59, 102, 240, 0.25) !important;
}
.btn-primary:hover {
  background: var(--action-hover) !important;
  border-color: var(--action-hover) !important;
  color: #fff !important;
}
.btn-primary:active {
  background: #172B73 !important;
  border-color: #172B73 !important;
}
.btn-primary:disabled, .btn-primary.disabled {
  opacity: 0.5;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none;
}

/* Secondary: dark -> navy fill, steel border, snow label; light -> #D3E4EF fill, steel label (DESIGN.md §5) */
.btn-secondary, .btn-outline-secondary {
  background: #D3E4EF !important;
  border-color: #D3E4EF !important;
  color: var(--steel) !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  background: #B4D0E2 !important;
  border-color: #B4D0E2 !important;
  color: var(--navy) !important;
}
html.dark-mode .btn-secondary,
html.dark-mode .btn-outline-secondary {
  background: var(--navy) !important;
  border-color: var(--steel) !important;
  color: var(--snow) !important;
}
html.dark-mode .btn-secondary:hover,
html.dark-mode .btn-outline-secondary:hover {
  background: var(--steel) !important;
  color: #fff !important;
}

/* Ghost: dark -> transparent, steel border, snow label; light -> white fill, #2A4CC0 label, #D6E6EE border (DESIGN.md §5) */
.btn-outline-primary {
  background: #fff !important;
  border-color: #D6E6EE !important;
  color: #2A4CC0 !important;
}
.btn-outline-primary:hover {
  background: #EFF4FA !important;
  border-color: #B4D0E2 !important;
  color: var(--action) !important;
}
html.dark-mode .btn-outline-primary {
  background: transparent !important;
  border-color: var(--steel) !important;
  color: var(--snow) !important;
}
html.dark-mode .btn-outline-primary:hover {
  background: rgba(36, 68, 91, 0.4) !important;
  border-color: var(--mute) !important;
  color: #fff !important;
}

/* Danger: dark -> #DC2626 fill, white label; light -> #FCDCDC fill, #B42318 label (DESIGN.md §5) */
.btn-danger {
  background: #FCDCDC !important;
  border-color: #FCDCDC !important;
  color: #B42318 !important;
}
.btn-danger:hover {
  background: #F8B4B4 !important;
  border-color: #F8B4B4 !important;
}
html.dark-mode .btn-danger {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #fff !important;
}
html.dark-mode .btn-danger:hover {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
}
.btn-outline-danger {
  background: transparent !important;
  border-color: var(--m1-line-strong) !important;
  color: var(--m1-ink-2) !important;
}
.btn-outline-danger:hover {
  background: var(--m1-danger-bg) !important;
  border-color: var(--m1-danger) !important;
  color: var(--m1-danger-ink) !important;
}

.btn-sm { min-height: 32px; padding: 0 var(--m1-s3); font-size: var(--m1-fs-12); }
.btn-lg { min-height: 46px; padding: 0 var(--m1-s5); font-size: var(--m1-fs-14); }
.btn-link { min-height: auto; padding: 0; border: 0; background: none !important; color: var(--m1-brand-ink) !important; }
.btn-close { filter: none; opacity: 0.7; }

/* Filter pills (debtors) */
.filter-tabs { gap: var(--m1-s2) !important; padding: 0; border: 0; }
.filter-tabs .btn {
  min-height: 32px;
  padding: 0 var(--m1-s3);
  border-radius: var(--m1-r-pill) !important;
  border-color: var(--m1-line) !important;
  background: transparent !important;
  color: var(--m1-ink-2) !important;
  font-size: var(--m1-fs-12);
  font-weight: 600;
}
.filter-tabs .btn:hover { background: var(--m1-surface-3) !important; color: var(--m1-ink) !important; }
.filter-tabs .btn.active,
.filter-tabs .btn[aria-pressed="true"] {
  background: var(--m1-ink) !important;
  border-color: var(--m1-ink) !important;
  color: var(--m1-surface) !important;
}
html.dark-mode .filter-tabs .btn.active,
html.dark-mode .filter-tabs .btn[aria-pressed="true"] {
  background: var(--m1-brand) !important;
  border-color: var(--m1-brand) !important;
  color: #fff !important;
}

/* ─── 09. FORMS ──────────────────────────────────────────────────────────── */
.form-label,
label {
  margin-bottom: 6px;
  font-size: var(--m1-fs-12);
  font-weight: 600;
  color: var(--m1-ink-2);
  letter-spacing: 0.005em;
}
.form-control,
.form-select,
.modal-debtors input,
.modal-debtors select,
.modal-debtors textarea {
  min-height: 44px;
  padding: 9px var(--m1-s3);
  border: 1px solid var(--m1-line-strong);
  border-radius: var(--m1-r-md);
  background-color: var(--m1-surface);
  color: var(--m1-ink);
  font-family: inherit;
  font-size: var(--m1-fs-14);
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--m1-dur) var(--m1-ease), box-shadow var(--m1-dur) var(--m1-ease), background var(--m1-dur) var(--m1-ease);
}
.form-control:hover,
.form-select:hover { border-color: var(--m1-ink-3); }
.form-control:focus,
.form-select:focus,
.modal-debtors input:focus,
.modal-debtors select:focus,
.modal-debtors textarea:focus {
  border-color: var(--m1-brand);
  box-shadow: var(--m1-focus);
  background-color: var(--m1-surface);
  color: var(--m1-ink);
  outline: none;
}
.form-control::placeholder,
.modal-debtors input::placeholder,
.modal-debtors textarea::placeholder { color: var(--m1-ink-3); opacity: 1; }
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background: var(--m1-surface-inset);
  border-color: var(--m1-line);
  color: var(--m1-ink-2);
  cursor: not-allowed;
  opacity: 1;
}
.form-select {
  padding-right: 36px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
}
html.dark-mode .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237D879B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
}
textarea.form-control, .modal-debtors textarea { min-height: 88px; resize: vertical; }

.input-group { border-radius: var(--m1-r-md); }
.input-group .form-control { border-radius: var(--m1-r-md) 0 0 var(--m1-r-md); }
.input-group .btn { border-radius: 0 var(--m1-r-md) var(--m1-r-md) 0; }
.input-group-text {
  border-color: var(--m1-line-strong);
  background: var(--m1-surface-3);
  color: var(--m1-ink-2);
}

.form-check-input {
  width: 38px; height: 22px;
  border: 1px solid var(--m1-line-strong);
  background-color: var(--m1-surface-3);
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--m1-brand);
  border-color: var(--m1-brand);
}
/* premium-theme'dagi `.dark-mode input { background !important }` yagona blok
   checked holatdagi brend rangini bostirib yuborardi — toggle "yoqilgan"
   holda ham kulrang ko'rinardi. Yuqori spesifiklik + !important bilan tiklaymiz. */
html.dark-mode .form-check.form-switch .form-check-input:checked,
html.dark-mode .form-check-input:checked {
  background-color: var(--m1-brand) !important;
  border-color: var(--m1-brand) !important;
}
/* Unchecked holat dark'da ham yorug'lik/sirt qoidalarga bo'ysunsin
   (!important ustma-yozuvidan keyin qayta belgilash). */
html.dark-mode .form-check.form-switch .form-check-input:not(:checked),
html.dark-mode .form-check-input:not(:checked) {
  background-color: var(--m1-surface-3) !important;
  border-color: var(--m1-line-strong) !important;
}
.form-check-input:focus { box-shadow: var(--m1-focus); border-color: var(--m1-brand); }

.mk-field-error,
.field-error,
small.text-danger {
  display: block;
  margin-top: 5px;
  font-size: var(--m1-fs-12);
  font-weight: 500;
  color: var(--m1-danger-ink);
}
.form-control.is-invalid,
.form-select.is-invalid,
input[aria-invalid="true"] {
  border-color: var(--m1-danger) !important;
  box-shadow: 0 0 0 3px var(--m1-danger-bg);
}
.form-control.is-valid, .form-select.is-valid { border-color: var(--m1-success) !important; }

/* ─── 10. TABLES ─────────────────────────────────────────────────────────── */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--m1-ink);
  background: transparent;
  --bs-table-bg: transparent;
  --bs-table-color: var(--m1-ink);
  --bs-table-hover-bg: var(--m1-surface-2);
  --bs-table-hover-color: var(--m1-ink);
  --bs-table-border-color: var(--m1-line);
}
.table > :not(caption) > * > * {
  padding: 13px var(--m1-s4);
  border-bottom: 1px solid var(--m1-line);
  background: transparent;
  box-shadow: none;
  vertical-align: middle;
}
.table thead th {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  background: var(--m1-surface-2) !important;
  border-bottom: 1px solid var(--m1-line) !important;
  color: var(--m1-ink-3) !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  white-space: nowrap;
}
.table thead th:first-child { padding-left: var(--m1-s5) !important; }
.table thead th:last-child { padding-right: var(--m1-s5) !important; }
.table tbody td {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--m1-ink-2);
}
.table tbody td:first-child { padding-left: var(--m1-s5); color: var(--m1-ink); font-weight: 600; }
.table tbody td:last-child { padding-right: var(--m1-s5); }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * {
  background: rgba(36, 68, 91, 0.08) !important;
  color: var(--m1-ink);
}
html.dark-mode .table-hover > tbody > tr:hover > * {
  background: rgba(36, 68, 91, 0.35) !important;
  color: var(--snow);
}
.table td .fw-bold,
.table td strong,
.table td b { font-weight: 600; color: var(--m1-ink); }
.table-sm > :not(caption) > * > * { padding: 8px 10px; }

/* Numeric cells align by the decimal. */
.table td .money,
.table td [data-money],
.mk-money { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; color: var(--m1-ink); }

.table-responsive.rounded,
.table-responsive.rounded.border {
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-lg) !important;
  background: var(--m1-surface);
}

/* ─── 11. BADGES, CHIPS & STATUSES (DESIGN.md §2.3, §5) ─────────────────── */
.badge,
.mk-badge,
.status-badge,
.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--m1-r-pill);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

/* Ring dot signature (DESIGN.md §5: 7px hollow ring dot) */
.badge::before,
.status-badge::before,
.mk-badge::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 2px solid currentColor;
  background: transparent;
  flex-shrink: 0;
}

.bg-success, .badge-success {
  background: var(--m1-success-bg) !important;
  color: var(--m1-success-ink) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
.bg-warning, .badge-warning {
  background: var(--m1-warning-bg) !important;
  color: var(--m1-warning-ink) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
.bg-danger, .badge-danger {
  background: var(--m1-danger-bg) !important;
  color: var(--m1-danger-ink) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
.bg-info, .badge-info {
  background: var(--m1-info-bg) !important;
  color: var(--m1-info-ink) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}
.bg-secondary, .badge-neutral {
  background: var(--m1-surface-2) !important;
  color: var(--m1-ink-2) !important;
  border-color: var(--m1-line) !important;
}
.profile-badge {
  background: var(--m1-brand-soft) !important;
  color: var(--m1-brand-ink) !important;
  border-color: var(--m1-brand-line) !important;
}

.mk-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--m1-line);
  border-radius: var(--m1-r-md);
  background: var(--m1-surface-2);
}
.mk-seg button {
  min-height: 30px;
  padding: 0 var(--m1-s3);
  border: 0;
  border-radius: var(--m1-r-sm);
  background: transparent;
  color: var(--m1-ink-3);
  font-family: inherit;
  font-size: var(--m1-fs-12);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--m1-dur) var(--m1-ease), color var(--m1-dur) var(--m1-ease);
}
.mk-seg button:hover { color: var(--m1-ink); background: var(--m1-surface-3); }
.mk-seg button.active {
  background: var(--m1-surface);
  color: var(--m1-ink);
  box-shadow: var(--m1-shadow-1);
}

.mk-muted { color: var(--m1-ink-3); font-size: var(--m1-fs-12); }
.text-muted { color: var(--m1-ink-3) !important; }
.text-success { color: var(--m1-success-ink) !important; }
.text-danger { color: var(--m1-danger-ink) !important; }
.text-warning { color: var(--m1-warning-ink) !important; }
.text-primary { color: var(--m1-brand-ink) !important; }

.alert {
  padding: var(--m1-s3) var(--m1-s4);
  border: 1px solid var(--m1-line);
  border-radius: var(--m1-r-md);
  background: var(--m1-surface-2);
  color: var(--m1-ink-2);
  font-size: var(--m1-fs-13);
}
.alert-success { background: var(--m1-success-bg); border-color: color-mix(in srgb, var(--m1-success) 22%, transparent); color: var(--m1-success-ink); }
.alert-danger { background: var(--m1-danger-bg); border-color: color-mix(in srgb, var(--m1-danger) 22%, transparent); color: var(--m1-danger-ink); }
.alert-warning { background: var(--m1-warning-bg); border-color: color-mix(in srgb, var(--m1-warning) 22%, transparent); color: var(--m1-warning-ink); }
.alert-info { background: var(--m1-info-bg); border-color: color-mix(in srgb, var(--m1-info) 22%, transparent); color: var(--m1-info-ink); }

/* ─── 12. CHARTS ─────────────────────────────────────────────────────────── */
.mk-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m1-s4);
  padding-bottom: var(--m1-s3);
  margin-bottom: var(--m1-s4);
  border-bottom: 1px solid var(--m1-line-soft);
}
.mk-chart-head h3 {
  margin: 0;
  font-size: var(--m1-fs-17);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--m1-ink);
}
.mk-chart-head p { margin: 2px 0 0; font-size: var(--m1-fs-12); color: var(--m1-ink-3); }
.mk-chart {
  position: relative;
  height: 300px;
  border-radius: var(--m1-r-md);
  background: var(--m1-surface-2);
}
.mk-chart-sm { height: 300px; }
.mk-chart canvas { max-width: 100%; }
.mk-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--m1-s5);
  text-align: center;
  border: 1px dashed var(--m1-line);
  border-radius: var(--m1-r-md);
  background: var(--m1-surface-2);
}
.mk-chart-empty[hidden], .mk-chart-empty.is-hidden { display: none; }
.mk-chart-empty i {
  font-size: 26px;
  color: var(--m1-brand);
  background: var(--m1-brand-soft);
  width: 48px; height: 48px;
  border-radius: var(--m1-r-pill);
  display: grid; place-items: center;
  margin-bottom: 2px;
}
.mk-chart-empty strong {
  font-size: var(--m1-fs-14);
  font-weight: 700;
  color: var(--m1-ink);
}
.mk-chart-empty span {
  font-size: var(--m1-fs-12);
  color: var(--m1-ink-3);
  max-width: 32ch;
  line-height: 1.45;
}

/* ─── AI OVERVIEW CARD (DASHBOARD) ────────────────────────────── */
.card-box.mk-ai-card,
.mk-ai-card {
  position: relative !important;
  border-radius: var(--m1-r-xl) !important;
  background: var(--m1-surface) !important;
  border: 1px solid var(--m1-brand-line) !important;
  box-shadow: 0 4px 24px -6px rgba(68, 85, 238, 0.14) !important;
  padding: var(--m1-s5) var(--m1-s6) !important;
  overflow: hidden !important;
}
.card-box.mk-ai-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--m1-brand), #8B5CF6);
}
.mk-ai-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--m1-s4) !important;
  padding-bottom: var(--m1-s3) !important;
  border-bottom: 1px solid var(--m1-line-soft) !important;
}
.mk-ai-title {
  display: flex !important;
  align-items: center !important;
  gap: var(--m1-s3) !important;
}
.mk-ai-badge {
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--m1-r-md) !important;
  background: var(--m1-brand-soft) !important;
  color: var(--m1-brand) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
}
.mk-ai-title h3 {
  font-size: var(--m1-fs-17) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--m1-ink) !important;
  margin: 0 !important;
}
.mk-ai-title p {
  font-size: var(--m1-fs-12) !important;
  color: var(--m1-ink-3) !important;
  margin: 0 !important;
}
.mk-ai-date {
  font-size: 11px !important;
  font-weight: 650 !important;
  padding: 4px 10px !important;
  border-radius: var(--m1-r-pill) !important;
  background: var(--m1-surface-3) !important;
  border: 1px solid var(--m1-line) !important;
  color: var(--m1-ink-2) !important;
}
.mk-ai-btn {
  min-height: 36px !important;
  padding: 0 16px !important;
  border-radius: var(--m1-r-md) !important;
  font-size: var(--m1-fs-13) !important;
  font-weight: 600 !important;
  background: var(--m1-surface) !important;
  border: 1px solid var(--m1-line-strong) !important;
  color: var(--m1-ink) !important;
  transition: all var(--m1-dur) var(--m1-ease) !important;
}
.mk-ai-btn:hover {
  background: var(--m1-surface-3) !important;
  transform: translateY(-1px) !important;
}
.mk-ai-btn-primary {
  background: var(--m1-brand) !important;
  border-color: var(--m1-brand) !important;
  color: #fff !important;
}
.mk-ai-btn-primary:hover {
  background: var(--m1-brand-hover) !important;
  border-color: var(--m1-brand-hover) !important;
}

.mk-ai-hero {
  margin: var(--m1-s4) 0 var(--m1-s3) !important;
}
.mk-ai-value {
  font-size: 26px !important;
  font-weight: 750 !important;
  letter-spacing: -0.03em !important;
  color: var(--m1-ink) !important;
  font-variant-numeric: tabular-nums !important;
}
.mk-ai-tile {
  background: var(--m1-surface-2) !important;
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-md) !important;
  padding: 12px 14px !important;
}
.mk-ai-tvalue {
  font-size: var(--m1-fs-15) !important;
  font-weight: 700 !important;
  color: var(--m1-ink) !important;
  font-variant-numeric: tabular-nums !important;
}
.mk-ai-reco {
  margin-top: var(--m1-s3) !important;
  background: var(--m1-brand-soft) !important;
  border-left: 3px solid var(--m1-brand) !important;
  border-radius: var(--m1-r-md) !important;
  padding: 12px 16px !important;
  font-size: var(--m1-fs-13) !important;
  color: var(--m1-ink) !important;
}

/* ─── 13. STATES ─────────────────────────────────────────────────────────── */
.mk-empty,
.mk-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: var(--m1-s8) var(--m1-s5);
  border: 1px dashed var(--m1-line-strong);
  border-radius: var(--m1-r-lg);
  background: var(--m1-surface-inset);
  text-align: center;
}
.mk-empty i,
.mk-empty-state .mk-empty-icon {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  margin-bottom: var(--m1-s2);
  border-radius: var(--m1-r-md);
  background: var(--m1-surface-3);
  color: var(--m1-ink-3);
  font-size: 19px;
}
.mk-empty strong,
.mk-empty-state .mk-empty-title { font-size: var(--m1-fs-13); font-weight: 600; color: var(--m1-ink); }
.mk-empty span,
.mk-empty-state .mk-empty-text { font-size: var(--m1-fs-12); color: var(--m1-ink-3); max-width: 46ch; }
.mk-empty-cell { padding: var(--m1-s8) var(--m1-s4) !important; text-align: center; color: var(--m1-ink-3); font-size: var(--m1-fs-13); }

.mk-skeleton,
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--m1-r-sm);
  background: var(--m1-surface-3);
}
.mk-skeleton::after,
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--m1-surface) 65%, transparent), transparent);
  animation: m1-shimmer 1.4s infinite;
}
@keyframes m1-shimmer { to { transform: translateX(100%); } }

.mk-alert { padding: var(--m1-s3) var(--m1-s4); border-radius: var(--m1-r-md); font-size: var(--m1-fs-13); border: 1px solid var(--m1-line); background: var(--m1-surface-2); }
.mk-alert-info { background: var(--m1-info-bg); border-color: color-mix(in srgb, var(--m1-info) 22%, transparent); color: var(--m1-info-ink); }
.mk-alert-success { background: var(--m1-success-bg); border-color: color-mix(in srgb, var(--m1-success) 22%, transparent); color: var(--m1-success-ink); }
.mk-alert-danger { background: var(--m1-danger-bg); border-color: color-mix(in srgb, var(--m1-danger) 22%, transparent); color: var(--m1-danger-ink); }

/* Toolbar */
.mk-toolbar {
  display: flex;
  align-items: center;
  gap: var(--m1-s2);
  flex-wrap: wrap;
}
.mk-toolbar-search { flex: 1 1 260px; min-width: 200px; }
.mk-toolbar .form-control,
.mk-toolbar .form-select { min-height: 40px; }
.mk-toolbar-count { margin: var(--m1-s3) 0 0; font-size: var(--m1-fs-12); color: var(--m1-ink-3); }
.mk-filter-select { min-width: 160px; max-width: 220px; }
.mk-nowrap { white-space: nowrap; }

/* ─── 14. POS ────────────────────────────────────────────────────────────── */
#selling > .card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}
/* Eski qiymat `0` edi: kontent karta qirrasiga tirqab, `.card { overflow:hidden;
   border-radius:16px }` tufayli pastki qatordagi tugma/badge burchagi diagonal
   kesilardi. Endi 20px ichki bo'shliq — barcha qatorlar radiusli burchakdan
   xoli, ustunlar bir tekisda qoladi. */
#selling > .card > .card-body { padding: var(--m1-s5) !important; }
#selling > .card > .card-body > :is(h2, h3).h5 {
  margin: 0 0 var(--m1-s4) !important;
  padding: 0;
  font-size: var(--m1-fs-20);
  font-weight: 650;
  letter-spacing: -0.02em;
}
#selling > .card > .card-body > :is(h2, h3).h5 i { color: var(--m1-ink-3); margin-right: 4px; }

.mk-pos-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
  gap: var(--m1-s4);
  align-items: start;
  margin-bottom: var(--m1-s5);
}
.mk-pos-panel {
  display: flex;
  flex-direction: column;
  gap: var(--m1-s3);
  padding: var(--m1-s5);
  border: 1px solid var(--m1-line);
  border-radius: var(--m1-r-lg);
  background: var(--m1-surface);
  min-width: 0;
}
.mk-pos-panel h3 {
  display: flex;
  align-items: center;
  gap: var(--m1-s2);
  margin: 0 0 2px;
  padding-bottom: var(--m1-s3);
  border-bottom: 1px solid var(--m1-line);
  font-size: var(--m1-fs-13);
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--m1-ink-3);
}
.mk-pos-panel h3 i { color: var(--m1-brand); font-size: 15px; }
.mk-pos-panel .form-label { margin-bottom: 4px; }
.mk-pos-panel .mb-2 { margin-bottom: 0 !important; }
.mk-pos-product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 140px;
  gap: 12px;
  align-items: flex-end;
}
.mk-pos-product-row > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mk-pos-product-row label.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--m1-ink-2);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.mk-pos-product-row .form-control,
.mk-pos-product-row .form-select {
  height: 44px !important;
  min-height: 44px !important;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
}
.mk-pos-panel #addToCartBtn {
  min-height: 46px;
  font-size: 15px;
  font-weight: 600;
  margin-top: var(--m1-s3) !important;
}
.mk-pos-panel .mk-mt-4 { margin-top: var(--m1-s4) !important; }
.mk-pos-panel .mk-mt-4 > .d-flex { margin-bottom: var(--m1-s2) !important; }

.mk-cart { width: 100%; }
.mk-cart thead th {
  padding: 8px 10px !important;
  background: var(--m1-surface-2) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--m1-ink-3) !important;
  border-bottom: 1px solid var(--m1-line);
}
.mk-cart tbody td {
  padding: 10px !important;
  border-bottom: 1px solid var(--m1-line-soft);
  font-size: var(--m1-fs-13);
  color: var(--m1-ink-2);
  vertical-align: middle;
}
.mk-cart tbody tr:last-child td { border-bottom: 0; }
.mk-cart tbody tr:hover td { background: var(--m1-surface-2); }
.mk-cart .form-control { min-height: 34px; height: 34px; padding: 4px 8px; font-size: var(--m1-fs-12); }

.mk-cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--m1-s3);
  padding: var(--m1-s3) 0;
  font-size: var(--m1-fs-13);
  color: var(--m1-ink-2);
}
.mk-cart-total strong {
  font-size: var(--m1-fs-20);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--m1-ink);
  font-variant-numeric: tabular-nums;
}
.mk-cart-total:last-of-type { border-top: 1px solid var(--m1-line); }

.mk-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--m1-s3);
  margin: var(--m1-s3) 0;
}
.mk-pay-grid .btn {
  min-height: 48px;
  font-size: var(--m1-fs-14);
  font-weight: 650;
  border-radius: var(--m1-r-md);
  box-shadow: var(--m1-shadow-1);
  transition: transform var(--m1-dur) var(--m1-ease), box-shadow var(--m1-dur) var(--m1-ease);
}
.mk-pay-grid .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--m1-shadow-2);
}
.mk-pay-grid .btn:active {
  transform: translateY(1px);
}
.mk-pay-grid #addSaleCash {
  background: var(--ok) !important;
  border-color: var(--ok) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.22) !important;
}
.mk-pay-grid #addSaleCash:hover {
  background: #059669 !important;
  border-color: #059669 !important;
}
.mk-pay-grid #addSaleCard {
  background: var(--action) !important;
  border-color: var(--action) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(59, 102, 240, 0.22) !important;
}
.mk-pay-grid #addSaleCard:hover {
  background: var(--action-hover) !important;
  border-color: var(--action-hover) !important;
}
.mk-pay-grid .mk-pay-debt {
  grid-column: 1 / -1;
  background: var(--m1-surface-2) !important;
  border: 1px dashed var(--warn) !important;
  color: var(--m1-warning-ink) !important;
}
.mk-pay-grid .mk-pay-debt:hover {
  background: var(--m1-warning-bg) !important;
}
.mk-pos-hint {
  display: flex;
  gap: var(--m1-s2);
  align-items: flex-start;
  margin: 0;
  padding: var(--m1-s3);
  border: 1px solid var(--m1-line);
  border-radius: var(--m1-r-md);
  background: var(--m1-surface-2);
  font-size: var(--m1-fs-12);
  line-height: 1.5;
  color: var(--m1-ink-3);
}
.mk-pos-hint i { color: var(--m1-ink-3); margin-top: 2px; }

.mk-pos-grid + hr,
#selling hr.my-4 { margin: var(--m1-s6) 0 !important; }

/* Progress bar & Stock cells refinement */
.stock-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stock-text {
  font-size: var(--m1-fs-13);
  font-weight: 600;
  color: var(--m1-ink);
  font-variant-numeric: tabular-nums;
}
.progress.stock-progress {
  height: 4px !important;
  border-radius: var(--m1-r-pill) !important;
  background: var(--m1-surface-3) !important;
  overflow: hidden;
  max-width: 110px;
}
.progress-bar {
  border-radius: var(--m1-r-pill);
  transition: width 300ms var(--m1-ease);
}
.progress-bar.bg-success {
  background: var(--m1-success) !important;
}
.progress-bar.bg-warning {
  background: var(--m1-warning) !important;
}
.progress-bar.bg-danger {
  background: var(--m1-danger) !important;
}

/* Action cluster in tables: clean, subtle, distinct */
.action-btn {
  display: inline-grid !important;
  place-items: center;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-sm) !important;
  background: var(--m1-surface) !important;
  color: var(--m1-ink-2) !important;
  font-size: 13px !important;
  line-height: 1;
  cursor: pointer;
  transition: all var(--m1-dur) var(--m1-ease);
}
.action-btn:hover {
  background: var(--m1-surface-3) !important;
  border-color: var(--m1-line-strong) !important;
  color: var(--m1-ink) !important;
  transform: translateY(-1px);
}
.action-btn:focus-visible { outline: 2px solid var(--m1-brand); outline-offset: 1px; }
.action-btn-call:hover { color: var(--m1-info-ink) !important; border-color: var(--m1-info) !important; background: var(--m1-info-bg) !important; }
.action-btn-sms:hover { color: var(--m1-brand-ink) !important; border-color: var(--m1-brand) !important; background: var(--m1-brand-soft) !important; }
.action-btn-add:hover { color: var(--m1-success-ink) !important; border-color: var(--m1-success) !important; background: var(--m1-success-bg) !important; }
.action-btn-reduce:hover { color: var(--m1-warning-ink) !important; border-color: var(--m1-warning) !important; background: var(--m1-warning-bg) !important; }
.action-btn-edit:hover { color: var(--m1-brand-ink) !important; border-color: var(--m1-brand) !important; background: var(--m1-brand-soft) !important; }
.action-btn-delete:hover { color: var(--m1-danger-ink) !important; border-color: var(--m1-danger) !important; background: var(--m1-danger-bg) !important; }
td .action-btn + .action-btn { margin-left: 5px !important; }

/* Table action buttons (Edit & Delete in products table) */
.table .btn-sm.btn-edit {
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  background: var(--m1-surface) !important;
  border: 1px solid var(--m1-line) !important;
  color: var(--m1-ink-2) !important;
  border-radius: var(--m1-r-sm) !important;
  box-shadow: none !important;
  transition: all var(--m1-dur) var(--m1-ease) !important;
}
.table .btn-sm.btn-edit svg {
  width: 15px !important;
  height: 15px !important;
}
.table .btn-sm.btn-edit:hover {
  background: var(--m1-brand-soft) !important;
  border-color: var(--m1-brand) !important;
  color: var(--m1-brand-ink) !important;
  transform: translateY(-1px) !important;
}

.table .btn-sm.btn-danger {
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  background: var(--m1-surface) !important;
  border: 1px solid var(--m1-line) !important;
  color: var(--m1-danger-ink) !important;
  border-radius: var(--m1-r-sm) !important;
  box-shadow: none !important;
  transition: all var(--m1-dur) var(--m1-ease) !important;
}
.table .btn-sm.btn-danger svg {
  width: 15px !important;
  height: 15px !important;
}
.table .btn-sm.btn-danger:hover {
  background: var(--m1-danger-bg) !important;
  border-color: var(--m1-danger) !important;
  color: var(--m1-danger) !important;
  transform: translateY(-1px) !important;
}

/* Attention panels & AI Assistant Card */
.ai-summary-card,
.ai-summary-card-inner {
  border-radius: var(--m1-r-xl) !important;
  background: var(--m1-surface) !important;
  border: 1px solid var(--m1-brand-line) !important;
  box-shadow: 0 4px 20px -6px rgba(68, 85, 238, 0.12) !important;
  position: relative;
  overflow: hidden;
}
.ai-summary-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--m1-brand), #8B5CF6);
}

.overdue-wrapper,
.low-stock-section {
  height: 100%;
  padding: var(--m1-s5);
  border: 1px solid var(--m1-line);
  border-radius: var(--m1-r-lg);
  background: var(--m1-surface);
}
.overdue-title { margin: 0 0 2px; font-size: var(--m1-fs-15); }
.overdue-subtitle { margin: 0 0 var(--m1-s4); padding-bottom: var(--m1-s4); border-bottom: 1px solid var(--m1-line); font-size: var(--m1-fs-12); color: var(--m1-ink-3); }
.overdue-card,
.overdue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m1-s3);
  padding: var(--m1-s3) 0;
  border-bottom: 1px solid var(--m1-line-soft);
}
.overdue-card:last-child, .overdue-item:last-child { border-bottom: 0; }
.low-stock-list { display: flex; flex-direction: column; }
.low-stock-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m1-s3);
  padding: var(--m1-s3) 0;
  border-bottom: 1px solid var(--m1-line-soft);
}
.low-stock-item:last-child { border-bottom: 0; }

/* ─── 16. OVERLAYS ───────────────────────────────────────────────────────── */
.profile-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 270px !important;
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-lg) !important;
  background: var(--m1-surface) !important;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--m1-line) !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 1050 !important;
}
.profile-dropdown-header {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--m1-line) !important;
  background: var(--m1-surface-2) !important;
}
.profile-dropdown-stats {
  padding: 6px 14px !important;
  border-bottom: 1px solid var(--m1-line) !important;
  background: var(--m1-surface) !important;
}
.profile-dropdown-stats .stat-item {
  background: var(--m1-surface-2) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  text-align: center !important;
}
.stat-label-date {
  color: var(--m1-ink-2) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.profile-dropdown-menu {
  padding: 6px !important;
  background: var(--m1-surface) !important;
}
.dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: var(--m1-r-sm) !important;
  color: var(--m1-ink) !important;
  font-size: var(--m1-fs-13) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--m1-dur) var(--m1-ease) !important;
  text-decoration: none !important;
}
.dropdown-item:hover {
  background: var(--m1-surface-3) !important;
  color: var(--m1-brand) !important;
}
.dropdown-item svg, .dropdown-item i {
  font-size: 15px !important;
  width: 16px !important;
  height: 16px !important;
  opacity: 0.8 !important;
}
.dropdown-item.logout {
  color: var(--m1-danger) !important;
}
.dropdown-item.logout:hover {
  background: var(--m1-danger-bg) !important;
  color: var(--m1-danger-ink) !important;
}
.dropdown-divider {
  border-top: 1px solid var(--m1-line) !important;
  margin: 4px 0 !important;
}

/* Debtors & POS Modal Shell */
.modal-debtors {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(5, 8, 15, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  overflow-y: auto !important;
}
.modal-debtors.show {
  display: flex !important;
}
.modal-debtors-content {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  max-height: min(560px, calc(100vh - 32px)) !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-xl) !important;
  background: var(--m1-surface) !important;
  box-shadow: var(--m1-shadow-3) !important;
  padding: 22px 26px 18px !important;
  overflow: hidden !important;
  margin: auto !important;
}
.modal-debtors-header {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--m1-s3) !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--m1-line) !important;
}
.modal-debtors-header h2 {
  margin: 0 !important;
  font-size: var(--m1-fs-17) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--m1-ink) !important;
}
.close-modal-debtors {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-sm) !important;
  background: var(--m1-surface) !important;
  color: var(--m1-ink-2) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all var(--m1-dur) var(--m1-ease) !important;
}
.close-modal-debtors:hover {
  background: var(--m1-surface-3) !important;
  color: var(--m1-ink) !important;
}
.modal-debtors-content form,
.modal-debtors-content .mk-modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 2px 4px 4px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  scrollbar-width: thin !important;
}
.modal-debtors-content .form-group {
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.modal-debtors-content label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--m1-ink-2) !important;
  margin: 0 !important;
}
.modal-debtors-content input,
.modal-debtors-content select,
.modal-debtors-content textarea {
  width: 100% !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--m1-line-strong) !important;
  border-radius: var(--m1-r-md) !important;
  background: var(--m1-surface) !important;
  color: var(--m1-ink) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
.modal-debtors-content input:focus,
.modal-debtors-content select:focus,
.modal-debtors-content textarea:focus {
  border-color: var(--m1-brand) !important;
  box-shadow: var(--m1-focus) !important;
  outline: none !important;
}
.modal-debtors-content input[readonly] {
  background: var(--m1-surface-inset) !important;
  color: var(--m1-ink-2) !important;
}
.modal-debtors-content .btn-submit,
.btn-submit {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 10px !important;
  border-radius: var(--m1-r-md) !important;
  background: var(--m1-brand) !important;
  border: 1px solid var(--m1-brand) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background var(--m1-dur) var(--m1-ease) !important;
}
.modal-debtors-content .btn-submit:hover,
.btn-submit:hover {
  background: var(--m1-brand-hover) !important;
}
.btn-submit:disabled {
  background: var(--m1-surface-3) !important;
  border-color: var(--m1-line) !important;
  color: var(--m1-ink-3) !important;
  cursor: not-allowed !important;
}
.mk-modal-body {
  padding: var(--m1-s2) 0;
  max-height: 60vh;
  overflow-y: auto;
}
.mk-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--m1-s2);
  margin-top: var(--m1-s5);
  padding-top: var(--m1-s4);
  border-top: 1px solid var(--m1-line);
}

/* KPI Cards Side-Tab Elimination */
.mk-kpi,
.mk-kpi-danger,
.mk-kpi-warning,
.mk-kpi-success {
  border-left: 1px solid var(--m1-line) !important;
  position: relative;
  overflow: hidden;
  transition: border-color var(--m1-dur) var(--m1-ease), box-shadow var(--m1-dur) var(--m1-ease);
}
/* VIVID: har bir KPI holatiga o'z rangli ohangi */
.mk-kpi-danger {
  border-left: 3px solid #EF4444 !important;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(239, 68, 68, 0.08), transparent 55%),
    var(--m1-surface) !important;
}
.mk-kpi-warning {
  border-left: 3px solid #F59E0B !important;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(245, 158, 11, 0.09), transparent 55%),
    var(--m1-surface) !important;
}
.mk-kpi-success {
  border-left: 3px solid #10B981 !important;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(16, 185, 129, 0.08), transparent 55%),
    var(--m1-surface) !important;
}
html.dark-mode .mk-kpi-danger {
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(255, 98, 105, 0.14), transparent 55%),
    var(--m1-surface) !important;
}
html.dark-mode .mk-kpi-warning {
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(244, 183, 64, 0.13), transparent 55%),
    var(--m1-surface) !important;
}
html.dark-mode .mk-kpi-success {
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(25, 201, 148, 0.13), transparent 55%),
    var(--m1-surface) !important;
}

/* VIVID: Savdo tarixi sahifasidagi 3 ta yuqori karta (mk-stats-3) */
.mk-stats-3 > [class*="col-"] .card {
  position: relative;
  overflow: hidden;
  border-top: 3px solid transparent !important;
}
.mk-stats-3 > [class*="col-"]:nth-child(1) .card {
  border-top-color: #10B981 !important;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(16, 185, 129, 0.10), transparent 55%),
    var(--m1-surface) !important;
}
.mk-stats-3 > [class*="col-"]:nth-child(2) .card {
  border-top-color: #F59E0B !important;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(245, 158, 11, 0.11), transparent 55%),
    var(--m1-surface) !important;
}
.mk-stats-3 > [class*="col-"]:nth-child(3) .card {
  border-top-color: var(--m1-brand) !important;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(68, 85, 238, 0.10), transparent 55%),
    var(--m1-surface) !important;
}
html.dark-mode .mk-stats-3 > [class*="col-"]:nth-child(1) .card {
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(25, 201, 148, 0.12), transparent 55%),
    var(--m1-surface) !important;
}
html.dark-mode .mk-stats-3 > [class*="col-"]:nth-child(2) .card {
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(244, 183, 64, 0.12), transparent 55%),
    var(--m1-surface) !important;
}
html.dark-mode .mk-stats-3 > [class*="col-"]:nth-child(3) .card {
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(99, 102, 241, 0.13), transparent 55%),
    var(--m1-surface) !important;
}

/* Bootstrap modal (product form, category modal, scanner) */
.modal-dialog {
  max-width: min(680px, calc(100vw - 24px)) !important;
  margin: 12px auto !important;
}
.modal-dialog-centered {
  min-height: calc(100% - 24px) !important;
  display: flex !important;
  align-items: center !important;
}
.modal-content {
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-xl) !important;
  background: var(--m1-surface) !important;
  box-shadow: var(--m1-shadow-3) !important;
  overflow: hidden !important;
  max-height: calc(100vh - 24px) !important;
  display: flex !important;
  flex-direction: column !important;
}
.modal-content form {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 24px) !important;
  overflow: hidden !important;
}
.modal-header {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--m1-line) !important;
  padding: 12px 18px !important;
}
.modal-header .modal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--m1-ink) !important;
  margin: 0 !important;
}
.modal-header .close,
.modal-header .btn-close {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-sm) !important;
  background: var(--m1-surface) !important;
  color: var(--m1-ink-2) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
.modal-header .close:hover,
.modal-header .btn-close:hover {
  background: var(--m1-surface-3) !important;
  color: var(--m1-ink) !important;
}
.modal-body {
  flex: 1 1 auto !important;
  padding: 16px 20px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: calc(100vh - 140px) !important;
}
.modal-footer {
  flex: 0 0 auto !important;
  border-top: 1px solid var(--m1-line) !important;
  padding: 12px 20px !important;
  background: var(--m1-surface-2) !important;
}
.modal-title { font-size: var(--m1-fs-17); font-weight: 650; letter-spacing: -0.02em; }
.modal-backdrop.show { opacity: 0.6; }

/* Toasts */
.toast,
.mk-toast {
  border: 1px solid var(--m1-line);
  border-radius: var(--m1-r-md);
  background: var(--m1-surface);
  color: var(--m1-ink);
  box-shadow: var(--m1-shadow-2);
  font-size: var(--m1-fs-13);
}

/* ─── 17. SETTINGS ───────────────────────────────────────────────────────── */
#settings .card { box-shadow: none; }
#settings .card-body > :is(h2, h3).h5 {
  display: flex;
  align-items: center;
  gap: var(--m1-s2);
  margin: 0 0 var(--m1-s5) !important;
  padding-bottom: var(--m1-s3);
  border-bottom: 1px solid var(--m1-line);
  font-size: var(--m1-fs-15);
  font-weight: 650;
  letter-spacing: -0.01em;
}
#settings hr { margin: var(--m1-s4) 0; }
#settings .list-group-item {
  padding: var(--m1-s3) 0;
  border-color: var(--m1-line-soft);
  background: transparent;
  color: var(--m1-ink-2);
  font-size: var(--m1-fs-13);
}
#settings .form-switch .form-check-input { margin-left: 0; }

/* ─── 17b. LEGACY COMPAT — index.html (qarzdorlar stat-card, sozlamalar tabs)
   Eski style.css hardcode ranglari (oq .tabs-container, #6c757d .detail,
   #ffc107 .amount) dark/light kontrast normalarini buzardi — 15 ta WCAG
   fail. Bu klasslar faqat index.html'da ishlatiladi (boshqa sahifalarda yo'q);
   yagona dizayn tokenlariga moslashtiramiz. ─────────────────────────────── */
.tabs-container {
  background: var(--m1-surface);
  border: 1px solid var(--m1-line);
  border-radius: var(--m1-r-md);
  box-shadow: none;
}
.tabs { border-bottom-color: var(--m1-line); }
.tab { color: var(--m1-ink-2); }
.tab:hover { color: var(--m1-ink); background: var(--m1-surface-3); }
.tab.active {
  color: var(--m1-brand);
  background: var(--m1-brand-soft);
  border-bottom-color: var(--m1-brand);
}
/* Dark'da brend #4D5DEF sirt ustida (~2.9:1) — faqat active holat uchun
   ochiq brend siyohi bilan almashtiramiz (~9:1). */
html.dark-mode .tab.active { color: #C9CEFA; }

.stat-card .detail { color: var(--m1-ink-3); }
/* Sar#afiy sariq (#ffc107) oq sirt ustida 1.58:1 — light'da to'q amber. */
.stat-card.upcoming .amount { color: #B45309; }
html.dark-mode .stat-card.upcoming .amount { color: #FFC107; }

/* ─── 18. MOBILE NAV / DRAWER / TABLET ADAPTATION ──────────────────────── */
.mobile-bottom-nav {
  display: none;
  grid-column: 1 / -1;
}
.mk-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(5, 8, 15, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--m1-dur) var(--m1-ease);
}
body.mk-nav-open .mk-nav-backdrop { opacity: 1; pointer-events: auto; }

/* ── TABLET (768px – 1024px): Desktop-like sidebar, toggle bilan siqiladi ── */
@media (min-width: 768px) and (max-width: 1024px) {
  body > .d-flex {
    display: grid !important;
    grid-template-columns: var(--mk-sidebar-w, 248px) minmax(0, 1fr) !important;
    padding-bottom: 0 !important;
  }
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    width: var(--mk-sidebar-w, 248px) !important;
    min-width: var(--mk-sidebar-w, 248px) !important;
    height: 100vh !important;
    transform: none !important;
    box-shadow: none !important;
    padding: var(--m1-s3) var(--m1-s2) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 40 !important;
  }
  .sidebar .logo { justify-content: flex-start !important; padding: 0 var(--m1-s1) var(--m1-s3) !important; }
  .sidebar .logo img { display: block !important; max-height: 30px !important; }
  .sidebar .logo::before { content: none !important; }
  .sidebar .nav-item {
    justify-content: flex-start !important;
    padding: 10px var(--m1-s3) !important;
    gap: var(--m1-s3) !important;
    font-size: var(--m1-fs-14, 14px) !important;
  }
  .sidebar .nav-item .svg-icon { width: 19px; height: 19px; flex-basis: 19px; }
  .sidebar .nav-item:hover::after,
  .sidebar .nav-item:focus-visible::after { content: none !important; }
  .mk-nav-label { font-size: 10px !important; padding: 0 var(--m1-s3) !important; margin: var(--m1-s4) 0 var(--m1-s2) !important; }
  .mk-nav-label::after { display: none !important; }
  .mk-user-meta { display: block !important; }
  .mk-sidebar-foot { justify-content: flex-start !important; padding: var(--m1-s2) var(--m1-s1) !important; }
  .mobile-bottom-nav { display: none !important; }
  .mk-mobile-menu, [data-mk-drawer-close] { display: none !important; }
  .mk-sidebar-toggle { display: inline-flex !important; }

  /* Collapsed: ixcham ikonka relsiga siqiladi */
  body.mk-sidebar-collapsed > .d-flex { grid-template-columns: 76px minmax(0, 1fr) !important; }
  body.mk-sidebar-collapsed .sidebar {
    width: 76px !important;
    min-width: 76px !important;
    padding: var(--m1-s3) var(--m1-s2) !important;
  }
  body.mk-sidebar-collapsed .sidebar .logo { justify-content: center !important; padding: 0 0 var(--m1-s3) !important; }
  body.mk-sidebar-collapsed .sidebar .logo .mk-logo-full { display: none !important; }
  body.mk-sidebar-collapsed .sidebar .logo .mk-logo-mark { display: block !important; width: 32px !important; height: 32px !important; margin: 0 auto !important; }
  body.mk-sidebar-collapsed .sidebar .logo::before { content: none !important; display: none !important; }
  body.mk-sidebar-collapsed .sidebar .nav-item {
    justify-content: center !important;
    padding: 10px 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
  }
  body.mk-sidebar-collapsed .sidebar .nav-item .svg-icon { width: 20px; height: 20px; flex-basis: 20px; }
  body.mk-sidebar-collapsed .mk-nav-label { font-size: 0 !important; padding: 0 !important; margin: var(--m1-s3) 0 var(--m1-s1) !important; }
  body.mk-sidebar-collapsed .mk-nav-label::after {
    content: "";
    display: block;
    height: 1px;
    margin: 0 var(--m1-s2);
    background: var(--m1-line);
  }
  body.mk-sidebar-collapsed .sidebar .nav-item:hover::after,
  body.mk-sidebar-collapsed .sidebar .nav-item:focus-visible::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    padding: 6px 10px;
    border-radius: var(--m1-r-sm);
    background: var(--m1-ink);
    color: var(--m1-surface);
    font-size: var(--m1-fs-12);
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--m1-shadow-2);
  }
  body.mk-sidebar-collapsed .mk-user-meta { display: none !important; }
  body.mk-sidebar-collapsed .mk-sidebar-foot { justify-content: center !important; padding: var(--m1-s2) 0 !important; }

  /* Collapsed: hover'da vaqtincha kengayadi (tablet) */
  body.mk-sidebar-collapsed .sidebar {
    transition: width 0.2s ease, min-width 0.2s ease, box-shadow 0.2s ease !important;
  }
  body.mk-sidebar-collapsed:has(.sidebar:hover) > .d-flex {
    grid-template-columns: var(--mk-sidebar-w, 248px) minmax(0, 1fr) !important;
  }
  body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar {
    width: var(--mk-sidebar-w, 248px) !important;
    min-width: var(--mk-sidebar-w, 248px) !important;
    box-shadow: var(--m1-shadow-3, 0 4px 24px rgba(0,0,0,0.12)) !important;
  }
  body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .logo {
    justify-content: space-between !important;
    padding-left: var(--m1-s1) !important;
    padding-right: var(--m1-s1) !important;
  }
  body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .logo::before { content: none !important; }
  body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .logo .mk-logo-full { display: block !important; }
  body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .logo .mk-logo-mark { display: none !important; }
  body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .nav-item {
    justify-content: flex-start !important;
    padding: 10px var(--m1-s3) !important;
    gap: var(--m1-s3) !important;
    font-size: var(--m1-fs-14, 14px) !important;
  }
  body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .nav-item .svg-icon {
    width: 24px; height: 24px; flex-basis: 24px;
  }
  body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .nav-item:hover::after,
  body.mk-sidebar-collapsed:has(.sidebar:hover) .sidebar .nav-item:focus-visible::after {
    content: none !important;
  }
  body.mk-sidebar-collapsed:has(.sidebar:hover) .mk-nav-label {
    font-size: 10px !important;
    padding: 0 var(--m1-s3) !important;
    margin: var(--m1-s4) 0 var(--m1-s2) !important;
  }
  body.mk-sidebar-collapsed:has(.sidebar:hover) .mk-nav-label::after { display: none !important; }
  body.mk-sidebar-collapsed:has(.sidebar:hover) .mk-user-meta { display: block !important; }
  body.mk-sidebar-collapsed:has(.sidebar:hover) .mk-sidebar-foot {
    justify-content: flex-start !important;
    padding: var(--m1-s2) var(--m1-s1) !important;
  }

  .section { padding: var(--m1-s4) var(--m1-s5) var(--m1-s8) !important; }
  .mk-stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .mk-stats-6 > [class*="col-"]:nth-child(n+4) .card-box { border-top: 1px solid var(--m1-line) !important; }
  .mk-stats-6 > [class*="col-"]:nth-child(4) .card-box { border-left: 0 !important; }
  .mk-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .mk-pos-grid { grid-template-columns: 1fr !important; }
}

/* ── PHONE (<= 767.98px): Drawer + Bottom Bar + Optimized Cards ─────────── */
@media (max-width: 767.98px) {
  body > .d-flex,
  body.mk-sidebar-collapsed > .d-flex {
    display: block;
    padding-bottom: 72px;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(300px, 84vw);
    transform: translateX(-102%);
    transition: transform 200ms var(--m1-ease-out);
    box-shadow: var(--m1-shadow-3);
  }
  body.mk-nav-open .sidebar { transform: none; }
  .sidebar .logo img { display: block !important; }
  .sidebar .nav-item { justify-content: flex-start !important; font-size: var(--m1-fs-14) !important; padding: 10px var(--m1-s3) !important; gap: var(--m1-s3) !important; }
  .sidebar .nav-item .svg-icon { width: 19px; height: 19px; flex-basis: 19px; }
  .mk-nav-label { font-size: 10px !important; padding: 0 var(--m1-s3) !important; margin: var(--m1-s4) 0 var(--m1-s2) !important; }
  .mk-nav-label::after { display: none !important; }
  .mk-user-meta { display: block !important; }
  .mk-sidebar-foot { justify-content: flex-start !important; }
  main.content { min-height: 0; padding-bottom: calc(88px + max(16px, env(safe-area-inset-bottom))); }
  .topbar { padding: 0 var(--m1-s4); min-height: 60px; }
  .section { padding: var(--m1-s4) var(--m1-s4) calc(88px + max(16px, env(safe-area-inset-bottom))); }
  .section .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .section .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mk-sidebar-toggle { display: none !important; }
  /* Hamburger olib tashlandi — mobil navigatsiya pastki nav orqali */
  .mk-mobile-menu { display: none !important; }
  [data-mk-drawer-close] { display: none !important; }
  .mobile-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 44;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin: 0;
    padding: 8px 6px max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--m1-line);
    background: var(--m1-surface);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
  }
  .mobile-bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    padding: 6px 0;
    border: 0;
    border-radius: var(--m1-r-md);
    background: transparent;
    color: var(--m1-ink-3);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--m1-dur) var(--m1-ease);
  }
  .mobile-bottom-nav button i { font-size: 20px; line-height: 1; }
  .mobile-bottom-nav button span { font-size: 11px; letter-spacing: 0.01em; }
  .mobile-bottom-nav button.active {
    color: var(--m1-brand) !important;
    background: var(--m1-brand-soft) !important;
    font-weight: 700;
  }
  .mobile-bottom-nav button.active::before { display: none !important; }
  .mobile-bottom-nav button:focus-visible { outline-offset: -3px; }

  /* POS on mobile */
  .mk-pos-grid {
    grid-template-columns: 1fr !important;
  }
  .mk-pos-panel {
    min-width: 0 !important;
  }
  .mk-pos-product-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .mk-pos-product-row > div:first-child {
    grid-column: 1 / -1 !important;
  }
  #productsSection #openProductModal {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 6px !important;
  }

  /* KPI rows on mobile: clean 2-column balanced grid (3 rows x 2 cols, no lonely 6th card) */
  .mk-stats-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .mk-stats-6 > [class*="col-"] {
    grid-column: span 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .mk-stats-6 .card-box {
    min-height: 110px !important;
    padding: 12px 14px 10px !important;
    border-radius: var(--m1-r-md) !important;
  }
  .mk-stats-6 .card-box h3.counter,
  .mk-stats-6 .card-box h3.daily-c,
  .mk-stats-6 > [class*="col-"]:first-child .card-box h3.counter {
    font-size: 20px !important;
    margin: 6px 0 2px !important;
  }
  .card-box small.counter-smal {
    font-size: 10.5px !important;
    /* FIX (P3): nowrap + flex konteyner tufayli text-overflow: ellipsis
       ishlamaydi va uzun yorliq ("Muddati o'tgan qarz") 375px da qattiq
       kesilardi ("MUDDATI O'TGAN QA"). Wrap — yorliq 2 qatorga o'zi
       mo'ljallangan (mark1-system.css: min-height 38px). */
    white-space: normal !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }
  .card-box small.counter-smal .svg-icon {
    width: 24px !important;
    height: 24px !important;
    padding: 4px !important;
  }
  .card-box .counter-change,
  .card-box small.text-muted,
  .card-box small.text-success {
    font-size: 10px !important;
    padding: 2px 6px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    margin-top: auto !important;
  }

  /* Debtors 3 KPI on mobile */
  .mk-stats-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .mk-stats-3 > [class*="col-"]:first-child {
    grid-column: 1 / -1 !important;
  }
  .mk-stats-3 .card-body {
    padding: 14px 16px !important;
  }
  .mk-stats-3 .card h3 {
    font-size: 20px !important;
    margin: 4px 0 2px !important;
  }

  /* Products toolbar on mobile */
  #productsSection .mk-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #productsSection .mk-toolbar-search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  #productsSection .mk-filter-select {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    font-size: 13px !important;
  }
  #productsSection #exportProductsBtn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  #productsSection .mk-page-actions {
    margin-bottom: 12px !important;
  }
  #productsSection #openProductModal {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* Products cards on mobile */
  #productTable tr {
    display: block !important;
    background: var(--m1-surface) !important;
    border: 1px solid var(--m1-line) !important;
    border-radius: var(--m1-r-lg) !important;
    padding: 14px 16px !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
    box-shadow: none !important;
  }
  #productTable td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 0 !important;
    border: 0 !important;
    font-size: 13px !important;
  }
  #productTable td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--m1-ink-3);
    font-size: 12px;
  }
  #productTable td[data-label="Rasm"] {
    justify-content: flex-start !important;
    margin-bottom: 6px;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--m1-line-soft) !important;
  }
  #productTable td[data-label="Rasm"]::before { display: none; }
  #productTable td[data-label="Harakatlar"] {
    margin-top: 8px;
    padding-top: 8px !important;
    border-top: 1px solid var(--m1-line-soft) !important;
    /* Eski holat: `justify-content: space-between` uchala bolani
       (yorug' + edit + delete) yoyib yuborardi — edit tugmasi kartaning
       o'rtasida ajralib turardi. Yorug' chapda, tugmalar o'ngda
       yonma-yon guruhlanadi. */
    justify-content: flex-start !important;
  }
  #productTable td[data-label="Harakatlar"]::before { margin-right: auto; }

  /* Debtors toolbar and cards on mobile */
  #debtors .mk-page-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #debtors .mk-page-actions #searchInput {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  #debtors .mk-page-actions .btn {
    width: 100% !important;
  }
  #debtorTableBody tr {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    background: var(--m1-surface) !important;
    border: 1px solid var(--m1-line) !important;
    border-radius: var(--m1-r-lg) !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    box-shadow: none !important;
  }
  #debtorTableBody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 0 !important;
    border: 0 !important;
    font-size: 13px !important;
  }
  #debtorTableBody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--m1-ink-3);
    font-size: 12px;
    min-width: 0 !important;
  }
  #debtorTableBody td[data-label="Amallar"] {
    margin-top: 8px;
    padding-top: 8px !important;
    border-top: 1px solid var(--m1-line-soft) !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  #debtorTableBody td[data-label="Amallar"]::before {
    display: none !important;
  }
  #debtorTableBody .action-btn {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }
}

@media (max-width: 767.98px) {
  .mk-gutter { padding-left: var(--m1-s4); padding-right: var(--m1-s4); }
  .mk-stats-3 { grid-template-columns: 1fr; }
  .mk-chart, .mk-chart-sm { height: 240px; }
  .mk-pos-product-row { grid-template-columns: 1fr 84px; }
  .mk-pos-product-row > div:last-child { grid-column: 1 / -1; }
  .mk-pay-grid { grid-template-columns: 1fr 1fr; }
  .topbar h1 { font-size: var(--m1-fs-14); }
  .mk-topbar-sub { font-size: 11px; max-width: 46vw; }
  .modal-debtors-content { padding: var(--m1-s5); max-height: 88vh; overflow-y: auto; }
  .table-responsive { border-radius: var(--m1-r-md); }
  .table > :not(caption) > * > * { padding: 11px 12px; }
  .table thead th:first-child, .table tbody td:first-child,
  .table thead th:last-child, .table tbody td:last-child { padding-left: 12px !important; padding-right: 12px !important; }
}

@media (max-width: 479.98px) {
  .section { padding: var(--m1-s3) var(--m1-s3) var(--m1-s10); }
  .topbar { padding: 0 var(--m1-s3); }
  .card-box h3.counter, .card-box h3.daily-c { font-size: 20px; }
  .mk-pos-panel { padding: var(--m1-s4); }
  .mk-pos-product-row { grid-template-columns: 1fr; }
  .mk-pos-product-row > div:last-child { grid-column: auto; }
  .mk-page-actions { justify-content: stretch; }
  .mk-page-actions .form-control { min-width: 0; flex: 1 1 100%; }
  .mobile-bottom-nav button span { font-size: 9.5px; }
  .mobile-bottom-nav button i { font-size: 18px; }
  .mk-toolbar .form-control, .mk-toolbar .form-select { min-height: 42px; }
  .mk-filter-select { max-width: none; }
  .mk-chart, .mk-chart-sm { height: 210px; }
  .overdue-wrapper, .low-stock-section { padding: var(--m1-s4); }
}

/* ─── 19. 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;
  }
}

/* ─── 20. PRINT ──────────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .mobile-bottom-nav, .mk-page-actions, .no-print { display: none !important; }
  body > .d-flex { display: block; }
  main.content { padding: 0; }
  .card, .card-box, .mk-pos-panel { border-color: #ccc; box-shadow: none; }
  .section { display: block !important; padding: 0; max-width: none; }
}

/* ─── 21. LANDING PAGE — PRECISION BUSINESS OS ──────────────────────────── */
.mk-root {
  background: var(--m1-canvas) !important;
  color: var(--m1-ink) !important;
  font-family: var(--m1-font);
}

/* Remove ornamental blur blobs, floating orbs & artificial gradients */
.mk-blur-orb { display: none !important; }
.mk-root .mk-hero::before { display: none !important; }
.mk-root .mk-hero-metric::before,
.mk-root .mk-dash-metric::before { display: none !important; }
.mk-root .mk-hero-metric,
.mk-root .mk-dash-metric { animation: none !important; }

/* Navbar — Apple-style frosted glass */
.mk-root #navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid var(--m1-line) !important;
  box-shadow: none !important;
  padding: 12px 0;
}
html.dark-mode .mk-root #navbar {
  background: rgba(10, 14, 23, 0.88) !important;
}
.mk-root .mk-logo img {
  max-height: 28px;
  width: auto;
}
.mk-root .mk-nav-links a {
  font-size: var(--m1-fs-13);
  font-weight: 500;
  color: var(--m1-ink-2) !important;
  transition: color var(--m1-dur) var(--m1-ease);
}
.mk-root .mk-nav-links a:hover {
  color: var(--m1-brand) !important;
}

/* Hero Section */
.mk-root .mk-hero {
  position: relative;
  padding: 64px 0 72px !important;
  background: transparent !important;
  overflow: hidden;
}
.mk-root .mk-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--m1-r-pill);
  background: var(--m1-brand-soft) !important;
  color: var(--m1-brand-ink) !important;
  border: 1px solid var(--m1-brand-line) !important;
  font-size: var(--m1-fs-12);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
  box-shadow: none !important;
}
.mk-root .mk-hero h1 {
  font-size: clamp(32px, 3.2vw, 46px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.18;
  color: var(--m1-ink) !important;
  margin-bottom: 20px;
}
.mk-root .mk-hero h1 span,
.mk-root .mk-grad-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
  color: var(--m1-brand) !important;
}
.mk-root .mk-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--m1-ink-2) !important;
  max-width: 540px;
  margin-bottom: 32px;
}
.mk-root .mk-hero-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mk-root .mk-btn-primary {
  min-height: 44px;
  padding: 0 24px !important;
  border-radius: var(--m1-r-md) !important;
  background: var(--m1-brand) !important;
  border-color: var(--m1-brand) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: transform 120ms ease, background 140ms ease !important;
}
.mk-root .mk-btn-primary:active {
  transform: scale(0.97) !important;
}
.mk-root .mk-btn-primary:hover {
  background: var(--m1-brand-hover) !important;
  border-color: var(--m1-brand-hover) !important;
}
.mk-root .mk-btn-secondary {
  min-height: 44px;
  padding: 0 24px !important;
  border-radius: var(--m1-r-md) !important;
  background: var(--m1-surface) !important;
  border-color: var(--m1-line-strong) !important;
  color: var(--m1-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: transform 120ms ease, background 140ms ease !important;
}
.mk-root .mk-btn-secondary:active {
  transform: scale(0.97) !important;
}
.mk-root .mk-btn-secondary:hover {
  background: var(--m1-surface-3) !important;
  border-color: var(--m1-line-strong) !important;
}
.mk-root .mk-hero-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--m1-line);
}
.mk-root .mk-hero-trust b {
  display: block;
  font-size: var(--m1-fs-13);
  font-weight: 600;
  color: var(--m1-ink);
}
.mk-root .mk-hero-trust span {
  display: block;
  font-size: var(--m1-fs-12);
  color: var(--m1-ink-3);
}
.mk-root .mk-divider-v {
  width: 1px;
  height: 28px;
  background: var(--m1-line);
}

/* Hero Preview: Modern Soft Glass floating 3D frame */
.mk-root .mk-hero-preview {
  position: relative;
  background: var(--m1-surface) !important;
  border: 1px solid rgba(59, 91, 245, 0.15) !important;
  border-radius: var(--m1-r-xl) !important;
  box-shadow: 0 25px 50px -12px rgba(59, 91, 245, 0.12), 0 10px 20px -5px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden;
  padding: 0 !important;
  transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
  transition: transform 300ms var(--m1-ease), box-shadow 300ms var(--m1-ease);
}
.mk-root .mk-hero-preview:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-4px);
  box-shadow: 0 30px 60px -12px rgba(59, 91, 245, 0.18), 0 12px 24px -5px rgba(0, 0, 0, 0.06) !important;
}
.mk-root .mk-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--m1-surface-2) !important;
  border-bottom: 1px solid var(--m1-line);
}
.mk-root .mk-window-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mk-root .mk-window-dots span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}
.mk-root .dot-red { background: #ff5f56; }
.mk-root .dot-yellow { background: #ffbd2e; }
.mk-root .dot-green { background: #27c93f; }
.mk-root .mk-preview-note {
  margin: 0 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m1-ink-3) !important;
}
.mk-root .mk-preview-note::before { content: none !important; }
.mk-root .mk-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--m1-success-ink);
  background: var(--m1-success-bg);
  padding: 2px 8px;
  border-radius: 999px;
}
.mk-root .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--m1-success);
}
.mk-root .mk-hero-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--m1-line);
  border-bottom: 1px solid var(--m1-line);
}
.mk-root .mk-hero-metric {
  background: var(--m1-surface) !important;
  padding: 16px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.mk-root .mk-hero-metric p:first-child {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m1-ink-3) !important;
  margin-bottom: 4px;
}
.mk-root .mk-hero-metric p:last-child {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--m1-ink) !important;
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
}
.mk-root .mk-hero-metric.mk-m1 {
  background: var(--m1-brand-soft) !important;
}
.mk-root .mk-hero-metric.mk-m1 p:last-child {
  color: var(--m1-brand-ink) !important;
}
.mk-root .mk-hero-chart-wrap {
  padding: 16px 20px 14px;
  background: var(--m1-surface-inset);
}
.mk-root .mk-chart-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--m1-ink-3);
}
.mk-root .mk-chart-val {
  color: var(--m1-success-ink);
  font-weight: 700;
}
.mk-root .mk-hero-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  height: 96px;
  margin-bottom: 8px;
}
.mk-root .mk-hero-chart span {
  flex: 1;
  border-radius: 4px 4px 0 0 !important;
  background: var(--m1-line-strong) !important;
  opacity: 0.65;
  transition: opacity 150ms;
}
.mk-root .mk-hero-chart span:hover,
.mk-root .mk-hero-chart span:nth-child(4),
.mk-root .mk-hero-chart span:nth-child(6) {
  background: var(--m1-brand) !important;
  opacity: 1;
}
.mk-root .mk-chart-days {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--m1-ink-3);
  text-align: center;
}
.mk-root .mk-chart-days small {
  flex: 1;
}

/* Stats: Single Continuous Ledger Strip */
.mk-root .mk-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  box-shadow: none !important;
  margin: 20px 0 32px;
}
.mk-root .mk-stat-card {
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-lg) !important;
  background: var(--m1-surface) !important;
  box-shadow: var(--m1-shadow-1) !important;
  padding: 18px 20px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: transform var(--m1-dur) var(--m1-ease), border-color var(--m1-dur) var(--m1-ease);
}
.mk-root .mk-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--m1-brand) !important;
}
.mk-root .mk-stat-card:last-child {
  border-right: 1px solid var(--m1-line) !important;
}
.mk-root .mk-stat-icon {
  display: none !important;
}
.mk-root .mk-stat-card .mk-num {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--m1-brand) !important;
  margin: 0 0 6px !important;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.15;
}
.mk-root .mk-stat-card .mk-lbl {
  font-size: 13px;
  font-weight: 500;
  color: var(--m1-ink-2) !important;
  line-height: 1.45;
  margin: 0;
}

/* Feature Cards & Bento Box Structure */
.mk-root .mk-section-head h2 {
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--m1-ink) !important;
  margin-bottom: 10px;
}
.mk-root .mk-section-head p {
  font-size: 15px;
  color: var(--m1-ink-3) !important;
}
.mk-root .mk-card-grid-3 {
  gap: 16px;
}
.mk-root .mk-feature-card {
  background: var(--m1-surface) !important;
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-lg) !important;
  padding: 24px !important;
  box-shadow: none !important;
  transition: border-color var(--m1-dur) var(--m1-ease), transform var(--m1-dur) var(--m1-ease);
}
.mk-root .mk-feature-card:hover {
  border-color: var(--m1-line-strong) !important;
  transform: translateY(-2px) !important;
}
.mk-root .mk-feature-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--m1-r-md);
  background: var(--m1-surface-3) !important;
  color: var(--m1-brand) !important;
  font-size: 18px;
  margin-bottom: 16px;
}
.mk-root .mk-feature-card h3 {
  font-size: 16px;
  font-weight: 650;
  color: var(--m1-ink) !important;
  margin-bottom: 8px;
}
.mk-root .mk-feature-card p {
  font-size: 13px;
  color: var(--m1-ink-2) !important;
  line-height: 1.55;
}

/* Bento Spans on Desktop */
@media (min-width: 992px) {
  .mk-root .mk-feature-card:nth-child(1) {
    grid-column: span 1 !important;
    background: var(--m1-surface) !important;
    border-color: var(--m1-line) !important;
  }
  .mk-root .mk-feature-card:nth-child(1) h3 {
    color: var(--m1-ink) !important;
    font-size: 18px !important;
  }
  .mk-root .mk-feature-card:nth-child(1) p {
    color: var(--m1-ink-3) !important;
  }
  .mk-root .mk-feature-card:nth-child(6) {
    grid-column: span 1 !important;
  }
}

/* Interactive Dashboard Showcase Section */
.mk-root #mkDashTabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 20px;
  scrollbar-width: none;
}
.mk-root #mkDashTabs::-webkit-scrollbar { display: none; }
.mk-root .mk-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--m1-line);
  border-radius: 999px;
  background: var(--m1-surface);
  color: var(--m1-ink-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--m1-dur) var(--m1-ease);
}
.mk-root .mk-tab-btn:hover {
  background: var(--m1-surface-3);
  color: var(--m1-ink);
  border-color: var(--m1-line-strong);
}
.mk-root .mk-tab-btn.mk-active {
  background: var(--m1-brand) !important;
  border-color: var(--m1-brand) !important;
  color: #fff !important;
}
.mk-root .mk-dash-preview {
  background: var(--m1-surface) !important;
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-xl) !important;
  box-shadow: var(--m1-shadow-2) !important;
  overflow: hidden;
}
.mk-root .mk-dash-dots span:nth-child(1) { background: #ff5f56 !important; }
.mk-root .mk-dash-dots span:nth-child(2) { background: #ffbd2e !important; }
.mk-root .mk-dash-dots span:nth-child(3) { background: #27c93f !important; }

.mk-root .mk-dash-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--m1-surface-2);
  border-bottom: 1px solid var(--m1-line);
}
.mk-root .mk-dash-preview-head h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--m1-ink);
}
.mk-root .mk-dash-preview-head p {
  font-size: 11.5px;
  color: var(--m1-ink-3);
  margin: 0;
}
.mk-root .mk-dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--m1-line);
  border-bottom: 1px solid var(--m1-line);
}
.mk-root .mk-dash-metric {
  background: var(--m1-surface) !important;
  padding: 18px 20px !important;
  border: 0 !important;
}
.mk-root .mk-dash-metric p:first-child {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m1-ink-3);
  margin: 0 0 4px;
}
.mk-root .mk-dash-metric p:last-child {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.035em;
  color: var(--m1-ink);
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
}
.mk-root .mk-dash-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  height: 140px;
  padding: 24px;
  background: var(--m1-surface-inset);
}
.mk-root .mk-dash-bars span {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--m1-brand);
  opacity: 0.75;
  transition: opacity 150ms;
}
.mk-root .mk-dash-bars span:hover {
  opacity: 1;
}

/* Pricing Grid */
.mk-root .mk-pricing-grid {
  gap: 16px;
}
.mk-root .mk-price-card {
  background: var(--m1-surface) !important;
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-lg) !important;
  padding: 28px 24px !important;
  box-shadow: none !important;
}
.mk-root .mk-price-card.mk-highlight {
  border: 2px solid var(--m1-brand) !important;
  position: relative;
  transform: scale(1.02);
}
.mk-root .mk-price-badge {
  background: var(--m1-brand) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
}
.mk-root .mk-price-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--m1-ink) !important;
  margin-bottom: 6px;
}
.mk-root .mk-price-value {
  margin: 18px 0 8px;
}
.mk-root .mk-price-value .mk-amount {
  font-size: 32px;
  font-weight: 750;
  letter-spacing: -0.035em;
  color: var(--m1-ink) !important;
  font-variant-numeric: tabular-nums lining-nums;
}
.mk-root .mk-price-value .mk-period {
  font-size: 13px;
  color: var(--m1-ink-3) !important;
}

/* Footer */
.mk-root .mk-footer {
  border-top: 1px solid var(--m1-line) !important;
  background: var(--m1-surface) !important;
  padding: 48px 0 32px;
}

html.dark-mode .mk-root p,
html.dark-mode .mk-root .mk-lead,
html.dark-mode .mk-root .mk-section-head p,
html.dark-mode .mk-root .mk-feature-card p,
html.dark-mode .mk-root .mk-price-card p,
html.dark-mode .mk-root .mk-lbl {
  color: #A6B0C3 !important;
}
html.dark-mode .mk-root .mk-hero-trust span,
html.dark-mode .mk-root .mk-price-value .mk-period,
html.dark-mode .mk-root .mk-hero-metric p:first-child {
  color: #94A0B8 !important;
}

/* ─── 22. AUTH SHELL — PRECISION SPLIT-SCREEN ────────────────────────────── */
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  background: var(--m1-canvas);
}

.auth-left {
  background: #0A0E17 !important;
  border-right: 1px solid #1F2939 !important;
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stat-card.total,
.stat-card.overdue,
.stat-card.upcoming,
.mk-ai-reco {
  border-left: 1px solid var(--m1-line) !important;
}

.auth-left::before,
.auth-left::after {
  display: none !important;
}
.notification-dot {
  animation: none !important;
}
.mk-skeleton::after,
.skeleton::after {
  display: none !important;
}
.mk-skeleton,
.skeleton {
  background: var(--m1-surface-3) !important;
  opacity: 0.75;
}
html.dark-mode .auth-left {
  background: #080C14 !important;
  border-right: 1px solid #1B2435 !important;
}
.auth-brand-logo {
  max-height: 32px;
  width: auto;
  margin-bottom: 12px;
}
.auth-brand-tagline {
  font-size: 14px;
  line-height: 1.5;
  color: #A6B0C3 !important;
  margin-bottom: 40px;
}
.auth-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: auto 0;
}
.auth-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.auth-feature-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--m1-r-md);
  background: rgba(68, 85, 238, 0.18) !important;
  color: #8E9BFF !important;
}
.auth-feature-icon svg {
  width: 18px;
  height: 18px;
  stroke: #8E9BFF;
}
.auth-feature-text b {
  display: block;
  font-size: 13px;
  font-weight: 650;
  color: #EDF0F8 !important;
  margin-bottom: 2px;
}
.auth-feature-text span {
  display: block;
  font-size: 12px;
  color: #7D879B !important;
  line-height: 1.45;
}
.auth-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #7D879B !important;
}
.auth-trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--m1-success);
}

.auth-right {
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: var(--m1-canvas);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 40px 36px;
  background: var(--m1-surface) !important;
  border: 1px solid var(--m1-line);
  border-radius: var(--m1-r-xl);
  box-shadow: var(--m1-shadow-2) !important;
}
.auth-card-title {
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--m1-ink) !important;
  margin-bottom: 6px;
}
.auth-card-subtitle {
  font-size: 13px;
  color: var(--m1-ink-3) !important;
  margin-bottom: 28px;
}
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--m1-ink-2) !important;
  margin-bottom: 6px;
}
.field-input {
  width: 100%;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--m1-line-strong) !important;
  border-radius: var(--m1-r-md) !important;
  background: var(--m1-surface) !important;
  color: var(--m1-ink) !important;
  font-size: 14px;
  box-shadow: none !important;
  transition: border-color var(--m1-dur) var(--m1-ease), box-shadow var(--m1-dur) var(--m1-ease);
}
.field-input:focus {
  border-color: var(--m1-brand) !important;
  box-shadow: var(--m1-focus) !important;
  outline: none;
}
.btn-primary-auth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 1px solid var(--m1-brand) !important;
  border-radius: var(--m1-r-md) !important;
  background: var(--m1-brand) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: none !important;
  transition: background var(--m1-dur) var(--m1-ease);
}
.btn-primary-auth:hover {
  background: var(--m1-brand-hover) !important;
}
.btn-primary-auth:disabled {
  background: var(--m1-surface-3) !important;
  border-color: var(--m1-line) !important;
  color: var(--m1-ink-3) !important;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }
  .auth-left {
    display: none;
  }
  .auth-right {
    padding: 24px 16px;
  }
  .auth-card {
    padding: 28px 20px;
    border: 0;
    box-shadow: none !important;
    background: transparent !important;
  }
  .mk-root .mk-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mk-root .mk-stat-card:nth-child(2) {
    border-right: 0 !important;
  }
  .mk-root .mk-stat-card:nth-child(n+3) {
    border-top: 1px solid var(--m1-line);
  }
}
@media (max-width: 500px) {
  .mk-root .mk-stats-grid {
    grid-template-columns: 1fr;
  }
  .mk-root .mk-stat-card {
    border-right: 0 !important;
    border-top: 1px solid var(--m1-line);
  }
  .mk-root .mk-stat-card:first-child {
    border-top: 0;
  }
  .mk-root .mk-pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── TEMPLATE G — LANDING INNOVATION ADDITIONS ──────────────────────────── */
.mk-card-grid-3 .mk-feature-card {
  background: var(--m1-surface) !important;
  color: var(--m1-ink) !important;
  border: 1px solid var(--m1-line) !important;
  border-radius: var(--m1-r-xl) !important;
  padding: 32px 28px !important;
  box-shadow: var(--m1-shadow-1) !important;
  transition: all var(--m1-dur) var(--m1-ease) !important;
}
.mk-card-grid-3 .mk-feature-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--m1-brand-line) !important;
  box-shadow: var(--m1-shadow-2) !important;
}
.mk-card-grid-3 .mk-feature-card h3 {
  font-size: 18px !important;
  font-weight: 750 !important;
  color: var(--m1-ink) !important;
  margin: 16px 0 8px !important;
}
.mk-card-grid-3 .mk-feature-card p {
  font-size: 14px !important;
  color: var(--m1-ink-3) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.mk-hero-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--m1-r-pill);
  background: var(--m1-brand-soft);
  color: var(--m1-brand);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
  border: 1px solid var(--m1-brand-line);
}
.mk-hero-highlight {
  color: var(--m1-brand) !important;
  display: inline-block;
}
.mk-hero-feature-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--m1-line);
}
.mk-feat-pill {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mk-feat-pill-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--m1-r-md);
  background: var(--m1-brand-soft);
  color: var(--m1-brand);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.mk-feat-pill b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--m1-ink);
}
.mk-feat-pill span {
  display: block;
  font-size: 12px;
  color: var(--m1-ink-3);
}

.mk-icon-blue { background: #EFF6FF !important; color: #3B82F6 !important; }
.mk-icon-purple { background: #F5F3FF !important; color: #8B5CF6 !important; }
.mk-icon-green { background: #ECFDF5 !important; color: #10B981 !important; }
.mk-icon-indigo { background: #EEF2FF !important; color: #6366F1 !important; }
.mk-icon-cyan { background: #ECFEFF !important; color: #06B6D4 !important; }
.mk-icon-amber { background: #FFFBEB !important; color: #F59E0B !important; }

/* Dark banner section */
.mk-section-dark-banner {
  background: #0B0F19 !important;
  color: #fff !important;
  border-radius: 28px;
  margin: 40px var(--m1-gutter);
  padding: 60px 48px !important;
}
.mk-dark-banner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.mk-banner-content h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  color: #fff !important;
  margin: 16px 0;
}
.mk-banner-content p {
  font-size: 16px;
  color: #94A3B8 !important;
  line-height: 1.6;
  margin-bottom: 28px;
}
.mk-banner-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--m1-r-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.mk-banner-btn {
  background: var(--m1-brand) !important;
  color: #fff !important;
  padding: 12px 28px !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

/* Logos section */
.mk-trust-section {
  padding: 48px 0;
  border-bottom: 1px solid var(--m1-line);
}
.mk-trust-title {
  font-size: 22px;
  font-weight: 750;
  color: var(--m1-ink);
  margin-bottom: 8px;
}
.mk-trust-sub {
  font-size: 14px;
  color: var(--m1-ink-3);
  margin-bottom: 32px;
}
.mk-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.mk-logo-item {
  font-size: 18px;
  font-weight: 700;
  color: var(--m1-ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.7;
}

@media (max-width: 900px) {
  .mk-hero-feature-pills { grid-template-columns: 1fr; gap: 20px; }
  .mk-dark-banner-grid { grid-template-columns: 1fr; }
  .mk-section-dark-banner { margin: 20px 16px; padding: 36px 20px !important; border-radius: 20px; }
}

/* ─── TEMPLATE H — AUTH STYLING REFINEMENTS ──────────────────────────────── */
.auth-divider-wrap {
  position: relative;
  text-align: center;
  margin: 24px 0 16px;
}
.auth-divider-wrap::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--m1-line);
}
.auth-divider-wrap span {
  position: relative;
  background: var(--m1-surface);
  padding: 0 12px;
  font-size: 12px;
  color: var(--m1-ink-3);
  text-transform: uppercase;
  font-weight: 600;
}
.auth-social-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-auth-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--m1-line-strong);
  border-radius: var(--m1-r-md);
  background: var(--m1-surface);
  color: var(--m1-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--m1-dur) var(--m1-ease);
}
.btn-auth-social:hover {
  background: var(--m1-surface-2);
  border-color: var(--m1-ink-3);
  transform: translateY(-1px);
}
.btn-primary-auth {
  background: var(--m1-brand) !important;
  border-color: var(--m1-brand) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(59, 91, 245, 0.35) !important;
}
.btn-primary-auth:hover {
  background: var(--m1-brand-hover) !important;
  transform: translateY(-1px);
}

/* ─── PHASE 2 POLISH: SECTIONS COMPACTNESS & RHYTHM ───────────────────────── */
.mk-root .mk-section {
  padding: 56px 0 !important;
}
.mk-root .mk-section-head {
  margin: 0 auto 36px !important;
  max-width: 580px !important;
}
.mk-root .mk-section-head h2 {
  font-size: clamp(24px, 2.4vw, 34px) !important;
  font-weight: 750 !important;
  margin-bottom: 10px !important;
}
.mk-root .mk-section-head p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}
.mk-root .mk-benefits-cta {
  margin-top: 36px !important;
  padding-top: 28px !important;
}
.mk-root .mk-card-grid-3 {
  gap: 18px !important;
}
.mk-root .mk-steps-row {
  gap: 16px !important;
  margin-top: 24px !important;
}
.mk-root .mk-pricing-grid {
  gap: 18px !important;
  margin-top: 28px !important;
}
.mk-root .mk-faq-grid {
  gap: 12px !important;
  margin-top: 28px !important;
}
.mk-root .mk-cta-section {
  padding: 64px 0 !important;
}
.mk-root .mk-cta-section h2 {
  font-size: clamp(26px, 2.8vw, 38px) !important;
  margin-bottom: 12px !important;
}
.mk-root .mk-cta-section p {
  margin-bottom: 24px !important;
}

/* ─── AUTH BALANCED SPLIT-SCREEN & PADDING ───────────────────────────────── */
@media (min-width: 901px) {
  .auth-shell {
    grid-template-columns: minmax(360px, 460px) minmax(0, 1fr) !important;
  }
  .auth-left {
    padding: 60px 48px !important;
  }
  .auth-card {
    max-width: 460px !important;
    padding: 44px 40px !important;
  }
}
@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr !important;
  }
  .auth-right {
    padding: 20px 12px !important;
    width: 100% !important;
  }
  .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
  }
}

/* ─── MOBILE FIXES FOR EMPTY STATE & SALES TABLE CARDS ─────────────────── */
@media (max-width: 767.98px) {
  /* 1. Empty state fix for products table */
  #productTable tr:has(.mk-empty-td),
  #productTable tr.mk-empty-tr,
  #productTable .mk-empty-td {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #productTable .mk-empty-td::before {
    display: none !important;
    content: none !important;
  }
  .mk-empty-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 32px 16px !important;
    background: var(--m1-surface) !important;
    border: 1px dashed var(--m1-line) !important;
    border-radius: var(--m1-r-xl) !important;
    box-shadow: var(--m1-shadow-1) !important;
    width: 100% !important;
  }
  .mk-empty-box .btn {
    margin-top: 12px !important;
    min-height: 40px !important;
  }

  /* 2. Bugungi sotilgan mahsulotlar (#salesTable) kartalari to'g'irlanishi */
  #salesTable tr {
    display: flex !important;
    flex-direction: column !important;
    background: var(--m1-surface) !important;
    border: 1px solid var(--m1-line) !important;
    border-radius: var(--m1-r-lg) !important;
    box-shadow: var(--m1-shadow-1) !important;
    margin-bottom: 12px !important;
    padding: 14px 16px !important;
    width: 100% !important;
  }
  #salesTable td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 6px 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--m1-line-soft) !important;
    font-size: 13.5px !important;
    color: var(--m1-ink) !important;
  }
  #salesTable td:last-child {
    border-bottom: none !important;
    padding-top: 10px !important;
    justify-content: flex-end !important;
  }
  #salesTable td:last-child::before {
    display: none !important;
    content: none !important;
  }
  #salesTable td::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: var(--m1-ink-3) !important;
    font-size: 12.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }
  #salesTable td .btn-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: var(--m1-r-md) !important;
    padding: 0 !important;
  }
}

/* ─── MOBILE FIXES FOR CHARTS HEIGHT & TRANSACTIONS EMPTY STATE ─────────── */
@media (max-width: 767.98px) {
  /* 1. Dashboard grafiklari balandligini ixchamlashtirish (Image 1 fix) */
  .mk-chart,
  .mk-chart-sm {
    height: 180px !important;
  }
  .mk-chart-empty {
    padding: 14px 10px !important;
    gap: 4px !important;
  }
  .mk-chart-empty i {
    width: 38px !important;
    height: 38px !important;
    font-size: 20px !important;
    margin-bottom: 0 !important;
  }
  .mk-chart-empty strong {
    font-size: 13px !important;
  }
  .mk-chart-empty span {
    font-size: 11px !important;
    line-height: 1.35 !important;
    max-width: 260px !important;
  }

  /* 2. Savdo tarixi (#transactionsTableBody) bo'sh holati (Image 2 fix) */
  #daily-sales .card .p-4.border-bottom {
    padding: 16px 14px 14px !important;
  }
  #daily-sales .table-responsive {
    border: none !important;
    background: transparent !important;
  }
  #transactionsTableBody tr:has(.empty-state),
  #transactionsTableBody tr:has(.mk-empty-td) {
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 14px 0 0 !important;
  }
  #transactionsTableBody tr:has(.empty-state):hover {
    transform: none !important;
    box-shadow: none !important;
  }
  #transactionsTableBody td.empty-state,
  #transactionsTableBody td.mk-empty-td {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 36px 16px !important;
    background: var(--m1-surface) !important;
    border: 1px dashed var(--m1-line) !important;
    border-radius: var(--m1-r-xl) !important;
    box-shadow: var(--m1-shadow-1) !important;
    width: 100% !important;
  }
  #transactionsTableBody td.empty-state::before,
  #transactionsTableBody td.mk-empty-td::before {
    display: none !important;
    content: none !important;
  }
  #transactionsTableBody .empty-icon {
    font-size: 36px !important;
    color: var(--m1-brand) !important;
    margin-bottom: 8px !important;
  }
  #transactionsTableBody .empty-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--m1-ink) !important;
    margin-bottom: 4px !important;
  }
  #transactionsTableBody .empty-subtitle {
    font-size: 12px !important;
    color: var(--m1-ink-3) !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }
}

/* ─── MODAL Z-INDEX & BACKDROP HIERARCHY FIX (CRITICAL) ──────────────────── */
.modal {
  z-index: 2050 !important;
}
.modal-backdrop {
  z-index: 2040 !important;
}
.modal.show {
  display: block !important;
}
.modal-open .mobile-bottom-nav {
  z-index: 1000 !important; /* modal ochilganda bottom-nav pastda qolsin */
}
.modal-open .sidebar {
  z-index: 1000 !important;
}
.modal-open .topbar {
  z-index: 1000 !important;
}

/* ─── MOBILE FIXES FOR REAL TRANSACTION ROWS ────────────────────────────── */
@media (max-width: 767.98px) {
  #transactionsTableBody tr.transaction-row {
    margin-top: 14px !important;
    background: var(--m1-surface) !important;
    border: 1px solid var(--m1-line) !important;
    border-radius: var(--m1-r-xl) !important;
    box-shadow: var(--m1-shadow-1) !important;
    padding: 16px 18px !important;
  }
  #transactionsTableBody tr.transaction-row td {
    border-bottom: 1px solid var(--m1-line-soft) !important;
    padding: 8px 0 !important;
  }
  #transactionsTableBody tr.transaction-row td:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  #transactionsTableBody tr.transaction-row td::before {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--m1-ink-3) !important;
    letter-spacing: 0.04em !important;
  }
  #transactionsTableBody .product-info {
    text-align: right;
  }
  #transactionsTableBody .product-name {
    font-weight: 700 !important;
    color: var(--m1-ink) !important;
    font-size: 14px !important;
  }
  #transactionsTableBody .product-category {
    font-size: 11px !important;
    color: var(--m1-ink-3) !important;
  }
}

/* ─── ULTRA DENSE NUMBER SAFEGUARD (LARGE METRICS) ───────────────────────── */
.card-box h3.counter,
.card-box h3.daily-c {
  font-size: min(21px, calc(100cqw / 11));
  font-size: clamp(15px, 1.22vw, 21px);
}
@media (min-width: 1200px) and (max-width: 1440px) {
  .mk-stats-6 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 1441px) {
  .mk-stats-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}
.card-box .counter-change {
  max-width: 100% !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Landing hero metrika raqamlari mobilda qatga bo'linmasin (4-rasm) */
@media (max-width: 767.98px) {
  .mk-root .mk-hero-metric p:last-child {
    font-size: 15px !important;
    white-space: nowrap;
    letter-spacing: -0.02em;
  }
  .mk-root .mk-hero-metric {
    padding: 12px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIVID REFRESH — panel va umumiy qatlam (dizayn yangilash)
   Har bir KPI kartasiga o'z rangli ohangi, gradient tugmalar, boyroq
   sidebar aktiv holati, temalangan selection/caret/scrollbar/focus.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── A. KPI kartalari: per-card yumshoq gradient tint + rangli aksent ───── */
.mk-stats-6 > [class*="col-"] .card-box {
  position: relative;
}
.mk-stats-6 > [class*="col-"]:nth-child(1) .card-box {
  --kpi-tint: rgba(68, 85, 238, 0.09);
  --kpi-bar1: #4455EE;
  --kpi-bar2: #7c3aed;
  --kpi-soft: rgba(68, 85, 238, 0.05);
}
.mk-stats-6 > [class*="col-"]:nth-child(2) .card-box {
  --kpi-tint: rgba(59, 130, 246, 0.09);
  --kpi-bar1: #3B82F6;
  --kpi-bar2: #06B6D4;
  --kpi-soft: rgba(59, 130, 246, 0.05);
}
.mk-stats-6 > [class*="col-"]:nth-child(3) .card-box {
  --kpi-tint: rgba(16, 185, 129, 0.10);
  --kpi-bar1: #10B981;
  --kpi-bar2: #06B6D4;
  --kpi-soft: rgba(16, 185, 129, 0.05);
}
.mk-stats-6 > [class*="col-"]:nth-child(4) .card-box {
  --kpi-tint: rgba(139, 92, 246, 0.09);
  --kpi-bar1: #8B5CF6;
  --kpi-bar2: #6366F1;
  --kpi-soft: rgba(139, 92, 246, 0.05);
}
.mk-stats-6 > [class*="col-"]:nth-child(5) .card-box {
  --kpi-tint: rgba(239, 68, 68, 0.09);
  --kpi-bar1: #EF4444;
  --kpi-bar2: #F43F5E;
  --kpi-soft: rgba(239, 68, 68, 0.05);
}
.mk-stats-6 > [class*="col-"]:nth-child(6) .card-box {
  --kpi-tint: rgba(245, 158, 11, 0.11);
  --kpi-bar1: #F59E0B;
  --kpi-bar2: #F97316;
  --kpi-soft: rgba(245, 158, 11, 0.06);
}

.mk-stats-6 > [class*="col-"] .card-box {
  background:
    radial-gradient(130% 100% at 100% 0%, var(--kpi-tint), transparent 58%),
    var(--m1-surface) !important;
}
.mk-stats-6 > [class*="col-"] .card-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--m1-r-lg) var(--m1-r-lg) 0 0;
  background: linear-gradient(90deg, var(--kpi-bar1), var(--kpi-bar2)) !important;
  opacity: 0.55;
  transition: opacity var(--m1-dur) var(--m1-ease);
}
.mk-stats-6 > [class*="col-"] .card-box:hover::before {
  opacity: 1;
}
.mk-stats-6 > [class*="col-"] .card-box:hover {
  border-color: color-mix(in srgb, var(--kpi-bar1) 42%, transparent) !important;
}

html.dark-mode .mk-stats-6 > [class*="col-"]:nth-child(1) .card-box { --kpi-tint: rgba(99, 102, 241, 0.18); --kpi-soft: rgba(99, 102, 241, 0.1); }
html.dark-mode .mk-stats-6 > [class*="col-"]:nth-child(2) .card-box { --kpi-tint: rgba(59, 130, 246, 0.16); --kpi-soft: rgba(59, 130, 246, 0.1); }
html.dark-mode .mk-stats-6 > [class*="col-"]:nth-child(3) .card-box { --kpi-tint: rgba(25, 201, 148, 0.15); --kpi-soft: rgba(25, 201, 148, 0.1); }
html.dark-mode .mk-stats-6 > [class*="col-"]:nth-child(4) .card-box { --kpi-tint: rgba(167, 139, 250, 0.16); --kpi-soft: rgba(167, 139, 250, 0.1); }
html.dark-mode .mk-stats-6 > [class*="col-"]:nth-child(5) .card-box { --kpi-tint: rgba(255, 98, 105, 0.15); --kpi-soft: rgba(255, 98, 105, 0.1); }
html.dark-mode .mk-stats-6 > [class*="col-"]:nth-child(6) .card-box { --kpi-tint: rgba(244, 183, 64, 0.15); --kpi-soft: rgba(244, 183, 64, 0.1); }

/* KPI ikonka fonlarini dark rejimda ham o'zgarishiga moslashtirish */
html.dark-mode .mk-stats-6 > [class*="col-"] .card-box small.counter-smal .svg-icon {
  background: var(--kpi-soft) !important;
}
html.dark-mode .mk-stats-6 > [class*="col-"]:nth-child(1) .card-box small.counter-smal .svg-icon { color: #8294ff !important; }
html.dark-mode .mk-stats-6 > [class*="col-"]:nth-child(2) .card-box small.counter-smal .svg-icon { color: #7db3fb !important; }
html.dark-mode .mk-stats-6 > [class*="col-"]:nth-child(3) .card-box small.counter-smal .svg-icon { color: #4ade9f !important; }
html.dark-mode .mk-stats-6 > [class*="col-"]:nth-child(4) .card-box small.counter-smal .svg-icon { color: #b89dfb !important; }
html.dark-mode .mk-stats-6 > [class*="col-"]:nth-child(5) .card-box small.counter-smal .svg-icon { color: #ff8a8f !important; }
html.dark-mode .mk-stats-6 > [class*="col-"]:nth-child(6) .card-box small.counter-smal .svg-icon { color: #fbcf6a !important; }

/* ─── B. Primary tugma: boy gradient + ichki yorug'lik ───────────────────── */
.btn-primary {
  background: linear-gradient(100deg, #4455EE 0%, #5647e8 52%, #7c3aed 100%) !important;
  border-color: transparent !important;
  box-shadow:
    0 6px 16px -6px rgba(68, 85, 238, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.btn-primary:hover {
  background: linear-gradient(100deg, #3a4be0 0%, #4b3ddd 52%, #6f2fe0 100%) !important;
  box-shadow:
    0 10px 22px -6px rgba(68, 85, 238, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
html.dark-mode .btn-primary {
  box-shadow:
    0 6px 16px -6px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* ─── C. Sidebar aktiv holati: gradient ohangli pill ─────────────────────── */
.sidebar .nav-item.active {
  background: linear-gradient(135deg, #DCE6FD, #E6E9FC) !important;
  box-shadow: inset 3px 0 0 var(--m1-brand) !important;
  color: #23307a !important;
}
.sidebar .nav-item.active .svg-icon {
  color: var(--m1-brand) !important;
}
html.dark-mode .sidebar .nav-item.active {
  background: linear-gradient(135deg, rgba(65, 105, 245, 0.24), rgba(124, 58, 237, 0.16)) !important;
  box-shadow: inset 3px 0 0 #8294ff !important;
  color: #dfe7ff !important;
}
html.dark-mode .sidebar .nav-item.active .svg-icon {
  color: #a5b4fc !important;
}

/* ─── D. Temalangan tanlov, kursor, skrollbar, fokus ────────────────────── */
html:not(.dark-mode) ::selection {
  background: rgba(68, 85, 238, 0.22);
  color: inherit;
}
html.dark-mode ::selection {
  background: rgba(130, 148, 255, 0.32);
  color: inherit;
}

body {
  caret-color: var(--m1-brand);
}

html:not(.dark-mode)::-webkit-scrollbar,
html:not(.dark-mode) *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html:not(.dark-mode)::-webkit-scrollbar-track,
html:not(.dark-mode) *::-webkit-scrollbar-track {
  background: transparent;
}
html:not(.dark-mode)::-webkit-scrollbar-thumb,
html:not(.dark-mode) *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b9c4e8, #9aa8dd);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html:not(.dark-mode)::-webkit-scrollbar-thumb:hover,
html:not(.dark-mode) *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8f9fe0, #7a8ad4);
  background-clip: content-box;
}
html.dark-mode::-webkit-scrollbar,
html.dark-mode *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.dark-mode::-webkit-scrollbar-track,
html.dark-mode *::-webkit-scrollbar-track {
  background: transparent;
}
html.dark-mode::-webkit-scrollbar-thumb,
html.dark-mode *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2c4a63, #233c53);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Kontekstual fokus halqasi — matn havolalari va tugmalar uchun */
a:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
button:not(.btn):focus-visible {
  outline: 2px solid var(--m1-brand);
  outline-offset: 3px;
}
html.dark-mode a:focus-visible,
html.dark-mode [role="button"]:focus-visible,
html.dark-mode summary:focus-visible,
html.dark-mode button:not(.btn):focus-visible {
  outline-color: #8294ff;
}

/* ─── E. Jadval qatorlari: yumshoq hover va satrik ajratish ─────────────── */
.table tbody tr {
  transition: background var(--m1-dur) var(--m1-ease);
}
html:not(.dark-mode) .table tbody tr:hover {
  background: rgba(68, 85, 238, 0.04);
}
html.dark-mode .table tbody tr:hover {
  background: rgba(99, 102, 241, 0.09);
}

/* ─── F. Bo'sh holatlar va kichik kartalar uchun nozik aksent ───────────── */
.section-header h4 {
  position: relative;
  padding-left: 12px;
}
.section-header h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--m1-brand), var(--m1-brand-press));
  opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL VA PLANSHET UCHUN TO'LIQ MUKAMMAL DESIGN (PHONE & TABLET ULTRA-FIX)
   - Tarix paneli: izlanish + 2 ta select yonma-yon + Yuklab olish
   - Mahsulotlar paneli: izlanish + 2 ta select yonma-yon + 2 ta tugma yonma-yon
   - Qarzdorlik paneli: izlanish + 2 ta tugma yonma-yon
   - Qarzdor qo'shish/tahrirlash modallari: mobil telefonda qulay fullscreen sheet,
     ichki scroll YO'Q, to'liq ekranga mos, bo'shliqlar toza
   - Topbar: mobil telefonda elementlar bir-biriga minmasligi, sarlavha toza,
     profil ma'lumotlari sig'ishi
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  /* 1. Tarix (Savdo jurnali) toolbar mobil tartibi */
  .card .p-4.border-bottom > .d-flex.justify-content-between.align-items-center.flex-wrap.gap-3 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .card .p-4.border-bottom > .d-flex > .d-flex.align-items-center.gap-3.flex-grow-1,
  .card .p-4.border-bottom > .d-flex > .d-flex.align-items-center.gap-3.flex-grow-1 > div {
    max-width: none !important;
    width: 100% !important;
  }
  .card .p-4.border-bottom > .d-flex > .d-flex.align-items-center.gap-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .card .p-4.border-bottom > .d-flex > .d-flex.align-items-center.gap-2 select.mk-filter-select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    font-size: 13px !important;
  }
  .card .p-4.border-bottom > .d-flex > .d-flex.align-items-center.gap-2 #exportTransactions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 42px !important;
    font-weight: 600 !important;
  }

  /* 2. Mahsulotlar toolbar mobil tartibi */
  #productsSection .mk-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #productsSection .mk-toolbar-search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  #productsSection .mk-filter-select {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    font-size: 13px !important;
  }
  #productsSection #exportProductsBtn {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    min-height: 42px !important;
    font-size: 13px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #productsSection #openProductModal {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    min-height: 42px !important;
    font-size: 13px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 3. Qarzdorlar toolbar mobil tartibi */
  #debtors .mk-page-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #debtors .mk-page-actions #searchInput {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
  }
  #debtors .mk-page-actions #exportDebtorsBtn {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    min-height: 42px !important;
    font-size: 13px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #debtors .mk-page-actions button.btn-primary {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    min-height: 42px !important;
    font-size: 13px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 4. Qarzdor qo'shish va tahrirlash modallari: mobil ekranda to'liq
     moslashuvchan sheet (ichki alohida scrol yo'q, butun oyna bir tekis
     ko'rinadi yoki butun modal bo'yicha tabiiy aylanadi) */
  .modal-debtors {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal-debtors-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 94vh !important;
    height: auto !important;
    margin: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    padding: 18px 18px max(18px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .modal-debtors-content form,
  .modal-debtors-content .mk-modal-body {
    overflow-y: visible !important;
    max-height: none !important;
    padding: 0 !important;
    gap: 12px !important;
  }
  .modal-debtors-content .form-group input,
  .modal-debtors-content .form-group select,
  .modal-debtors-content .form-group textarea {
    font-size: 15px !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
  }
  .modal-debtors-content .form-group textarea {
    min-height: 70px !important;
  }
  .modal-debtors-content .btn-submit {
    min-height: 46px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    margin-top: 4px !important;
  }

  /* 5. Topbar mobil moslashuvi: elementlar minmasligi */
  .topbar {
    padding: 0 12px !important;
    gap: 8px !important;
    min-height: 56px !important;
  }
  .mk-topbar-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }
  .mk-topbar-left > div {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .topbar h1 {
    font-size: 16px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .mk-topbar-sub {
    font-size: 11px !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
  }
  .top-actions {
    flex: 0 0 auto !important;
    gap: 6px !important;
  }
  .profile-trigger {
    padding: 3px 6px !important;
    gap: 6px !important;
  }
  .profile-avatar, .profile-avatar-fallback {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }
  .profile-info {
    display: none !important;
  }
  .profile-dropdown-icon {
    display: none !important;
  }

  /* 6. Bootstrap modallar (Mahsulot qo'shish #productModal va boshqalar)
     Pastki navigatsiya (bottom-nav) orqasiga kirib ketmasligi uchun
     bottom sheet ko'rinishida pastdan padding ajratiladi */
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
  }
  .modal-dialog-centered {
    min-height: 100% !important;
    align-items: flex-end !important;
  }
  .modal-content {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    max-height: 94vh !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .modal-content form {
    max-height: 94vh !important;
  }
  .modal-body {
    max-height: calc(94vh - 140px) !important;
    padding: 14px 16px !important;
  }
  .modal-footer {
    padding: 12px 16px max(14px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 10 !important;
    position: relative !important;
  }
  .modal-footer .btn {
    flex: 1 !important;
    min-height: 44px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLANSHET (768px - 1024px) TARTIBI:
   Ustunlar 2 ta bo'lib qolishi yoki torayib ketmasligi uchun chiroyli grid
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
  .topbar {
    padding: 0 var(--m1-s5) !important;
  }
  .topbar h1 {
    font-size: 20px !important;
  }
  .card .p-4.border-bottom > .d-flex.justify-content-between.align-items-center.flex-wrap.gap-3 {
    gap: 12px !important;
  }
  #productsSection .mk-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  #productsSection .mk-toolbar-search {
    flex: 1 1 240px !important;
    min-width: 200px !important;
  }
  #productsSection .mk-filter-select {
    flex: 0 1 180px !important;
    min-width: 140px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELEFON: iOS/Android avtomatik zoom'ni o'chirish (HAQIQIY TELFONDA
   "kiritib bo'lmayapti" muammosining asosiy sababi)
   ═══════════════════════════════════════════════════════════════════════════
   iPhone Safari va Android Chrome fokusda 16px dan kichik shriftli
   input/select/textarea larni o'zi kattalashtiradi (auto-zoom). Zoom
   klaviatura bilan birga sahifani «sindiradi»: input ekrandan chetlab
   chiqadi, qayta bosish qiyinlashadi va bu «hech nima kiritib bo'lmayapti»
   hissini tug'diradi. Yechim: telefonda (<768px) barcha forma
   elementlarini 16px qilish. Tablet va desktopda dizayn o'zgarmaydi. */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Yuqoridagi keng qoidani ID+class bilan bekor qiluvchi bir necha
     e'lon bor (masalan filter-select 13px !important) — ularni ham
     16px ga ko'taramiz, aks holda iOS yana zoom beradi. */
  #productsSection .mk-filter-select,
  #transactionFilter,
  #transactionPaymentFilter {
    font-size: 16px !important;
  }

  /* Telefon uchun dynamic viewport — mobil URL bar tufayli pastdagi
     «qora bo'shliq» ni yo'qotadi (100dvh eski brauzerlarda 100vh ga tushadi). */
  body > .d-flex {
    min-height: 100vh;
    min-height: 100dvh;
  }
}