/* Layout: app shell — sticky header with role switcher, content column (wider on desktop), bottom tab bar on phone / left rail on desktop, bottom sheets for forms */
:root{
  --bg:#F2F4F6; --surface:#FFFFFF; --sunk:#E9EDF1; --fg:#141A21; --muted:#5B6673; --line:#D9DFE6;
  --accent:#0F4C81; --accent-ink:#FFFFFF; --accent-soft:#E3ECF6;
  --good:#1D7A46; --good-soft:#E2F2E8; --warn:#9A6200; --warn-soft:#FBF0DA; --bad:#B3362B; --bad-soft:#FBE5E2;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E1318; --surface:#161D24; --sunk:#1D252E; --fg:#E6ECF2; --muted:#93A0AE; --line:#2A3440;
  --accent:#6FA8DC; --accent-ink:#0B1520; --accent-soft:#1B2C3E;
  --good:#5CC88A; --good-soft:#163024; --warn:#E5B252; --warn-soft:#33280F; --bad:#F08575; --bad-soft:#3A1C18; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1318; --surface:#161D24; --sunk:#1D252E; --fg:#E6ECF2; --muted:#93A0AE; --line:#2A3440;
  --accent:#6FA8DC; --accent-ink:#0B1520; --accent-soft:#1B2C3E;
  --good:#5CC88A; --good-soft:#163024; --warn:#E5B252; --warn-soft:#33280F; --bad:#F08575; --bad-soft:#3A1C18; color-scheme:dark}
html,body{background:var(--bg);color:var(--fg)}
body{font-family:var(--font);font-size:15px;line-height:1.45;padding-block:0 calc(80px + env(safe-area-inset-bottom,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)}
select,input,button,textarea{font:inherit;color:inherit}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.hin{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px;display:flex;align-items:center;gap:12px;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.01em;font-size:16px;white-space:nowrap}
.brand b{color:var(--accent)}
.who{display:flex;align-items:center;gap:8px;min-width:0}
.who select{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:7px 10px;max-width:220px;min-width:0}
@media (max-width:420px){.role{display:none}.who select{max-width:190px}}
.role{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.page{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 24px;display:flex;flex-direction:column;gap:16px}
h1{font-size:22px;font-weight:800;margin:0;text-wrap:balance}
h2{font-size:15px;font-weight:700;margin:0;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.kpi .lbl{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.kpi .val{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi .sub{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.big{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.big .lbl,.big .sub{color:var(--accent-ink);opacity:.85}
.list{display:flex;flex-direction:column}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:10px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row.click{cursor:pointer}
.row.click:hover .name{color:var(--accent)}
.main{min-width:0;display:flex;flex-direction:column;gap:2px}
.name{font-weight:600;overflow-wrap:anywhere}
.sub{color:var(--muted);font-size:13px}
.right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.num{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.pill{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap;background:var(--sunk);color:var(--muted)}
.pill.blue{background:var(--accent-soft);color:var(--accent)}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:11px;padding:11px 16px;font-weight:700;cursor:pointer;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
.btn.good{background:var(--good);color:#fff}
.btn.bad{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.btn.sm{padding:7px 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,nav button:focus-visible,.row.click:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.empty{color:var(--muted);font-size:14px;padding-block:6px}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.store{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.store>div{background:var(--sunk);border-radius:10px;padding:8px 10px;min-width:0}
.store .lbl{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.store .num{font-size:14px;overflow-wrap:anywhere;white-space:normal}
.big .store>div{background:rgba(255,255,255,.14)}
.big .store .lbl{color:var(--accent-ink);opacity:.8}
/* nav */
nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);display:flex;
  padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
nav button{flex:1;background:none;border:0;padding:9px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--muted);cursor:pointer;min-width:0}
nav button svg{width:22px;height:22px}
nav button[aria-current="true"]{color:var(--accent);font-weight:700}
nav .dot{position:relative}
nav .badge{position:absolute;top:-4px;right:-10px;background:var(--bad);color:#fff;border-radius:999px;font-size:10px;font-weight:800;padding:0 5px;line-height:16px}
@media (min-width:900px){
  body{padding-bottom:0;padding-left:max(96px,env(safe-area-inset-left,0px))}
  nav{top:0;bottom:0;right:auto;width:88px;flex-direction:column;justify-content:flex-start;border-top:0;border-right:1px solid var(--line);padding-top:calc(64px + env(safe-area-inset-top,0px))}
  nav button{flex:0;padding:12px 4px}
}
/* sheet */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(10,15,20,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;box-sizing:border-box}
@media (min-width:700px){.scrim{align-items:center}.sheet{border-radius:18px}}
.sheet h3{margin:0;font-size:18px;font-weight:800}
.shead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.x{background:var(--sunk);border:0;border-radius:999px;width:34px;height:34px;cursor:pointer;font-size:18px;flex-shrink:0}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);font-weight:600}
input,select.f,textarea{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 12px;font-size:16px;color:var(--fg);width:100%;box-sizing:border-box}
textarea{min-height:64px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.box{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.box>b{font-size:14px}
.hint{font-size:13px;color:var(--muted)}
.err{font-size:13px;color:var(--bad);font-weight:600}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:700;z-index:60;max-width:90vw}
.demo{background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:10px 12px;font-size:13px;font-weight:600}
@media (prefers-reduced-motion:no-preference){.btn:active{transform:scale(.98)}}
/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-sizing:border-box}
.login form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}
.login .brand{font-size:26px;text-align:center}
.login .sub{text-align:center}
.who .x2{background:none;border:1px solid var(--line);border-radius:10px;padding:7px 10px;cursor:pointer}
.offline{background:var(--warn-soft);color:var(--warn);text-align:center;font-size:13px;font-weight:700;padding:6px}
.who .name{font-weight:600;font-size:14px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){.who .name{max-width:110px}}
[hidden]{display:none!important}
/* ===== Товарлар ===== */
body.wide .page,body.wide .hin{max-width:1400px}
.pgrid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:899px){.pgrid{grid-template-columns:minmax(0,1fr)}}
.tree{padding:8px;position:sticky;top:calc(64px + env(safe-area-inset-top,0px));max-height:calc(100vh - 90px);overflow:auto}
@media (max-width:899px){.tree{position:static;max-height:none}}
.tdet summary{cursor:pointer;padding:6px 8px;font-size:14px;list-style:none}
.tdet summary::-webkit-details-marker{display:none}
@media (min-width:900px){.tdet summary{display:none}}
.tlist{display:flex;flex-direction:column}
.tnode{display:flex;align-items:center;gap:2px;padding-left:calc(var(--d)*16px);border-radius:8px}
.tnode.on{background:var(--accent-soft)}
.tnode.on .tname{color:var(--accent);font-weight:700}
.tcar{width:24px;height:30px;border:0;background:none;cursor:pointer;color:var(--muted);flex-shrink:0;font-size:12px;padding:0}
.tcar:disabled{cursor:default}
.tname{flex:1;min-width:0;text-align:left;border:0;background:none;cursor:pointer;padding:6px 4px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tname:hover{color:var(--accent)}
.tcnt{font-size:12px;color:var(--muted);padding-right:8px;font-variant-numeric:tabular-nums}
.plist{gap:10px}
.ptools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ptools input[type=search]{flex:1;min-width:200px}
.chk{flex-direction:row!important;align-items:center;gap:8px!important;font-weight:500!important;color:var(--fg)!important;white-space:nowrap}
.chk input{width:auto}
.ptable td{vertical-align:middle}
.ptable td.pn{white-space:normal;min-width:180px;font-weight:600}
.ptable .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--muted)}
.prow{cursor:pointer}
.prow:hover td{background:var(--sunk)}
.prow.off td{opacity:.55}
.prow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
td.ph{width:52px;padding:4px 6px}
td.ph img,.noph{width:44px;height:44px;border-radius:8px;object-fit:cover;display:block;background:var(--sunk)}
/* товар карточкаси */
.sheet.pcard{max-width:1080px}
@media (min-width:700px){.scrim:has(.pcard){align-items:flex-start;padding-top:24px}}
.pchead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bigname input{font-size:22px;font-weight:700;padding:12px 14px;border:2px solid var(--accent)}
.pcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:820px){.pcols{grid-template-columns:minmax(0,1fr)}}
.pleft,.pright{display:flex;flex-direction:column;gap:12px;min-width:0}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.phitem{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--sunk);max-width:100%}
.phitem img{width:100%;height:100%;object-fit:cover}
.phitem.pend img{opacity:.6}
.phmain{position:absolute;left:6px;bottom:6px;background:var(--fg);color:var(--bg);font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px}
.phbtns{position:absolute;top:4px;right:4px;display:flex;gap:4px}
.phbtns button{width:28px;height:28px;border-radius:999px;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:15px}
.phadd{align-self:flex-start;cursor:pointer}
.ptabs{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ptabs button{flex:1;padding:12px 8px;border:0;background:var(--surface);cursor:pointer;font-weight:600;color:var(--muted);border-right:1px solid var(--line)}
.ptabs button:last-child{border-right:0}
.ptabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.ptabs button:disabled{opacity:.45;cursor:default}
.ptab{display:flex;flex-direction:column;gap:12px}
.margin{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding-bottom:4px}
.margin .lbl{font-size:13px;color:var(--muted);font-weight:600}
.margin b{font-size:18px;font-variant-numeric:tabular-nums}
.ptable .mob{display:none;font-weight:400}
@media (max-width:640px){.ptable .hm{display:none}.ptable .mob{display:block}.ptable td.pn{min-width:0}}
/* ===== Бренд палитраси: чуқур кўк #09318D · оқ #FFFFFF · нафис пушти #F59ACC ===== */
:root{
  --bg:#F4F6FB; --surface:#FFFFFF; --sunk:#EBEFF8; --fg:#0B1633; --muted:#5A6482; --line:#DDE3F0;
  --accent:#09318D; --accent-ink:#FFFFFF; --accent-soft:#E6ECFA;
  --pink:#F59ACC; --pink-ink:#09318D; --pink-soft:#FDEBF5;
  --brand-grad:linear-gradient(135deg,#09318D 0%,#1B47B8 60%,#3B5FD0 100%);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#070D1F; --surface:#0E1730; --sunk:#16213F; --fg:#E8ECF8; --muted:#97A2C2; --line:#243055;
  --accent:#8FA8FF; --accent-ink:#07102A; --accent-soft:#1A2850;
  --pink:#F59ACC; --pink-ink:#2A0A1C; --pink-soft:#3A1A2E;
  --brand-grad:linear-gradient(135deg,#09318D 0%,#1B3E9E 100%); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#070D1F; --surface:#0E1730; --sunk:#16213F; --fg:#E8ECF8; --muted:#97A2C2; --line:#243055;
  --accent:#8FA8FF; --accent-ink:#07102A; --accent-soft:#1A2850;
  --pink:#F59ACC; --pink-ink:#2A0A1C; --pink-soft:#3A1A2E;
  --brand-grad:linear-gradient(135deg,#09318D 0%,#1B3E9E 100%); color-scheme:dark}
.brand b{color:var(--accent)}
.brand::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink);margin-left:6px;vertical-align:middle}
/* асосий ҳаракат тугмалари (+ Товар, + Янги буюртма) — пушти */
.bar>.btn:not(.ghost),.bar .acts>.btn:first-child:not(.ghost){background:var(--pink);color:var(--pink-ink)}
.badge{background:var(--pink)!important;color:var(--pink-ink)!important}
nav button[aria-current="true"] svg{filter:drop-shadow(0 0 0 transparent)}
nav button[aria-current="true"] .dot::before{content:"";position:absolute;inset:-6px -10px;border-radius:12px;background:var(--accent-soft);z-index:-1}
nav .dot{z-index:0}
.big{background:var(--brand-grad);border-color:transparent;color:#fff}
.big .lbl,.big .sub{color:#fff}
.big .store .lbl{color:#fff}
.tnode.on{background:var(--pink-soft)}
.tnode.on .tname{color:var(--fg)}
.tnode.on::before{content:"";width:3px;align-self:stretch;border-radius:3px;background:var(--pink);margin-right:2px}
.ptabs button[aria-selected="true"]{background:var(--accent);color:#fff}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.phmain{background:var(--pink);color:var(--pink-ink)}
.bigname input{border-color:var(--accent)}
/* кириш саҳифаси: кўк фон, оқ карта */
.login{background:var(--brand-grad)}
.login form{box-shadow:0 20px 60px rgba(9,49,141,.35);border:0}
.login .btn{background:var(--pink);color:var(--pink-ink)}
.login .brand b{color:var(--accent)}
body.auth{padding-left:0!important;padding-bottom:0!important}
@media (max-width:480px){nav button{font-size:10px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:0}}
/* омбор: тоифа бўйича гуруҳлар */
.stbl tr.grp td{background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding-top:10px;padding-bottom:10px}
.stbl tr.grp td span{color:var(--muted);font-weight:700;text-transform:none;letter-spacing:0}
.wcard{text-align:left;font:inherit;color:inherit;cursor:pointer;align-items:stretch}
.wcard:hover{border-color:var(--accent)}
.wcard.on{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink) inset}
.wcats{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.wcat{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.wcat b{color:var(--fg);font-variant-numeric:tabular-nums}
@media (min-width:1100px){.sgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stbl tr.grp{cursor:pointer}
.stbl tr.grp td i{font-style:normal;display:inline-block;width:16px}
.stbl tr.grp:hover td{background:var(--pink-soft)}
.stbl tr.grp.open td{background:var(--accent);color:#fff}
.stbl tr.grp.open td span{color:#fff;opacity:.85}
.stbl tr.grp:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}

.stbl tfoot tr.tot td{font-weight:800;border-top:2px solid var(--accent);color:var(--accent);padding-top:12px;font-variant-numeric:tabular-nums}
.wsum{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;color:var(--accent);border-top:1px dashed var(--line);padding-top:6px;margin-top:2px}
.wsum+.wsum{border-top:0;padding-top:0;margin-top:0}
.wsum b{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Панел: омборлар жадвали */
.dwh{margin-top:12px}
.dwh .bar{align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.dtbl{width:100%;border-collapse:collapse;font-size:14px}
.dtbl th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.dtbl td{padding:9px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.dtbl .n{text-align:right}
.dtbl tr.click{cursor:pointer}
.dtbl tr.click:hover td{background:var(--pink-soft)}
.dtbl tr.click:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}
.dtbl tr.transit td{color:var(--accent);background:var(--accent-soft)}
.dtbl tfoot td{font-weight:800;color:var(--accent);border-top:2px solid var(--accent);border-bottom:0;padding-top:12px}
.dnote{margin-top:10px}
@media (max-width:700px){.dtbl .hm{display:none}}
.sgrid .card>.bar{flex-wrap:wrap;gap:8px}
@media (max-width:700px){.dtbl{font-size:13px}.dtbl td,.dtbl th{padding:8px 5px}.dtbl .pill{display:none}}