/* ============================================================
   DILMUSS uslubidagi analitika paneli
   Ranglar hisoblab tanlangan:
     aksent #C9315C  - oq fonda 5.15:1, ustida oq matn 5.15:1
     seriya-2 #2A78D6 - 4.42:1; juftlik CVD farqi 30.8 (chegara 8)
     o'sish #12855A 4.64:1 | tushish #C8324B 5.23:1
   ============================================================ */
:root {
  color-scheme: light;
  --plane:#FBF7F8;
  --surface:#FFFFFF;
  --surface-2:#FBF5F7;
  --field:#FFFFFF;
  --sidebar:#FFFFFF;
  --sidebar-line:#F0E6EA;

  --ink:#1F1A1C;
  --ink-2:#6E6167;
  --ink-3:#9B8E93;

  --accent:#C9315C;
  --accent-ink:#FFFFFF;
  --accent-soft:#FCE9EF;
  --accent-soft-2:#F7D9E2;
  --series-2:#2A78D6;
  --series-2-soft:#E1ECFB;

  --line:#EFE6EA;
  --grid:#F3ECEF;
  --axis:#DDD0D6;

  --up:#12855A;   --up-bg:#E4F3EC;
  --down:#C8324B; --down-bg:#FBE9EC;
  --warn:#9A5A1F; --warn-bg:#FBF0E2;

  /* plita yuqori chizig'i - ketma-ketligi qat'iy, aylanmaydi */
  --t1:#C9315C; --t2:#12855A; --t3:#2A78D6; --t4:#B8860B; --t5:#6B4FA8; --t6:#C8324B;

  --r:14px; --r-sm:9px;
  --shadow:0 1px 2px rgba(31,26,28,.04), 0 2px 6px rgba(31,26,28,.04);
  --serif:"Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:#121013; --surface:#1C181B; --surface-2:#241E22; --field:#272126;
    --sidebar:#171417; --sidebar-line:#2A2329;
    --ink:#F4EDF0; --ink-2:#AC9DA4; --ink-3:#7E7077;
    --accent:#E8789C; --accent-ink:#1C181B; --accent-soft:#38222B; --accent-soft-2:#4A2C38;
    --series-2:#3987E5; --series-2-soft:#1B2B3F;
    --line:#2E2730; --grid:#262027; --axis:#3E3540;
    --up:#3DBE86;   --up-bg:#14291F;
    --down:#E8707F; --down-bg:#2E1A1E;
    --warn:#D9A163; --warn-bg:#302418;
    --t1:#E8789C; --t2:#3DBE86; --t3:#3987E5; --t4:#D9A845; --t5:#A78BE0; --t6:#E8707F;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:#121013; --surface:#1C181B; --surface-2:#241E22; --field:#272126;
  --sidebar:#171417; --sidebar-line:#2A2329;
  --ink:#F4EDF0; --ink-2:#AC9DA4; --ink-3:#7E7077;
  --accent:#E8789C; --accent-ink:#1C181B; --accent-soft:#38222B; --accent-soft-2:#4A2C38;
  --series-2:#3987E5; --series-2-soft:#1B2B3F;
  --line:#2E2730; --grid:#262027; --axis:#3E3540;
  --up:#3DBE86;   --up-bg:#14291F;
  --down:#E8707F; --down-bg:#2E1A1E;
  --warn:#D9A163; --warn-bg:#302418;
  --t1:#E8789C; --t2:#3DBE86; --t3:#3987E5; --t4:#D9A845; --t5:#A78BE0; --t6:#E8707F;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--plane); color:var(--ink);
  font-family:system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); }

/* ============================ karkas ============================ */
.qavat { display:flex; min-height:100vh; align-items:stretch; }

.yon {
  width:252px; flex:none; background:var(--sidebar); border-right:1px solid var(--sidebar-line);
  display:flex; flex-direction:column; padding:20px 0 14px;
}
.yon .tepa { display:flex; align-items:center; gap:10px; padding:0 18px 20px; }
.belgi {
  font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:.01em;
  color:var(--ink); text-decoration:none; line-height:1;
}
.belgi span { color:var(--accent); }
.mavzu {
  margin-left:auto; width:32px; height:32px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:14px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer;
}
.mavzu:hover { color:var(--accent); border-color:var(--accent-soft-2); }

