/* ============================================================
   Super Optom — investorlar uchun savdo ko'rsatkichlari (mobil-first)
   print.superoptom.uz bilan bir oila: oq sirtlar, kulrang asos, amber urg'u.
   Filial ranglari admin paneldagi bilan bir xil (Fayz ko'k, Horeca to'q sariq, Depo yashil-moviy);
   dataviz validatoridan o'tgan: yorug' #fff va qorong'i #181b20 sirtlarda.
   ============================================================ */

:root{
  color-scheme: light;
  --bg:#f4f6f8; --surface:#ffffff; --sunken:#f7f9fb;
  --line:rgba(17,21,28,.08); --line-firm:rgba(17,21,28,.15);
  --text:#16191e; --muted:#5f6874; --faint:#838b97;
  --accent:#e0951f; --accent-hi:#eda330; --accent-ink:#241703; --accent-soft:rgba(224,149,31,.18);
  --grid:#e8ebef; --axis:#c6ccd4; --track:#edf0f3; --bar:#7d8896;
  --good:#006300; --bad:#b3261e; --bad-soft:rgba(192,57,47,.10);
  --warn-bg:#fff6e5; --warn-line:#f1d9a6; --warn-ink:#5c4308;
  --shadow:0 1px 2px rgba(17,21,28,.05), 0 8px 24px -14px rgba(17,21,28,.18);
  --s0:#2a78d6; --s1:#eb6834; --s2:#1baf7a; --s3:#eda100;
  --s4:#e87ba4; --s5:#008300; --s6:#4a3aa7; --s7:#e34948;
  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --ease:cubic-bezier(.2,.6,.3,1);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg:#0f1114; --surface:#181b20; --sunken:#1d2127;
    --line:rgba(255,255,255,.08); --line-firm:rgba(255,255,255,.16);
    --text:#f2f4f7; --muted:#a6adb8; --faint:#7f8793;
    --accent:#eda330; --accent-hi:#f3b04a; --accent-ink:#241703; --accent-soft:rgba(237,163,48,.22);
    --grid:#262a31; --axis:#3a404a; --track:#23272e; --bar:#8f99a8;
    --good:#2fbf4a; --bad:#f07b72; --bad-soft:rgba(240,123,114,.14);
    --warn-bg:#2a2313; --warn-line:#4d3f1a; --warn-ink:#f1d9a6;
    --shadow:0 1px 2px rgba(0,0,0,.4);
    --s0:#3987e5; --s1:#d95926; --s2:#199e70; --s3:#c98500;
    --s4:#d55181; --s5:#008300; --s6:#9085e9; --s7:#e66767;
  }
}

