/* ============================================================
   BOLALAR KIYIM DO'KONI ERP — style.css
   ============================================================
   Bu fayl TOZADAN yozilgan. Avvalgi nusxada 4 ta :root bloki
   bir-birini bosib yotgan edi (ichida tashlab ketilgan qorong'u
   tema ham qolib ketgan) — faylning ~40% i o'lik kod edi.

   TUZILISHI:
     00  poydevor  — tokenlar, tema, asosiy tiplar
     01  yon menyu va login
     02  yuqori panel va navigatsiya
     03  kartalar va grafiklar
     04  jadvallar va belgilar
     05  formalar, tugmalar, modallar
     06  savdo (POS), chek, aksiya, bonus
     07  boshqaruv paneli — KPI, sparkline, maydon grafigi
     08  savdo (POS) — qidiruv ro'yxati, savat
     99  yakuniy tuzatishlar

   QOIDA: rang FAQAT token orqali beriladi. Qattiq yozilgan rang
   qorong'u rejimni buzadi. Yagona istisno — chek va etiketka:
   ular qog'ozga chiqadi, shuning uchun --paper / --ink tokenlari
   ikkala rejimda ham o'zgarmaydi.
   ============================================================ */

/* ============================================================
   BOLALAR KIYIM ERP — DIZAYN TIZIMI
   Bitta manba. Avvalgi faylda 4 ta :root bloki bir-birini bosib
   yotardi (o'lik qorong'u tema ham qolib ketgan edi) — hammasi
   shu yerga birlashtirildi.

   TEMA UCH HOLATDA ishlaydi:
     :root                                  -> yorug' (asosiy)
     @media (prefers-color-scheme: dark)    -> tizim qorong'u bo'lsa
       :root:not([data-theme="light"])         (foydalanuvchi yorug'ni
                                                majburlamagan bo'lsa)
     :root[data-theme="dark"]               -> tugma bilan tanlangan
   ============================================================ */

:root {
  /* --- Yuzalar --- */
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  --surface-2: #EEF1F7;      /* hover, sokin panel */
  --surface-3: #E3E7F0;      /* progress track, ajratgich */
  --sidebar: #FFFFFF;

  /* --- Matn --- */
  --text: #161923;
  --text-2: #454C5E;
  --muted: #737B8F;

  /* --- Chiziqlar --- */
  --border: #E3E7F0;
  --border-2: #CFD5E2;

  /* --- Asosiy rang --- */
  --primary: #5B54E8;
  --primary-hover: #4941D8;
  --primary-soft: #ECEBFD;
  --on-primary: #FFFFFF;

  /* --- Ma'noli ranglar (holat) --- */
  --green: #0E9D62;  --green-soft: #E2F5EC;
  --red: #D93A31;    --red-soft: #FCEAE9;
  --amber: #B0730A;  --amber-soft: #FCF2DF;
  --blue: #2E6EE4;   --blue-soft: #E7EFFD;
  --purple: #7A5AF8; --purple-soft: #F0ECFE;
  --teal: #0C9C9C;   --teal-soft: #DFF4F4;

  /* --- Shakl --- */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 20, 32, .05);
  --shadow: 0 1px 2px rgba(16, 20, 32, .04), 0 6px 16px -6px rgba(16, 20, 32, .12);
  --shadow-lg: 0 8px 40px -12px rgba(16, 20, 32, .28);
  --ring: 0 0 0 3px rgba(91, 84, 232, .18);

  /* --- Shriftlar --- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  /* Raqamlar uchun alohida shrift: kassa dasturida ustunlar tik turishi shart.
     Tarmoqdan yuklanmaydi — do'kon internetsiz ishlaydi. */
  --font-num: 'Cascadia Mono', 'Segoe UI Mono', ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Roboto Mono', monospace;

  --sidebar-w: 246px;
  --sidebar-w-sm: 68px;

  /* Qog'oz: chek va etiketka printerga chiqadi — TEMAGA ERGASHMAYDI.
     Shuning uchun ular ikkala rejimda ham bir xil qoladi. */
  --paper: #FFFFFF;
  --ink: #000000;
  --ink-2: rgba(0, 0, 0, .55);
  --paper-line: rgba(0, 0, 0, .18);
  --ink-green: #0A7A4B;
  --ink-red: #B4241C;
  --overlay: rgba(9, 12, 20, .55);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111420;
    --surface: #191D2B;
    --surface-2: #222738;
    --surface-3: #2B3145;
    --sidebar: #161926;

    --text: #E8EBF3;
    --text-2: #B2BACC;
    --muted: #848DA3;

    --border: #272D3E;
    --border-2: #343B50;

    --primary: #8A83FF;
    --primary-hover: #9B95FF;
    --primary-soft: #221F3E;
    --on-primary: #12121C;

    --green: #35C88A;  --green-soft: #14301F;
    --red: #F2766B;    --red-soft: #33191A;
    --amber: #E0A93C;  --amber-soft: #322614;
    --blue: #6C9BFF;   --blue-soft: #17233D;
    --purple: #A48CFF; --purple-soft: #241D3F;
    --teal: #3BC3BF;   --teal-soft: #133030;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px -8px rgba(0, 0, 0, .6);
    --shadow-lg: 0 12px 48px -12px rgba(0, 0, 0, .75);
    --ring: 0 0 0 3px rgba(138, 131, 255, .25);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #111420;
  --surface: #191D2B;
  --surface-2: #222738;
  --surface-3: #2B3145;
  --sidebar: #161926;

  --text: #E8EBF3;
  --text-2: #B2BACC;
  --muted: #848DA3;

  --border: #272D3E;
  --border-2: #343B50;

  --primary: #8A83FF;
  --primary-hover: #9B95FF;
  --primary-soft: #221F3E;
  --on-primary: #12121C;

  --green: #35C88A;  --green-soft: #14301F;
  --red: #F2766B;    --red-soft: #33191A;
  --amber: #E0A93C;  --amber-soft: #322614;
  --blue: #6C9BFF;   --blue-soft: #17233D;
  --purple: #A48CFF; --purple-soft: #241D3F;
  --teal: #3BC3BF;   --teal-soft: #133030;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px -8px rgba(0, 0, 0, .6);
  --shadow-lg: 0 12px 48px -12px rgba(0, 0, 0, .75);
  --ring: 0 0 0 3px rgba(138, 131, 255, .25);

  color-scheme: dark;
}

/* ============================================================
   ASOS
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tema almashganda ko'z qamashmasin. Harakatni o'chirgan foydalanuvchiga tegmaymiz. */
body, .sidebar, .card, .stat-card, .table-wrap, .modal, .topbar {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

h1, h2, h3, h4 {
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1.25;
  text-wrap: balance;
}
h1 { font-size: 22px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

a, .link {
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
}
a:hover, .link:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* Barcha raqamli qiymatlar bir xil kenglikda — ustunlar tik turadi */
.stat-value, .cs-total, .detail-total, .rc-total, .sc-total,
.bar-val, .hbar-val, .ci-sum, .sp-price, td .mk, .badge {
  font-variant-numeric: tabular-nums;
}

/* Mayda katta harfli yorliq — butun dasturda bir xil */
.stat-label, .sec-h, .pay-label, .lbl, .form-row > label,
.table thead th, .rc-meta, .detail-meta, .sp-meta, .user-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.muted { color: var(--muted); }
.empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Aylantirish chizig'i — qorong'uda ham ko'rinsin */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: var(--r-pill);
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Keng jadval sahifani yon tomonga surmasin */
.table-wrap, .chart-box, .pimp-table { overflow-x: auto; }

.app-shell { display: flex; min-height: 100vh; }

.content {
  flex: 1;
  min-width: 0;
  padding: 20px 24px 56px;
}

.page { display: none; }
.page.active { display: block; animation: fade .18s ease; }

@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }


/* ============================================================
   02 — YON MENYU VA LOGIN
   ============================================================ */

/* ---------- LOGIN EKRANI ---------- */

.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  overflow-y: auto;
  /* Sokin fon: kuchsiz radial yoritish, qizg'in gradient emas */
  background: var(--bg);
  background-image: radial-gradient(720px 420px at 50% -8%, var(--surface), transparent 70%);
}

/* Ikki ustun: chapda salomlashuv, o'ngda forma.
   Tor ekranda (telefon, kassa monitori) chap qism yashirinadi —
   kirish formasi hech qachon siqilib qolmaydi. */
