@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
/* ═══════════════════════════════════════════════════════════════
   XENORA DIZAYN TOKENLARI (1-bosqich) — navy asos + emerald urg'u + tilla milliy detal.
   Legacy nomlar (--bg/--gold/--text...) saqlangan → 73 sahifa buzilmaydi.
   Yangi semantik: --accent* (emerald, asosiy brend), --gold* (tilla, milliy detal).
   Dizayn nomli tokenlar (--ink/--panel/--line/--girih...) yangi komponentlar uchun.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Shriftlar */
  --font-d:'Sora',sans-serif;--font-b:'Inter',sans-serif;--font-m:'JetBrains Mono',monospace;
  /* Emerald — ASOSIY brend urg'u */
  --accent:#22c55e;--accent-lt:#34d399;--accent-dk:#0d9488;
  --accent-dim:rgba(34,197,94,.14);--accent-glow:0 0 20px rgba(34,197,94,.32);
  --emerald:#22c55e;--emerald-lt:#34d399;--emerald-dk:#0d9488;--emerald-glow:rgba(34,197,94,.14);
  /* Tilla — milliy detal (asosiy emas) */
  --gold:#d4b46c;--gold-lt:#f5d97a;--gold-dim:rgba(212,180,108,.13);--gold-glow:0 0 20px rgba(212,180,108,.35);
  /* Navy fon qatlamlari (legacy --bg* nomlari) */
  --bg:#070f1e;--bg2:#0f2038;--bg3:#0d1c33;--bg4:#0a1628;
  --bg-mid:#0a1628;--bg-glow:#0d1c33;
  --panel1:#0f2038;--panel2:#0d1c33;--sidebar1:#0d1c33;--sidebar2:#0a1628;
  /* Chiziq/border */
  --border:rgba(120,160,220,.18);--border2:rgba(120,160,220,.10);
  --line:rgba(120,160,220,.10);--line-str:rgba(120,160,220,.18);
  /* Matn (ink) — 6-bosqich: xira matn kontrasti oshirildi (label/placeholder o'qilsin) */
  --text:#e8eef5;--text2:#8b9bb0;--text3:#6b7d94;
  --ink:#e8eef5;--ink-mut:#8b9bb0;--ink-dim:#6b7d94;
  /* Naqsh (girih) + karta soya */
  --girih:#5eb3ff;--girih-op:.09;
  --card-shadow:0 8px 28px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.3);
  --card-shadow-hover:0 16px 40px rgba(0,0,0,.5), 0 4px 12px rgba(34,197,94,.12);
  /* Status */
  --success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--info:#3b82f6;
  --purple:#8b5cf6;
  --r:0.625rem;--r2:1rem;--r3:1.5rem;
  --tr:180ms ease;
  --sidebar:240px;
}
[data-theme="light"]{
  /* 6-bosqich: accent oq fonда o'qilsin uchun chuqurroq emerald (#0a7d72, ≥4.5:1) */
  --accent:#0a7d72;--accent-lt:#22c55e;--accent-dk:#0a7d72;
  --accent-dim:rgba(34,197,94,.12);--accent-glow:0 0 18px rgba(13,148,136,.28);
  --emerald:#22c55e;--emerald-lt:#34d399;--emerald-dk:#0d9488;--emerald-glow:rgba(34,197,94,.12);
  --gold:#b89235;--gold-lt:#c9a227;--gold-dim:rgba(201,168,76,.12);
  --bg:#f4f6fb;--bg2:#ffffff;--bg3:#eef2f9;--bg4:#e6ecf6;
  --bg-mid:#eef2f9;--bg-glow:#ffffff;
  --panel1:#ffffff;--panel2:#f8fafd;--sidebar1:#ffffff;--sidebar2:#f4f7fc;
  --border:rgba(30,60,120,.16);--border2:rgba(30,60,120,.10);
  --line:rgba(30,60,120,.10);--line-str:rgba(30,60,120,.16);
  /* 6-bosqich: xira matn #8b9bb0 → #677689 (oq fonда 2.6→4.3:1) */
  --text:#0d1b2e;--text2:#5a6b82;--text3:#677689;
  --ink:#0d1b2e;--ink-mut:#5a6b82;--ink-dim:#677689;
  /* 6-bosqich: success oq fonда o'qilsin (badge/pill/trend) */
  --success:#0d8a5a;
  --girih:#3b6fb5;--girih-op:.14;
  --card-shadow:0 6px 20px rgba(30,60,120,.10), 0 1px 4px rgba(30,60,120,.08);
  --card-shadow-hover:0 14px 32px rgba(30,60,120,.16), 0 4px 10px rgba(34,197,94,.10);
}
html,body{height:100%;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);transition:background .2s,color .2s}
button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit;color:inherit}
input,select{font-family:inherit;font-size:inherit}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ── Wrap ── */
.admin-wrap{display:flex;height:100vh;overflow:hidden}