*{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; min-height:100dvh;
  background:var(--bg); color:var(--text);
  font-family:'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,p{ margin:0 }
button{ font:inherit; color:inherit }
.muted{ color:var(--muted) }
.num{ font-variant-numeric:tabular-nums }

:where(button,input,a,[tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* filial rangi -- faqat belgi (nuqta, ustun) rangi; matn hech qachon bu rangda emas */
.s0{ fill:var(--s0) } .s1{ fill:var(--s1) } .s2{ fill:var(--s2) } .s3{ fill:var(--s3) }
.s4{ fill:var(--s4) } .s5{ fill:var(--s5) } .s6{ fill:var(--s6) } .s7{ fill:var(--s7) }
.bg-s0{ background:var(--s0) } .bg-s1{ background:var(--s1) } .bg-s2{ background:var(--s2) } .bg-s3{ background:var(--s3) }
.bg-s4{ background:var(--s4) } .bg-s5{ background:var(--s5) } .bg-s6{ background:var(--s6) } .bg-s7{ background:var(--s7) }

/* ---------------- Brend ---------------- */
.brand{ display:flex; align-items:center; gap:11px; min-width:0; margin-right:auto }
.brand__mark{
  width:36px; height:36px; flex:none; border-radius:11px;
  display:grid; place-items:center;
  background:linear-gradient(150deg, var(--accent-hi) 0%, #c9761f 100%);
  color:var(--accent-ink);
  box-shadow:0 3px 10px -2px rgba(200,132,42,.45), inset 0 1px 0 rgba(255,255,255,.45);
}
.brand__mark svg{ width:19px; height:19px }
.brand h1{ font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1.15 }
.brand p{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.brand--lg .brand__mark{ width:44px; height:44px; border-radius:13px }
.brand--lg .brand__mark svg{ width:23px; height:23px }
.brand--lg h1{ font-size:21px }
.brand--lg p{ font-size:13.5px }

/* ---------------- Tugmalar ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:48px; padding:12px 16px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent; border-radius:var(--r-md); cursor:pointer;
  transition:background .2s var(--ease), transform .12s var(--ease);
}
.btn:active{ transform:translateY(1px) }
.btn[disabled]{ opacity:.55; pointer-events:none }
.btn--primary{ background:var(--accent); color:var(--accent-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.38) }
.btn--primary:hover{ background:var(--accent-hi) }
.btn--ghost{ background:transparent; border-color:var(--line-firm); color:var(--text); margin-top:12px }
.btn--ghost:hover{ background:var(--sunken) }

.iconbtn{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-firm); border-radius:12px;
  background:var(--surface); color:var(--muted); cursor:pointer;
}
.iconbtn svg{ width:19px; height:19px }
.iconbtn:active{ transform:scale(.96) }
.iconbtn.spin svg{ animation:spin .8s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

.linkbtn{
  border:0; background:none; padding:6px 2px; cursor:pointer;
  font-size:13.5px; font-weight:500; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-firm);
}

/* ---------------- Kirish ---------------- */
.login{
  min-height:100dvh; display:grid; place-items:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
}
.login__card{
  width:100%; max-width:380px;
  display:flex; flex-direction:column; gap:16px;
  padding:26px 22px 22px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.login__card .brand{ margin-bottom:6px }
.fld{ display:flex; flex-direction:column; gap:6px }
.fld span{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint) }
.fld input{
  width:100%; min-height:48px; padding:12px 14px;
  font:inherit; font-size:16px; color:var(--text);       /* 16px: iOS fokusda zoom qilmasin */
  background:var(--bg); border:1px solid var(--line-firm); border-radius:var(--r-md);
}
.fld input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); background:var(--surface) }
.login__err{ font-size:14px; color:var(--bad); background:var(--bad-soft); padding:10px 12px; border-radius:var(--r-sm) }

/* ---------------- Sarlavha + filtrlar ---------------- */
.top{ padding-top:env(safe-area-inset-top) }
.top__in{
  max-width:760px; margin:0 auto;
  padding:14px 16px 8px;
  display:flex; align-items:center; gap:8px;
}

.filters{
  position:sticky; top:0; z-index:20;
  padding:8px 0 10px;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.chips{
  max-width:760px; margin:0 auto;
  display:flex; gap:7px; padding:0 16px;
  overflow-x:auto; scrollbar-width:none;
  scroll-padding:0 16px;
}
.chips::-webkit-scrollbar{ display:none }
.chips + .chips, .range + .chips{ margin-top:8px }
.chip{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:7px 14px;
  font-size:14px; font-weight:500; white-space:nowrap;
  color:var(--muted); background:var(--surface);
  border:1px solid var(--line-firm); border-radius:999px; cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.chip[aria-pressed=true]{
  color:var(--accent-ink); font-weight:600;
  background:var(--accent); border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38);
}
.dot{ width:9px; height:9px; border-radius:50%; flex:none }
.chip[aria-pressed=true] .dot{ box-shadow:0 0 0 2px rgba(255,255,255,.7) }

.range{
  max-width:760px; margin:8px auto 0; padding:0 16px;
  display:flex; align-items:center; gap:8px; color:var(--faint);
}
.range input{
  flex:1 1 0; min-width:0; min-height:40px; padding:6px 10px;
  font:inherit; font-size:16px; color:var(--text);
  background:var(--surface); border:1px solid var(--line-firm); border-radius:var(--r-sm);
}

/* ---------------- Asosiy ---------------- */
.wrap{
  max-width:760px; margin:0 auto;
  padding:14px 16px calc(40px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px;
  transition:opacity .2s var(--ease);
}
.wrap.loading{ opacity:.55 }      /* qayta yuklashda eski ko'rinish xira turadi -- sakrash yo'q */

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px;
  box-shadow:var(--shadow);
}
.card__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px }
.card h2{ font-size:15px; font-weight:600; letter-spacing:-.01em }
.card__head .muted{ font-size:13px }

.banner{
  padding:11px 14px; font-size:13.5px; line-height:1.4;
  color:var(--warn-ink); background:var(--warn-bg);
  border:1px solid var(--warn-line); border-radius:var(--r-md);
}

/* Hero: sahifadagi yagona katta raqam */
.hero{ padding:18px 16px 16px }
.hero__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.hero__head .muted{ font-size:13px; text-align:right }
.hero__value{
  margin-top:6px;
  font-size:clamp(34px, 10.4vw, 52px); font-weight:600; letter-spacing:-.035em; line-height:1.08;
  white-space:nowrap;
}
.hero__value small{ font-size:.36em; font-weight:500; letter-spacing:0; color:var(--muted) }
.hero__exact{ font-size:13px; margin-top:2px }
.hero__note{ font-size:13px; margin-top:8px }
.hero__note:empty{ display:none }

.delta{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-top:10px; font-size:13.5px; color:var(--muted) }
.delta:empty{ display:none }
.delta b{ display:inline-flex; align-items:center; gap:3px; font-weight:600; color:var(--text) }
.delta b.up{ color:var(--good) }
.delta b.down{ color:var(--bad) }
.delta svg{ width:12px; height:12px }

/* KPI plitkalari */
.kpis{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.tile{
  min-width:0; padding:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.tile__label{ font-size:13px; color:var(--muted) }
.tile__value{ margin-top:4px; font-size:22px; font-weight:600; letter-spacing:-.025em; line-height:1.15; white-space:nowrap }
.tile__value small{ font-size:.58em; font-weight:500; letter-spacing:0; color:var(--muted) }
.tile__sub{ margin-top:5px; font-size:12.5px; color:var(--muted); min-height:18px }
.tile .delta{ margin-top:5px; font-size:12.5px }

/* ---------------- Grafik ---------------- */
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:-2px 0 10px; font-size:13px; color:var(--muted) }
.legend:empty{ display:none }
.legend span{ display:inline-flex; align-items:center; gap:6px }
.legend i{ width:10px; height:10px; border-radius:3px; flex:none }

.chart{ position:relative; touch-action:pan-y; border-radius:var(--r-sm) }
.chart svg{ display:block; width:100%; height:auto; overflow:visible }
.chart .grid{ stroke:var(--grid); stroke-width:1 }
.chart .axis{ stroke:var(--axis); stroke-width:1 }
.chart text{ fill:var(--faint); font-size:11px; font-family:inherit; font-variant-numeric:tabular-nums }
.chart text.lbl{ fill:var(--text); font-size:11.5px; font-weight:600 }
.chart .col{ transition:opacity .15s var(--ease) }
.chart.has-sel .col{ opacity:.38 }
.chart.has-sel .col.sel{ opacity:1 }
.chart .hit{ fill:transparent; cursor:pointer }
.chart .sel-bg{ fill:var(--track); opacity:0 }
.chart .col.sel .sel-bg{ opacity:.7 }
.chart__empty{ padding:44px 12px; text-align:center; color:var(--muted); font-size:14px }

.tip{
  position:absolute; z-index:5; top:0; left:0; min-width:150px; max-width:240px;
  padding:10px 12px; pointer-events:none;
  background:var(--surface); border:1px solid var(--line-firm); border-radius:var(--r-sm);
  box-shadow:0 10px 30px -12px rgba(17,21,28,.35);
  font-size:13px;
}
.tip__title{ color:var(--muted); font-size:12.5px }
.tip__total{ font-size:16px; font-weight:600; letter-spacing:-.015em; margin:1px 0 6px }
.tip__row{ display:flex; align-items:center; gap:8px; justify-content:space-between; line-height:1.55 }
.tip__row span{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); min-width:0 }
.tip__row i{ width:12px; height:3px; border-radius:2px; flex:none }
.tip__row b{ font-weight:600; font-variant-numeric:tabular-nums }
.tip__foot{ margin-top:5px; padding-top:5px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px }

.tablewrap{ margin-top:12px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm) }
.tablewrap table{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums }
.tablewrap th, .tablewrap td{ padding:8px 10px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line) }
.tablewrap th{ font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); background:var(--sunken) }
.tablewrap th:first-child, .tablewrap td:first-child{ text-align:left }
.tablewrap tr:last-child td{ border-bottom:0 }
.tablewrap tfoot td{ font-weight:600; border-top:1px solid var(--line-firm) }

