/* ======================================================================
   OTINOYILAR REESTRI — UMUMIY DIZAYN TIZIMI
   ----------------------------------------------------------------------
   Bu fayl butun sayt uchun yagona rang, panel, jadval va tugma uslublarini
   belgilaydi. base.html da ulanadi, shuning uchun har bir sahifada ishlaydi.

   Ranglar tanlovi: to'q qora ishlatilmaydi — asos sut rangi va iliq siyoh,
   aksentlar: chuqur yashil-ko'k (jiddiylik), olxo'ri (nafosat), oltin, marjon.
   ====================================================================== */

:root{
  /* --- Asosiy ranglar --- */
  --ink:#3D3548;          /* matn — qora emas, iliq siyoh */
  --ink-strong:#33304A;   /* sarlavhalar */
  --muted:#7C7288;        /* ikkilamchi matn */
  --cream:#FDFBF8;        /* sahifa foni */
  --sand:#F5EFE8;         /* yumshoq fon */
  --line:#E8DFD6;         /* chiziqlar/ramkalar */

  /* --- Aksentlar (och variantlari bilan) --- */
  --teal:#1F7A73;   --teal-l:#E6F2F1;
  --plum:#7A5A88;   --plum-l:#F1EAF4;
  --gold:#B98B21;   --gold-l:#FAF1DC;
  --rose:#C0736F;   --rose-l:#FBECEA;
  --green:#3E8E5A;  --green-l:#E8F4EC;
  --blue:#2E6BA8;   --blue-l:#E7EFF8;
  --amber:#C9903A;  --amber-l:#FBF1E2;
  --grey:#8A8595;   --grey-l:#F0EEF3;

  /* --- Diagramma ranglari (ketma-ket) --- */
  --c1:#1F7A73; --c2:#7A5A88; --c3:#C0736F; --c4:#B98B21;
  --c5:#2E6BA8; --c6:#3E8E5A; --c7:#9A6E5A; --c8:#5C7C9E;

  /* --- Shakl --- */
  --r-sm:10px; --r-md:16px; --r-lg:20px;
  --sh-sm:0 4px 16px rgba(61,53,72,.05);
  --sh-md:0 6px 22px rgba(61,53,72,.06);
  --sh-lg:0 14px 34px rgba(61,53,72,.12);
}