/* ── Sidebar ── */
.admin-sidebar{
  width:var(--sidebar);background:var(--bg2);border-right:1px solid var(--border2);
  display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;
}
.sb-brand{
  height:60px;display:flex;align-items:center;gap:.875rem;padding:0 1.25rem;
  border-bottom:1px solid var(--border2);flex-shrink:0;
}
.sb-brand-icon{
  width:36px;height:36px;border-radius:10px;
  background:transparent;border:none;
  display:flex;align-items:center;justify-content:center;font-size:1.125rem;
}
.sb-brand-name{font-family:var(--font-d);font-size:1.05rem;font-weight:800;letter-spacing:1px;color:var(--text)}
.sb-brand-name .x{color:var(--accent)}
.sb-brand-tag{font-size:.625rem;color:var(--text3);font-weight:400;margin-top:1px}
.sb-nav{flex:1;overflow-y:auto;padding:.75rem 0}
.nav-section{padding:.375rem .875rem .25rem;font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-weight:600}
.nav-item{
  display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;
  margin:1px .5rem;border-radius:var(--r);font-size:.875rem;font-weight:500;
  color:var(--text2);transition:all var(--tr);cursor:pointer;position:relative;
}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:var(--accent-dim);color:var(--accent)}
.nav-item.active svg{color:var(--accent)}
.nav-item svg{flex-shrink:0;opacity:.7}
.nav-item.active svg{opacity:1}
.nav-badge{
  margin-left:auto;min-width:20px;height:20px;border-radius:10px;
  background:rgba(239,68,68,.2);color:var(--danger);font-size:.625rem;
  font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.sb-user{
  border-top:1px solid var(--border2);padding:1rem 1.25rem;display:flex;align-items:center;gap:.75rem;flex-shrink:0;
}
.sb-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--accent-dim);
  border:1.5px solid rgba(34,197,94,.4);display:flex;align-items:center;
  justify-content:center;font-weight:700;color:var(--accent);font-size:.875rem;flex-shrink:0;
}
.sb-user-info{flex:1;min-width:0}
.sb-user-name{font-size:.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-role{font-size:.6875rem;color:var(--text2)}
.sb-logout{color:var(--text3);transition:color var(--tr)}
.sb-logout:hover{color:var(--danger)}

/* ── Main ── */
.admin-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.admin-topbar{
  height:60px;background:var(--bg2);border-bottom:1px solid var(--border2);
  display:flex;align-items:center;padding:0 1.5rem;gap:1rem;flex-shrink:0;
}
.topbar-title{font-size:1.125rem;font-weight:700}
.topbar-actions{display:flex;align-items:center;gap:.625rem;margin-left:auto}
.tb-btn{
  display:flex;align-items:center;gap:.5rem;padding:.4375rem .875rem;
  background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);
  font-size:.8125rem;font-weight:500;color:var(--text2);transition:all var(--tr);
}
.tb-btn:hover{border-color:var(--accent);color:var(--accent)}
.tb-btn.primary{background:var(--accent-dim);border-color:rgba(34,197,94,.4);color:var(--accent)}
.tb-btn.primary:hover{box-shadow:var(--accent-glow)}
.date-range{font-size:.8125rem;color:var(--text2);white-space:nowrap}
.admin-content{flex:1;overflow-y:auto;padding:1.5rem}
/* Mobil topbar: tor ekranda siqilmasin — padding/gap kichrayadi, sana qisqa+nowrap,
   sarlavha zarur bo'lsa qisqaradi. Windows/keng ekran tegilmaydi. */
@media(max-width:640px){
  .admin-topbar{padding:0 .875rem;gap:.5rem}
  .topbar-actions{gap:.4375rem}
  .topbar-title{font-size:1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .date-range{font-size:.75rem}
  .tb-btn{padding:.4375rem .625rem}
}

/* ── Pages ── */
.admin-page{display:none}
.admin-page.active{display:block}

/* ── KPI Cards ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.5rem}
.kpi-card{
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);
  padding:1.25rem;transition:all var(--tr);position:relative;overflow:hidden;
}
.kpi-card:hover{border-color:var(--border);transform:translateY(-2px)}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.kpi-card.gold::before{background:var(--gold)}
.kpi-card.green::before{background:var(--success)}
.kpi-card.blue::before{background:var(--info)}
.kpi-card.purple::before{background:var(--purple)}
.kpi-card.teal::before{background:#14b8a6}
.kpi-label{font-size:.75rem;color:var(--text2);font-weight:500;margin-bottom:.75rem;display:flex;align-items:center;gap:.375rem}
.kpi-value{font-size:1.75rem;font-weight:800;line-height:1;margin-bottom:.375rem}
.kpi-card.gold   .kpi-value{color:var(--gold)}
.kpi-card.green  .kpi-value{color:var(--success)}
.kpi-card.blue   .kpi-value{color:var(--info)}
.kpi-card.purple .kpi-value{color:var(--purple)}
.kpi-card.teal   .kpi-value{color:#14b8a6}
.kpi-sub{font-size:.75rem;color:var(--text2)}
.kpi-trend{display:inline-flex;align-items:center;gap:.25rem;font-size:.6875rem;font-weight:600;margin-left:.375rem;padding:.125rem .375rem;border-radius:4px}
.trend-up  {background:rgba(16,185,129,.1);color:var(--success)}
.trend-down{background:rgba(239,68,68,.1);color:var(--danger)}
.trend-flat{background:rgba(159,203,185,.1);color:var(--text2)}
.kpi-trend:empty{display:none}

/* ── Charts placeholder ── */
.charts-row{display:grid;grid-template-columns:2fr 1fr;gap:1rem;margin-bottom:1.5rem}
.chart-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);padding:1.25rem}
.chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.chart-head h3{font-size:.9375rem;font-weight:700}
.chart-period{display:flex;background:var(--bg3);border-radius:var(--r);padding:2px;gap:2px}
.period-btn{padding:.25rem .625rem;font-size:.75rem;font-weight:500;border-radius:calc(var(--r) - 2px);color:var(--text2);transition:all var(--tr)}
.period-btn.active{background:var(--accent-dim);color:var(--accent)}

