/* ═══ ASMIM · Rulon paneli ═══
   Ranglar korxona hisobotidan olingan: chuqur indigo fon, oltin logotip,
   jadvalda teal (mato) -> ko'k (rang kodi) -> kulrang (kerak) ->
   yashil/qizil (mavjudligi).
   Asosiy ko'rinish — QORONG'I. Yorug' rejim shu ohangning oq varianti.
*/

:root {
  /* ── Asosiy (qorong'i) ── */
  --paper:      #16143A;
  --panel:      #211E52;
  --panel-2:    #2A2764;
  --panel-3:    #33307A;
  --ink:        #F3F2FB;
  --ink-2:      #BEBBE2;
  --ink-3:      #8E8BBA;
  --rule:       #38357F;
  --rule-soft:  #2B2867;

  /* ── Brend ── */
  --gold:       #F2C43F;
  --gold-2:     #D9A82A;
  --qizil:      #E8443A;

  /* ── Jadval ohanglari ── */
  --teal:       #38AFC3;
  --teal-bg:    #17384A;
  --kok:        #3C7BE0;
  --kok-bg:     #1B2C63;
  --kulrang:    #9A97C4;
  --yashil:     #4CAF50;
  --yashil-bg:  #1B3A22;
  --sariq-bg:   #3A2F14;

  /* Semantik: harakat turlari */
  --in:         #4CAF50;   /* kirim  — mol keldi */
  --in-bg:      #1B3A22;
  --out:        #3C7BE0;   /* sotuv  — savdo */
  --out-bg:     #1B2C63;
  --ret:        #F2C43F;   /* vozvrat */
  --ret-bg:     #3A2F14;
  --ord:        #B07BE0;   /* buyurtma */
  --ord-bg:     #2E1F4A;
  --xavf:       #E8443A;   /* yetishmaydi */
  --xavf-bg:    #3E1A18;

  --urgu:       var(--gold);
  --shadow:     0 1px 2px rgba(0,0,0,.35), 0 10px 30px -18px rgba(0,0,0,.7);

  --f-display: "Zilla Slab", Georgia, serif;
  --f-body:    "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --rail: 246px;
}