/* ======================= SAHIFA QOBIG'I ======================= */
.uz-page{
  background:
     radial-gradient(1100px 420px at 12% -8%, #F7EEF3 0%, transparent 60%),
     radial-gradient(900px 380px at 92% 4%, #E9F3F2 0%, transparent 62%),
     var(--cream);
  color:var(--ink);
  min-height:100%;
  padding-bottom:2rem;
}

/* Bo'lim sarlavhasi:  Sarlavha ————————————— */
.uz-sec-head{ display:flex; align-items:center; gap:1rem; margin:1.6rem 0 1.05rem; }
.uz-sec-head h2{ font-size:1.3rem; font-weight:700; margin:0; color:var(--ink-strong); }
.uz-sec-head .uz-line{ flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }

/* ======================= PANEL / KARTA ======================= */
.uz-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); overflow:hidden;
}
.uz-panel-head{
  padding:.9rem 1.25rem; border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#FBF7FA,#F2F8F7);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.uz-panel-head h4{ font-size:1.02rem; font-weight:700; margin:0; color:var(--ink-strong); }
.uz-panel-head small{ color:var(--muted); font-size:.8rem; }
.uz-panel-body{ padding:1.1rem 1.25rem 1.25rem; }

/* ======================= STAT PLITKALARI ======================= */
.uz-tiles{ display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.uz-tile{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:.9rem 1.1rem; box-shadow:var(--sh-sm); border-left:4px solid var(--tc,var(--teal));
}
.uz-tile .n{ font-size:1.65rem; font-weight:700; line-height:1.15; color:var(--ink-strong); }
.uz-tile .l{ font-size:.79rem; color:var(--muted); }
.uz-tile.t-teal { --tc:var(--teal); }
.uz-tile.t-plum { --tc:var(--plum); }
.uz-tile.t-gold { --tc:var(--gold); }
.uz-tile.t-rose { --tc:var(--rose); }
.uz-tile.t-green{ --tc:var(--green); }
.uz-tile.t-blue { --tc:var(--blue); }

/* Yumshoq (rangli fonli) plitka */
.uz-soft{ border-radius:var(--r-md); padding:.85rem 1rem; }
.uz-soft .n{ font-size:1.55rem; font-weight:700; line-height:1.1; }
.uz-soft .l{ font-size:.78rem; opacity:.88; }
.uz-soft.s-teal { background:var(--teal-l);  color:var(--teal); }
.uz-soft.s-plum { background:var(--plum-l);  color:var(--plum); }
.uz-soft.s-gold { background:var(--gold-l);  color:var(--gold); }
.uz-soft.s-rose { background:var(--rose-l);  color:var(--rose); }
.uz-soft.s-green{ background:var(--green-l); color:var(--green); }
.uz-soft.s-blue { background:var(--blue-l);  color:var(--blue); }
.uz-soft.s-amber{ background:var(--amber-l); color:var(--amber); }
.uz-soft.s-grey { background:var(--grey-l);  color:var(--grey); }

/* ======================= FILTR PANELI ======================= */
.uz-filter{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); padding:1.15rem 1.25rem; margin-bottom:1.25rem;
}
.uz-filter .form-label{
  font-size:.78rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:.3rem;
}
.uz-filter .form-control,
.uz-filter .form-select{
  border:1px solid var(--line); border-radius:var(--r-sm); background:#FEFCFA;
}
.uz-filter .form-control:focus,
.uz-filter .form-select:focus{
  border-color:var(--teal); box-shadow:0 0 0 .18rem rgba(31,122,115,.13); background:#fff;
}
.uz-filter .uz-box{
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:#FEFCFA; padding:.6rem .75rem;
}
.uz-filter .form-check-label{ font-size:.87rem; }
.uz-filter .form-check-input:checked{ background-color:var(--teal); border-color:var(--teal); }

/* ======================= TUGMALAR ======================= */
.uz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid transparent; border-radius:999px;
  padding:.5rem 1.25rem; font-size:.9rem; font-weight:600;
  text-decoration:none; cursor:pointer; transition:.18s; white-space:nowrap;
}
.uz-btn-main{ background:linear-gradient(135deg,var(--teal),#2E9A86); color:#fff; }
.uz-btn-main:hover{ filter:brightness(1.07); color:#fff; }
.uz-btn-plum{ background:linear-gradient(135deg,var(--plum),#9A76A8); color:#fff; }
.uz-btn-plum:hover{ filter:brightness(1.07); color:#fff; }
.uz-btn-ghost{ background:#fff; border-color:var(--line); color:var(--ink); }
.uz-btn-ghost:hover{ border-color:var(--plum); color:var(--plum); box-shadow:0 4px 14px rgba(122,90,136,.13); }
.uz-btn:disabled,.uz-btn.disabled{ opacity:.5; pointer-events:none; }

/* ======================= JADVAL ======================= */
.uz-table-wrap{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); overflow:hidden;
}
.uz-table{ width:100%; margin:0; font-size:.88rem; border-collapse:separate; border-spacing:0; }
.uz-table thead th{
  background:linear-gradient(135deg,#1F7A73,#3E6E86);
  color:#fff; font-weight:600; font-size:.82rem;
  padding:.7rem .6rem; text-align:center; vertical-align:middle;
  border:0; border-right:1px solid rgba(255,255,255,.16);
  position:sticky; top:0; z-index:3;
}
.uz-table thead th:last-child{ border-right:0; }
.uz-table tbody td{
  padding:.55rem .6rem; vertical-align:middle;
  border-bottom:1px solid var(--line); border-right:1px solid #F2ECE5;
  color:var(--ink);
}
.uz-table tbody td:last-child{ border-right:0; }
.uz-table tbody tr:nth-child(even) td{ background:#FBF8F5; }
.uz-table tbody tr:hover td{ background:var(--teal-l); }
.uz-table tfoot td{
  background:var(--sand); font-weight:700; color:var(--ink-strong);
  padding:.6rem; border-top:2px solid var(--line);
}
.uz-table .num{ text-align:center; font-variant-numeric:tabular-nums; }

/* ======================= DIAGRAMMALAR ======================= */
/* Gorizontal ustunli diagramma */
.uz-bars{ display:flex; flex-direction:column; gap:.5rem; }
.uz-bar{ display:grid; grid-template-columns:11rem 1fr 3.4rem; align-items:center; gap:.7rem;
         font-size:.86rem; text-decoration:none; color:var(--ink); }
.uz-bar .nm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uz-bar .tr{ height:11px; background:var(--sand); border-radius:999px; overflow:hidden; }
.uz-bar .fl{ display:block; height:100%; border-radius:999px;
             background:linear-gradient(90deg,var(--bc,var(--teal)),var(--bc2,#6BAF9E)); }
.uz-bar .vl{ text-align:right; font-weight:700; color:var(--bc,var(--teal)); font-variant-numeric:tabular-nums; }
.uz-bar:hover .nm{ color:var(--bc,var(--teal)); }
@media (max-width:575.98px){ .uz-bar{ grid-template-columns:7.5rem 1fr 2.8rem; } }

/* Vertikal ustunli diagramma (oylar dinamikasi) */
.uz-cols{ display:flex; align-items:flex-end; gap:.45rem; height:190px; padding-top:1.4rem; }
.uz-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
         height:100%; position:relative; }
.uz-col .cb{ width:100%; max-width:44px; border-radius:8px 8px 3px 3px;
             background:linear-gradient(180deg,#2E9A86,var(--teal)); min-height:3px; transition:.25s; }
.uz-col:hover .cb{ filter:brightness(1.12); }
.uz-col .cv{ position:absolute; top:-1.25rem; font-size:.74rem; font-weight:700; color:var(--teal); }
.uz-col .cl{ font-size:.72rem; color:var(--muted); margin-top:.35rem; }

/* Halqa (donut) diagramma */
.uz-donut-wrap{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.uz-donut{ position:relative; width:168px; height:168px; flex:0 0 168px; }
.uz-donut svg{ width:100%; height:100%; transform:rotate(-90deg); }
.uz-donut .mid{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.uz-donut .mid b{ font-size:1.5rem; line-height:1.1; color:var(--ink-strong); }
.uz-donut .mid small{ font-size:.72rem; color:var(--muted); }
.uz-legend{ display:flex; flex-direction:column; gap:.4rem; flex:1; min-width:190px; }
.uz-legend .li{ display:flex; align-items:center; gap:.5rem; font-size:.84rem; }
.uz-legend .dot{ width:11px; height:11px; border-radius:3px; flex:0 0 11px; }
.uz-legend .nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uz-legend .vl{ font-weight:700; font-variant-numeric:tabular-nums; }
.uz-legend .pc{ color:var(--muted); font-size:.78rem; width:2.9rem; text-align:right; }

/* Bo'sh holat */
.uz-empty{ text-align:center; color:var(--muted); padding:2rem 1rem; }

/* ======================= SAHIFALASH ======================= */
.uz-pag .page-link{
  border:1px solid var(--line); color:var(--ink); border-radius:var(--r-sm) !important;
  margin:0 .13rem; min-width:2.35rem; text-align:center;
}
.uz-pag .page-link:hover{ background:var(--teal-l); border-color:var(--teal); color:var(--teal); }
.uz-pag .active .page-link{ background:var(--teal); border-color:var(--teal); color:#fff; }
.uz-pag .disabled .page-link{ opacity:.45; }

/* ======================= BEJILAR ======================= */
.uz-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.75rem; padding:.2rem .65rem; border-radius:999px;
  background:var(--grey-l); color:var(--grey); white-space:nowrap;
}
.uz-chip.ok{ background:var(--green-l); color:var(--green); }
.uz-chip.warn{ background:var(--amber-l); color:var(--amber); }
.uz-chip.bad{ background:var(--rose-l); color:var(--rose); }
.uz-chip.info{ background:var(--teal-l); color:var(--teal); }