/* Mini bar chart */
.mini-chart{height:120px;display:flex;align-items:flex-end;gap:4px;padding:.5rem 0}
.bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.bar{border-radius:3px 3px 0 0;transition:all .3s;min-height:3px}
.bar.gold-bar{background:linear-gradient(180deg,#e2c97a,var(--gold))}
.bar.blue-bar{background:linear-gradient(180deg,#60a5fa,var(--info))}
.bar-label{font-size:.5625rem;color:var(--text3)}

/* #18 "Sotuv dinamikasi" AREA SVG — konteyner ICHIDA qolsin (o'ng "To'lov usullari"
   kartasiga tegmasin). Sabab: grid item min-width:auto (SVG intrinsik 600px) +
   .mini-chart eski flex/fixed-height. Yechim: karta shrink + SVG 100% fit (height:auto).
   Grafik FUNKSIYASI (chiziq/Y o'qi/ma'lumot — JS) tegilmaydi, faqat ramka/o'lcham. */
.charts-row > .chart-card:first-child{min-width:0}
#revenueChart{display:block;height:auto;min-width:0;overflow:hidden}
#revenueChart > svg{display:block;width:100%;max-width:100%;height:auto}

/* Donut chart */
.donut-wrap{position:relative;width:120px;height:120px;margin:0 auto .875rem}
.donut-svg{transform:rotate(-90deg)}
.donut-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.donut-val{font-size:1.25rem;font-weight:800;color:var(--accent)}
.donut-lbl{font-size:.625rem;color:var(--text2)}
.legend{display:flex;flex-direction:column;gap:.5rem}
.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.8125rem}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ── Table ── */
.data-table-wrap{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);overflow:hidden;margin-bottom:1.5rem}
.dt-head{display:flex;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--border2);gap:.75rem}
.dt-title{font-size:.9375rem;font-weight:700}
.dt-search{
  margin-left:auto;display:flex;align-items:center;background:var(--bg3);
  border:1px solid var(--border2);border-radius:var(--r);padding:.3125rem .625rem;gap:.375rem;
}
.dt-search input{background:transparent;border:none;color:var(--text);font-size:.8125rem;outline:none;width:180px}
.dt-search input::placeholder{color:var(--text3)}
table{width:100%;border-collapse:collapse}
thead th{padding:.625rem 1rem;text-align:left;font-size:.75rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border2);background:var(--bg3)}
tbody tr{border-bottom:1px solid var(--border2);transition:background var(--tr)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.02)}
td{padding:.75rem 1rem;font-size:.875rem;vertical-align:middle}
.td-bold{font-weight:600}
.td-gold{color:var(--accent);font-weight:700}
.td-sub{font-size:.75rem;color:var(--text2)}
.badge{display:inline-flex;align-items:center;padding:.1875rem .5rem;border-radius:4px;font-size:.6875rem;font-weight:600}
.badge-green {background:rgba(16,185,129,.1);color:var(--success)}
.badge-amber {background:rgba(245,158,11,.1);color:var(--warning)}
.badge-blue  {background:rgba(59,130,246,.1);color:var(--info)}
.badge-red   {background:rgba(239,68,68,.1);color:var(--danger)}
.badge-gray  {background:rgba(255,255,255,.06);color:var(--text2)}
.td-actions{display:flex;gap:.375rem}
.act-btn{
  width:30px;height:30px;border-radius:var(--r);display:flex;align-items:center;
  justify-content:center;transition:all var(--tr);background:var(--bg3);color:var(--text2);
}
.act-btn:hover{background:var(--accent-dim);color:var(--accent)}
.act-btn.danger:hover,.act-btn.act-danger:hover{background:rgba(239,68,68,.15);color:var(--danger)}
.dt-pagination{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-top:1px solid var(--border2);font-size:.8125rem;color:var(--text2)}
.pg-btns{display:flex;gap:.375rem}
.pg-btn{width:30px;height:30px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--border2);transition:all var(--tr)}
.pg-btn:hover,.pg-btn.active{border-color:var(--accent);color:var(--accent)}

/* ── Stat mini cards row ── */
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem}
.mini-stat{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);padding:1rem;display:flex;align-items:center;gap:.75rem}
.ms-icon{width:40px;height:40px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ms-green{background:rgba(16,185,129,.12)}
.ms-amber{background:rgba(245,158,11,.12)}
.ms-blue {background:rgba(59,130,246,.12)}
.ms-val{font-size:1.25rem;font-weight:800}
.ms-lbl{font-size:.75rem;color:var(--text2)}

/* ── Shift report ── */
.shift-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);padding:1.25rem;margin-bottom:1rem}
.shift-card h4{font-size:.875rem;font-weight:700;margin-bottom:.875rem;color:var(--text2)}
.shift-row{display:flex;justify-content:space-between;padding:.375rem 0;font-size:.875rem;border-bottom:1px solid var(--border2)}
.shift-row:last-child{border-bottom:none}
.shift-row .val{font-weight:700;color:var(--accent)}