/* ── Yorug' rejim: bir xil ohang, oq varaqda ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --paper:      #EEF0F7;
    --panel:      #FFFFFF;
    --panel-2:    #E7EAF5;
    --panel-3:    #D9DEEF;
    --ink:        #1A1840;
    --ink-2:      #45427A;
    --ink-3:      #6F6C9B;
    --rule:       #CBD0E6;
    --rule-soft:  #E1E5F1;

    --gold:       #B8860B;
    --gold-2:     #96690A;
    --qizil:      #C62B22;

    --teal:       #1B7E92;
    --teal-bg:    #DCEEF2;
    --kok:        #2455B8;
    --kok-bg:     #DEE6F8;
    --kulrang:    #6F6C9B;
    --yashil:     #2E7D32;
    --yashil-bg:  #DFEEE0;
    --sariq-bg:   #F7EED6;

    --in:         #2E7D32;  --in-bg:   #DFEEE0;
    --out:        #2455B8;  --out-bg:  #DEE6F8;
    --ret:        #9A6E1F;  --ret-bg:  #F7EED6;
    --ord:        #6B3FA0;  --ord-bg:  #EBE2F6;
    --xavf:       #C62B22;  --xavf-bg: #FAE3E1;

    --shadow:     0 1px 2px rgba(26,24,64,.07), 0 8px 24px -18px rgba(26,24,64,.3);
  }
}

:root[data-theme="light"] {
  --paper:      #EEF0F7;
  --panel:      #FFFFFF;
  --panel-2:    #E7EAF5;
  --panel-3:    #D9DEEF;
  --ink:        #1A1840;
  --ink-2:      #45427A;
  --ink-3:      #6F6C9B;
  --rule:       #CBD0E6;
  --rule-soft:  #E1E5F1;

  --gold:       #B8860B;
  --gold-2:     #96690A;
  --qizil:      #C62B22;

  --teal:       #1B7E92;
  --teal-bg:    #DCEEF2;
  --kok:        #2455B8;
  --kok-bg:     #DEE6F8;
  --kulrang:    #6F6C9B;
  --yashil:     #2E7D32;
  --yashil-bg:  #DFEEE0;
  --sariq-bg:   #F7EED6;

  --in:         #2E7D32;  --in-bg:   #DFEEE0;
  --out:        #2455B8;  --out-bg:  #DEE6F8;
  --ret:        #9A6E1F;  --ret-bg:  #F7EED6;
  --ord:        #6B3FA0;  --ord-bg:  #EBE2F6;
  --xavf:       #C62B22;  --xavf-bg: #FAE3E1;

  --shadow:     0 1px 2px rgba(26,24,64,.07), 0 8px 24px -18px rgba(26,24,64,.3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── Karkas ─────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }

.rail {
  position: sticky; top: 0; height: 100vh;
  padding: 20px 14px 16px 18px;
  border-right: 1px solid var(--rule);
  background: var(--panel);
  display: flex; flex-direction: column; gap: 18px; overflow-y: auto;
}

.brand { display: flex; flex-direction: column; gap: 1px; }
.brand .logo {
  font-family: var(--f-display);
  font-size: 27px; font-weight: 700; letter-spacing: .04em;
  color: var(--gold); line-height: 1.05;
}
.brand .logo i { font-style: normal; color: var(--qizil); }
.brand .tag-line {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.brand .hisob {
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3);
  margin-top: 3px;
}

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav button {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 9px;
  align-items: center; text-align: left;
  background: none; border: none; border-left: 2px solid transparent;
  padding: 7px 8px; border-radius: 5px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink-2);
}
.nav button em {
  font-family: var(--f-mono); font-style: normal; font-size: 11px;
  color: var(--ink-3);
}
.nav button .pill {
  font-family: var(--f-mono); font-size: 10.5px;
  background: var(--ret-bg); color: var(--ret);
  border-radius: 20px; padding: 1px 6px;
}
.nav button:hover { background: var(--panel-2); color: var(--ink); }
.nav button[aria-current="page"] {
  background: var(--panel-2); color: var(--ink);
  border-left-color: var(--gold); font-weight: 500;
}
.nav button[aria-current="page"] em { color: var(--gold); }
.nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.rail-foot {
  margin-top: auto; font-size: 11.5px; color: var(--ink-3);
  border-top: 1px solid var(--rule-soft); padding-top: 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.jonli { display: inline-flex; align-items: center; gap: 6px; }
.nuqta { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.jonli.on .nuqta { background: var(--yashil); box-shadow: 0 0 0 3px var(--yashil-bg); }

main { padding: 24px 28px 70px; min-width: 0; }

/* ── Sarlavha va filtr ──────────────────────────────────────────── */
.bosh {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
.bosh h1 {
  font-family: var(--f-display); font-size: 26px; font-weight: 600;
  margin: 0 0 2px; letter-spacing: -.01em; color: var(--ink);
}
.bosh p { margin: 0; color: var(--ink-3); font-size: 13.5px; }

.filtr { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filtr label {
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
}
input[type="date"], input[type="number"], input[type="password"], select {
  font: inherit; font-size: 13.5px;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 6px; padding: 5px 8px;
  color-scheme: dark;
}
:root[data-theme="light"] input,
:root[data-theme="light"] select { color-scheme: light; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) input,
  :root:not([data-theme="dark"]) select { color-scheme: light; }
}
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
.btn {
  font: inherit; font-size: 13.5px; cursor: pointer;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 6px; padding: 5px 12px;
}
.btn:hover { background: var(--panel-3); }
.btn.asosiy {
  background: var(--gold); color: #241F05; border-color: var(--gold-2);
  font-weight: 600;
}
.btn.asosiy:hover { filter: brightness(1.08); }
.btn.xavf { color: var(--xavf); border-color: var(--xavf); }

/* ── Ko'rsatkich plitalari ──────────────────────────────────────── */
.plitalar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 11px; margin-bottom: 18px;
}
.plita {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 8px; padding: 12px 14px; box-shadow: var(--shadow);
  border-top: 2px solid var(--rule);
}
.plita.in  { border-top-color: var(--in); }
.plita.out { border-top-color: var(--out); }
.plita.ret { border-top-color: var(--ret); }
.plita.ord { border-top-color: var(--ord); }
.plita.ogoh { border-top-color: var(--xavf); }
.plita h3 {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 4px;
}
.plita .son {
  font-family: var(--f-display); font-size: 27px; font-weight: 600;
  line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink);
}
.plita.ogoh .son { color: var(--xavf); }
.plita .izoh { font-size: 12.5px; color: var(--ink-3); }