.yon nav { display:flex; flex-direction:column; gap:2px; padding:0 10px; overflow-y:auto; }
.yon .guruh {
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  padding:16px 9px 6px; font-weight:700;
}
.yon nav a {
  display:flex; align-items:flex-start; gap:10px; padding:8px 9px; border-radius:var(--r-sm);
  color:var(--ink-2); text-decoration:none;
}
.yon nav a .ik { width:17px; flex:none; text-align:center; font-size:14px; line-height:1.3; opacity:.8; }
.yon nav a .mat { min-width:0; }
.yon nav a b { display:block; font-size:13.5px; font-weight:550; color:var(--ink); line-height:1.3; }
.yon nav a small { display:block; font-size:11.5px; color:var(--ink-3); line-height:1.35; margin-top:1px; }
.yon nav a:hover { background:var(--surface-2); }
.yon nav a.on { background:var(--accent-soft); }
.yon nav a.on b, .yon nav a.on .ik { color:var(--accent); }
.yon nav a.on small { color:var(--accent); opacity:.75; }

.yon .ost {
  margin-top:auto; padding:14px 18px 0; border-top:1px solid var(--sidebar-line);
  font-size:12.5px; color:var(--ink-3);
}
.yon .ost .kim { display:flex; align-items:center; gap:9px; }
.yon .ost .avatar {
  width:32px; height:32px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent); display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12.5px; flex:none;
}
.yon .ost b { display:block; color:var(--ink); font-weight:600; font-size:13px; }
.yon .ost .rol { font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.yon .ost .hav { margin-top:9px; display:flex; gap:12px; }
.yon .ost a { color:var(--ink-3); text-decoration:none; }
.yon .ost a:hover { color:var(--accent); }
.yon .ost .yordam {
  display:inline-block; margin-top:11px; padding-bottom:12px;
  font-size:11.5px; color:var(--accent); font-weight:600;
}
.yon .ost .yordam:hover { text-decoration:underline; }

.asosiy { flex:1; min-width:0; }
.ichki { padding:26px 30px 60px; max-width:1220px; width:100%; }

/* ============================ sarlavha ============================ */
.bosh { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:flex-end; margin-bottom:20px; }
h1 {
  font-family:var(--serif); font-size:34px; font-weight:600; letter-spacing:-.005em;
  margin:0; line-height:1.15; text-wrap:balance;
}
.tag { margin:6px 0 0; color:var(--ink-2); font-size:14px; max-width:68ch; }
.bosh .ong { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
h2 {
  font-family:var(--serif); font-size:20px; font-weight:600; margin:34px 0 12px;
  letter-spacing:-.005em;
}
h2 .izohcha { font-family:system-ui, sans-serif; font-weight:400; font-size:12.5px;
  color:var(--ink-3); margin-left:8px; letter-spacing:0; }
h3 { font-size:13px; font-weight:700; margin:0; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); }

/* ============================ tugmalar ============================ */
button, .tug {
  font:inherit; font-size:13.5px; font-weight:500; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); padding:8px 15px; border-radius:999px;
  transition:background .12s, color .12s, border-color .12s;
}
button:hover, .tug:hover { color:var(--ink); border-color:var(--axis); }
button:focus-visible, .tug:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
button.pri, .tug.pri { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
button.pri:hover, .tug.pri:hover { filter:brightness(1.08); color:var(--accent-ink); }
button.sm, .tug.sm { padding:5px 12px; font-size:12.5px; }
button.x { color:var(--down); padding:4px 9px; font-size:15px; line-height:1.1;
  border-color:transparent; background:transparent; border-radius:8px; }
button.x:hover { background:var(--down-bg); color:var(--down); }
button.dang, .tug.dang { color:var(--down); border-color:var(--line); }
button.dang:hover, .tug.dang:hover { background:var(--down-bg); color:var(--down);
  border-color:var(--down); }

.segment { display:inline-flex; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:3px; gap:2px; }
.segment a { padding:6px 14px; font-size:13px; font-weight:500; color:var(--ink-2);
  text-decoration:none; border-radius:999px; }
.segment a:hover { background:var(--surface-2); color:var(--ink); }
.segment a.on { background:var(--accent); color:var(--accent-ink); }

/* ============================ xabar ============================ */
.xabar { padding:11px 15px; border-radius:var(--r-sm); margin-bottom:14px; font-size:13.5px;
  display:flex; gap:10px; align-items:flex-start; }
.xabar .ik { font-weight:700; flex:none; }
.xabar.yaxshi { background:var(--up-bg); color:var(--up); }
.xabar.xato { background:var(--down-bg); color:var(--down); }
.xabar.ogoh { background:var(--warn-bg); color:var(--warn); }
.xabar a { color:inherit; font-weight:600; }

/* ============================ KPI plitalar ============================ */
.plitalar { display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:14px; }
.plita {
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 18px 15px; box-shadow:var(--shadow); overflow:hidden;
}
.plita::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--t1); }
.plita.c2::before { background:var(--t2); } .plita.c3::before { background:var(--t3); }
.plita.c4::before { background:var(--t4); } .plita.c5::before { background:var(--t5); }
.plita.c6::before { background:var(--t6); }
.plita dt {
  display:flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-top:3px;
}
.plita dt .ik { font-size:12px; color:var(--accent); }
.plita.c2 dt .ik { color:var(--t2); } .plita.c3 dt .ik { color:var(--t3); }
.plita.c4 dt .ik { color:var(--t4); } .plita.c5 dt .ik { color:var(--t5); }
.plita.c6 dt .ik { color:var(--t6); }
.plita dd {
  margin:9px 0 0; font-size:27px; font-weight:650; letter-spacing:-.03em; line-height:1.1;
}
.plita dd small { font-size:12.5px; font-weight:400; color:var(--ink-2); margin-left:5px;
  letter-spacing:0; }