/* ---------------- Ro'yxatlar ---------------- */
.row{ padding:12px 0; border-top:1px solid var(--line) }
.row:first-child{ border-top:0; padding-top:2px }
.row:last-child{ padding-bottom:2px }
button.row{ display:block; width:100%; text-align:left; background:none; border-left:0; border-right:0; border-bottom:0; cursor:pointer }
.row__top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.row__name{ display:inline-flex; align-items:center; gap:8px; font-weight:500; min-width:0 }
.row__name > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.row__val{ font-weight:600; letter-spacing:-.01em; white-space:nowrap; font-variant-numeric:tabular-nums }
.row__sub{ display:flex; justify-content:space-between; gap:10px; margin-top:3px; font-size:12.5px; color:var(--muted) }
.row__sub .pct{ font-variant-numeric:tabular-nums; white-space:nowrap }
.share{ height:6px; margin-top:8px; border-radius:3px; background:var(--track); overflow:hidden }
.share i{ display:block; height:100%; border-radius:3px; min-width:2px }
.share i.neutral{ background:var(--bar) }
.tag{ display:inline-block; padding:1px 8px; font-size:11.5px; font-weight:500; color:var(--warn-ink); background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:999px }

.item{ display:grid; grid-template-columns:22px 1fr auto; gap:2px 10px; padding:10px 0; border-top:1px solid var(--line) }
.item:first-child{ border-top:0; padding-top:2px }
.item__rank{ color:var(--faint); font-size:13px; font-variant-numeric:tabular-nums; padding-top:1px }
.item__name{ font-size:14px; line-height:1.35; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden }
.item__amt{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right }
.item__qty{ grid-column:2 / 4; font-size:12.5px; color:var(--muted) }
.empty{ padding:18px 4px; text-align:center; color:var(--muted); font-size:14px }

.foot{ font-size:12.5px; text-align:center; padding:6px 12px 0; line-height:1.5 }

@media (min-width:640px){
  .kpis{ grid-template-columns:repeat(4, 1fr) }
  .wrap{ gap:14px; padding-top:18px }
  .card{ padding:20px }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}