/* ── Kartalar va jadval ─────────────────────────────────────────── */
.karta {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 8px; margin-bottom: 16px; overflow: hidden;
  box-shadow: var(--shadow);
}
.karta > header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 10px 15px; border-bottom: 1px solid var(--rule);
  background: var(--panel-2);
}
.karta > header h2 {
  font-family: var(--f-display); font-size: 16px; font-weight: 600;
  margin: 0; color: var(--gold);
}
.karta > header .yon { font-size: 12.5px; color: var(--ink-3); font-family: var(--f-mono); }
.karta .ich { padding: 14px 15px; }

.scroller { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td {
  text-align: left; padding: 7px 12px;
  border-bottom: 1px solid var(--rule-soft); white-space: nowrap;
}
thead th {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--panel-3); z-index: 1;
}
tbody tr:hover { background: var(--panel-2); }
tbody tr:last-child td { border-bottom: none; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--f-mono); }
td.matn { white-space: normal; max-width: 320px; color: var(--ink-2); }
tr.tekshir { background: linear-gradient(90deg, var(--ret) 0 3px, transparent 3px); }

/* Hisobotdagi ustun ohanglari */
td.mato  { color: var(--teal); font-weight: 500; }
td.kerak { color: var(--kulrang); }
td.kerak.bor0 { color: var(--xavf); font-weight: 600; }

.rang-kod {
  font-family: var(--f-mono); font-weight: 500; color: var(--kok);
}
.rang-nomi { color: var(--ink-3); font-size: 12.5px; }

.tag {
  display: inline-block; font-family: var(--f-mono); font-size: 10.5px;
  font-weight: 500; padding: 1px 7px; border-radius: 20px;
}
.tag.kirim    { background: var(--in-bg);  color: var(--in); }
.tag.sotuv    { background: var(--out-bg); color: var(--out); }
.tag.vozvrat  { background: var(--ret-bg); color: var(--ret); }
.tag.buyurtma { background: var(--ord-bg); color: var(--ord); }
.tag.neu      { background: var(--panel-3); color: var(--ink-2); }
.tag.bor      { background: var(--yashil-bg); color: var(--yashil); }
.tag.yoq      { background: var(--xavf-bg);   color: var(--xavf); }

.bar { height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; min-width: 60px; }
.bar > span { display: block; height: 100%; background: var(--teal); }

canvas { display: block; width: 100%; height: auto; }

a { color: var(--gold); }

.bosh-xabar { padding: 26px; text-align: center; color: var(--ink-3); font-size: 14px; }
.xato {
  background: var(--xavf-bg); color: var(--xavf); border: 1px solid var(--xavf);
  border-radius: 7px; padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px;
}
.eslatma {
  background: var(--ret-bg); border: 1px solid var(--rule);
  border-left: 3px solid var(--ret); border-radius: 7px;
  padding: 11px 14px; margin-bottom: 16px; font-size: 13.5px; color: var(--ink-2);
}

/* ── Kirish oynasi ──────────────────────────────────────────────── */
.qulf {
  position: fixed; inset: 0; background: var(--paper);
  display: grid; place-items: center; z-index: 50;
}
.qulf form {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 10px; padding: 26px 28px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 11px; min-width: 280px;
}
.qulf .logo {
  font-family: var(--f-display); font-size: 30px; font-weight: 700;
  letter-spacing: .04em; color: var(--gold); text-align: center;
}
.qulf .logo i { font-style: normal; color: var(--qizil); }
.qulf p { margin: 0; font-size: 13px; color: var(--ink-3); text-align: center; }

[hidden] { display: none !important; }