/* ── Settings form ── */
.settings-section{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);padding:1.25rem;margin-bottom:1rem}
.settings-section h3{font-size:.9375rem;font-weight:700;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border2)}
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.form-group{margin-bottom:0}
.form-group label{display:block;font-size:.8125rem;font-weight:500;color:var(--text2);margin-bottom:.375rem}
.form-control{
  width:100%;padding:.5625rem .75rem;background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--r);color:var(--text);outline:none;transition:border-color var(--tr);
}
.form-control:focus{border-color:rgba(34,197,94,.4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.form-row .form-group{margin-bottom:0}
/* ── Modal overlay tizimi (debt / promo / quickSell / po / shift ...) ── */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:6000;
  align-items:center;justify-content:center;padding:1rem;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
}
.modal-overlay.open{display:flex;animation:pageEnter .18s ease}
.modal-card,.modal-box{
  width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--border2);
}
.modal-header h3,.modal-title{font-size:.9375rem;font-weight:700;margin:0;color:var(--text)}
.modal-close,.close-btn{
  background:none;border:none;color:var(--text2);font-size:1.25rem;line-height:1;
  cursor:pointer;padding:.25rem;border-radius:var(--r);transition:color var(--tr)}
.modal-close:hover,.close-btn:hover{color:var(--text)}
.modal-body{padding:1.25rem;display:flex;flex-direction:column;gap:.875rem}
.modal-footer{
  display:flex;align-items:center;justify-content:flex-end;gap:.5rem;
  padding:1rem 1.25rem;border-top:1px solid var(--border2)}
.tb-btn-primary{background:var(--accent-dim);border-color:rgba(34,197,94,.4);color:var(--accent)}
.tb-btn-primary:hover{box-shadow:var(--accent-glow);border-color:var(--accent);color:var(--accent)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--border2)}
.toggle-row:last-child{border-bottom:none}
.toggle-label{font-size:.875rem}
.toggle-sub{font-size:.75rem;color:var(--text2);margin-top:.125rem}
.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.slider{
  position:absolute;inset:0;border-radius:12px;background:var(--bg4);
  border:1px solid var(--border2);transition:.3s;cursor:pointer;
}
.slider::before{
  content:'';position:absolute;width:18px;height:18px;left:2px;top:2px;
  border-radius:50%;background:var(--text3);transition:.3s;
}
.toggle-switch input:checked+.slider{background:var(--accent-dim);border-color:rgba(34,197,94,.5)}
.toggle-switch input:checked+.slider::before{transform:translateX(20px);background:var(--accent)}

/* ── Toast ── */
#toasts{position:fixed;top:1rem;right:1rem;z-index:9000;display:flex;flex-direction:column;gap:.5rem;width:300px}
.toast{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:.75rem 1rem;font-size:.8125rem;animation:toastIn .2s ease;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.toast.success{border-color:rgba(16,185,129,.4);color:var(--success)}
.toast.error  {border-color:rgba(239,68,68,.4);color:var(--danger)}
.toast.info   {color:var(--text2)}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}

@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .admin-sidebar{display:none}
  .charts-row{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}

/* ─── Premium Admin enhancements ─── */
@keyframes pageEnter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes kpiEnter{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes chartIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Smooth page transitions */
.admin-page.active{animation:pageEnter .22s ease}

/* KPI cards staggered entrance */
.kpi-card{animation:kpiEnter .28s ease backwards}
.kpi-grid .kpi-card:nth-child(1){animation-delay:.04s}
.kpi-grid .kpi-card:nth-child(2){animation-delay:.09s}
.kpi-grid .kpi-card:nth-child(3){animation-delay:.14s}
.kpi-grid .kpi-card:nth-child(4){animation-delay:.19s}
.kpi-grid .kpi-card:nth-child(5){animation-delay:.24s}

/* Chart cards entrance */
.chart-card{animation:chartIn .35s ease backwards}
.charts-row .chart-card:nth-child(2){animation-delay:.1s}

/* Data table entrance */
.data-table-wrap{animation:chartIn .4s ease .05s backwards}

/* Table row gold-tinted hover */
tbody tr:hover{background:rgba(34,197,94,.04)!important}

/* Nav item active — left border indicator */
.nav-item.active{border-left:2px solid var(--accent);padding-left:calc(1rem - 2px)}

/* KPI card hover shadow */
.kpi-card:hover{border-color:var(--border);box-shadow:0 4px 24px rgba(34,197,94,.07)}

/* Period buttons */
.period-btn.active{box-shadow:0 1px 6px rgba(34,197,94,.18)}

/* Topbar title gradient */
.topbar-title{background:linear-gradient(135deg,var(--text) 40%,var(--text2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Mini stat hover */
.mini-stat{transition:all var(--tr)}
.mini-stat:hover{border-color:rgba(34,197,94,.25);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.15)}

/* Topbar primary button */
.tb-btn.primary:hover{box-shadow:0 0 16px rgba(34,197,94,.18)}

/* Toast enhanced shadow */
.toast{box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.25)!important}

/* Branch switcher */
.branch-switcher{position:relative}
.branch-btn{
  display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;
  background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);
  font-size:.8125rem;font-weight:500;color:var(--text2);cursor:pointer;
  transition:all var(--tr);max-width:180px;
}
.branch-btn:hover{border-color:var(--accent);color:var(--accent)}
.branch-btn .branch-dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;
}
.branch-btn .branch-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.branch-dropdown{
  position:absolute;top:calc(100% + 4px);right:0;min-width:220px;
  background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r2);
  box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:200;display:none;overflow:hidden;
}
.branch-dropdown.open{display:block}
.branch-dd-item{
  display:flex;align-items:center;gap:.625rem;padding:.625rem 1rem;
  font-size:.8125rem;cursor:pointer;transition:background var(--tr);
}
.branch-dd-item:hover{background:var(--bg4)}
.branch-dd-item.selected{color:var(--accent)}
.branch-dd-item .bd-dot{
  width:8px;height:8px;border-radius:50%;background:var(--text3);flex-shrink:0;
}
.branch-dd-item.selected .bd-dot{background:var(--accent)}
.branch-dd-all{border-bottom:1px solid var(--border2);color:var(--text2)}
.branch-dd-all.selected{color:var(--accent)}
.branch-dd-divider{border-top:1px solid var(--border2);margin:.25rem 0}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD ATMOSPHERE (dashboard5) — visual layer only, dashboard-scoped
   ═══════════════════════════════════════════════════════════════ */