.plita .past { margin-top:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color:var(--ink-3); }

.delta { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:650;
  padding:2px 8px; border-radius:999px; font-variant-numeric:tabular-nums; }
.delta.up { background:var(--up-bg); color:var(--up); }
.delta.down { background:var(--down-bg); color:var(--down); }
.delta.flat { background:var(--surface-2); color:var(--ink-3); }

/* ============================ kartalar/jadval ============================ */
.karta { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; }
.karta + .karta { margin-top:14px; }
.karta .sarlavha { padding:14px 18px; border-bottom:1px solid var(--line); display:flex;
  align-items:center; gap:12px; flex-wrap:wrap; }
.karta .tana { padding:18px; }

table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding:11px 16px; background:var(--surface-2);
  border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:10px 16px; border-bottom:1px solid var(--line); font-size:13.5px;
  vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--surface-2); }
th.r, td.r { text-align:right; }
th.c, td.c { text-align:center; }
th.urg { color:var(--accent); }
td.r, td.num, .num { font-variant-numeric:tabular-nums; }
td.nom { font-weight:550; }
.dim { color:var(--ink-2); }
.dim2 { color:var(--ink-3); font-size:12.5px; }
.yashil { color:var(--up); }
.qizil { color:var(--down); }
.bad { color:var(--down); }
.bosh-yoq { padding:34px 16px; text-align:center; color:var(--ink-2); font-size:13.5px; }

.track { display:block; height:7px; background:var(--accent-soft); border-radius:0 4px 4px 0;
  min-width:54px; }
.bar { display:block; height:100%; background:var(--accent); border-radius:0 4px 4px 0;
  min-width:3px; }
.track.k { background:var(--series-2-soft); }
.track.k .bar { background:var(--series-2); }

/* kunni bosib ochish (drill-down) */
.ochkun { display:inline-flex; align-items:center; gap:8px; background:none; border:0;
  cursor:pointer; padding:0; font:inherit; color:inherit; text-align:left; }
.ochkun .uch { color:var(--ink-3); font-size:10px; display:inline-block;
  transition:transform .15s ease; }
.kun-satr.ochiq { background:var(--surface-2); }
.kun-satr.ochiq .ochkun .uch { transform:rotate(90deg); color:var(--accent); }
.kun-satr.ochiq .ochkun .nom { color:var(--accent); }
.ochkun:hover .nom { color:var(--accent); }
.ich-satr > td { padding:0; background:var(--surface-2); }
.ich-satr:hover { background:var(--surface-2); }
.ich-boshi { padding:11px 16px; font-size:13px; color:var(--ink-2);
  border-bottom:1px solid var(--line); }
.ich-boshi b { color:var(--ink); font-weight:600; }
.ich-jadval { background:var(--surface); }
.ich-jadval th { background:var(--surface); font-size:9.5px; }
.ich-jadval td { font-size:13px; }
.ich-jadval tr:last-child td { border-bottom:1px solid var(--line); }
.ich-yuk { padding:22px 16px; color:var(--ink-2); font-size:13px; text-align:center; }