@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; border-right: none;
          border-bottom: 1px solid var(--rule); }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav button { grid-template-columns: auto auto; }
  main { padding: 18px 14px 60px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* ═══════════════════════════════════════════════════════════════════
   Power BI uslubidagi jadval — hisobotdagi ko'rinish
   ═══════════════════════════════════════════════════════════════════ */
table.pbi { font-size: 14.5px; }

table.pbi thead th {
  background: var(--panel-3);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 14px;
  border-bottom: 2px solid var(--rule);
}
table.pbi thead th.c-mato { background: #1B5E6E; color: #fff; }
table.pbi thead th.c-rang { background: #1B3F8F; color: #fff; }
table.pbi thead th.c-son  { background: #4A4870; color: #fff; }
table.pbi thead th.c-bor  { background: #1E6BC4; color: #fff; }

table.pbi td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-weight: 500;
}
table.pbi td.c-mato {
  background: linear-gradient(90deg, #2F9DB0, #1F7182);
  color: #fff;
}
table.pbi td.c-rang {
  background: linear-gradient(90deg, #2C64CE, #1B3F8F);
  color: #fff; font-family: var(--f-mono);
}
table.pbi td.c-son  { background: #4A4870; color: #fff; }
table.pbi td.c-bor  { color: #fff; font-weight: 600; text-align: center; }
table.pbi td.c-bor.ha  { background: #2E6B32; }
table.pbi td.c-bor.yoq { background: #C8322A; }
table.pbi tbody tr:hover td { filter: brightness(1.12); }

table.pbi tfoot td {
  background: var(--paper); color: var(--gold);
  font-weight: 700; font-size: 15px; border-top: 2px solid var(--rule);
  border-bottom: none;
}

:root[data-theme="light"] table.pbi td.c-mato,
:root[data-theme="light"] table.pbi td.c-rang,
:root[data-theme="light"] table.pbi td.c-son { color: #fff; }

/* ── Grafiklar yonma-yon ─────────────────────────────────────────── */
.grafiklar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-bottom: 16px;
}
.grafiklar .karta { margin-bottom: 0; }

.legenda {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 10px; font-size: 12.5px; color: var(--ink-2);
}
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
  flex: none; font-style: normal;
}

/* ── Boshqaruv (admin) ───────────────────────────────────────────── */
.tablar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tablar button {
  font: inherit; font-size: 13.5px; cursor: pointer;
  background: var(--panel); color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 20px; padding: 5px 14px;
}
.tablar button[aria-current="page"] {
  background: var(--gold); color: #241F05; border-color: var(--gold-2);
  font-weight: 600;
}

.qator-forma {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 12px 15px; border-bottom: 1px solid var(--rule);
  background: var(--panel-2);
}
.qator-forma input { min-width: 120px; }
.qator-forma input.keng { min-width: 210px; }

td.amallar { text-align: right; }
.mini {
  font: inherit; font-size: 12px; cursor: pointer; padding: 2px 8px;
  background: none; color: var(--ink-3); border: 1px solid var(--rule);
  border-radius: 5px; margin-left: 4px;
}
.mini:hover { background: var(--panel-3); color: var(--ink); }
.mini.xavf:hover { background: var(--xavf-bg); color: var(--xavf); border-color: var(--xavf); }

tr.nofaol td { opacity: .45; }
tr.nofaol td.c-mato, tr.nofaol td.c-rang { filter: grayscale(.7); }

.tahrir {
  font: inherit; font-size: inherit; color: inherit;
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: 2px 6px; width: 100%; min-width: 60px;
}
.tahrir:hover { border-color: var(--rule); }
.tahrir:focus { border-color: var(--gold); background: var(--panel); outline: none; }

/* ── Telefonda: jadval -> kartalar ───────────────────────────────── */
@media (max-width: 700px) {
  .rail { padding: 14px; gap: 12px; }
  .brand .logo { font-size: 22px; }
  .nav button { font-size: 13px; padding: 6px; }
  .bosh h1 { font-size: 21px; }
  .plitalar { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
  .plita .son { font-size: 22px; }

  table.mobil-karta thead { display: none; }
  table.mobil-karta, table.mobil-karta tbody,
  table.mobil-karta tr, table.mobil-karta td { display: block; width: 100%; }
  table.mobil-karta tr {
    border: 1px solid var(--rule); border-radius: 8px;
    margin: 0 0 9px; overflow: hidden; background: var(--panel);
  }
  table.mobil-karta td {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 6px 12px; border-bottom: 1px solid var(--rule-soft);
    white-space: normal; text-align: right;
  }
  table.mobil-karta td::before {
    content: attr(data-nom);
    font-family: var(--f-mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-3); text-align: left; flex: none;
  }
  table.mobil-karta td:empty { display: none; }
  table.mobil-karta tr:last-child td:last-child { border-bottom: none; }
  table.pbi td.c-mato, table.pbi td.c-rang, table.pbi td.c-son { background: none; color: inherit; }
  table.pbi td.c-mato { color: var(--teal); }
  table.pbi td.c-rang { color: var(--kok); }
  .scroller { overflow-x: visible; }
}