.login-box {
  display: flex;
  width: 100%;
  max-width: 860px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.login-art {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 28px;
  color: #fff;
  background: linear-gradient(140deg, var(--primary), #7c6cf0 55%, #9b7bf5);
  overflow: hidden;
}
/* Fon bo'ylab sochilgan kiyim siluetlari */
.la-shapes { position: absolute; inset: 0; }
.la-item {
  position: absolute;
  width: 84px;
  height: 84px;
  color: #fff;
  opacity: .16;
}
.la-1 { top: 8%;  left: 10%; transform: rotate(-14deg); }
.la-2 { top: 30%; right: 8%; width: 96px; height: 96px; transform: rotate(11deg); }
.la-3 { bottom: 12%; left: 16%; transform: rotate(8deg); }
.la-4 { top: 12%; right: 26%; width: 62px; height: 62px; transform: rotate(-8deg); }
.la-5 { bottom: 26%; right: 14%; width: 74px; height: 74px; transform: rotate(-6deg); }
.la-6 { bottom: 8%; right: 34%; width: 66px; height: 66px; transform: rotate(10deg); }

.la-text { position: relative; text-align: center; }
.la-emoji {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 14px;
}
.la-title {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}
.la-sub {
  font-size: 14px;
  line-height: 1.55;
  opacity: .9;
  max-width: 260px;
  margin: 0 auto;
}

.login-card {
  flex: 0 0 auto;
  width: 100%;
  max-width: 400px;
  padding: 34px 30px 26px;
  background: var(--surface);
  text-align: center;
}

.login-card h1 { font-size: 22px; margin: 0 0 2px; }
.login-card > .muted { font-size: 13px; }

.login-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  background: var(--primary-soft);
  border-radius: var(--r);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  text-align: left;
}

.login-form input { width: 100%; }

.login-error {
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  background: var(--red-soft);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
/* Xato yo'q bo'lsa joy egallamasin */
.login-error:empty { display: none; }

.login-lang {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

/* ---------- YON MENYU ---------- */

.sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: var(--sidebar-w);
  height: 100vh;
  position: sticky;
  top: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.brand-icon { font-size: 22px; line-height: 1; }

.brand-text {
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Menyu o'zi aylanadi, pastki blok joyida qoladi */
.menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px 14px;
}

.menu-group { display: flex; flex-direction: column; gap: 2px; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.menu-item:hover { background: var(--surface-2); color: var(--text); }

/* Faol band: yumshoq fon + rangli matn (butun band bo'yalmaydi) */
.menu-item.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.menu-item:focus-visible,
.sub-item:focus-visible,
.logout-btn:focus-visible,
.lang-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.mi-icon {
  flex-shrink: 0;
  width: 20px;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.caret {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.18s ease;
}
.menu-group.open .caret { transform: rotate(180deg); }

.submenu { display: none; }

.menu-group.open .submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Chapdagi yupqa chiziq — ichki bandlarni ko'zga bog'lab turadi */
  margin: 2px 0 4px 22px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  animation: fade 0.18s ease;
}

.sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sub-item:hover { background: var(--surface-2); color: var(--text-2); }
.sub-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

/* ---------- PASTKI BLOK ---------- */

.sidebar-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 10px;
  border-top: 1px solid var(--border);
}

.user-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}

.user-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: var(--r-pill);
}

.user-meta { min-width: 0; flex: 1; }

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logout-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.logout-btn:hover { background: var(--red-soft); color: var(--red); }

.lang-switch { display: flex; gap: 6px; }

.lang-btn {
  padding: 5px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lang-btn:hover { background: var(--surface-2); color: var(--text); }
.lang-btn.active {
  background: var(--primary-soft);
  border-color: var(--primary-soft);
  color: var(--primary);
}

/* ---------- TOR EKRAN: faqat ikonka ---------- */

@media (max-width: 900px) {
  .sidebar { width: var(--sidebar-w-sm); }

  .brand { justify-content: center; padding: 0 8px; }
  .brand-text { display: none; }

  .menu { padding: 10px 8px 14px; }

  .menu-item { justify-content: center; padding: 10px 0; gap: 0; }
  /* Ikonkadan boshqa matn yashiriladi */
  .menu-item > span:not(.mi-icon),
  .caret,
  .user-meta,
  .lang-switch { display: none; }

  /* Guruh ochiq bo'lsa ham ichki ro'yxat sig'maydi */
  .menu-group.open .submenu { display: none; }

  .user-box { justify-content: center; padding: 8px 4px; gap: 0; }
  .user-avatar { width: 30px; height: 30px; font-size: 13px; }
  .logout-btn { display: none; }

  .login-card { padding: 24px 20px 22px; }
  /* Tor ekranda rasm qismi YASHIRINADI — kirish formasi to'liq
     kenglikda qoladi va siqilib ketmaydi. */
  .login-art { display: none; }
  .login-box { max-width: 400px; }
}

/* ===== 02 — YUQORI PANEL VA NAVIGATSIYA ===== */

/* --- Yuqori panel (topbar) --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

/* --- Filial tanlagich --- */
.branch-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.branch-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
/* Tizim strelkasi qoladi: appearance:none bo'lsa ikonka rangi qorong'u rejimda buziladi */
.branch-select {
  height: 36px;
  max-width: 240px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.branch-select:hover { border-color: var(--border-2); }
.branch-select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.branch-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--surface-2);
}

/* --- O'ngdagi amallar --- */
.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Ikonka tugmasi (tema almashtirish) --- */
.icon-act {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.icon-act:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}
.icon-act:active { background: var(--surface-3); }
.icon-act:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.ico {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
  stroke: currentColor;
  fill: none;
}
/* Yorug' rejimda OY (qorong'uga taklif), qorong'uda QUYOSH ko'rinadi */
.icon-act .ico-sun { display: none; }
.icon-act.is-dark .ico-moon { display: none; }
.icon-act.is-dark .ico-sun { display: block; }

/* --- Sahifa sarlavhasi --- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.page-head > div { min-width: 0; }
.page-head h1 { font-size: 22px; line-height: 1.25; }
.page-head h2 { font-size: 17px; line-height: 1.3; }
.page-head .muted { margin-top: 3px; }

/* --- Davr (period) tanlagich --- */
.period-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.per-btn {
  padding: 6px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.per-btn:hover {
  background: var(--surface);
  color: var(--text);
}
.per-btn.active {
  background: var(--primary);
  color: var(--on-primary);
}
.per-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
/* display'ni JS boshqaradi (inline-block/none) — bu yerda tegilmaydi */
.per-date {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.per-date:hover { border-color: var(--border-2); }
.per-date:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.per-dash {
  color: var(--muted);
  font-size: 12px;
}

/* --- Tablar (pastki chiziqli) --- */
.tab {
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.tab:focus-visible {
  outline: none;
  border-radius: var(--r-sm);
  box-shadow: var(--ring);
}
.tab-panel { display: none; }
.tab-panel.active {
  display: block;
  animation: fade 0.18s ease;
}

/* --- Asboblar qatori va qidiruv --- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
/* flex-basis toolbar ichida, width:100% esa oddiy blok ichida (modal) ishlaydi */
.search {
  flex: 1 1 240px;
  width: 100%;
  min-width: 180px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  transition: border-color 0.15s ease;
}
.search::placeholder { color: var(--muted); }
.search:hover { border-color: var(--border-2); }
.search:focus,
.search:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

/* --- Bo'lim ajratgichlari --- */
/* Yozuv uslubi (11px, katta harf) 00-foundation'da; bu yerda faqat joylashuv */
.sec-h { margin: 18px 0 10px; }
.sec-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* --- Karta sarlavha qatori --- */
.card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.card-head-row h2 { margin: 0; }
.head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Smena lentasi --- */
.shift-bar { margin-bottom: 14px; }
.shift-bar:empty { display: none; margin: 0; }
.shift-open,
.shift-closed {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
}
.shift-open {
  background: var(--green-soft);
  border-left: 3px solid var(--green);
  color: var(--green);
}
.shift-closed {
  background: var(--surface-2);
  border-left: 3px solid var(--border-2);
  color: var(--muted);
}
.shift-closed span { flex: 1 1 auto; font-weight: 600; }
.shift-info {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
}
.shift-info b { font-weight: 650; }
.shift-stats {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: inherit;
}
.shift-stats b { font-weight: 650; }
/* Tugma har doim o'ng chetda tursin */
.shift-open .btn,
.shift-closed .btn { margin-left: auto; }

/* --- Zaxira nusxa ogohlantirishi --- */
.backup-warn-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 13px;
  font-weight: 600;
}
.backup-warn-banner .btn { margin-left: auto; }
.backup-last {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.backup-last b {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.backup-last.ok { color: var(--green); }
.backup-last.warn { color: var(--amber); }

/* --- Tor ekran --- */
@media (max-width: 640px) {
  .topbar { align-items: flex-start; }
  .branch-select { max-width: 100%; }
  .page-head { align-items: flex-start; }
  .page-head h1 { font-size: 19px; }
  .period-bar { width: 100%; }
}

/* ========================================================
   05 — KARTALAR VA GRAFIKLAR
   card · stat-* · dash/an grid · bar & hbar chart · panellar · progress
   ======================================================== */

/* --------------------------------------------------------
   ASOSIY KARTA
   -------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  /* ichki bo'shliq gap orqali — bolalarga margin qo'yilmaydi */
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0; /* grid ichida keng jadval kartani cho'zib yubormasin */
}

.card > h2 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Jadval to'g'ridan-to'g'ri kartaga joylashganda ichki padding kerak emas */
.card.table-wrap { padding: 0; }

/* --------------------------------------------------------
   STAT KARTALAR
   Markup: .stat-card > .stat-icon + .stat-info(.stat-value + .stat-label)
   Markup o'zgarmagani uchun yorliqni raqam USTIGA chiqarish
   column-reverse bilan qilinadi.
   -------------------------------------------------------- */
.stat-grid {
  display: grid;
  /* 210px — "−1 980 000 so'm" bir qatorga sig'adigan eng kichik en */
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 14px;
}

.stat-card {
  /* Rang tokenlari o'zgaruvchi orqali — nth-child va .warn shularni almashtiradi */
  --sc: var(--blue);
  --sc-soft: var(--blue-soft);

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px 18px;
  overflow: hidden; /* pastki chiziq radius ichida qolsin */
}

/* Pastki ingichka rangli chiziq — karta "tegishli" bo'limini bildiradi */
.stat-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--sc);
}

.stat-icon {
  grid-area: 1 / 2;
  align-self: start;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--sc-soft);
  color: var(--sc);
  font-size: 16px;
  line-height: 1;
}

.stat-info {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column-reverse; /* yorliq vizual ravishda raqam ustida */
  gap: 6px;
  min-width: 0;
}

.stat-value {
  font-family: var(--font-num);
  /* Monoshrift keng: "5 340 000 so'm" 26px da kartaga sig'masdi va
     ikki qatorga tushardi. clamp() karta enига qarab moslashadi. */
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: anywhere; /* uzun summa sahifani yon tomonga surmasin */
}

/* "so'm" oldidagi oddiy bo'shliqda qator uzilib ketardi.
   Raqamning ichidagi bo'shliqlar uzilmas (U+00A0), shuning uchun
   butun qiymat bir qatorda qoladi. */
.stat-value { white-space: nowrap; }
.stat-info { min-width: 0; }
.stat-value { overflow: hidden; text-overflow: clip; }

.stat-info > .stat-label { line-height: 1.25; }

/* Rang aylanishi — har 6 kartada takrorlanadi */
.stat-grid > .stat-card:nth-child(6n + 1) { --sc: var(--blue);   --sc-soft: var(--blue-soft); }
.stat-grid > .stat-card:nth-child(6n + 2) { --sc: var(--green);  --sc-soft: var(--green-soft); }
.stat-grid > .stat-card:nth-child(6n + 3) { --sc: var(--purple); --sc-soft: var(--purple-soft); }
.stat-grid > .stat-card:nth-child(6n + 4) { --sc: var(--teal);   --sc-soft: var(--teal-soft); }
.stat-grid > .stat-card:nth-child(6n + 5) { --sc: var(--amber);  --sc-soft: var(--amber-soft); }
.stat-grid > .stat-card:nth-child(6n + 6) { --sc: var(--red);    --sc-soft: var(--red-soft); }

/* Ogohlantirish holati navbatdagi rangdan ustun turishi kerak:
   kuch bir xil (0,3,0), shuning uchun tartib bo'yicha keyin yoziladi */
.stat-card.warn,
.stat-grid > .stat-card.warn {
  --sc: var(--amber);
  --sc-soft: var(--amber-soft);
  border-color: var(--border-2);
}

/* --------------------------------------------------------
   SAHIFA SETKALARI
   -------------------------------------------------------- */
.dash-grid,
.an-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}

/* --------------------------------------------------------
   PANELLAR (tab bilan almashinadi)
   -------------------------------------------------------- */
.rep-panel,
.fin-panel,
.comp-panel { display: none; }

.rep-panel.active,
.fin-panel.active,
.comp-panel.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fade 0.18s ease;
}

/* Filial bo'yicha hisobot bloki */
.report-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Bloklar umumiy konteynerga ega emas (id li bo'sh div), shuning uchun
   qo'shni selektor bilan tik bo'shliq beriladi */
.report-block + .report-block { margin-top: 16px; }

.report-block > h3 {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-2);
}

/* --------------------------------------------------------
   TIK USTUNLI GRAFIK
   -------------------------------------------------------- */
.chart-box {
  overflow-x: auto;
  padding-bottom: 4px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 178px;
  padding-top: 8px;
  overflow-x: auto; /* ustunlar sig'masa grafik o'zi aylansin */
}

.bar-col {
  flex: 1 1 0;
  min-width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* .bar element faqat shu grafik ichida uchraydi — shuning uchun scoped */
.bar-col > .bar {
  width: 100%;
  max-width: 38px;
  min-height: 4px;
  background: var(--primary);
  border-radius: 6px 6px 2px 2px;
}

.bar-val {
  font-family: var(--font-num);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.bar-lbl {
  font-family: var(--font-num);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

/* 30 kunlik variant — ustunlar ingichka va zich */
.bar-chart-30 { gap: 3px; }
.bar-chart-30 .bar-col { min-width: 15px; }
.bar-chart-30 .bar-col > .bar {
  max-width: 14px;
  border-radius: 3px 3px 1px 1px;
  background: var(--blue);
}
.bar-chart-30 .bar-lbl { font-size: 9px; }

/* --------------------------------------------------------
   GORIZONTAL USTUNLI GRAFIK (label · progres · qiymat)
   -------------------------------------------------------- */
.hbars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hbar-row {
  display: grid;
  grid-template-columns: minmax(80px, 150px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.hbar-lbl {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hbar-track {
  height: 8px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.hbar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-pill);
}

.hbar-val {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
  text-align: right;
}

/* --------------------------------------------------------
   PROGRESS (jadval katagida: chiziq + foiz yozuvi)
   Markup: .progress > .progress-bar + span
   Ikkalasi bir grid katakda turadi, ::before esa trek vazifasini bajaradi.
   -------------------------------------------------------- */
.progress {
  display: grid;
  grid-template-columns: minmax(60px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 110px;
}

.progress::before {
  content: "";
  grid-area: 1 / 1;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}

.progress-bar {
  grid-area: 1 / 1;
  height: 6px;
  max-width: 100%;
  border-radius: var(--r-pill);
  background: var(--primary);
}

.progress > span {
  grid-area: 1 / 2;
  font-family: var(--font-num);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

/* ============================================================
   JADVALLAR VA BELGILAR
   ============================================================ */

/* ---------- Jadval qobig'i ---------- */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  /* Keng jadval O'Z ICHIDA suriladi — sahifa tanasi yon tomonga surilmasin */
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* .table-wrap.card holatida chegara ikki marta chizilmasin */
/* .card.table-wrap qoidasi 03-cards da — bu yerda takrorlanmaydi. */

.table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--text);
}

/* ---------- Sarlavha qatori ---------- */
/* 11px KATTA HARFLI yozuv asos faylda berilgan — bu yerda faqat fon, chegara, yopishish */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
  /* border-collapse: collapse da yopishgan katakning chegarasi yo'qoladi — shuning uchun inset soya */
  box-shadow: inset 0 -1px 0 var(--border);
}

/* ---------- Kataklar ---------- */
.table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-variant-numeric: tabular-nums; /* ustunlar tik tursin */
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover td {
  background: var(--surface-2);
}

/* Bosiladigan qator */
tr.clickable {
  cursor: pointer;
}
tr.clickable:hover td {
  background: var(--primary-soft);
}

/* ---------- Raqamli ustunlar ---------- */
.table .r,
.table td.r,
.table th.r {
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  /* Summa "110 000 / so'm" bo'lib ikki qatorga bo'linmasin.
     Jadval sig'masa .table-wrap o'zi aylanadi. */
  white-space: nowrap;
}
.table .c,
.table th.c {
  text-align: center;
}
.table .l,
.table th.l {
  text-align: left;
}

/* ---------- Maxsus ustunlar ---------- */
.col-check {
  width: 40px;
  text-align: center;
  padding-right: 0;
}
.col-branch {
  text-align: center;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inv-check,
.emp-check,
#inv-check-all,
#emp-check-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
  vertical-align: middle;
}
.inv-check:focus-visible,
.emp-check:focus-visible,
#inv-check-all:focus-visible,
#emp-check-all:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 4px;
}

/* ---------- JAMI qatori ----------
   app.js JAMI qatorini inline style bilan yasaydi (border-top + font-weight),
   shuning uchun uni atribut bo'yicha topamiz. Fon MAJBURIY: avval oq fonda
   oq matn bo'lib ko'rinmay qolgan edi. */
.table tbody tr[style*="border-top"] > td {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  /* inline rang rgba(0,0,0,...) — qorong'u rejimda ko'rinmaydi, shuning uchun majburiy almashtiramiz */
  border-top-color: var(--border-2) !important;
}
.table tbody tr[style*="border-top"]:hover > td {
  background: var(--surface-2);
}

/* JAMI blok / chek sarlavhasi (ekranda ham, chek oynasida ham ishlatiladi) */
.ttl {
  text-align: center;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.tot {
  margin-top: 8px;
  text-align: right;
  line-height: 1.6;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}
/* JAMI qator sinf orqali berilsa ham to'g'ri ko'rinsin */
tr.tot > td,
td.tot {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  border-top: 2px solid var(--border-2);
}

/* ---------- Belgilar (badge) ---------- */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--text-2);
}
/* Fon va matn DOIM bitta juftlikdan */
.badge.ok  { background: var(--green-soft); color: var(--green); }
.badge.in  { background: var(--green-soft); color: var(--green); } /* kirim — ok bilan bir juftlik */
.badge.low,
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.badge.out { background: var(--red-soft);   color: var(--red); }
.badge.new { background: var(--blue-soft);  color: var(--blue); }
.badge.bonus { background: var(--purple-soft); color: var(--purple); }

/* 0 qolgan mahsulot qatori xiraroq — bor tovarga xalaqit bermaydi,
   lekin ro'yxatdan yo'qolmaydi. Sichqoncha kelsa to'liq ko'rinadi. */
#inv-tbody tr.row-out { opacity: .5; }
#inv-tbody tr.row-out:hover { opacity: 1; }

/* ---------- Qarz muddati ---------- */
.pay-due-row {
  display: grid;
  gap: 6px;
  padding: 10px 0 2px;
  border-top: 1px dashed var(--border);
  margin-top: 6px;
}
.pay-due-row > label { font-size: 13px; color: var(--text-2); }
.pay-due-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pay-due-controls input[type="date"] { max-width: 170px; }
.pay-due-quick { display: flex; gap: 6px; }
.pay-due-quick button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
}
.pay-due-quick button:hover { border-color: var(--primary); color: var(--primary); }
.pay-due-quick button.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Aralash to'lov (yarmi naqd, yarmi karta) ---------- */
.pay-split {
  display: grid;
  gap: 8px;
  margin: 10px 0 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.pay-split-row {
  display: grid;
  grid-template-columns: 1fr 150px;
  align-items: center;
  gap: 10px;
}
.pay-split-row label { font-size: 13px; color: var(--text-2); }
.pay-split-row input { text-align: right; }
.pay-split-info { font-size: 13px; text-align: right; padding-top: 2px; }

/* ---------- Parol maydonidagi 👁 (ko'rsatish/yashirish) ---------- */
.pass-wrap { position: relative; }
.pass-wrap input { width: 100%; padding-right: 42px; }
.pass-eye {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 6px 8px;
  opacity: .55;
}
.pass-eye:hover { opacity: 1; }

/* ---------- Ustama / marja foizi ---------- */
.mk {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--text-2);
}
/* To'q matn rangi — avval juda och bo'lib o'qilmagan edi */
.mk.good { background: var(--green-soft); color: var(--green); }
.mk.neg  { background: var(--red-soft);   color: var(--red); }

/* ---------- Manba belgisi (Kassa / Seyf) ---------- */
.src-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--text-2);
}
.src-kassa { background: var(--amber-soft); color: var(--amber); }
.src-seyf  { background: var(--blue-soft);  color: var(--blue); }

/* ---------- Belgi tugmasi ---------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-2);
  border-radius: var(--r-sm);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { background: var(--surface-3); }
.icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ---------- Katakcha (checkbox) yorlig'i ---------- */
.chk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.chk input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
  flex: none;
}
.chk input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 4px;
}

/* ---------- POS chiplari ---------- */
.pos-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-family: inherit;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.pos-chip:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.pos-chip b {
  color: var(--primary);
  font-weight: 650;
}
/* Mijoz majburiy, lekin tanlanmagan — kassir to'lovga borgunicha ko'rsin */
.pos-chip.need {
  border-color: var(--amber);
  background: var(--amber-soft);
  color: var(--amber);
}
.pos-chip.need b {
  color: var(--amber);
}

/* Mijoz oynasidagi eslatma */
.cust-req-hint {
  padding: 8px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--amber);
  border-radius: var(--r-sm);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 13px;
  font-weight: 600;
}
.pos-chip:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
/* Qarzdorlar chipi — ma'no rangi (asosiy rangdan alohida) */
.pos-debtors-chip b {
  color: var(--red);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ---------- Jadval ichidagi maydonlar ---------- */
.num-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  text-align: right;
}
/* Jadval ichidagi ixcham maydon */
.mini-inp {
  width: 100%;
  min-width: 64px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  text-align: right;
}
.num-input:focus-visible,
.mini-inp:focus-visible,
.pimp-inp:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
/* Raqam maydonidagi o'q tugmachalari joyni yeydi */
.mini-inp[type="number"]::-webkit-outer-spin-button,
.mini-inp[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mini-inp[type="number"] { -moz-appearance: textfield; }

/* ---------- Import tekshiruv jadvali ---------- */
.pimp-table td { padding: 6px 8px; }
.pimp-table thead th { padding: 8px; }

.pimp-inp {
  width: 100%;
  min-width: 70px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.pimp-inp.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Xato / ogohlantirish kataklari */
.cell-err,
.pimp-inp.cell-err {
  border: 1px solid var(--red);
  background: var(--red-soft);
  color: var(--red);
}
.cell-warn,
.pimp-inp.cell-warn {
  border: 1px solid var(--amber);
  background: var(--amber-soft);
  color: var(--amber);
}
td.cell-err { color: var(--text); }

.pimp-err {
  background: var(--red-soft);
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
}
#pimp-errmsg:empty { display: none; }

/* Import sabablari: nima uchun katak belgilangani ochiq yoziladi */
#pimp-errmsg {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pimp-err ul, .pimp-note ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-weight: 500;
}
.pimp-err li, .pimp-note li { margin-top: 2px; }

.pimp-note {
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
}
/* Xato emas, xabar: qo'shiladigan taminotchilar */
.pimp-note.ok {
  background: var(--green-soft);
  border-color: var(--green);
  color: var(--green);
}
/* Excel buzgan shtrix uchun yechim matni */
.pimp-fix {
  margin: 8px 0 0;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-2);
}

/* Bazada yo'q taminotchi — bu ogohlantirish EMAS, u qo'shiladi */
.pimp-inp.cell-new {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
}

/* ---------- Mijoz importi: qarzni ko'chirish tanlovi ---------- */
/* ---------- "Kunlik" qatori (mijoz ro'yxati pastida) ---------- */
/* Ro'yxatdan ajralib tursin: bu mijoz emas, ataylab qilinadigan tanlov. */
.pick-item.walkin {
  margin-top: 8px;
  border-top: 1px dashed var(--border-2);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.pick-item.walkin b { color: var(--text-2); }
.pick-item.walkin.active b { color: var(--primary); }

/* ---------- Umumiy hisobot (MDokon uslubi) ---------- */
/* 4 ta katta karta: chap tomonida rangli chiziq, katta raqam */
.sum-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.sumc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-2);
  border-radius: var(--r-md, 12px);
  padding: 16px 18px;
  min-width: 0;
}
.sumc-blue { border-left-color: var(--blue, #2952CC); }
.sumc-green { border-left-color: var(--green); }
.sumc-red { border-left-color: var(--red); }
.sumc-amber { border-left-color: var(--amber); }
.sumc-lbl {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 8px;
}
.sumc-val {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
.sumc-val.neg, .sum-table .neg, .sumc-sub .neg { color: var(--red); }
.sumc-val.pos, .sum-table .pos, .sumc-sub .pos { color: var(--green); }
.sumc-val.amb, .sum-table .amb { color: var(--amber); }
.sumc-sub { font-size: 12.5px; color: var(--text-2); }
.sumc-sub b { color: var(--text); }
.sumc-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
  color: var(--text-2);
}

/* To'lov tuzilmasi: yig'ma chiziq + belgi */
.sum-stack {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  gap: 2px;
  margin: 6px 0 10px;
}
.sum-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11.5px;
  color: var(--text-2);
}
.sum-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
.sum-legend b { color: var(--text); }

/* O'rta qator: kanallar + diagramma */
.sum-mid {
  display: grid;
  grid-template-columns: minmax(300px, 2fr) minmax(320px, 3fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) { .sum-mid { grid-template-columns: 1fr; } }

/* Kanal qatori */
.sum-ch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.sum-ch:last-child { border-bottom: 0; }
.sum-ch-badge {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: center;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.sum-ch-mid { flex: 1 1 auto; min-width: 0; }
.sum-ch-top { font-size: 13px; margin-bottom: 5px; }
.sum-ch-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.sum-ch-bar span { display: block; height: 100%; border-radius: 999px; }
.sum-ch-val {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Kunlik sof foyda diagrammasi */
.sum-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
}
.sum-bar-col { flex: 1 1 0; min-width: 0; text-align: center; }
.sum-bar-area {
  height: 116px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sum-bar-area span {
  display: block;
  width: 70%;
  min-width: 3px;
  border-radius: 3px 3px 0 0;
}
.sum-bar-area .pb { background: var(--green); }
.sum-bar-area .nb { background: var(--red); }
.sum-bar-lbl {
  font-size: 9.5px;
  color: var(--text-2);
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
}
.sum-bar-range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-2);
  margin-top: 6px;
}

/* Ustun guruhi tanlagichlari */
.sum-head { flex-wrap: wrap; gap: 10px; }
.sum-dim { font-size: 12px; font-weight: 500; color: var(--text-2); }
.sum-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sum-chip {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.sum-chip:hover { border-color: var(--border-2); }
.sum-chip.on {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

/* Guruhlangan jadval */
.sum-table { font-size: 12.5px; }
.sum-table td, .sum-table th { padding: 7px 9px; white-space: nowrap; }
.sum-table td.r, .sum-table th.r { text-align: right; }
.sum-table .sum-ghead th {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--text-2);
  border-bottom: 0;
  padding-bottom: 2px;
}
/* Guruhlar orasidagi ingichka ajratkich */
.sum-table th.gsep, .sum-table td.gsep { border-left: 1px solid var(--border); }
.sum-table tr.sum-idle td { color: var(--text-2); opacity: .5; }
.sum-date { white-space: nowrap; }
.sum-wd { color: var(--text-2); font-size: 10.5px; font-weight: 500; margin-left: 3px; }

/* Jadval ostidagi izohlar */
.sum-notes { margin-top: 12px; display: grid; gap: 8px; }
.sum-note {
  padding: 9px 12px;
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 12px;
  color: var(--text-2);
}

/* ---------- Taklif va shikoyat ---------- */
/* Holat rangi: yangi — diqqat tortadi, hal qilingani — tinch. */
.fb-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.fb-badge.fb-new { background: var(--red-soft); color: var(--red); }
.fb-badge.fb-seen { background: var(--amber-soft); color: var(--amber); }
.fb-badge.fb-done { background: var(--green-soft); color: var(--green); }
/* Uzun matn ustunni cho'zib yubormasin */
.fb-text {
  max-width: 380px;
  white-space: normal;
  word-break: break-word;
}
/* Amallar tugmalari qatorga sig'sin — uch tugma ikki qatorga bo'linardi */
#fb-tbody td:last-child { white-space: nowrap; }

/* Tarixdagi izoh ustuni ham shunday */
.hist-note {
  max-width: 320px;
  white-space: normal;
  word-break: break-word;
  color: var(--text-2);
  font-size: 12.5px;
}

.cimp-debt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.cimp-debt-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}


/* ============================================================
   03 — FORMALAR, TUGMALAR, MODALLAR
   Markup manbasi: index.html (912–1499), app.js (renderRoles,
   renderCustomerList, renderIcSuggest, labelHtml, toast)
   ============================================================ */

/* ---------- 1. MAYDONLAR (input / select / textarea) ---------- */

/* checkbox va radio bu qoidadan chetda: ular o'z o'lchamini saqlashi kerak */
/* :where() bilan o'ralgan — kuchi NOL. Aks holda bu qoida .search (36px),
   .per-date (30px), .mini-inp (30px), .num-input va .pimp-inp ni bosib ketadi
   va davr tanlagichi bilan jadval maydonlari buziladi. */
:where(input:not([type="checkbox"]):not([type="radio"]), select, .select, textarea) {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  /* fon va matn ATAYIN tokendan: aks holda qorong'u rejimda
     brauzer select uchun o'zining oq maydonini chizadi */
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.2;
  transition: border-color .12s, box-shadow .12s;
}

select,
.select {
  padding-right: 8px; /* tizim strelkasi uchun joy */
  cursor: pointer;
}

/* Firefox/Windows'da ochilgan ro'yxat ham tema ranglarida qolsin */
option {
  background: var(--surface);
  color: var(--text);
}

textarea {
  height: auto;
  min-height: 92px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}

input::placeholder,
textarea::placeholder { color: var(--muted); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Raqamli maydonlar ustunda tik tursin */
input.num-input,
input[type="number"] {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ---------- 2. TUGMALAR ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:not(:disabled):hover {
  background: var(--surface-3);
  border-color: var(--border-2);
}

.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.btn.primary:not(:disabled):hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-2);
}
.btn.ghost:not(:disabled):hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}

/* Qaytarib bo'lmaydigan amal — ko'zga tashlansin */
.btn.danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn.danger:not(:disabled):hover { filter: brightness(1.08); }

.btn.big { height: 44px; padding: 0 20px; font-size: 15px; }
.btn.sm  { height: 30px; padding: 0 12px; gap: 6px; font-size: 13px; }

.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 3. FORMA TUZILISHI ---------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* input + yonidagi generatsiya tugmasi (artikul, barcode, kategoriya) */
.inp-gen { display: flex; gap: 6px; }
.inp-gen > input,
.inp-gen > select { flex: 1 1 auto; min-width: 0; }

.gen-btn {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.gen-btn:hover { background: var(--surface-3); border-color: var(--border-2); }

/* Savatdagi chegirma: kichik maydon + birlik tanlagich */
.disc-input { display: flex; align-items: center; gap: 6px; }
.disc-input input {
  width: 96px;
  height: 32px;
  padding: 0 8px;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.disc-input select,
.disc-input .select {
  width: 74px;
  height: 32px;
  padding: 0 4px 0 8px;
  font-size: 13px;
}

/* Hisoblangan ustama/marja — faqat o'qish uchun maydon ko'rinishi */
.markup-box {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
}
.markup-box.good { background: var(--green-soft); border-color: transparent; color: var(--green); }
.markup-box.low  { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.markup-box.neg  { background: var(--red-soft);   border-color: transparent; color: var(--red); }

/* Forma ichidagi ajratilgan bloklar (filial qoldiqlari, yangi mijoz) */
.stock-box,
.cust-add-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.stock-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 650;
}
.cust-add-box .btn { align-self: flex-start; }

/* ---------- 4. MODAL ---------- */

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: 20px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
}
/* app.js modalni .open sinfi bilan ochadi (classList.add("open")) */
.modal-backdrop.open {
  display: flex;
  animation: fade .12s ease-out;
}

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: pop .16s ease-out;
}
.modal-lg { max-width: 900px; }

/* Faqat tana aylanadi, sarlavha joyida qoladi */
.modal > .form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  font-size: 16px;
  line-height: 1.3;
}

.modal-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ---------- 5. DETAL MODAL ICHIDAGI BLOKLAR ---------- */

/* #detail-body oddiy oqim (flex emas), shuning uchun bu yerda margin kerak */
.detail-h {
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 650;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
}
.detail-meta b {
  color: var(--text);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.detail-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
}
.detail-total b {
  color: var(--text);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 650;
}

/* ---------- 6. TOAST ---------- */

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 300;
  max-width: 340px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
}
/* app.js: el.className = "toast show " + type ("success" | "error") */
.toast.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.toast.success { border-left-color: var(--green); }
.toast.error   { border-left-color: var(--red); }

/* ---------- 7. ROLLAR VA HUQUQLAR ---------- */

.roles-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.role-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.role-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.role-head h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 15px;
}
.role-head > div {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
}

.role-pages {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}

/* ---------- 8. ZAXIRA NUSXALAR / ISH KUNLARI ---------- */

.snap-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.snap-list > .muted { padding: 12px; font-size: 13px; }

.snap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.snap-row:last-child { border-bottom: 0; }

.days-row { display: flex; flex-wrap: wrap; gap: 6px; }

.day-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.day-btn:hover { background: var(--surface-2); }
.day-btn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

/* ---------- 9. KASSA KIRIM/CHIQIM PEREKLYUCHATELI ---------- */

.co-type-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.co-tbtn {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.co-tbtn:hover { color: var(--text); }
.co-tbtn.active {
  background: var(--primary-soft);
  color: var(--primary);
}

/* ---------- 10. TANLASH RO'YXATLARI (sotuvchi / mijoz / qarzdor) ---------- */

.pick-list {
  display: flex;
  flex-direction: column;
  /* 46vh da oyna ekranning yarmidan oshib ketardi va pastdagi "yangi
     mijoz" bloki ko'rinmay qolardi. Ro'yxat baribir aylanadi. */
  max-height: 30vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

/* Modal ichidagi qidiruv maydoni CHO'ZILMASIN.
   .search da "flex: 1 1 240px" bor — u gorizontal toolbar uchun
   yozilgan. Modal formasi esa USTUN yo'nalishida: o'sha qoida
   240px ni BALANDLIK deb oladi va maydon butun oynani egallab
   ketardi (mijoz tanlash oynasi shundan katta bo'lib ketgandi). */
.modal .form > .search,
.modal .form .search {
  flex: 0 0 auto;
  height: 36px;
}

/* Mijoz/sotuvchi tanlash qatorlari ixchamroq */
.pick-list > .pick-item { padding: 8px 12px; font-size: 13.5px; }
.pick-list > .pick-item .sp-meta { font-size: 10.5px; }

.pick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  cursor: pointer;
  transition: background .12s;
}
.pick-item:last-child { border-bottom: 0; }
.pick-item:hover { background: var(--surface-2); }
.pick-item.active {
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: inset 3px 0 0 var(--primary);
}

/* ---------- 11. SKANER KARTALARI VA TAKLIFLAR ---------- */

.scan-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Yakunlash tugmasi kartaning butun enini egallamasin */
.scan-card > .btn { align-self: flex-start; }

.scan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.scan-row > input { flex: 1 1 260px; min-width: 0; }
.scan-row > select { flex: 0 0 auto; width: auto; min-width: 180px; }

.scan-suggest {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
/* app.js qidiruv bo'sh bo'lsa innerHTML=""; bo'sh ramka ko'rinmasin */
.scan-suggest:empty { display: none; }

.suggest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  cursor: pointer;
  transition: background .12s;
}
.suggest-item:last-child { border-bottom: 0; }
.suggest-item:hover { background: var(--surface-2); }
.suggest-item.new { color: var(--primary); font-weight: 600; }

/* ---------- 12. ETIKETKA KO'RINISHI ---------- */
/* DIQQAT: bu yagona blok, u yerda qattiq oq/qora ATAYIN ishlatilgan.
   Etiketka printerga chiqadi va app.js dagi barcodeSVG qora (#000) chiziq
   chizadi — shuning uchun oldindan ko'rish tema bilan o'zgarmasligi shart. */
.label-preview {
  display: flex;
  justify-content: center;
  padding: 16px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-sm);
  background: #FFFFFF;
  color: #000000;
}
.label-preview .lbl {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 150px;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 6px;
  text-align: center;
}
.label-preview svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.label-preview .lbl-name  { font-size: 12px; font-weight: 700; line-height: 1.2; }
.label-preview .lbl-attr  { font-size: 10px; color: rgba(0, 0, 0, .55); }
.label-preview .lbl-code  { font-size: 11px; letter-spacing: 1px; font-family: var(--font-num); }
.label-preview .lbl-price { font-size: 14px; font-weight: 800; }

/* ---------- 13. KLAVIATURA FOKUSI ---------- */

.btn:focus-visible,
.gen-btn:focus-visible,
.modal-close:focus-visible,
.day-btn:focus-visible,
.co-tbtn:focus-visible,
.pick-item:focus-visible,
.suggest-item:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ==========================================================================
   SAVDO (POS) · CHEK · SMENA YOPISH · AKSIYA · BONUS
   ========================================================================== */

/* ---------- 1. POS maydoni: ikki ustun ---------- */

.sales-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 14px;
  align-items: start;
}

/* Ustunlar: chapda savat, o'ngda hisob-kitob. Mahsulot ro'yxati bu
   yerdan olib tashlandi — u endi qidiruv ostida ochiladi (08-bo'lim). */
@media (max-width: 1100px) {
  .sales-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 2. Mahsulot tanlash ro'yxati ---------- */

.sales-product-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Karta ichki tekislanishini buzmasdan chekkagacha aylantirish */
  margin: 0 -4px;
  padding: 0 4px;
}

.sp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.sp-item:last-child { border-bottom: 0; }

.sp-item:hover { background: var(--surface-2); }

.sp-item.disabled {
  opacity: .5;
  cursor: not-allowed;
}

.sp-item.disabled:hover { background: transparent; }

.sp-item > :first-child { min-width: 0; }

.sp-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.35;
}

/* .sp-meta ilovada hamma joyda ikkilamchi qator sifatida ishlatiladi,
   shuning uchun asosi neytral; KATTA HARF faqat POS qatorida. */
.sp-meta {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}

.sp-item .sp-meta {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sp-price {
  flex-shrink: 0;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
}

/* ---------- 3. Savat ---------- */

.cart-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.cart-item:last-child { border-bottom: 0; }

.ci-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.ci-name small {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.ci-sum {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 650;
  text-align: right;
  min-width: 84px;
  white-space: nowrap;
}

.qty-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.qty-ctrl button {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.qty-ctrl button:hover {
  background: var(--surface-3);
  color: var(--text);
}

.qty-ctrl button:focus-visible { box-shadow: var(--ring); }

.qty-ctrl span {
  min-width: 24px;
  text-align: center;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 650;
}

.cart-note {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
}

.cart-note:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

/* ---------- 4. Savat yakuni ---------- */

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.cs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}

.cs-row > :last-child {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
}

.cs-disc .num-input {
  max-width: 88px;
  text-align: right;
  color: var(--green);
}

.cs-total {
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-weight: 600;
}

.cs-total > :last-child {
  font-size: 20px;
  font-weight: 700;
}

/* ---------- 5. To'lov / smena modallari (ikki ustunli grid) ---------- */

.form.pay-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.05fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 820px) {
  .form.pay-grid { grid-template-columns: minmax(0, 1fr); }
}

.pay-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.pay-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}

.pay-row > b {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
}

.pay-debt-row > b { color: var(--red); }

.pay-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pay-field > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

.pay-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pay-quick button {
  padding: 4px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.pay-quick button:hover {
  background: var(--surface-2);
  color: var(--text);
}

.pay-quick button:focus-visible { box-shadow: var(--ring); }

/* ---------- 6. To'lov usullari ---------- */

.pay-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.pay-m {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.pay-m:hover {
  background: var(--surface-2);
  color: var(--text);
}

.pay-m:focus-visible { box-shadow: var(--ring); }

.pay-m.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

/* Qaytarish — pul kassadan CHIQADI, shuning uchun ogohlantiruvchi sariq. */
.ret-m.active {
  border-color: var(--amber);
  background: var(--amber-soft);
  color: var(--amber);
}

/* ---------- 7. Qaytarish modali ---------- */

.ret-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.ret-debt-note {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- 8. CHEK (rc-*) ----------
   Bu blok qog'ozga chiqadigan chekning aynan ko'rinishi. U printerda
   oq qog'ozga qora siyoh bilan bosiladi, shuning uchun temaga ERGASHMAYDI —
   #fff / #000 shu yerda ataylab qattiq yozilgan. */

/* Chek QOG'OZGA chiqadi — temaga ergashmaydi. */
.pay-receipt,
.sc-report {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-num);
  font-size: 12px;
  line-height: 1.5;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  max-width: 320px;      /* 80mm chek eni */
  width: 100%;
  margin-inline: auto;
  overflow-x: auto;
}

.rc-shop {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}

.rc-sub {
  text-align: center;
  font-size: 11px;
  margin-top: 2px;
}

/* Chek turi — "SOTUV CHEKI" */
.rc-ttl {
  margin: 6px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}

/* Ajratgichlar. Chek qog'ozga chiqadi — rang temaga ERGASHMAYDI. */
.rc-hr { margin: 6px 0; border-top: 1px dashed var(--paper-line); }
.rc-hr2 { margin: 6px 0; border-top: 1px solid var(--paper-line); }

/* Sarlavha ma'lumotlari: chap yorliq, o'ng qiymat */
.rc-kv {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.rc-kv > :last-child { text-align: right; font-weight: 700; white-space: nowrap; }

/* Tovar: nomi o'z qatorida, ostida "miqdor × narx ... summa".
   Tor lentada (58mm) ustunli jadval nom va raqamni yopishtirib
   yuborardi — shuning uchun ikki qatorli ko'rinish. */
.rc-it { margin: 5px 0; }
.rc-it-n { font-weight: 700; word-break: break-word; }
.rc-it-q {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-left: 8px;
  font-variant-numeric: tabular-nums;
}
.rc-it-q > :last-child { white-space: nowrap; }

/* Smena yopish hisoboti shu ikkalasidan foydalanadi */
.rc-meta {
  padding: 8px 0;
  margin-top: 6px;
  border-top: 1px dashed var(--paper-line);
  border-bottom: 1px dashed var(--paper-line);
  font-size: 11px;
  line-height: 1.55;
}

.rc-sum,
.rc-line,
.sc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
}
.rc-sum > :last-child,
.rc-line > :last-child,
.sc-row > :last-child { white-space: nowrap; }

.rc-grand {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rc-grand > :last-child { white-space: nowrap; }

.rc-logo {
  display: block;
  margin: 0 auto 6px;
  max-width: 180px;
  max-height: 70px;
  height: auto;
}

.rc-total,
.sc-total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--paper-line);
  font-size: 14px;
  font-weight: 700;
}

.rc-foot {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

/* ---------- 9. Smena yopish hisoboti ---------- */

.sc-lines {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

/* Farq: ortiqcha — yashil, kamomad — qizil (JS .pos-in / .pos-out qo'yadi). */
.sc-diff-row > b {
  font-size: 14px;
}

.sc-diff-row .pos-in { color: var(--green); }
.sc-diff-row .pos-out { color: var(--red); }

/* ---------- 10. Aksiyalar ---------- */

.promo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 820px;
}

.promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.promo-card.off { opacity: .62; }

.promo-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.promo-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.promo-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Holat belgilari (pill). Markupda .promo-sched — "rejalashtirilgan" belgisi. */
.promo-live,
.promo-sched,
.promo-off {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.promo-live {
  background: var(--green-soft);
  color: var(--green);
}

.promo-sched {
  background: var(--amber-soft);
  color: var(--amber);
}

.promo-off {
  background: var(--surface-2);
  color: var(--muted);
}

/* ---------- 11. Bonus (sodiqlik) — binafsha oila ---------- */

.pay-bonus-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--purple-soft);
  border-radius: var(--r-sm);
  background: var(--purple-soft);
  color: var(--purple);
}

.bonus-head {
  font-size: 13px;
  font-weight: 600;
}

.bonus-head b {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.bonus-use {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bonus-use .num-input {
  max-width: 150px;
  text-align: right;
}

.bonus-earn {
  font-size: 12px;
  font-weight: 600;
  color: var(--purple);
}

.bonus-earn b {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.badge.bonus {
  background: var(--purple-soft);
  color: var(--purple);
  white-space: nowrap;
}


/* --------------------------------------------------------
   IMPORT: shablon qatori
   Tugma va tushuntirish yonma-yon; tor ekranda tushuntirish
   pastga tushadi.
   -------------------------------------------------------- */
.pimp-tpl-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.pimp-tpl-row > .btn { flex: 0 0 auto; }
.pimp-tpl-row > .muted {
  flex: 1 1 260px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

/* Import tekshiruv jadvali endi 10 ustunli — tor kataklar siqilmasin */
.pimp-table th, .pimp-table td { white-space: nowrap; }

/* Shu sababdan import oynasi boshqa oynalardan kengroq: 10 ta ustun
   900px ga sig'may, o'ng chetdagi "Yetkazib beruvchi" ko'rinmay qolardi. */
#pimport-modal > .modal { max-width: 1180px; }

/* ============================================================
   08 — SAVDO (POS): qidiruv ro'yxati va savat

   Avval mahsulotlar ro'yxati sahifada DOIM turardi va savatni
   pastga siqib qo'yardi. Endi Billz'dagi kabi: asosiy maydon —
   SAVAT, mahsulotlar esa qidiruvning ostida ochiladigan
   ro'yxatda chiqadi.
   ============================================================ */

/* --------------------------------------------------------
   QIDIRUV VA UNING OSTIDAGI RO'YXAT
   -------------------------------------------------------- */
.pos-search-wrap {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
}
.pos-search-wrap > .search { width: 100%; }

/* "/" eslatmasi — maydon ichida, o'ng chetda */
.pos-slash {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding: 2px 7px;
  border: 1px solid var(--border-2);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-num);
  font-size: 11px;
  line-height: 1.4;
  pointer-events: none;
}
.pos-search-wrap > .search:focus + .pos-slash { display: none; }

/* Ro'yxat qidiruv ustidan tushadi — sahifa joyini egallamaydi */
.pos-drop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(420px, 56vh);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.pos-drop:not(.open), .pos-drop:empty { display: none; }

/* Bitta qator: chapda nom + kod, o'ngda narx + QOLDIQ */
.pos-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.pos-row:last-child { border-bottom: 0; }
.pos-row:hover { background: var(--surface-2); }
/* Klaviatura bilan tanlangan qator. :hover dan kuchliroq turishi kerak —
   sichqoncha boshqa joyda tursa ham Enter SHU qatorni qo'shadi. */
.pos-row.sel {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}
/* Qidiruvda topilgan bo'lak */
.pos-row mark {
  background: var(--amber-soft);
  color: inherit;
  font-weight: 700;
  border-radius: 3px;
  padding: 0 1px;
}

.pos-row-l { min-width: 0; }
.pos-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pos-row-code {
  margin-top: 2px;
  font-family: var(--font-num);
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O'ng ustun: narx ustida, qoldiq ostida — mos namunadagi kabi */
.pos-row-r { text-align: right; flex: 0 0 auto; }
.pos-row-price {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.pos-row-qty {
  margin-top: 2px;
  font-family: var(--font-num);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
/* Qoldig'i tugagan tovar — bosib bo'lmaydi */
.pos-row.out { cursor: default; opacity: .55; }
.pos-row.out:hover { background: transparent; }
.pos-row-qty.zero { color: var(--red); }

.pos-more {
  padding: 9px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
}

/* --------------------------------------------------------
   SAVAT — endi asosiy maydonda
   -------------------------------------------------------- */
.sales-cart-main,
.sales-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.sales-cart-main {
  min-height: 420px;
  max-height: calc(100vh - 260px);
  overflow: hidden;
}

.cart-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-head > h2 { margin: 0; font-size: 15px; }
.cart-count {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Bo'sh savat — ekranning o'rtasida, nima qilish kerakligi bilan */
.cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 40px 20px;
  text-align: center;
}
.ce-ico { font-size: 34px; opacity: .5; }
.ce-title { font-size: 15px; font-weight: 650; color: var(--text-2); }
.ce-hint {
  max-width: 380px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------
   O'NG PANEL — chegirma, eslatma, hisob-kitob
   -------------------------------------------------------- */
.sales-side { gap: 14px; }

.side-block { display: flex; flex-direction: column; gap: 8px; }
.side-label {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-2);
}

/* Chegirma: maydon + turi ("%" / "so'm") */
.disc-row { display: flex; align-items: center; gap: 8px; }
.disc-inp {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  text-align: left;
}
.disc-inp:focus { background: var(--surface); }

/* Ikki holatli almashtirgich — ochiladigan ro'yxatdan tezroq */
.seg {
  display: flex;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.seg-btn {
  min-width: 46px;
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.seg-btn:hover { color: var(--text-2); }
.seg-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.seg-btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Tez chegirma tugmalari */
.disc-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.disc-quick > button {
  padding: 8px 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.disc-quick > button:hover { background: var(--surface-3); color: var(--text-2); }
.disc-quick > button.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.disc-quick > button:focus-visible { outline: none; box-shadow: var(--ring); }

/* Eslatma tugmasi — matn maydoni faqat kerak bo'lganda ochiladi */
.note-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--primary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background .14s;
}
.note-btn:hover { background: var(--surface-3); }
.note-btn.open { background: var(--primary-soft); }
.note-btn > .nb-plus {
  font-family: var(--font-num);
  font-size: 15px;
  line-height: 1;
}
.note-btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Hisob-kitob — alohida ajratilgan blok */
.side-total {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.st-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text-2);
}
.st-row > b {
  font-family: var(--font-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
}
.st-grand { margin-top: 2px; font-size: 15px; font-weight: 650; color: var(--text); }
.st-grand > b {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* To'lash: yozuv chapda, summa o'ngda — kassachi ko'z tashlab tekshiradi */
.pay-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.pay-btn > .pay-sum {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------
   TOR EKRANLAR
   -------------------------------------------------------- */
@media (max-width: 1100px) {
  .sales-cart-main { max-height: none; min-height: 260px; }
  .side-total { margin-top: 0; }
}

/* --------------------------------------------------------
   CHEK LOGOTIPI (sozlamalar)
   -------------------------------------------------------- */
.logo-box {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.logo-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 70px;
  padding: 6px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-sm);
  /* Logotip chekda OQ qog'ozga tushadi — ko'rinishi ham shunday bo'lsin */
  background: var(--paper);
  overflow: hidden;
}
.logo-prev > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Sotuvlar jadvalidagi amal tugmalari bir qatorda tursin */
.row-acts { white-space: nowrap; }
.row-acts > .btn { margin-right: 4px; }

/* «Barcha sotuvlar» jadvalining JAMI qatori.
   Rang token orqali — avval qattiq yozilgan rgba() edi va qorong'u
   temada chiziq ko'rinmasdi. */
.all-total-row > td {
  border-top: 2px solid var(--border-2);
  font-weight: 800;
  background: var(--surface-2);
}

/* Yangi versiya tayyor — kassachi qulay paytda bosadi.
   (Savat bo'sh bo'lsa dastur o'zi yangilanadi, bu tugma chiqmaydi.) */
.app-update-bar {
  position: fixed;
  z-index: 999;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 10px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.app-update-bar:hover { background: var(--primary-hover); }

/* Manfiy qoldiq ogohlantirishi — odatda ko'rinmaydi */
.neg-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--red);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  background: var(--red-soft);
  color: var(--red);
  font-size: 13.5px;
  font-weight: 600;
}
.neg-bar > .sp-meta { flex: 1 1 200px; color: var(--red); text-transform: none; letter-spacing: 0; }
.neg-bar > .btn { margin-left: auto; }
#inv-neg:empty { display: none; }

/* ============================================================
   99 — YAKUNIY TUZATISHLAR
   6 bo'lim bir-birini ko'rmasdan yozilgan. Nazoratdan o'tkazilib,
   quyidagilar aniqlandi va shu yerda tuzatildi.
   ============================================================ */

/* --- Egasiz qolgan: savdo panellari almashinuvi --- */
/* Hech bir bo'lim yozmagan edi — natijada barcha panellar
   bir vaqtda ko'rinib qolardi. */
.sales-panel { display: none; }
.sales-panel.active { display: block; animation: fade .18s ease; }

/* --- Smena hisoboti EKRANDA, chek esa QOG'OZDA --- */
/* Ikkalasi bitta qoidani bo'lishadi. Chek qog'oz bo'lib qoladi;
   .sc-report esa oyna ichida ko'rinadi (app.js chop etishni printHtml
   bilan alohida qiladi), shuning uchun ekran ranglariga qaytariladi —
   aks holda qorong'u rejimda oq fonda oq matn chiqardi. */
.sc-report {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.sc-report .pos-in { color: var(--green); }
.sc-report .pos-out { color: var(--red); }

/* --- Qoplama tokenga o'tkazildi --- */
.modal-backdrop { background: var(--overlay); }

/* --- Chek atrofidagi chegara ham qog'oz oilasida qolsin --- */
/* Aks holda qorong'u rejimda oq chek atrofida quyuq halqa chiqadi. */
.pay-receipt { border-color: var(--paper-line); }

/* --- Chek ichidagi matn temaga ERGASHMASIN --- */
/* .ttl va .tot ekran uchun --text ishlatadi; chek oq qog'oz bo'lgani
   uchun qorong'u rejimda "oq fonda oq matn" chiqardi. */
.pay-receipt .ttl,
.pay-receipt .tot,
.pay-receipt .rc-total,
.pay-receipt .rc-sub { color: inherit; }
.pay-receipt .pos-in { color: var(--ink-green); }
.pay-receipt .pos-out { color: var(--ink-red); }

/* --- Etiketka ham qog'oz --- */
.label-preview { background: var(--paper); color: var(--ink); }

/* --- Kontrast: "sokin" matnlar juda och edi --- */
/* Bularning ichida O'QILISHI KERAK bo'lgan ma'lumot bor
   (ustama foizi, smena holati, aksiya muddati), shuning uchun
   --muted emas, --text-2 darajasiga ko'tarildi. */
.badge,
.mk,
.src-badge,
.shift-closed,
.markup-box,
.promo-off { color: var(--text-2); }

/* --- Ko'rinmas chegaralar --- */
/* Fon bilan bir xil rangdagi chegara ma'nosiz edi. */
.lang-btn.active { border-color: var(--primary); }
.pay-bonus-box { border-color: var(--purple); }

/* --- Faol tanlov ichidagi mayda matn ham ergashsin --- */
.pick-item.active .sp-meta { color: inherit; opacity: .75; }

/* --- Balandlik shkalasi: 38 / 32 / 26 --- */
/* .toolbar ichida 36px qidiruv yonida 38px tugma turib,
   qator tekislanmasdi. */
.search,
.branch-select,
.icon-act { height: 38px; }
.icon-act { width: 38px; }

/* --- Qo'shni hisobot bloklari orasi ikki marta qo'shilardi --- */
/* .rep-panel gap + .report-block margin-top = 32px. */
.report-block + .report-block { margin-top: 0; }

/* --- Uzun formada "Saqlash" tugmasi pastga surilib ketardi --- */
.modal-actions {
  position: sticky;
  bottom: 0;
  background: var(--surface);
}

/* --- Klaviatura fokusi ikki marta chizilardi --- */
/* Ba'zi joylarda outline o'chirilmagan edi: brauzerning o'z konturi
   ustiga bizning halqa ham qo'shilib ko'rinardi. */
.qty-ctrl button:focus-visible,
.pay-quick button:focus-visible,
.pay-m:focus-visible { outline: none; }

/* --- Chop etishda faqat kerakli qism qog'ozga chiqsin --- */
@media print {
  .sidebar, .topbar, .period-bar, .dsh-filters, .dsh-tabs, .dsh-legend,
  .toolbar, .modal-actions, .toast { display: none !important; }
  .content { padding: 0; }
  body { background: var(--paper); color: var(--ink); }
}

/* --- Egasiz qolgan: savdo yuqori qatori --- */
/* Qidiruv maydoni + sotuvchi/mijoz/qarzdor tugmalari bir qatorda.
   Tor ekranda qidiruv butun enni oladi, tugmalar pastga tushadi. */
.pos-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.pos-toolbar .search { flex: 1 1 240px; }

/* --- Toolbar ichidagi tanlagichlar butun enni egallamasin --- */
/* Umumiy maydon qoidasi width:100% beradi (modal formalar uchun to'g'ri),
   lekin toolbar bir qatorli: qidiruv cho'ziladi, filtrlar o'z enida qoladi,
   tugmalar o'ngga suriladi. */
.toolbar > .select,
.toolbar > select {
  flex: 0 1 auto;
  width: auto;
  min-width: 160px;
  max-width: 240px;
}
.toolbar > .btn { flex: 0 0 auto; }
/* Tugmalar o'ng chetga */
.toolbar > .btn:first-of-type { margin-left: auto; }

/* --- Kecha ochilib qolgan smena ogohlantirishi --- */
/* Ikki kunlik naqd bitta smenaga qo'shilsa soxta kamomad chiqadi,
   shuning uchun ko'zga tashlanishi kerak. */
.shift-stale {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 12px;
  font-weight: 650;
}

/* ============================================================
   SINXRONLASH HOLATI
   Kassir bir qarashda "yuborildimi yoki navbatdami" ni ko'rishi kerak.
   ============================================================ */
.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: default;
  font-variant-numeric: tabular-nums;
}
.sync-badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: currentColor;
  flex-shrink: 0;
}
.sync-badge.on   { color: var(--green); background: var(--green-soft); border-color: transparent; }
.sync-badge.off  { color: var(--amber); background: var(--amber-soft); border-color: transparent; }
.sync-badge.busy { color: var(--blue);  background: var(--blue-soft);  border-color: transparent; }
.sync-badge.none { color: var(--muted); }
.sync-badge.busy::before { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* Sozlamalardagi holat jadvali */
#sync-info .cs-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
#sync-info .cs-row + .cs-row { border-top: 1px solid var(--border); }
#sync-info .cs-row b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* --- Xotira to'ldi ogohlantirishi (bloklovchi) --- */
/* Avval bu holat JIMGINA yuz berardi va kassir bilmasdan sotishda
   davom etardi. Endi ko'rmay ilojisi yo'q. */
.quota-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  padding: 14px 20px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .25);
}
.quota-banner b { font-weight: 700; }

/* ============================================================
   TIK RITM — sahifa ichidagi bloklar yopishib qolmasin
   Muammo: .page, .tab-panel va .sales-panel `display:block` edi,
   .card da esa margin yo'q (ichki bo'shliq gap orqali beriladi).
   Natijada kartalar bir-biriga tegib turardi.
   .rep-panel/.fin-panel/.comp-panel da bu allaqachon to'g'ri edi —
   qolganlarini ham o'shanga keltiramiz.
   ============================================================ */
.page.active,
.tab-panel.active,
.sales-panel.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Flex ichida kenglik cheklovi bo'lgan kartalar cho'zilib ketmasin */
.page.active > .card[style*="max-width"],
.tab-panel.active > .card[style*="max-width"] { align-self: flex-start; width: 100%; }

/* Sahifa sarlavhasi ostidagi bo'shliq gap orqali beriladi */
.page.active > .page-head { margin-bottom: 0; }

/* Sinxronlash holati qatorlari orasida ham nafas bo'lsin */
#sync-info .cs-row { padding: 8px 0; }

/* --- Sozlamalar: guruh sarlavhalari --- */
/* Kartalar avval tasodifiy tartibda edi. Endi mantiqiy guruhlar bor:
   shaxsiy → do'kon ishi → tizim → ehtiyot bo'ling. */
.page.active > .sec-divider {
  margin-top: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
/* Qaytarib bo'lmaydigan amallar — ko'zga tashlansin */
.sec-divider.danger { color: var(--red); border-bottom-color: var(--red); }
.sec-divider.danger + .card { border-color: var(--red); }


/* ============================================================
   07 — BOSHQARUV PANELI (analitik dizayn)

   Panel oltita rangli ko'rsatkich kartasi, prognoz bloki, ikki
   qatorli grafik, to'rtta "top mahsulot" paneli va reyting
   jadvalidan iborat.

   IKKI QOIDA:
   1) Rang FAQAT token orqali. Har blok o'z aksentini --sc / --sc-soft
      juftligidan oladi; SVG ichida esa currentColor ishlatiladi —
      shunda gradient va chiziq kartaning rangiga o'zi ergashadi va
      qorong'u temada ham to'g'ri chiqadi.
   2) Aksent rangi SINF orqali beriladi (.k-blue ...), nth-child
      orqali EMAS: sotuvchiga ba'zi kartalar ko'rsatilmaydi va navbat
      bo'yicha rang berilsa qolganlarining rangi surilib ketardi.
   ============================================================ */

/* Aksent juftliklari — barcha panel bloklariga umumiy.
   Standart qiymat BU YERDA berilmaydi: agar .kpi/.tp ichida
   "--sc: var(--blue)" tursa, u xuddi shu og'irlikda (0,1,0) va faylda
   keyinroq bo'lgani uchun .k-green ni bosib ketardi — hamma karta ko'k
   chiqardi. Zaxira rang var() ning ikkinchi argumentida beriladi. */
.k-blue   { --sc: var(--blue);   --sc-soft: var(--blue-soft); }
.k-green  { --sc: var(--green);  --sc-soft: var(--green-soft); }
.k-purple { --sc: var(--purple); --sc-soft: var(--purple-soft); }
.k-teal   { --sc: var(--teal);   --sc-soft: var(--teal-soft); }
.k-amber  { --sc: var(--amber);  --sc-soft: var(--amber-soft); }
.k-red    { --sc: var(--red);    --sc-soft: var(--red-soft); }

/* --------------------------------------------------------
   FILTR QATORI — savdo nuqtasi · valyuta · davr
   -------------------------------------------------------- */
.dsh-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.dsh-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dsh-filter > label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.dsh-filter > select {
  height: 38px;
  min-width: 170px;
  max-width: 260px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.dsh-filter > select:hover:not(:disabled) { border-color: var(--border-2); }
.dsh-filter > select:disabled { color: var(--muted); cursor: default; }

/* Sana oralig'i faqat "Oraliq" davrida ko'rinadi (JS boshqaradi) */
.dsh-range { display: flex; align-items: center; gap: 6px; }
.dsh-lbl-dash { visibility: hidden; }

/* Sozlamaga o'tish tugmasi qatorning oxirida turadi */
.dsh-gear { margin-left: auto; align-self: flex-end; }

/* --------------------------------------------------------
   KO'RSATKICH KARTALARI (sparkline bilan)
   -------------------------------------------------------- */
.kpi-grid {
  display: grid;
  /* 180px — oltala karta odatdagi ish stolida (1440px va undan keng)
     BIR qatorga sig'ishi uchun. Kattaroq qiymatda 1500px da 5+1 bo'lib
     bo'linib ketardi. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}

/* Pastki ingichka chiziq — mavjud .stat-card bilan bir uslubda */
.kpi::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--sc, var(--blue));
  z-index: 1;
}

/* Aksent rangli hoshiya — dizaynning o'zagi.
   @supports SHART: ichida var() bo'lgani uchun color-mix li e'lon tahlil
   paytida to'g'ri deb qabul qilinadi va faqat HISOBLASH paytida yiqiladi.
   Bunday holatda xossa oldingi e'longa emas, o'zining ILK qiymatiga
   (currentColor) tushadi — ya'ni hoshiya matn rangida chiqib ketardi. */
@supports (border-color: color-mix(in srgb, red 34%, blue)) {
  .kpi { border-color: color-mix(in srgb, var(--sc, var(--blue)) 34%, var(--border)); }
}

.kpi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
  /* Ikki qatorlik joy DOIM band qilinadi: "SAVDO" bir qatorga,
     "O'RTACHA CHEK NARXI" ikki qatorga tushadi va qiymatlar
     kartalar bo'ylab bir chiziqda turmasdi. */
  min-height: 2.6em;
  min-width: 0;
}

.kpi-ico {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--sc-soft, var(--blue-soft));
  color: var(--sc, var(--blue));
}
.kpi-ico > svg { width: 16px; height: 16px; }

.kpi-val {
  font-family: var(--font-num);
  /* Karta enига moslashadi: 180px li ustunda ham "5 340 000 so'm"
     bir qatorda qolishi kerak. */
  font-size: clamp(17px, 1.3vw, 22px);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-val > small {
  margin-left: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}

.kpi-delta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.kpi-chip {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  color: var(--muted);
}
.kpi-chip.up   { background: var(--green-soft); color: var(--green); }
.kpi-chip.down { background: var(--red-soft);   color: var(--red); }

.kpi-cap {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sparkline kartaning pastki chetiga yopishadi */
.kpi-spark {
  margin: 0 -16px;
  color: var(--sc, var(--blue));
  line-height: 0;
}
.spark {
  display: block;
  width: 100%;
  height: 44px;
}

/* --------------------------------------------------------
   PROGNOZ + ASOSIY GRAFIK
   -------------------------------------------------------- */
.dsh-row2 {
  display: grid;
  grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.dsh-forecast { gap: 12px; }

.fc-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fc-ico {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary);
}
.fc-ico > svg { width: 18px; height: 18px; }
.fc-head > span { display: flex; flex-direction: column; min-width: 0; }
.fc-head b { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.fc-head small {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.fc-list { display: flex; flex-direction: column; }
.fc-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 0;
  /* Uzuq ajratgich — mos namunadagi kabi */
  border-bottom: 1px dashed var(--border);
}
.fc-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fc-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.fc-val {
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-val > small {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}

/* --- Grafik kartasi: tablar + izoh --- */
.dsh-chart-card { gap: 12px; min-width: 0; }

.dsh-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.dsh-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.dsh-tab {
  padding: 6px 13px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.dsh-tab:hover { background: var(--surface-2); color: var(--text); }
.dsh-tab.active { background: var(--primary-soft); color: var(--primary); }
.dsh-tab:focus-visible { outline: none; box-shadow: var(--ring); }

.dsh-legend { display: flex; align-items: center; gap: 14px; }
.dsh-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.dsh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dsh-dot.now  { background: var(--primary); }
.dsh-dot.prev { background: transparent; border: 1.5px solid var(--muted); }

/* --- SVG grafik --- */
/* O'lchov BIR TEKIS: aks holda o'q yozuvlari cho'zilib ketardi. */
/* Juda tor ekranda grafik cheksiz siqilmasin: o'z idishida suriladi.
   overflow-x "auto" bo'lgani uchun test/layout.js buni "toshgan" deb
   belgilamaydi. */
#dash-chart { overflow-x: auto; }
.ch {
  display: block;
  width: 100%;
  min-width: 520px;
  /* Juda keng ekranda grafik (va u bilan birga o'q yozuvlari) haddan
     tashqari kattalashib ketardi. */
  max-width: 1400px;
  margin: 0 auto;
  height: auto;
  max-height: 360px;
  color: var(--primary); /* gradient va joriy oy chizig'i shundan oladi */
}
.ch-grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 5 6;
}
.ch-ylbl, .ch-xlbl {
  fill: var(--muted);
  font-family: var(--font-num);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ch-now  { stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
/* --border-2 ajratgich rangi: kontrasti ~1.5:1, ya'ni chiziq ko'rinmasdi.
   --muted mazmun uchun mo'ljallangan (yorug'da 4.7:1, qorong'uda 6.4:1). */
.ch-prev { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 7 7; stroke-linecap: round; opacity: .75; }
.ch-peak {
  fill: var(--primary);
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.ch-dot { fill: var(--surface); stroke: var(--primary); stroke-width: 2.5; }
/* Kun ustuni — brauzerning o'z maslahati (<title>) uchun sezgir maydon */
.ch-hit { fill: transparent; cursor: default; }
.ch-hit:hover { fill: var(--text); opacity: .055; }

/* --------------------------------------------------------
   TOP MAHSULOTLAR (4 ko'rsatkich)
   -------------------------------------------------------- */
.dsh-tops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 14px;
  align-items: start;
}

.tp {
  gap: 12px;
  min-width: 0;
}
.tp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.tp-title { font-size: 14px; font-weight: 650; min-width: 0; }
.tp-metric { color: var(--sc, var(--blue)); font-weight: 650; }

/* Ko'rinish almashtirgichi: miqdor / ulush */
.tp-tools { display: flex; gap: 4px; flex: 0 0 auto; }
.tp-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.tp-btn > svg { width: 14px; height: 14px; }
.tp-btn:hover { background: var(--surface-2); color: var(--text-2); }
.tp-btn.active {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary);
}
.tp-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.tp-list { display: flex; flex-direction: column; gap: 12px; }

.tp-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.tp-rank {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--sc-soft, var(--blue-soft));
  color: var(--sc, var(--blue));
  font-family: var(--font-num);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tp-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.tp-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.tp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tp-val {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
}

.tp-bar {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.tp-bar > i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--sc, var(--blue));
}

/* --------------------------------------------------------
   O'RNI — reyting jadvali
   -------------------------------------------------------- */
.dsh-rank { gap: 12px; }
.dsh-rank-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.dsh-rank-sub { font-size: 12px; }

#dash-rank-table th.c,
#dash-rank-table td.c { text-align: center; }

.rk-i {
  display: inline-block;
  min-width: 14px;
  font-family: var(--font-num);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.rk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--font-num);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Birinchi o'rin ko'zga tashlansin */
.rk-badge.top { background: var(--green-soft); color: var(--green); }

/* --------------------------------------------------------
   TOR EKRANLAR
   -------------------------------------------------------- */
/* SVG bir tekis miqyoslanadi (aks holda o'q yozuvlari cho'zilib ketardi),
   ya'ni matn ham grafik bilan birga kichrayadi. Grafik torayganda shrift
   viewBox ichida kattalashtiriladi — shunda ekrandagi o'lchami ~11-14px
   atrofida qoladi. Pog'onalar haqiqiy skrinshotlar bo'yicha tanlangan. */
@media (max-width: 1700px) {
  .ch-ylbl, .ch-xlbl, .ch-peak { font-size: 16px; }
}

@media (max-width: 1400px) {
  /* Prognoz grafik ustiga chiqadi — grafik butun kenglikni oladi */
  .dsh-row2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1250px) {
  .ch-ylbl, .ch-xlbl, .ch-peak { font-size: 19px; }
}

@media (max-width: 1000px) {
  /* Bundan kattaroq shrift chap bo'shliqqa sig'maydi — grafik shu
     yerdan boshlab o'z ichida suriladi (min-width). */
  .ch-ylbl, .ch-xlbl, .ch-peak { font-size: 22px; }
}

@media (max-width: 640px) {
  .dsh-filters { gap: 10px; }
  .dsh-filter { flex: 1 1 100%; }
  .dsh-filter > select { min-width: 0; max-width: none; width: 100%; }
  .dsh-gear { margin-left: 0; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .kpi { padding: 12px 13px 0; }
  .kpi-spark { margin: 0 -13px; }
  .dsh-chart-head { align-items: flex-start; }
}