/* ================================================
   MERX — style.css
   ================================================ */
:root{--sb:#0D1B2A;--acc:#E9A500;--acc2:#FEF3C7;--bg:#F2F0EB;--surf:#fff;
  --ink:#111827;--mut:#4B5563;--brd:#E5E7EB;--teal:#0D9488;--teal2:#CCFBF1;
  --red:#DC2626;--red2:#FEE2E2;--grn:#059669;--grn2:#D1FAE5;--blue:#2563EB;--blue2:#EFF6FF;
  --r:12px;--rs:8px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;margin:0;padding:0}
body{font-family:"DM Sans",sans-serif;font-size:14px;color:var(--ink);background:var(--bg)}
#app{display:flex;width:100%;height:100%}
h1,h2,h3,.num{font-family:"Sora",sans-serif}
#sb{width:232px;min-width:232px;background:var(--sb);height:100vh;display:flex;flex-direction:column;overflow-y:auto}
.logo{padding:20px 18px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.logo-m{background:var(--acc);color:#0D1B2A;font-family:"Sora";font-weight:700;font-size:14px;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-t{color:#fff;font-family:"Sora";font-weight:700;font-size:20px;letter-spacing:-.5px}
.logo-s{font-size:10px;color:rgba(255,255,255,.35);letter-spacing:.1em;text-transform:uppercase;display:block;margin-top:1px}
nav{padding:12px 10px;flex:1}
.ns{font-size:10px;color:rgba(255,255,255,.28);letter-spacing:.09em;text-transform:uppercase;font-weight:600;padding:10px 10px 5px}
.ns-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.ns-toggle:hover{color:rgba(255,255,255,.5)}
.ns-arr{font-size:12px;transition:transform .2s;transform:rotate(0deg)}
.ns-toggle.open .ns-arr{transform:rotate(0deg)}
.ns-toggle:not(.open) .ns-arr{transform:rotate(-90deg)}
.ns-group{overflow:hidden;max-height:500px;transition:max-height .22s ease,opacity .18s ease;opacity:1}
.ns-group.ns-closed{max-height:0;opacity:0;pointer-events:none}
.ni{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.55);padding:10px 10px;border-radius:8px;cursor:pointer;transition:.13s;font-weight:500;font-size:13.5px;margin-bottom:1px}
.ni i{font-size:18px;width:20px;flex-shrink:0}
.ni:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.88)}
.ni.on{background:rgba(233,165,0,.14);color:var(--acc)}
.nb{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:20px;min-width:18px;text-align:center}
.sb-bot{padding:12px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:12px;color:rgba(255,255,255,.32)}
#main{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;overflow:hidden}
#topbar{display:flex;align-items:center;justify-content:space-between;padding:13px 24px;background:var(--surf);border-bottom:1px solid var(--brd);flex-shrink:0;gap:12px}
#ptitle{font-family:"Sora";font-size:17px;font-weight:600}
.tb-right{display:flex;align-items:center;gap:8px}
.tb-pill{background:var(--bg);border:1px solid var(--brd);border-radius:20px;padding:5px 13px;font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:5px;cursor:pointer}
.tb-pill:hover{border-color:var(--acc)}
#pages{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.pg{display:none;padding:22px 24px}.pg.on{display:block}
#p-pos.pg.on{display:flex;flex-direction:column;padding:0;flex:1;overflow:hidden;min-height:0}
#p-pos{display:none;padding:0}#p-pos.on{display:flex;height:100%;overflow:hidden}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.kpi{background:var(--surf);border:1px solid var(--brd);border-radius:var(--r);padding:16px 18px}
.kpi .kl{font-size:11px;color:#4B5563;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.kpi .kv{font-family:"Sora";font-weight:700;font-size:22px;line-height:1}
.kpi .ks{font-size:12px;color:var(--mut);margin-top:5px;display:flex;align-items:center;gap:4px}
.kpi-acc{border-top:3px solid var(--acc)}.kpi-teal{border-top:3px solid var(--teal)}
.kpi-red{border-top:3px solid var(--red)}.kpi-grn{border-top:3px solid var(--grn)}
.card{background:var(--surf);border:1px solid var(--brd);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.ch{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--brd);gap:10px;flex-wrap:wrap}
.ch h3{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;color:#374151;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:9px 16px;border-bottom:1px solid var(--brd);background:#FAFAF8;white-space:nowrap}
td{padding:10px 16px;border-bottom:1px solid var(--brd);font-size:13.5px;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#FAFAF8}
.empty-td{text-align:center;color:var(--mut);padding:32px!important}
.bg{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;gap:4px}
.bg-g{background:var(--grn2);color:#065F46}.bg-r{background:var(--red2);color:#991B1B}
.bg-a{background:var(--acc2);color:#92400E}.bg-gr{background:#F3F4F6;color:var(--mut)}
.bg-t{background:var(--teal2);color:#134E4A}.bg-b{background:var(--blue2);color:#1e40af}
.btn{font-family:inherit;font-size:13.5px;font-weight:600;border:none;border-radius:var(--rs);padding:9px 15px;cursor:pointer;transition:.13s;display:inline-flex;align-items:center;gap:6px}
.btn:active{transform:scale(.98)}
.btn-acc{background:var(--acc);color:#0D1B2A}.btn-acc:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--surf);border:1px solid var(--brd);color:var(--ink)}.btn-ghost:hover{background:var(--bg)}
.btn-teal{background:var(--teal);color:#fff}.btn-red{background:var(--red);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-sm{padding:6px 12px;font-size:12.5px}.btn-icon{padding:6px 8px;border-radius:7px}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:11.5px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.fld input,.fld select{font-family:inherit;font-size:14px;color:var(--ink);background:var(--surf);border:1.5px solid var(--brd);border-radius:var(--rs);padding:9px 11px;width:100%;transition:.13s}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(233,165,0,.1)}
.fld input:disabled{background:var(--bg);color:var(--mut)}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.r4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:11px}
.pos-l{flex:1;background:var(--bg);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pos-r{width:400px;min-width:400px;background:var(--surf);border-left:1px solid var(--brd);display:flex;flex-direction:column;overflow:hidden}
.pos-search{display:flex;gap:8px}
.pos-search input{flex:1;font-family:inherit;font-size:14px;border:1.5px solid var(--brd);border-radius:var(--rs);padding:9px 13px;background:#fff}
.pos-search input:focus{outline:none;border-color:var(--acc)}
.pos-cats{display:flex;gap:6px;flex-wrap:wrap}
.pcat{font-size:12px;font-weight:500;padding:5px 12px;border-radius:20px;border:1.5px solid var(--brd);background:#fff;cursor:pointer;color:var(--mut);transition:.13s}
.pcat.on{border-color:var(--acc);color:#92400E;background:var(--acc2)}
.prod-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
.pc{background:#fff;border:1.5px solid var(--brd);border-radius:var(--r);padding:13px;cursor:pointer;transition:.13s;position:relative}
.pc:hover{border-color:var(--acc);transform:translateY(-1px)}
.pc .pn{font-weight:600;font-size:13px;margin-bottom:2px;line-height:1.3}
.pc .pm{font-size:11px;color:#374151;font-weight:600;margin-bottom:7px}
.pc .pp{font-family:"Sora";font-weight:700;font-size:14px;color:var(--teal)}
.pc .pu{font-size:10px;color:#4B5563;font-weight:600}.pc .ps{font-size:10.5px;color:#374151;font-weight:600;margin-top:2px}
.pc .pc-ulg{font-size:11px;color:var(--acc);font-weight:600;margin-top:2px}
.cart-hd{padding:14px 16px;border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.cart-hd h3{font-family:"Sora";font-size:14px;font-weight:600}
.cart-scroll{flex:1;overflow-y:auto}
.cart-mt{color:var(--mut);text-align:center;padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:8px}
.cart-mt i{font-size:38px;opacity:.2}
.ci{padding:10px 14px;border-bottom:1px solid var(--brd);display:flex;gap:9px}
.ci-inf{flex:1;min-width:0}
.ci-nm{font-weight:600;font-size:13px}
.ci-vr{font-size:11.5px;color:#374151;font-weight:600}
.ci-row{display:flex;align-items:center;gap:8px;margin-top:5px}
.qty-ctrl{display:flex;align-items:center;border:1px solid var(--brd);border-radius:6px;overflow:hidden}
.qty-ctrl button{background:var(--bg);border:none;padding:4px 8px;cursor:pointer;font-size:13px;font-weight:600;color:#374151}
.qty-ctrl button:hover{background:var(--acc2)}
.ci-pr{font-family:"Sora";font-weight:700;font-size:13.5px;color:var(--teal);margin-left:auto}
.ci-rm{background:none;border:none;cursor:pointer;color:var(--mut);font-size:16px;padding:2px;border-radius:4px;flex-shrink:0}
.ci-rm:hover{color:var(--red)}
.cart-ft{padding:14px 16px;border-top:1px solid var(--brd);flex-shrink:0}
.cart-tot{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cart-tot span{color:var(--mut);font-size:13px}
.cart-tot-v{font-family:"Sora";font-weight:700;font-size:22px}
.paytypes{display:flex;gap:6px;margin-bottom:10px}
.ptbtn{flex:1;font-family:inherit;font-size:12px;font-weight:600;padding:7px 4px;border:1.5px solid var(--brd);background:#fff;border-radius:var(--rs);cursor:pointer;transition:.13s;color:var(--mut);text-align:center}
.ptbtn.on{border-color:var(--teal);color:#134E4A;background:var(--teal2)}
.pmodes{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}
.pmode-btn{font-family:inherit;font-size:12.5px;font-weight:600;padding:8px;border:1.5px solid var(--brd);background:#fff;border-radius:var(--rs);cursor:pointer;transition:.13s;color:var(--mut);display:flex;align-items:center;justify-content:center;gap:5px}
.pmode-btn.on{border-color:var(--acc);color:#92400E;background:var(--acc2)}
.ov{display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:rgba(13,27,42,.5);z-index:100;align-items:center;justify-content:center}
.ov.on{display:flex}
.modal{background:#fff;border-radius:var(--r);padding:22px;width:520px;max-width:94vw;max-height:90vh;overflow-y:auto;position:relative}
.modal-lg{width:700px}
.modal h2{font-size:16px;font-weight:600;margin-bottom:16px;padding-right:26px}
.m-close{position:absolute;top:16px;right:16px;background:none;border:none;cursor:pointer;color:var(--mut);font-size:20px}
.vchips{display:flex;flex-wrap:wrap;gap:6px;margin:5px 0 14px}
.vchip{padding:6px 13px;border:1.5px solid var(--brd);border-radius:var(--rs);cursor:pointer;font-size:13px;font-weight:500;transition:.12s}
.vchip:hover{border-color:var(--mut)}.vchip.on{border-color:var(--acc);background:var(--acc2);color:#92400E}
.vchip.out{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.vtable{width:100%;border-collapse:collapse;margin-bottom:10px}
.vtable th{font-size:10.5px;color:var(--mut);font-weight:600;text-transform:uppercase;padding:5px 8px;border-bottom:1px solid var(--brd);text-align:left}
.vtable td{padding:6px 8px;border-bottom:1px solid var(--brd);font-size:13px}
.vtable input{font-family:inherit;font-size:12.5px;border:1px solid var(--brd);border-radius:5px;padding:4px 7px;width:100%}
.vtable input:focus{outline:none;border-color:var(--acc)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:16px}
.stb{background:var(--surf);border:1px solid var(--brd);border-radius:var(--r);padding:14px 16px}
.stb .sl{font-size:11px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.stb .sv{font-family:"Sora";font-size:20px;font-weight:700}
.kpi-hide-btn{position:absolute;top:8px;right:8px;background:transparent;border:none;color:#ccc;cursor:pointer;padding:3px;border-radius:5px;font-size:13px;opacity:0;transition:opacity .15s}
.stb:hover .kpi-hide-btn{opacity:1}
.kpi-hide-btn:hover{color:var(--red);background:#fef2f2}
.dt-period-btn.on{background:#0D1B2A!important;color:#fff!important}
.di-period-btn.on{background:#0D1B2A!important;color:#fff!important}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--sb);color:#fff;padding:10px 18px;border-radius:10px;font-size:13.5px;opacity:0;transition:.25s;z-index:300;pointer-events:none;display:flex;align-items:center;gap:8px;max-width:480px}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--brd);border-radius:10px;padding:3px;gap:3px}
.seg button{font-family:inherit;font-size:12.5px;font-weight:500;border:none;background:none;color:var(--mut);padding:7px 13px;border-radius:7px;cursor:pointer;transition:.13s}
.seg button.on{background:var(--acc);color:#0D1B2A}
.chart-wrap{height:200px;position:relative;padding:4px 0}
.vsum{display:flex;flex-wrap:wrap;gap:3px}
.vb{font-size:11px;border:1px solid var(--brd);border-radius:5px;padding:2px 6px;background:var(--bg)}
.vb.lo{color:var(--red);border-color:#FCA5A5;background:var(--red2)}
.sep{height:1px;background:var(--brd);margin:12px 0}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--brd)}
.toggle-row:last-child{border-bottom:none}
.tgl-label{font-weight:500;font-size:14px}.tgl-sub{font-size:12px;color:var(--mut);margin-top:1px}
.rep-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.rfbtn{font-family:inherit;font-size:12.5px;font-weight:500;padding:6px 13px;border:1.5px solid var(--brd);background:#fff;border-radius:20px;cursor:pointer;color:var(--mut);transition:.13s}
.rfbtn.on{border-color:var(--teal);color:#134E4A;background:var(--teal2)}
.rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.chart-lg{height:240px;position:relative}
.chart-sm{height:200px;position:relative}
.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.staff-card{background:var(--surf);border:1px solid var(--brd);border-radius:var(--r);padding:16px;text-align:center}
.staff-av{width:48px;height:48px;border-radius:50%;background:var(--teal2);color:var(--teal);font-family:Sora;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.staff-nm{font-weight:600;font-size:14px}.staff-role{font-size:12px;color:var(--mut);margin-top:2px}
.staff-stat{margin-top:10px;padding-top:10px;border-top:1px solid var(--brd);font-size:12.5px;color:var(--mut)}
.mol-bal{background:var(--sb);color:#fff;border-radius:var(--r);padding:22px 24px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
.mol-bal-v{font-family:Sora;font-size:32px;font-weight:700}
.mol-bal-l{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:4px}
.mol-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.mcat{font-size:12px;font-weight:500;padding:5px 11px;border-radius:20px;border:1.5px solid var(--brd);background:#fff;cursor:pointer;color:var(--mut);transition:.13s}
.mcat.on{border-color:var(--red);color:#991B1B;background:var(--red2)}
/* ═══════════════════════════════════════════════
   MERX — Dashboard v2 stillari
   Bu blokni style.css ning eng pastiga qo'shing
   ═══════════════════════════════════════════════ */

/* ── Header strip ─────────────────────────────── */
.dash-header {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #0D1B2A;
  border-radius: 14px;
  padding: 22px 28px;
  margin-bottom: 20px;
  color: #fff;
  flex-wrap: wrap;
}
.dh-left  { flex: 1; min-width: 160px; }
.dh-greet { font-size: 13px; color: rgba(255,255,255,.45); margin-bottom: 3px; }
.dh-greet strong { color: rgba(255,255,255,.9); font-weight: 600; }
.dh-date  { font-size: 11.5px; color: rgba(255,255,255,.3); }

.dh-center { flex: 2; text-align: center; min-width: 200px; }
.dh-lbl   { font-size: 10.5px; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; }
.dh-val   { font-size: 30px; font-weight: 800; color: #E9A500; line-height: 1.1; }

.dh-right { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.dash-growth { font-size: 12px; font-weight: 700; margin-left: 6px; }
.dash-growth.up { color: #4ADE80; }
.dash-growth.dn { color: #F87171; }

/* ── KPI kartochkalar ─────────────────────────── */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 1150px) { .dash-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }

.dash-kpi {
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid #ede9e2;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.dash-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
.dkpi-top  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dkpi-ico  {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.dkpi-lbl  { font-size: 11.5px; color: #999; line-height: 1.3; }
.dkpi-val  { font-size: 21px; font-weight: 800; color: #0D1B2A; line-height: 1; margin-bottom: 4px; }
.dkpi-sub  { font-size: 11.5px; color: #bbb; }

/* ── O'rta qator ──────────────────────────────── */
.dash-mid {
  display: grid;
  grid-template-columns: 1fr 270px;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}
@media (max-width: 950px) { .dash-mid { grid-template-columns: 1fr; } }

.dash-chart-wrap { padding-bottom: 4px; }
.dash-side-col   { display: flex; flex-direction: column; gap: 14px; }

/* ── Davr tugmalari ───────────────────────────── */
.dash-ptab {
  padding: 4px 13px; border-radius: 7px;
  border: 1px solid #ddd; font-size: 12px;
  font-family: inherit; cursor: pointer;
  background: #fff; color: #888;
  transition: all .15s;
}
.dash-ptab.on { background: #0D1B2A; color: #fff; border-color: #0D1B2A; }

/* ── Ogohlantirishlar ─────────────────────────── */
.dash-alert {
  background: #fffcf0;
  border: 1px solid #f0d882;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.da-hdr {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: #9a7000; margin-bottom: 10px; flex-wrap: wrap;
}
.da-badge {
  font-size: 11px; padding: 2px 9px; border-radius: 20px;
  font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
}
.da-badge.crit { background: #fee2e2; color: #dc2626; }
.da-badge.warn { background: #fef3c7; color: #d97706; }

.da-items { display: flex; flex-wrap: wrap; gap: 7px; }
.da-item {
  background: #fff; border-radius: 8px; padding: 5px 11px;
  font-size: 12px; display: flex; align-items: center; gap: 7px;
  border: 1px solid #ede9e1;
}
.da-item.crit { border-color: #fca5a5; background: #fff5f5; }
.da-item.warn { border-color: #fcd34d; }
.da-item.more { cursor: pointer; color: #666; font-style: italic; }
.da-item.more:hover { background: #f5f2ec; }
.da-nm  { font-weight: 600; color: #333; }
.da-var { color: #aaa; }
.da-q   { font-weight: 700; }
.da-item.crit .da-q { color: #dc2626; }
.da-item.warn .da-q { color: #d97706; }

/* ── Pastki jadvallar ─────────────────────────── */
.dash-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 800px) { .dash-tables { grid-template-columns: 1fr; } }

/* ══ NARXNOMA MODAL ══════════════════════════════ */
.nm-prod-item{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:8px;cursor:pointer;margin-bottom:3px;
  border:1.5px solid transparent;transition:background .12s,border-color .12s;user-select:none}
.nm-prod-item:hover{background:var(--bg);border-color:var(--brd)}
.nm-prod-item.nm-sel{background:#fffbf0;border-color:#c8a84b}
.nm-check{width:20px;height:20px;border-radius:5px;border:1.5px solid #ddd;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#E9A500;flex-shrink:0;background:#fff}
.nm-sel .nm-check{border-color:#E9A500;background:#fffbf0}
.nm-prod-info{flex:1;min-width:0}
.nm-prod-name{font-size:13px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm-prod-meta{font-size:11px;color:var(--mut);margin-top:1px}
.nm-prod-right{font-size:11px;color:var(--mut);white-space:nowrap;flex-shrink:0}
.nm-label-grid{display:grid;gap:6px}
.nm-label{break-inside:avoid;border-radius:6px;font-family:Arial,sans-serif}
.nm-standard{border:1px solid #ddd;padding:8px 10px;background:#fff}
.nm-mini{border:1px solid #eee;padding:6px 8px;background:#fff}
.nm-premium{border:2px solid #0D1B2A;overflow:hidden}
.nm-shop{font-size:9px;color:#999;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
.nm-name{font-size:12px;font-weight:700;color:#111;margin-bottom:3px;line-height:1.3}
.nm-var{font-size:10px;color:#666;margin-bottom:5px}
.nm-price-main{font-size:14px;font-weight:800;color:#0D1B2A}
.nm-price-ulg{font-size:10px;color:#888}
.nm-price-usd{font-size:10px;color:#666}
.nm-sku{font-size:9px;color:#bbb;font-family:monospace;margin-top:3px}
.nm-barcode{margin-top:5px;text-align:center}
.nm-barcode-num{font-size:8px;font-family:monospace;color:#555;margin-top:2px;letter-spacing:1px}
.nm-name-sm{font-size:11px;font-weight:700;margin-bottom:2px;line-height:1.2}
.nm-var-sm{font-size:9px;color:#777;margin-bottom:3px}
.nm-prem-top{background:#0D1B2A;padding:8px 10px}
.nm-prem-shop{font-size:8px;color:#E9A500;text-transform:uppercase;letter-spacing:2px}
.nm-prem-name{font-size:12px;font-weight:700;color:#fff;line-height:1.3}
.nm-prem-cat{font-size:9px;color:#aaa}
.nm-prem-mid{padding:5px 10px;border-bottom:1px solid #eee;display:flex;justify-content:space-between}
.nm-prem-color{font-size:10px;color:#444}
.nm-prem-sku{font-size:9px;color:#bbb;font-family:monospace}
.nm-prem-bot{padding:7px 10px}
.nm-prem-price{font-size:16px;font-weight:800;color:#0D1B2A}
.nm-prem-price span{font-size:10px;font-weight:400}
.nm-prem-ulg{font-size:10px;color:#666;margin-top:1px}
.nm-prem-usd{font-size:10px;color:#888}

/* ══ OMBOR FILTR TUGMALARI ═══════════════════════ */
.om-filter-btn{padding:5px 12px;border-radius:8px;border:1.5px solid var(--brd);
  background:#fff;font-family:inherit;font-size:12.5px;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:.15s}
.om-filter-btn.on{background:#0D1B2A;color:#fff;border-color:#0D1B2A}
.om-sort-btn{font-size:12px!important;padding:4px 10px!important}

/* ══ KATALOG SORT TUGMALARI ══════════════════════ */
.kat-sort-btn{font-size:12px!important}

/* ══ DEBT FILTER TUGMALARI ═══════════════════════ */
.debt-filter-btn{padding:5px 12px;border-radius:8px;border:1.5px solid var(--brd);
  background:#fff;font-family:inherit;font-size:12.5px;cursor:pointer;transition:.15s}
.debt-filter-btn.on{background:#0D1B2A;color:#fff;border-color:#0D1B2A}

/* Katalog status tab filtrlari */
.kat-status-btn { transition: color .15s, border-color .15s; }
.kat-status-btn.on { color: var(--acc) !important; border-bottom-color: var(--acc) !important; font-weight: 600; }
.kat-status-btn:not(.on):hover { color: var(--fg) !important; border-bottom-color: var(--brd) !important; }

/* Ko'rinish tugmasi */
.kat-view-btn.on { background: var(--acc) !important; color: #0D1B2A !important; }
.kat-view-btn:not(.on) { background: transparent !important; color: var(--mut) !important; }

/* Katalog ustunlar modal */
.kat-col-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--brd);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  transition: all .13s;
  background: var(--bg);
  user-select: none;
}
.kat-col-item:hover { border-color: var(--acc); background: #fffbf0; }
.kat-col-item.active { border-color: var(--acc); background: rgba(233,165,0,.08); }
.kat-col-check {
  width: 20px; height: 20px;
  border: 1.5px solid var(--brd);
  border-radius: 5px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .13s;
}
.kat-col-item.active .kat-col-check {
  background: var(--acc);
  border-color: var(--acc);
}

/* ── Admin Sozlamalar Tab tizimi ─────────────────── */
.adm-tab-bar {
  display: flex;
  gap: 4px;
  background: #F3F2EF;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
  overflow-x: auto;
}
.adm-tab-btn {
  flex: 1;
  min-width: 90px;
  background: transparent;
  color: var(--mut);
  border: none;
  border-radius: 9px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.adm-tab-btn:hover {
  background: rgba(255,255,255,.7);
  color: var(--ink);
}
.adm-tab-btn.adm-tab-on {
  background: var(--surf);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.adm-tab-pane {
  animation: fadeInTab .18s ease;
}
@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Spin animatsiyasi ───────────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin { animation: spin .8s linear infinite; display: inline-block; }

/* ═══════════════════════════════════════════════════════════════
   MOBIL VERSIYA (2026-07-21) — sidebar gamburger, content to'liq
   Desktop ko'rinish o'zgarmaydi; faqat ≤768px da moslashadi.
   ═══════════════════════════════════════════════════════════════ */

/* Gamburger tugma va overlay — desktop'da YASHIRIN */
#mob-menu-btn { display: none; background: none; border: none; cursor: pointer;
  color: var(--ink); font-size: 22px; padding: 4px 8px; margin-right: 2px;
  align-items: center; }
#mob-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 90; opacity: 0; transition: opacity .25s; }

@media (max-width: 768px) {
  /* Sidebar — ekrandan tashqarida, ustma-ust (fixed), sirg'alib chiqadi */
  #sb {
    position: fixed; top: 0; left: 0; z-index: 100;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }
  #sb.mob-open { transform: translateX(0); }

  /* Overlay — sidebar ochilganda ko'rinadi */
  #mob-overlay.on { display: block; opacity: 1; }

  /* Content butun ekranni oladi */
  #main { width: 100%; }

  /* Gamburger tugma ko'rinadi */
  #mob-menu-btn { display: inline-flex; }

  /* Topbar ixchamroq */
  #topbar { padding: 11px 14px; gap: 8px; }
  #ptitle { font-size: 16px; }

  /* Sahifa ichki bo'shliqlari ixcham (.pg — haqiqiy sahifa konteyneri) */
  .pg { padding: 14px !important; }

  /* Jadvallar: kartaning O'ZI gorizontal suriladi (sahifa buzilmaydi).
     :has() qo'llab-quvvatlanmasa — hech narsa qo'llanmaydi (eski xulq, xavfsiz) */
  .card:has(table), .ch:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card:has(table) table, .ch:has(table) table { min-width: max-content; }

  /* Kartochka gridlari — kamroq ustun */
  .kpis, #dash-kpis { grid-template-columns: repeat(2, 1fr) !important; }

  /* Modallar — deyarli to'liq ekran */
  .modal { max-width: 94vw !important; width: 94vw !important;
    max-height: 90vh; overflow-y: auto; }

  /* Topbar tugmalari (pill) ixchamroq */
  .tb-pill { font-size: 12px; padding: 6px 9px; }
  .tb-right { gap: 6px; }

  /* ═══ Barcha bo'limlar uchun (2026-07-24) ═══ */
  /* Ko'p ustunli bloklar telefonda kamayadi (inline stillarni ham bosadi) */
  .kpi-row, .stat-row { grid-template-columns: repeat(2, 1fr) !important; }
  .g2, .r2, .r3, .rep-grid { grid-template-columns: 1fr !important; }

  /* Sahifa sarlavhasi: nom va tugmalar ustma-ust tushsin */
  .ph { flex-wrap: wrap !important; gap: 10px; }

  /* Kengroq modallar ham ekranga sig'sin */
  .modal-lg { max-width: 94vw !important; width: 94vw !important;
    max-height: 90vh; overflow-y: auto; }

  /* Barmoq uchun qulay o'lcham — kichik tugmalar ham bosiladigan bo'lsin */
  .btn, .btn-sm { min-height: 38px; }

  /* Forma maydonlari to'liq kenglikda (yonma-yon siqilmasin) */
  .fld { min-width: 0; }
  .fld input, .fld select, .fld textarea { width: 100%; box-sizing: border-box; }
}

/* Juda kichik ekran (≤420px) — yanada ixcham */
@media (max-width: 420px) {
  /* KPI kartalar 2 ustunda QOLADI — o'rniga ixchamlashadi (2026-07-24) */
  .kpis, #dash-kpis, .kpi-row, .stat-row, .om-kpis {
    grid-template-columns: repeat(2, 1fr) !important; gap: 9px !important;
  }
  .kpi { padding: 11px 12px !important; }
  .kpi .kl { font-size: 9.5px !important; margin-bottom: 5px !important;
             letter-spacing: .04em !important; }
  .kpi .kv { font-size: 17px !important; word-break: break-word; }
  .kpi .ks { font-size: 10.5px !important; margin-top: 3px !important; }

  #ptitle { font-size: 15px; }
  .tb-pill span { font-size: 11px; }
  .pg { padding: 11px !important; }
}

/* ═══ PWA O'RNATISH BANNERI (2026-07-21) ═══ */
#pwa-install {
  display: none; position: fixed; left: 50%; bottom: 18px;
  transform: translateX(-50%) translateY(120%);
  z-index: 9998; width: calc(100% - 28px); max-width: 460px;
  background: var(--sb); color: #fff; border-radius: 16px;
  padding: 14px 16px; gap: 13px; align-items: center;
  box-shadow: 0 14px 44px rgba(13,27,42,.4);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
#pwa-install.on { display: flex; transform: translateX(-50%) translateY(0); }
.pwa-ico { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: rgba(233,165,0,.16); border: 1px solid rgba(233,165,0,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; color: var(--acc); }
.pwa-txt { flex: 1; min-width: 0; }
.pwa-title { font-family: "Sora", sans-serif; font-weight: 700; font-size: 14px; }
.pwa-sub { font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
.pwa-btns { display: flex; gap: 7px; flex-shrink: 0; }
.pwa-later, .pwa-go { font-family: inherit; font-size: 12.5px; font-weight: 700;
  border-radius: 9px; padding: 9px 13px; cursor: pointer; transition: .15s; }
.pwa-later { background: transparent; border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.75); }
.pwa-later:active { transform: scale(.95); }
.pwa-go { background: var(--acc); border: none; color: #0D1B2A; }
.pwa-go:active { transform: scale(.95); }

@media (max-width: 480px) {
  #pwa-install { flex-wrap: wrap; }
  .pwa-btns { width: 100%; }
  .pwa-later, .pwa-go { flex: 1; padding: 10px; }
}

/* ═══ POS MOBIL: savat+to'lov pastki panel (2026-07-24) ═══
   Desktop'da hech narsa o'zgarmaydi — FAB va panel yashirin,
   .pos-sheet oddiy flex bo'lak sifatida qoladi. */
#pos-cart-fab { display: none; }
#pos-sheet-ov { display: none; }
/* Desktop: o'rov layoutga TA'SIR QILMAYDI — pos-mid va pos-right
   avvalgidek .pos-wrap ning to'g'ridan-to'g'ri flex bolalari bo'lib qoladi */
.pos-sheet { display: contents; }

@media (max-width: 768px) {
  /* Tovarlar butun ekranni oladi */
  .pos-left { width: 100%; border-right: none; }
  /* Suzuvchi tugma oxirgi tovarni to'smasin */
  .pos-results { padding-bottom: 74px; }

  /* Savat + to'lov = pastdan chiqadigan panel */
  .pos-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    width: 100%; height: 82vh;
    display: flex; flex-direction: column;
    background: #F8F7F4;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,.28);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.16,1,.3,1);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .pos-sheet.on { transform: translateY(0); }

  /* Panel ichida ustunlar to'liq kenglikda, ustma-ust */
  .pos-sheet .pos-mid,
  .pos-sheet .pos-right { width: 100%; flex: none; overflow: visible; }

  /* Orqa fon */
  #pos-sheet-ov { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 94; }
  #pos-sheet-ov.on { display: block; }

  /* Suzuvchi savat tugmasi */
  #pos-cart-fab {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 93;
    background: var(--acc); color: #0D1B2A; border: none;
    border-radius: 14px; padding: 13px 18px;
    font-family: inherit; font-size: 14.5px; font-weight: 800;
    box-shadow: 0 8px 26px rgba(233,165,0,.45); cursor: pointer;
  }
  #pos-cart-fab:active { transform: scale(.97); }
  #pos-cart-fab.hide { display: none; }
  .pcf-l { display: flex; align-items: center; gap: 8px; }
  .pcf-l i { font-size: 19px; }
  #pcf-cnt {
    background: #0D1B2A; color: var(--acc); border-radius: 20px;
    padding: 1px 9px; font-size: 12.5px; min-width: 22px; text-align: center;
  }
}

/* ═══ MOBIL UX TUZATISHLARI (2026-07-24) ═══ */
@media (max-width: 768px) {
  /* iPhone Safari maydonga bosilganda ekranni AVTOMAT kattalashtiradi,
     agar shrift 16px dan kichik bo'lsa. 16px — sakrash bo'lmaydi. */
  input, select, textarea { font-size: 16px !important; }

  /* iPhone pastki "home" chizig'i tugmalarni to'smasin */
  #pos-cart-fab { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .pos-sheet    { padding-bottom: env(safe-area-inset-bottom, 0px); }
  #pwa-install  { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}