:root{ --glass-bg:rgba(15,32,56,.55); --glass-border:rgba(34,197,94,.22); }
[data-theme="light"]{ --glass-bg:rgba(255,255,255,.62); --glass-border:rgba(13,148,136,.22); }

/* keep dashboard content above the atmosphere layer */
#pageDashboard{position:relative}
#pageDashboard>:not(.dash-atmos){position:relative;z-index:1}

/* ── Atmosphere layer (lives inside #pageDashboard → only visible on dashboard) ── */
.dash-atmos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:var(--r2)}
/* Dashboard mandala/yulduz-tekstura OLIB TASHLANDI — global koshin (admin-atmos)
   dashboard ostidan ham ko'rinadi (glass kartalar yarim-shaffof). Bu qatlam endi
   faqat nozik nur-blob (chuqurlik) + tilla zarralar (milliy detal) uchun. */
.da-mandala{display:none}

/* breathing light blobs — emerald + gold (koshin asosiy → nur kamaytirilgan) */
.da-glow{position:absolute;border-radius:50%;filter:blur(64px);mix-blend-mode:screen;opacity:.4}
.da-glow.g1{width:40vmin;height:40vmin;top:-8%;left:6%;background:radial-gradient(circle,#22c55e,transparent 70%);animation:daBreathe 18s ease-in-out infinite}
.da-glow.g2{width:36vmin;height:36vmin;bottom:-10%;right:6%;background:radial-gradient(circle,#d4b46c,transparent 70%);animation:daBreathe 22s ease-in-out infinite 2s}
.da-glow.g3{width:28vmin;height:28vmin;top:38%;right:32%;background:radial-gradient(circle,#22c55e,transparent 70%);animation:daBreathe 16s ease-in-out infinite 1s}
@keyframes daBreathe{0%,100%{transform:scale(.9);opacity:.22}50%{transform:scale(1.12);opacity:.42}}

/* floating gold particles */
.da-particle{position:absolute;bottom:-12px;border-radius:50%;background:radial-gradient(circle,#ecdca8,#d4b46c);opacity:.6;animation:daFloat linear infinite}
@keyframes daFloat{
  0%{transform:translateY(0) scale(.5);opacity:0}
  12%{opacity:.7}
  88%{opacity:.7}
  100%{transform:translateY(-92vh) scale(1);opacity:0}
}

/* ── Glassmorphism cards (dashboard only) ── */
#pageDashboard .kpi-card,
#pageDashboard .chart-card{
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid var(--glass-border);
  box-shadow:0 4px 30px rgba(0,0,0,.18);
}
/* The .55 glass is translucent, so a tall chart card's lower half reads dark
   wherever the atmosphere glow doesn't reach behind it. ROOT FIX: give the two
   big chart cards a UNIFORM, near-opaque emerald fill that fully covers the
   whole height — its look no longer depends on the patchy backdrop, so there is
   no dark zone anywhere. (KPI cards keep the lighter .55 glass.) The faint top
   sheen fades out by 30%, the emerald base stays uniform top-to-bottom. */
#pageDashboard .chart-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(15,32,56,.9), rgba(10,22,42,.93));
}
[data-theme="light"] #pageDashboard .chart-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,253,.93));
}
/* defensive: ensure the card's direct inner containers (chart head, mini-chart,
   donut wrap, legend) never carry their own dark background — only the card
   paints a background. Does NOT touch bars/donut/legend colours (nested deeper). */
#pageDashboard .chart-card > *{background:transparent}

/* ── Oylik maqsad (progress ring) karta — glass, dashboard scoped ── */
#pageDashboard .goal-card{
  display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem;padding:1.25rem 1.5rem;
  border:1px solid var(--glass-border);border-radius:var(--r2);
  background:linear-gradient(180deg, rgba(15,32,56,.9), rgba(10,22,42,.93));
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 4px 30px rgba(0,0,0,.18);
}
[data-theme="light"] #pageDashboard .goal-card{background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,253,.93))}
.goal-ring-wrap{position:relative;width:120px;height:120px;flex-shrink:0}
.goal-ring{display:block;transform:rotate(-90deg)}
.goal-ring-bg{fill:none;stroke:rgba(34,197,94,.12);stroke-width:10}
.goal-ring-fill{fill:none;stroke:url(#goalGrad);stroke-width:10;stroke-linecap:round;
  stroke-dasharray:326.726;stroke-dashoffset:326.726;
  transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.25,1)}
.goal-ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:var(--accent)}
.goal-info{flex:1;min-width:0}
.goal-title{font-size:.9375rem;font-weight:700;margin-bottom:.35rem}
.goal-stat{font-size:1.5rem;font-weight:800;color:var(--accent);line-height:1;margin-bottom:.4rem}
.goal-sub{font-size:.8125rem;color:var(--text2)}
.goal-sub b{color:var(--text)}
.goal-card.goal-empty{gap:1rem}
.goal-empty-icon{font-size:2rem;flex-shrink:0;opacity:.85}
@media (prefers-reduced-motion:reduce){ .goal-ring-fill{transition:none} }

/* ── Hisobotlar HUB (reportsHub) — premium glass kartalar ── */
.reports-hub-head{font-size:.875rem;color:var(--text2);margin-bottom:1rem}
.reports-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.report-hub-card{
  display:flex;flex-direction:column;gap:.4rem;padding:1.5rem;text-decoration:none;cursor:pointer;
  border-radius:var(--r2);border:1px solid var(--glass-border);
  background:linear-gradient(180deg, rgba(15,32,56,.9), rgba(10,22,42,.93));
  color:var(--text);transition:transform .15s ease, border-color .2s, box-shadow .2s;
}
.report-hub-card:hover{transform:translateY(-3px);border-color:rgba(34,197,94,.5);box-shadow:0 12px 32px rgba(0,0,0,.25),0 0 22px rgba(34,197,94,.12)}
[data-theme="light"] .report-hub-card{background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,253,.95))}
.report-hub-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(34,197,94,.12);color:var(--accent);margin-bottom:.35rem}
.report-hub-title{font-size:1rem;font-weight:700}
.report-hub-desc{font-size:.8125rem;color:var(--text2);line-height:1.35}
@media (prefers-reduced-motion:reduce){ .report-hub-card{transition:none} }

#pageDashboard .kpi-card::after{ /* sheen sweep on hover */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.10) 48%,transparent 64%);
  transform:translateX(-130%);transition:transform .8s ease;
}
#pageDashboard .kpi-card:hover::after{transform:translateX(130%)}
#pageDashboard .kpi-card:hover,
#pageDashboard .chart-card:hover{
  border-color:rgba(34,197,94,.5);
  box-shadow:0 12px 42px rgba(0,0,0,.28),0 0 0 1px rgba(34,197,94,.14),0 0 22px rgba(34,197,94,.18);
}
[data-theme="light"] #pageDashboard .kpi-card,
[data-theme="light"] #pageDashboard .chart-card{box-shadow:0 4px 24px rgba(20,58,44,.08)}

/* ── 3D tilt support ── */
#pageDashboard .kpi-grid,
#pageDashboard .charts-row{perspective:900px}
#pageDashboard .kpi-card,
#pageDashboard .chart-card{transform-style:preserve-3d}

/* ── Chart animations ── */
@keyframes daBarGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
#pageDashboard .mini-chart .bar{transform-origin:bottom;animation:daBarGrow .7s cubic-bezier(.2,.85,.25,1) backwards}
#pageDashboard .mini-chart .bar-wrap:nth-child(1) .bar{animation-delay:.03s}
#pageDashboard .mini-chart .bar-wrap:nth-child(2) .bar{animation-delay:.09s}
#pageDashboard .mini-chart .bar-wrap:nth-child(3) .bar{animation-delay:.15s}
#pageDashboard .mini-chart .bar-wrap:nth-child(4) .bar{animation-delay:.21s}
#pageDashboard .mini-chart .bar-wrap:nth-child(5) .bar{animation-delay:.27s}
#pageDashboard .mini-chart .bar-wrap:nth-child(6) .bar{animation-delay:.33s}
#pageDashboard .mini-chart .bar-wrap:nth-child(7) .bar{animation-delay:.39s}
@keyframes daDonutIn{from{opacity:0;transform:rotate(-220deg) scale(.82)}to{opacity:1;transform:rotate(-90deg) scale(1)}}
#pageDashboard .donut-svg{animation:daDonutIn 1.1s cubic-bezier(.2,.8,.25,1) backwards}

/* ── Light-mode atmosphere toning ── */
[data-theme="light"] .da-mandala{opacity:.05}
[data-theme="light"] .da-glow{mix-blend-mode:normal;opacity:.16;filter:blur(70px)}
[data-theme="light"] .dash-atmos::before{opacity:.04}

/* ── Accessibility: reduced motion ── */
@media (prefers-reduced-motion:reduce){
  .da-mandala,.da-glow,.da-particle,
  #pageDashboard .mini-chart .bar,
  #pageDashboard .donut-svg{animation:none!important}
  .da-particle{display:none}
  #pageDashboard .kpi-card::after{display:none}
}

/* ── Performance: hide heavy atmosphere on small screens ── */
@media (max-width:640px){
  .da-mandala,.da-particle{display:none}
  .da-glow{filter:blur(42px);opacity:.3}
  #pageDashboard .kpi-card,
  #pageDashboard .chart-card{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}

/* ═══════════════════════════════════════════════════════════════
   UMUMIY PREMIUM — barcha SPA ichki sahifalar (87 ta) uchun umumiy klasslar.
   Bir marta stillanadi → hammasiga tushadi. Vizual only (JS/DOM tegilmaydi).
   MUHIM: .kpi-card/.chart-card premium #pageDashboard SCOPED → bu yerда
   tegilmaydi (ikki marta stil yo'q). Bloc base ta'riflardan KEYIN → override.
   ═══════════════════════════════════════════════════════════════ */
/* 1+3+5. Glass panellar: jadval konteyneri, stat karta, modal. Bir tekis zumrad
   (atmosfera faqat dashboard'da — ichki sahifada qora tag bo'lmasligi uchun
   uniform fon). Light variant alohida. */
.data-table-wrap,
.stat-card,
.modal-card,
.modal-box{
  background:linear-gradient(180deg, rgba(15,32,56,.82), rgba(10,22,42,.86));
  border:1px solid var(--glass-border);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
}
[data-theme="light"] .data-table-wrap,
[data-theme="light"] .stat-card,
[data-theme="light"] .modal-card,
[data-theme="light"] .modal-box{
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,253,.93));
}
.data-table-wrap{box-shadow:0 4px 26px rgba(0,0,0,.18),inset 0 1px 0 rgba(34,197,94,.05)}
[data-theme="light"] .data-table-wrap{box-shadow:0 4px 22px rgba(20,58,44,.08)}

/* .stat-card — admin.html'da CSS ta'rifi YO'Q edi (36× ishlatiladi, stilsiz).
   To'liq glass karta sifatida ta'riflaymiz. */
.stat-card{
  border-radius:var(--r2);padding:1.125rem;
  box-shadow:0 4px 24px rgba(0,0,0,.16);
  transition:transform .15s ease, border-color .2s, box-shadow .2s;
}
.stat-card:hover{transform:translateY(-2px);border-color:rgba(34,197,94,.45);box-shadow:0 10px 30px rgba(34,197,94,.1)}
[data-theme="light"] .stat-card:hover{box-shadow:0 8px 24px rgba(20,58,44,.1)}

/* 2. Jadval: thead tilla aksent tint, qator hover yengil zumrad. */
.data-table-wrap thead th,
.data-table thead th{background:rgba(34,197,94,.07)}
.data-table-wrap tbody tr:hover,
.data-table tbody tr:hover{background:rgba(34,197,94,.06)}

/* 4. Tugmalar: primary = to'ldirilgan tilla gradient; press feedback; hover lift. */
.tb-btn.primary,
.tb-btn-primary{
  background:linear-gradient(135deg,#16a34a,#22c55e,#16a34a);
  border:1px solid transparent;color:#04160d;font-weight:700;
}
.tb-btn.primary:hover,
.tb-btn-primary:hover{box-shadow:0 0 18px rgba(34,197,94,.4);transform:translateY(-1px);color:#04160d;border-color:transparent}
.tb-btn:hover{transform:translateY(-1px)}
.tb-btn:active,
.tb-btn.primary:active,
.tb-btn-primary:active,
.act-btn:active,
.pg-btn:active{transform:scale(.96)}
.act-btn,.pg-btn{transition:all var(--tr),transform .1s ease}

/* 5. Modal yumshoq ochilish */
@keyframes _genModalIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal-overlay.open .modal-card,
.modal-overlay.open .modal-box{animation:_genModalIn .22s ease}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  .stat-card,.tb-btn,.tb-btn-primary,.act-btn,.pg-btn,
  .modal-overlay.open .modal-card,.modal-overlay.open .modal-box{animation:none!important;transition:none!important}
}
/* ── Mobil: blur yengillashtir + jadval gorizontal scroll ── */
@media (max-width:768px){
  .data-table-wrap{overflow-x:auto;backdrop-filter:none;-webkit-backdrop-filter:none}
  .stat-card,.modal-card,.modal-box{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ── Xodimlar faoliyati (audit log) — harakat rangli badge + empty + skeleton ── */
.audit-badge{display:inline-flex;align-items:center;padding:.15rem .55rem;border-radius:99px;font-size:.6875rem;font-weight:700;white-space:nowrap}
.aa-create{background:rgba(16,185,129,.14);color:var(--success)}
.aa-update{background:rgba(245,158,11,.14);color:var(--warning)}
.aa-delete{background:rgba(239,68,68,.14);color:var(--danger)}
.aa-return{background:rgba(249,115,22,.16);color:#fb923c}
.aa-login {background:rgba(255,255,255,.06);color:var(--text2)}
.audit-empty{text-align:center;padding:3rem 1.5rem;color:var(--text2)}
.audit-empty .ae-ico{font-size:2.2rem;opacity:.6;margin-bottom:.5rem}
.audit-empty .ae-title{font-weight:700;font-size:.95rem}
.audit-empty .ae-hint{font-size:.8125rem;color:var(--text3);margin-top:.35rem}
#pageAuditLog td b{color:var(--accent);font-weight:700}
.sk-line{display:inline-block;height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(34,197,94,.13) 37%,rgba(255,255,255,.04) 63%);background-size:800px 100%;animation:_adShimmer 1.4s linear infinite}
@keyframes _adShimmer{0%{background-position:-450px 0}100%{background-position:450px 0}}
@media (prefers-reduced-motion:reduce){ .sk-line{animation:none} }

/* ═══ Umumiy yengil atmosfera — BARCHA admin SPA sahifalar ortida ═══
   Dashboard'ning maxsus kuchli atmosferasi (#pageDashboard .dash-atmos) o'z joyida
   qoladi (yuqorida, z-index:1). Bu yengil qatlam ortда (z-index:0) — hisobot/mahsulot/
   ombor va h.k. sahifalari endi qorong'i emas. */
.admin-main{position:relative}
.admin-topbar{position:relative;z-index:2}
.admin-content{position:relative;z-index:1}
.admin-atmos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* Koshin (o'zbek milliy naqsh) — butun fonga NOZIK yoyilgan tile. Namunadagi
   shell::before kabi: background-repeat, dark .09 / light .16. Aylanmaydi. */
.admin-atmos::before{
  content:'';position:absolute;inset:0;
  background:url('koshin-dark.svg') repeat;
  background-size:132px 132px;
  opacity:.09;
}
[data-theme="light"] .admin-atmos::before{background-image:url('koshin-light.svg');opacity:.16}
/* Yengil nafas oluvchi nur (koshin asosiy — bu juda nozik chuqurlik uchun) */
.admin-atmos::after{
  content:'';position:absolute;inset:0;mix-blend-mode:screen;
  background:
    radial-gradient(46vmin 46vmin at 6% -6%, rgba(34,197,94,.08), transparent 70%),
    radial-gradient(40vmin 40vmin at 98% 106%, rgba(202,168,90,.07), transparent 70%);
  animation:adminBreathe 34s ease-in-out infinite;
}
@keyframes adminBreathe{0%,100%{opacity:.5}50%{opacity:.8}}
[data-theme="light"] .admin-atmos::after{mix-blend-mode:normal;opacity:.4}

/* ── "← Hisobotlar" orqaga tugma (hisobot sahifalari; mobil'da qamalmaslik uchun) ── */
.report-back-btn{
  display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1rem;
  padding:.45rem .9rem;border-radius:var(--r);font-family:inherit;
  background:var(--accent-dim);border:1px solid rgba(34,197,94,.35);
  color:var(--accent);font-size:.8125rem;font-weight:600;cursor:pointer;transition:all var(--tr);
}
.report-back-btn:hover{border-color:var(--accent);box-shadow:0 0 14px rgba(34,197,94,.2);transform:translateY(-1px)}
.report-back-btn:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){ .admin-atmos::before,.admin-atmos::after{animation:none!important} }
@media (max-width:768px){ .admin-atmos::after{opacity:.35} }

/* ═══ BOSQICH 8: Mobil navigatsiya (drawer + hamburger) + light kontrast ═══ */
/* Hamburger va backdrop — DESKTOPда yashirin (faqat ≤900px, sidebar drawer bo'lganda) */
.nav-hamburger{
  display:none;align-items:center;justify-content:center;flex-shrink:0;
  width:40px;height:40px;margin-right:.25rem;border-radius:var(--r);
  background:var(--accent-dim);border:1px solid rgba(34,197,94,.32);
  color:var(--accent);font-size:1.35rem;line-height:1;cursor:pointer;
}
.nav-hamburger:active{transform:scale(.94)}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150}
.nav-cb{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

@media(max-width:900px){
  /* Sidebar → chapdan chiquvchi drawer (avvalgi display:none ni bekor qiladi) */
  .admin-sidebar{
    display:flex!important;position:fixed;top:0;left:0;bottom:0;height:100vh;
    width:min(82vw,var(--sidebar));z-index:200;transform:translateX(-100%);
    transition:transform .28s ease;box-shadow:0 0 44px rgba(0,0,0,.55);
  }
  .nav-cb:checked ~ .admin-sidebar{transform:translateX(0)}
  .nav-cb:checked ~ .nav-backdrop{display:block}
  .nav-hamburger{display:inline-flex}
}
@media(min-width:901px){ .nav-hamburger{display:none} }
@media (prefers-reduced-motion:reduce){ .admin-sidebar{transition:none!important} }

/* Light mode — kartalar/panellar aniq ajralsin (yumshoq soya) */
[data-theme="light"] .stat-card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .chart-card,
[data-theme="light"] .data-table-wrap,
[data-theme="light"] .modal-card,
[data-theme="light"] .modal-box{
  box-shadow:0 1px 3px rgba(16,54,42,.10),0 1px 2px rgba(16,54,42,.06);
}
/* Light mode — koshin nozik (namunadagi .16), nur juda yengil */
[data-theme="light"] .admin-atmos::before{opacity:.16}
[data-theme="light"] .admin-atmos::after{opacity:.26}

/* ═══════════════════════════════════════════════════════════════
   BOSQICH 5: ANIMATSIYA — count-up (JS: core.js) + stagger + hover lift + bounce.
   Namunadagi qiymatlar: cardIn, .stat:hover -4px, :active scale .99, bouncy cubic.
   Mavjud kpiEnter/pageEnter/sheen/bar/donut BUZILMAYDI — bu .stat-card uchun
   alohida (ichki sahifalar), dashboard kpi-card TILT (JS) bilan boshqariladi.
   ═══════════════════════════════════════════════════════════════ */
@keyframes statIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.stat-card{
  animation:statIn .5s cubic-bezier(.16,1,.3,1) backwards;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .2s;
}
/* stagger — kartalar ketma-ket pastdan (namunadagi .stat:nth-child kabi) */
.stat-card:nth-child(1){animation-delay:.04s}
.stat-card:nth-child(2){animation-delay:.10s}
.stat-card:nth-child(3){animation-delay:.16s}
.stat-card:nth-child(4){animation-delay:.22s}
.stat-card:nth-child(5){animation-delay:.28s}
.stat-card:nth-child(6){animation-delay:.34s}
.stat-card:nth-child(7){animation-delay:.40s}
.stat-card:nth-child(8){animation-delay:.46s}
/* hover ko'tarilish + soya kuchayishi (namunadagi -4px + card-shadow-hover) */
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:rgba(34,197,94,.45)}
/* bosishda bounce (namunadagi :active scale .99) */
.stat-card:active,
.kpi-card:active{transform:translateY(-1px) scale(.99)}
.kpi-card{transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow var(--tr), border-color var(--tr)}

/* Touch (mobil): hover yo'q — lift buzmasin, bosish/kirish ishlaydi */
@media (hover:none){
  .stat-card:hover{transform:none;box-shadow:var(--card-shadow)}
}
/* Reduced motion: kirish/lift o'chadi (sahifa tinch) */
@media (prefers-reduced-motion:reduce){
  .stat-card{animation:none!important}
  .stat-card:hover,.stat-card:active,.kpi-card:active{transform:none!important}
}