/* JAMI (yig'indi) qatori */
.jami-satr td { border-top:2px solid var(--line); border-bottom:0;
  font-weight:650; background:var(--surface-2); }
.jami-satr:hover { background:var(--surface-2); }
.jami-satr .nom { letter-spacing:.03em; color:var(--ink); }

/* sanoq belgisi (nav va sarlavhada) */
.belgi-son { display:inline-block; min-width:18px; padding:0 5px; height:18px; line-height:18px;
  text-align:center; font-size:11px; font-weight:700; border-radius:9px;
  background:var(--accent); color:var(--accent-ink); vertical-align:middle; }

/* import formasi bo'limlari (Billz uslubida) */
.qism-sarlavha { font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin:20px 0 12px; padding-bottom:7px;
  border-bottom:1px dashed var(--line); }
.qism-sarlavha:first-child { margin-top:0; }
.ikki { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.uch { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 16px; }
@media (max-width:640px) { .ikki, .uch { grid-template-columns:1fr; } }

/* katalog holati teglari */
.teg { display:inline-block; padding:1px 8px; border-radius:20px; font-size:11px;
  font-weight:700; letter-spacing:.02em; vertical-align:middle; white-space:nowrap; }
.teg-yangi { background:var(--accent); color:var(--accent-ink); }
.teg-bor { background:var(--surface-2); color:var(--up); border:1px solid var(--line);
  font-weight:600; }

/* ============================ grafik ============================ */
.grafik { position:relative; }
.grafik svg { display:block; width:100%; height:auto; overflow:visible; }
.g-grid { stroke:var(--grid); stroke-width:1; }
.g-axis { stroke:var(--axis); stroke-width:1; }
.g-tick { fill:var(--ink-3); font-size:10.5px; font-variant-numeric:tabular-nums; }
.g-maydon { fill:var(--accent); opacity:.11; }
.g-chiziq { fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round;
  stroke-linecap:round; }
.g-nuqta { fill:var(--accent); stroke:var(--surface); stroke-width:2; }
.g-hover { stroke:var(--axis); stroke-width:1; stroke-dasharray:3 3; }
.g-tut { fill:transparent; cursor:crosshair; }

.tooltip {
  position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-100%);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:0 6px 18px rgba(0,0,0,.14); padding:9px 12px; font-size:12.5px;
  white-space:nowrap; z-index:5; transition:opacity .09s;
}
.tooltip b { display:block; font-size:11.5px; color:var(--ink-3); font-weight:700;
  margin-bottom:4px; letter-spacing:.04em; }
.tooltip .q { font-variant-numeric:tabular-nums; font-weight:650; font-size:14px; }

/* ============================ forma ============================ */
input[type=text], input[type=number], input[type=password], input[type=file], select {
  font:inherit; font-size:13.5px; width:100%; padding:8px 11px; background:var(--field);
  color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm);
}
input[type=number] { text-align:right; font-variant-numeric:tabular-nums; }
input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
label { font-size:13px; color:var(--ink-2); }
.qator { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-top:16px; }
.yangi { background:var(--surface-2); }
.yangi td { border-top:2px solid var(--line); }
.maydon { margin-bottom:14px; }
.maydon label { display:block; margin-bottom:6px; }
.hint { margin:11px 0 0; font-size:12.5px; color:var(--ink-3); line-height:1.65; }

.markaz { min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px 20px; background:var(--plane); }
.markaz .quti { width:100%; max-width:390px; }
.markaz .karta { padding:28px; }
.markaz h1 { text-align:center; font-size:30px; }
.markaz .tag { text-align:center; margin:8px auto 22px; }

/* ============================ moslashuv ============================ */
.siq { overflow-x:auto; }
.siq table { min-width:640px; }

@media (max-width:900px) {
  .qavat { flex-direction:column; }
  .yon { width:100%; border-right:0; border-bottom:1px solid var(--sidebar-line);
    padding:12px 14px; }
  .yon .tepa { padding:0 0 10px; }
  .yon nav { flex-direction:row; flex-wrap:wrap; padding:0; gap:5px; }
  .yon nav a { padding:7px 11px; border-radius:999px; background:var(--surface-2); }
  .yon nav a small { display:none; }
  .yon .guruh { display:none; }
  .yon .ost { margin:12px 0 0; padding:12px 0 0; }
  .ichki { padding:18px 15px 48px; }
  h1 { font-size:26px; }
  .plita dd { font-size:23px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }