@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --ink:#131a24;
  --ink-soft:#4a5568;
  --sidebar:#0e1520;
  --sidebar-soft:#1a2432;
  --sidebar-text:#8b9bb0;
  --bg:#f4f5f7;
  --card:#ffffff;
  --line:#e4e7eb;
  --accent:#0d9488;
  --accent-soft:#e6f5f3;
  --amber:#d97706;
  --amber-soft:#fdf1e0;
  --danger:#dc2626;
  --danger-soft:#fce8e8;
  --radius:10px;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* `body`ga QAT'IY `height:100%` berib bo'lmaydi: u body balandligini ekran
   balandligiga qotirib qo'yadi, kontent esa undan tashqariga chiqib ketadi.
   Natijada `position:sticky` sidebar'ning "containing block"i ham shu qisqa
   body bo'lib qoladi va uzun sahifada (Sozlamalar, ko'p qatorli jadvallar)
   pastga aylantirganda sidebar yopishishni to'xtatib, ortida oq bo'shliq
   ochib qo'yardi. `min-height` esa body'ni kontent bilan birga o'stiradi. */
html{ height:100%; }
body{ min-height:100%; }
body{ font-family:var(--sans); background:var(--bg); color:var(--ink); font-size:14px; }
::selection{background:var(--accent-soft); color:var(--ink);}

body.app-shell{ display:flex; min-height:100vh; }
/* `100dvh` (dynamic viewport height) fallbacki: mobil brauzerlarda manzil
   paneli ko'rinib/yashirinib turganda `100vh` haqiqiy ko'rinadigan balandlikdan
   farq qiladi — natijada sidebar pastda tugab, ortidagi oq sahifa fonini
   ochib qo'yardi. Eski brauzerlar `dvh`ni tushunmasa, birinchi `100vh` qatori
   ishlaydi (CSS noma'lum qiymatli qatorni e'tiborsiz qoldiradi). */
.sidebar{
  width:230px; flex-shrink:0; background:var(--sidebar); color:var(--sidebar-text);
  display:flex; flex-direction:column; padding:22px 14px; position:sticky; top:0;
  height:100vh; height:100dvh; z-index:20;
}
.brand{ display:flex; align-items:center; gap:10px; padding:0 8px 22px 8px; margin-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.07); }
.brand-mark{ width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg, var(--accent), #0a6b62); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; color:white; font-size:13px; flex-shrink:0; overflow:hidden; }
.brand-mark img{ width:100%; height:100%; object-fit:cover; }
.brand-text{color:#fff; font-weight:700; font-size:15px; letter-spacing:0.2px;}
.brand-sub{color:var(--sidebar-text); font-size:11px; margin-top:1px;}

/* Do'kon almashtirgich (Uzum uslubida) */
.store-switch{ position:relative; margin-bottom:12px; }
.store-current{
  width:100%; display:flex; align-items:center; gap:10px; cursor:pointer;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:11px; padding:9px 10px; text-align:left; color:inherit;
  transition:background .15s, border-color .15s;
}
.store-current:hover{ background:rgba(255,255,255,0.08); }
.store-switch.open .store-current{ border-color:var(--accent); background:rgba(255,255,255,0.08); }
.store-current-text{ min-width:0; flex:1; }
.store-current-text .brand-text{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.store-caret{ color:var(--sidebar-text); font-size:14px; line-height:1; flex:none; transition:transform .15s; }
.store-switch.open .store-caret{ transform:rotate(180deg); }

/* Flyout — ochiladi sidebar'ning o'ng tomoniga, xuddi Uzum kabineti kabi tor va
   ierarxik (joriy do'kon tepada alohida, keyin qolganlari) */
.store-menu{
  position:absolute; top:-4px; left:calc(100% + 10px); z-index:40;
  width:196px;
  background:#151d2a; border:1px solid rgba(255,255,255,0.1); border-radius:10px;
  padding:5px; box-shadow:0 14px 34px rgba(0,0,0,0.5); max-height:320px; overflow-y:auto;
  /* Yon tomonga (chapdan o'ngga) siljib ochiladi — pastga tushadigan oddiy
     dropdown emas. `visibility` sababli yopiq holatda klik ham o'tmaydi. */
  opacity:0; visibility:hidden; transform:translateX(-12px);
  transition:opacity .17s ease, transform .17s ease, visibility .17s;
}
.store-menu::before{
  content:""; position:absolute; top:20px; left:-5px; width:9px; height:9px;
  background:#151d2a; border-left:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1);
  transform:rotate(45deg);
}
.store-switch.open .store-menu{ opacity:1; visibility:visible; transform:translateX(0); }
.store-menu-label{
  font-size:9.5px; text-transform:uppercase; letter-spacing:0.6px; color:#5b6676;
  padding:6px 7px 4px 7px;
}
.store-item{
  display:flex; align-items:center; gap:7px; padding:6px 7px; border-radius:7px;
  text-decoration:none; color:var(--sidebar-text); font-size:11.5px; transition:background .12s;
}
.store-item:hover{ background:rgba(255,255,255,0.07); color:#fff; }
.store-item.active{ background:rgba(13,148,136,0.18); color:#fff; font-weight:600; }
.store-item-mark{
  width:19px; height:19px; border-radius:5px; flex:none; overflow:hidden;
  background:linear-gradient(135deg, var(--accent), #0a6b62);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:9px; font-weight:700; color:#fff;
}
.store-item-mark img{ width:100%; height:100%; object-fit:cover; }
.store-item-mark.plus{ background:rgba(255,255,255,0.1); font-size:12px; }
.store-item-name{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.store-item-cog{ flex:none; opacity:.65; font-size:12px; padding:0 2px; }
.store-item-cog:hover{ opacity:1; }
.store-item-new{ border-top:1px solid rgba(255,255,255,0.08); margin-top:4px; padding-top:8px; border-radius:0 0 7px 7px; }
button.store-item{ background:none; border:none; width:100%; font:inherit; text-align:left; }

/* Yo'nalish (marketpleys) tanlagich */
.branch-switch{ padding:0 2px 14px 2px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.07); }
.branch-label{ font-size:10px; text-transform:uppercase; letter-spacing:0.8px; color:#5b6676; margin-bottom:7px; padding-left:6px; }
.branch-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.branch-pill{
  flex:1; min-width:44px; text-align:center; text-decoration:none;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.5px;
  padding:7px 4px; border-radius:8px; color:var(--sidebar-text);
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  transition:background .15s, border-color .15s, color .15s;
}
.branch-pill:hover{ background:rgba(255,255,255,0.09); color:#fff; }
.branch-pill.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.nav-group-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.09em; color:#5b697d; margin:18px 10px 8px 10px; font-weight:600; white-space:nowrap; }
.nav-item{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:13.3px; font-weight:500; color:var(--sidebar-text); transition:background 0.15s, color 0.15s; margin-bottom:2px; text-decoration:none; }
.nav-item svg{ flex-shrink:0; opacity:0.85; }
.nav-item.active{ background:var(--sidebar-soft); color:#fff; }
.nav-item.active svg{ opacity:1; color:var(--accent); }
.nav-item.disabled{ opacity:0.4; cursor:default; }
.nav-item.disabled:hover{background:none;}
.nav-item:not(.disabled):hover{ background:rgba(255,255,255,0.05); color:#e5e9ef; }
.nav-item .nav-label{ display:flex; align-items:center; flex:1; min-width:0; white-space:nowrap; }
.soon-badge{ margin-left:auto; font-size:9px; font-family:var(--mono); background:rgba(255,255,255,0.06); padding:2px 6px; border-radius:5px; color:#6b7a8e; letter-spacing:0.03em; }
/* Nav ro'yxati — sidebar ichida o'zi aylantiriladi. Brend, do'kon tanlagich va
   pastdagi hisob bloki doim ko'rinib turadi; faqat bo'limlar ro'yxati siljiydi.
   `min-height:0` bo'lmasa flex bolasi qisqara olmaydi (standart `min-height:auto`
   uni kontent balandligida ushlab turadi) va blok baribir tashqariga chiqadi. */
.sidebar-nav{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; margin:0 -4px; padding:0 4px; }
.sidebar-nav::-webkit-scrollbar{ width:6px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.13); border-radius:3px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.22); }
.sidebar-nav{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.15) transparent; }
.sidebar-footer{ flex:none; margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,0.07); font-size:11px; color:#4d5b6e; line-height:1.5; }
.sidebar-topbar, .store-switch, .branch-switch{ flex:none; }
.footer-name{ color:#c3c9d1; font-weight:600; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.footer-logout{ display:flex; align-items:center; gap:8px; }

/* Sidebar bosh qatori: logotip + nomi + yig'ish/ochish tugmasi */
.sidebar-topbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px; }
.sidebar-brand{ display:flex; align-items:center; gap:9px; min-width:0; }
.sidebar-logo{ width:28px; height:28px; border-radius:7px; flex-shrink:0; object-fit:cover; }
.sidebar-brand-text{ color:#fff; font-weight:700; font-size:14px; letter-spacing:0.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sidebar-toggle{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:none; border:1px solid rgba(255,255,255,0.08); color:var(--sidebar-text);
  cursor:pointer; transition:background .15s, color .15s;
}
.sidebar-toggle:hover{ background:rgba(255,255,255,0.08); color:#fff; }
.sidebar-toggle svg{ transition:transform .2s; }
.sidebar.collapsed .sidebar-toggle svg{ transform:rotate(180deg); }
.sidebar.collapsed .sidebar-topbar{ flex-direction:column; gap:10px; }

.sidebar.collapsed{ width:72px; padding-left:10px; padding-right:10px; }
.sidebar.collapsed .nav-label{ display:none; }
.sidebar.collapsed .nav-item{ justify-content:center; padding:10px 0; }
.sidebar.collapsed .nav-group-label{ display:none; }
.sidebar.collapsed .store-current{ justify-content:center; padding:9px 0; }
.sidebar.collapsed .store-menu{ top:-4px; }
.sidebar.collapsed .branch-switch{ padding-left:0; padding-right:0; }
.sidebar.collapsed .branch-pills{ justify-content:center; }
.sidebar.collapsed .branch-pill{ flex:none; width:34px; }
.sidebar.collapsed .footer-logout{ justify-content:center; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ background:var(--card); border-bottom:1px solid var(--line); padding:16px 28px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:10; flex-wrap:wrap; }
.topbar h1{ font-size:17px; font-weight:700; letter-spacing:-0.01em; }
.topbar-sub{ font-size:12px; color:var(--ink-soft); margin-top:1px; }
/* Flex bolasi standart bo'yicha min-content'dan kichrayolmaydi — uzun sarlavha
   shu sabab topbar'ni cho'zib yuborardi. */
.topbar > div{ min-width:0; }

/* Uzun uzluksiz matn (uzun SKU, havola, kompaniya yoki mahsulot nomi) qutidan
   chiqib ketmasligi uchun. `anywhere` faqat qatorga sig'may qolganda bo'ladi,
   oddiy matnga ta'sir qilmaydi. */
.topbar h1, .topbar-sub, .card-label, .card-value, .card-sub,
.modal h2, .modal p.hint, .hint, .field label, .flash, .empty-state,
.notif-title, .notif-body, .staff-foot, .role-def-text, .lookup-box,
.profile-head h2, .profile-fact b, .profile-fact span,
.company-tab, .owner-store-chip, .store-banner-text b, .acct-store b{
  overflow-wrap:anywhere;
}
/* Jadval kataklari bundan mustasno: ular `.table-wrap` ichida gorizontal
   siljiydi. Aks holda mobil ekranda ustunlar harfma-harf siqilib ketardi. */
table th, table td{ overflow-wrap:normal; }
.spacer{flex:1;}
.search-box{ display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:7px 12px; width:220px; }
.search-box input{ border:none; background:none; outline:none; font-size:13px; width:100%; font-family:var(--sans); color:var(--ink); }
.role-switch{ display:flex; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:3px; }
.btn{ display:inline-flex; align-items:center; gap:7px; border:none; border-radius:8px; padding:9px 15px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--sans); transition:transform 0.08s, opacity 0.15s; white-space:nowrap; text-decoration:none; }
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:#232d3a; }
.btn-ghost{ background:var(--card); color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:#c9cfd6; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }
.btn-danger{ background:var(--danger); color:#fff; }

.content{ padding:24px 28px 60px 28px; }
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.card-label{ font-size:11.5px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px;}
.card-value{ font-family:var(--mono); font-size:22px; font-weight:700; letter-spacing:-0.02em; }
.card-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; }
.card.accent{ border-color:var(--accent); background:var(--accent-soft); }
.card.accent .card-value{ color:#0a6b62; }

.legend-bar{ background:var(--ink); color:#cbd5e1; border-radius:var(--radius); padding:13px 18px; margin-bottom:18px; font-family:var(--mono); font-size:12px; line-height:1.9; }
.legend-bar .f-label{ color:#8b9bb0; font-family:var(--sans); font-weight:600; font-size:11.5px; display:block; margin-bottom:6px;}
.legend-bar .row span.k{ color:#e2e8f0; font-weight:600; }
.legend-bar .row span.op{ color:#5b697d; }

/* Mablag'lar: qorong'i dinamika kartasi */
.finchart-card{ background:var(--ink); border-radius:var(--radius); padding:22px 24px 18px; margin-bottom:18px; }
.finchart-title{ color:#8b96a8; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:18px; }
.finchart-stats{ display:flex; gap:40px; margin-bottom:20px; flex-wrap:wrap; }
.finchart-stat-label{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:#9aa5b5; margin-bottom:7px; }
.finchart-stat-label .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.finchart-stat-value{ font-family:var(--mono); font-size:21px; font-weight:700; color:#fff; letter-spacing:-0.01em; }
.finchart-stat-value span{ font-size:13px; font-weight:600; color:#6b7688; margin-left:2px; }

.table-wrap{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; }
table{ width:100%; border-collapse:collapse; }
thead th{ text-align:left; font-size:10.8px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); font-weight:700; padding:11px 12px; background:#fafbfc; border-bottom:1px solid var(--line); white-space:nowrap; }
tbody td{ padding:12px 12px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:top; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr.parent-row:hover{ background:#fafbfc; }
tbody tr.child-row{ background:#fbfbfc; }
tbody tr.child-row:hover{ background:#f5f6f8; }
tbody tr:not(.parent-row):not(.child-row):hover{ background:#fafbfc; }
.img-cell{ width:74px; }
.sku-cell{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
.sku-cell .caret{ width:18px; height:18px; border-radius:5px; border:1px solid var(--line); background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; color:var(--ink-soft); font-size:9px; transition:transform 0.15s; }
.sku-cell .caret.open{ transform:rotate(90deg); }
.sku-cell .caret.spacer-caret{ visibility:hidden; }
.child-row .sku-cell{ padding-left:20px; }
.variant-tag{ font-family:var(--sans); font-size:10.5px; background:var(--accent-soft); color:#0a6b62; padding:1px 7px; border-radius:5px; font-weight:600; margin-left:4px;}
.name-cell{ max-width:260px; font-weight:500; }
/* Pul summasi ("550 000 000") bo'sh joylardan bo'linib, tor ustunda uch qatorga
   tarqalib ketmasin — jadval o'rniga `.table-wrap` gorizontal siljisin. */
.num{ font-family:var(--mono); text-align:right; white-space:nowrap; }
.num .expense-cell{ white-space:normal; }
.editable{ border:1px solid transparent; background:none; font-family:var(--mono); text-align:right; width:100%; padding:4px 6px; border-radius:5px; font-size:13px; color:var(--ink); }
.editable:hover{ border-color:var(--line); }
.editable:focus{ outline:none; border-color:var(--accent); background:var(--accent-soft); }
.editable:disabled{ background:none; color:var(--ink); cursor:default; }
.readonly-val{ font-family:var(--mono); text-align:right; display:block; padding:4px 6px; color:var(--ink-soft); }
.readonly-val.pos{ color:#0a6b62; font-weight:600; }
.readonly-val.neg{ color:var(--danger); font-weight:600; }
.badge-margin{ font-family:var(--mono); font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:6px; }
.badge-margin.pos{ background:var(--accent-soft); color:#0a6b62; }
.badge-margin.neg{ background:var(--danger-soft); color:var(--danger); }

.dq-cell{ text-align:right; line-height:1.35; }
.dq-cell .d{ font-family:var(--mono); font-size:12px; color:var(--ink); font-weight:600; }
.dq-cell .q{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); }
.dq-cell.empty{ color:#c3c9d1; font-size:12px; }
.trend-badge{ font-family:var(--mono); font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:6px; display:inline-flex; align-items:center; gap:3px; }
.trend-badge.up{ background:var(--accent-soft); color:#0a6b62; }
.trend-badge.down{ background:var(--danger-soft); color:var(--danger); }
.trend-badge.flat{ background:#f0f1f3; color:var(--ink-soft); }
.history-row td{ background:#fafbfc; padding:14px 20px; }
.history-table{ width:100%; border-collapse:collapse; }
.history-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); padding:5px 10px; }
.history-table td{ font-family:var(--mono); font-size:12.5px; padding:5px 10px; border-bottom:1px solid var(--line); }
.ombor-name-cell{ font-weight:500; max-width:280px; }
.sku-sub{ display:block; font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:1px; }
.chart-controls{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.period-switch{ display:flex; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:3px; }
.period-switch button{ border:none; background:none; padding:6px 12px; font-size:12px; font-weight:600; color:var(--ink-soft); border-radius:6px; cursor:pointer; font-family:var(--sans); }
.period-switch button.active{ background:var(--ink); color:#fff; }
.date-range{ display:flex; align-items:center; gap:6px; }
.date-range input{ border:1px solid var(--line); border-radius:8px; padding:6px 9px; font-size:12.5px; font-family:var(--sans); color:var(--ink); }
.date-range span{ color:var(--ink-soft); font-size:12px; }
.chart-select{ border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:12.5px; font-family:var(--sans); color:var(--ink); background:var(--card); min-width:190px; }
.mini-confirm{ display:block; margin-top:3px; border:none; background:none; color:var(--accent); font-size:10.5px; font-weight:700; cursor:pointer; font-family:var(--sans); text-decoration:underline; padding:0; }
.mini-confirm:hover{ color:#0a6b62; }

.sub-tabs{ display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:0; }
.sub-tab{
  border:none; background:none; padding:9px 4px; margin-right:20px; font-size:13.5px; font-weight:600;
  color:var(--ink-soft); cursor:pointer; font-family:var(--sans); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.sub-tab.active{ color:var(--ink); border-bottom-color:var(--accent); }
.sub-tab:hover{ color:var(--ink); }

.doc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap:14px; }
.doc-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; position:relative; }
.doc-icon{
  width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10.5px; font-weight:700; color:#fff; margin-bottom:10px;
}
.doc-icon.pdf{ background:#dc2626; }
.doc-icon.doc{ background:#2563eb; }
.doc-icon.xls{ background:#16a34a; }
.doc-icon.img{ background:#7c3aed; }
.doc-icon.other{ background:#64748b; }
.doc-name{ font-weight:700; font-size:13.5px; margin-bottom:5px; word-break:break-word; }
.doc-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.doc-tag{ font-size:10.5px; font-weight:600; background:var(--bg); color:var(--ink-soft); padding:2px 7px; border-radius:5px; }
.doc-note{ font-size:12px; color:var(--ink-soft); margin-bottom:10px; line-height:1.4; }
.doc-meta{ font-size:10.5px; color:#9aa2ad; font-family:var(--mono); margin-bottom:12px; word-break:break-word; }
.doc-actions{ display:flex; gap:6px; }
.doc-actions .btn{ flex:1; justify-content:center; padding:7px 10px; font-size:12px; }

.delta{ font-family:var(--mono); font-size:11px; font-weight:700; }
.delta.up{ color:#0a6b62; }
.delta.down{ color:var(--danger); }
.delta.none{ color:#c3c9d1; }
.extra-row{ display:grid; grid-template-columns:1fr 130px 30px; gap:8px; margin-bottom:8px; align-items:center; }
.extra-row input{ margin:0; }
.extra-remove{ border:1px solid var(--line); background:var(--card); color:var(--ink-soft); border-radius:6px; height:34px; cursor:pointer; font-size:13px; }
.extra-remove:hover{ border-color:var(--danger); color:var(--danger); }
.extra-add{ border:1px dashed #c7ccd3; background:none; color:var(--ink-soft); border-radius:8px; padding:8px; width:100%; cursor:pointer; font-family:var(--sans); font-size:12.5px; font-weight:600; }
.extra-add:hover{ border-color:var(--accent); color:var(--accent); }
.calc-preview{ background:var(--ink); color:#cbd5e1; border-radius:var(--radius); padding:12px 14px; font-family:var(--mono); font-size:12px; line-height:1.8; margin:14px 0; }
.calc-preview .k{ color:#8b9bb0; }
.calc-preview .v{ color:#fff; float:right; font-weight:700; }
.calc-preview .profit{ border-top:1px solid rgba(255,255,255,0.12); margin-top:6px; padding-top:6px; }
.calc-preview .profit .v.pos{ color:#5eead4; }
.calc-preview .profit .v.neg{ color:#fca5a5; }
.expense-cell{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); }

.review-badge{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:6px; white-space:nowrap; }
.review-badge.simple{ background:#f0f1f3; color:var(--ink-soft); }
.review-badge.photo{ background:#f3e8fd; color:#7e22ce; }
.review-badge.text{ background:#e0f2fe; color:#0369a1; }
.promo-tag{ font-family:var(--mono); font-size:11px; font-weight:700; background:var(--amber-soft); color:var(--amber); padding:3px 8px; border-radius:6px; white-space:nowrap; }

/* Tiketlar */
.ticket-status-badge{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:6px; white-space:nowrap; display:inline-block; }
.ticket-status-badge.jarayonda{ background:#e8effc; color:#1d4ed8; }
.ticket-status-badge.hal_boldi{ background:var(--accent-soft); color:#0a6b62; }
.ticket-status-badge.hal_bolmadi{ background:var(--danger-soft); color:var(--danger); }
.ticket-priority-badge{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:6px; white-space:nowrap; display:inline-block; }
.ticket-priority-badge.past{ background:#f0f1f3; color:var(--ink-soft); }
.ticket-priority-badge.orta{ background:var(--amber-soft); color:var(--amber); }
.ticket-priority-badge.yuqori{ background:var(--danger-soft); color:var(--danger); }
.ticket-req-num{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); }
.ticket-title{ font-weight:600; }
.ticket-meta{ font-size:11px; color:var(--ink-soft); margin-top:2px; line-height:1.5; }

/* Do'kon egasi: kompaniya tanlash tablari va bog'langan do'konlar */
.company-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.company-tab{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  border:1.5px solid var(--line); border-radius:10px; padding:8px 14px;
  font-size:13px; font-weight:600; color:var(--ink); background:var(--card);
  transition:border-color .15s, background .15s;
}
.company-tab em{ font-style:normal; font-size:10.5px; font-weight:600; color:var(--ink-soft); }
.company-tab:hover{ border-color:var(--accent); }
.company-tab.active{ border-color:var(--accent); background:var(--accent-soft); }
.company-tab.new{ border-style:dashed; color:var(--ink-soft); }
.owner-stores{ display:flex; gap:8px; flex-wrap:wrap; }
.owner-store-chip{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  border:1px solid var(--line); border-radius:9px; padding:6px 10px; background:var(--bg);
}
.owner-store-chip .mark{
  width:22px; height:22px; border-radius:6px; overflow:hidden; flex:none;
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; font-weight:700;
}
.owner-store-chip .mark img{ width:100%; height:100%; object-fit:cover; }

/* Infografika: Bor/Yo'q holat almashtirgichi + buyurtma nishonlari */
.status-toggle-form{ display:inline-block; }
.status-toggle{ display:inline-flex; border:1.5px solid var(--line); border-radius:8px; overflow:hidden; }
.status-toggle button{
  border:none; background:var(--card); color:var(--ink-soft); font-size:12px; font-weight:600;
  padding:6px 12px; cursor:pointer; transition:background .15s, color .15s;
}
.status-toggle button:first-child{ border-right:1.5px solid var(--line); }
.status-toggle button.active{ background:var(--accent); color:#fff; }
.status-toggle button:disabled{ cursor:default; }
.status-toggle button:not(.active):not(:disabled):hover{ background:var(--bg); }
.infog-order-badge{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:6px; white-space:nowrap; display:inline-block; }
.infog-order-badge.jarayonda{ background:#e0f2fe; color:#0369a1; }
.infog-order-badge.keremas{ background:#f0f1f3; color:var(--ink-soft); }
.infog-order-badge.delivered{ background:var(--accent-soft); color:#0a6b62; }
.infog-order-meta{ font-size:11px; color:var(--ink-soft); margin-top:4px; line-height:1.5; }
.infog-overdue{ color:var(--danger); }
.date-overdue{ color:var(--danger); font-weight:700; }
.done-row td{ opacity:0.65; }
.done-row .task-name{ text-decoration:line-through; }

.pw-cell{ display:flex; align-items:center; gap:8px; font-family:var(--mono); }
.pw-toggle{ border:none; background:none; cursor:pointer; color:var(--ink-soft); font-size:13px; padding:0; }
.pw-toggle:hover{ color:var(--accent); }

.row-actions{ display:flex; gap:6px; }
.icon-btn{ width:24px; height:24px; border-radius:6px; border:1px solid var(--line); background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft); font-size:12px; }
.icon-btn:hover{ border-color:var(--danger); color:var(--danger); }
.empty-state{ padding:60px 20px; text-align:center; color:var(--ink-soft); }
.empty-state b{ color:var(--ink); display:block; margin-bottom:4px; font-size:14.5px;}

.modal{ background:var(--card); border-radius:14px; width:100%; max-width:460px; padding:24px; box-shadow:0 20px 50px rgba(0,0,0,0.25); }
.modal h2{ font-size:16px; margin-bottom:4px; }
.modal p.hint{ font-size:12.5px; color:var(--ink-soft); margin-bottom:18px; }
.field{ margin-bottom:13px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.field input, .field select, .field textarea{ width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-size:13.5px; font-family:var(--sans); outline:none; }
.field textarea{ resize:vertical; line-height:1.6; min-height:76px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field-errors{ font-size:11.5px; color:var(--danger); margin-top:4px; }
.modal-actions{ display:flex; gap:8px; margin-top:18px; }
.modal-actions .btn{ flex:1; justify-content:center; }

.overlay{ position:fixed; inset:0; background:rgba(15,20,28,0.55); display:none; align-items:center; justify-content:center; z-index:600; padding:20px; }
.overlay.show{ display:flex; }
.parent-tag{ font-size:11.5px; background:var(--amber-soft); color:var(--amber); padding:5px 10px; border-radius:7px; font-weight:600; margin-bottom:14px; display:inline-block; font-family:var(--mono); }

.img-box{
  width:74px; height:74px; border:1.5px dashed #c7ccd3; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  cursor:pointer; background:var(--bg); color:var(--ink-soft); text-align:center;
  transition:border-color .15s, color .15s, background .15s; position:relative; overflow:hidden;
}
.field label.img-box{ display:flex; margin-bottom:0; }
.img-box:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.img-box .plus{ font-size:20px; font-weight:300; line-height:1; }
.img-box .lbl{ font-size:10px; font-weight:600; line-height:1.25; }
.img-box.has-img{ border-style:solid; border-color:var(--line); padding:0; background:#fff; }
.img-box.has-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-box.readonly{ cursor:default; }
.img-box.readonly:hover{ border-color:#c7ccd3; color:var(--ink-soft); background:var(--bg); }
.img-remove{
  position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%;
  background:rgba(19,26,36,0.65); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11px; cursor:pointer; line-height:1;
}
.img-remove:hover{ background:var(--danger); }

.flash{ border-radius:var(--radius); padding:11px 16px; margin-bottom:14px; font-size:13px; font-weight:500; }
.flash-error{ background:var(--danger-soft); color:var(--danger); }
.flash-success{ background:var(--accent-soft); color:#0a6b62; }
.flash-info{ background:#e8effc; color:#1d4ed8; }

/* AUTH & DIRECTION SCREENS */
.auth-screen{ min-height:100vh; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px; width:100%; max-width:380px; box-shadow:0 20px 50px rgba(0,0,0,0.06); }
.auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.auth-hint{ font-size:11.5px; color:var(--ink-soft); margin-top:16px; text-align:center; line-height:1.5; }
.auth-alt{ font-size:12.5px; color:var(--ink-soft); margin-top:18px; padding-top:16px; border-top:1px solid var(--line); text-align:center; }
.auth-alt a{ color:var(--accent); font-weight:600; text-decoration:none; }
.auth-alt a:hover{ text-decoration:underline; }

/* Xodim qo'shish: raqam bo'yicha qidiruv natijasi va do'kon tanlash */
.lookup-box{
  margin-top:7px; font-size:12px; line-height:1.45; color:var(--ink-soft);
  border:1px dashed var(--line); border-radius:9px; padding:8px 11px; background:var(--bg);
}
.lookup-box.good{ border-style:solid; border-color:var(--accent); background:var(--accent-soft); color:var(--ink); }
.lookup-box.bad{ border-style:solid; border-color:var(--danger); background:var(--danger-soft); color:var(--danger); }
/* Do'kon tanlash — pastga ochilib-yopiladigan ixcham accordion */
.store-select{ position:relative; }
.store-select-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer;
  border:1px solid var(--line); border-radius:9px; padding:9px 11px; background:var(--card);
  font-family:var(--sans); transition:border-color .15s;
}
.store-select-toggle:hover{ border-color:var(--accent); }
.store-select.open .store-select-toggle{ border-color:var(--accent); }
.store-select-summary{ font-size:13px; font-weight:600; color:var(--ink); }
.store-select-caret{ flex:none; color:var(--ink-soft); transition:transform .15s; }
.store-select.open .store-select-caret{ transform:rotate(180deg); }
/* Accordion ichidagi ro'yxat. Alohida sinf nomi kerak: ilgari bu `.store-picker`
   deb atalar edi va do'kon yaratish modalidagi marketpleys tanlagichi bilan
   nomdosh bo'lgani uchun modaldagi katakchalar ko'rinmay qolgan edi. */
.store-select-body{
  display:none; flex-direction:column; gap:3px; max-height:250px; overflow-y:auto;
  margin-top:6px; padding:5px; border:1px solid var(--line); border-radius:10px; background:var(--bg);
}
.store-select.open .store-select-body{ display:flex; }
.store-select-body .store-chips{ width:100%; }

/* Marketpleys tanlash (do'kon yaratish modali) — doim ko'rinadigan katakchalar */
.mp-picker{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(130px, 100%),1fr)); gap:8px; }
label.mp-check{
  display:flex; align-items:center; gap:9px; cursor:pointer; font-size:12.5px; font-weight:600;
  border:1.5px solid var(--line); border-radius:10px; padding:9px 11px; background:var(--card);
  transition:border-color .15s, background .15s;
}
label.mp-check:hover{ border-color:#c9cfd6; }
.mp-check input{ position:absolute; opacity:0; width:0; height:0; }
.mp-check-box{
  flex:none; width:18px; height:18px; border-radius:6px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:transparent; font-size:11px; font-weight:800;
  transition:border-color .15s, background .15s, color .15s;
}
.mp-check input:checked ~ .mp-check-box{ background:var(--accent); border-color:var(--accent); color:#fff; }
.mp-check:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.mp-check:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }

/* Mening do'konim */
.dokon-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.dokon-divider{ height:1px; background:var(--line); margin:20px 0 18px 0; }
.branch-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.branch-row{
  display:flex; align-items:center; gap:11px;
  border:1.5px solid var(--line); border-radius:11px; padding:11px 13px;
}
.branch-row-mark{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11.5px; font-weight:700;
}
.branch-row-text{ flex:1; font-size:13px; }
.branch-row-text em{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
.branch-add{ display:flex; gap:8px; align-items:center; }
.branch-add select{ flex:1; margin:0; }
.branch-add .btn{ flex:none; white-space:nowrap; }
@media (max-width:900px){ .dokon-grid{ grid-template-columns:1fr; } }
.dir-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0; }
.dir-card{ border:1.5px solid var(--line); border-radius:12px; padding:20px 14px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; position:relative; }
.dir-delete{
  position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; z-index:2;
}
.dir-delete:hover{ border-color:var(--danger); color:var(--danger); background:var(--danger-soft); }
.dir-card:hover{ border-color:var(--accent); background:var(--accent-soft); }
.dir-branches{ display:flex; gap:4px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.dir-branch{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:0.4px;
  padding:3px 6px; border-radius:5px; background:var(--ink); color:#fff;
}
.dir-branch.empty{ background:var(--danger-soft); color:var(--danger); font-family:var(--font); font-weight:600; }
.dir-card .dir-icon{ width:40px; height:40px; border-radius:10px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 10px auto; font-family:var(--mono); font-weight:700; font-size:13px; overflow:hidden; }
.dir-card .dir-icon img{ width:100%; height:100%; object-fit:cover; }
.dir-card .dir-name{ font-weight:700; font-size:13.5px; }
.dir-card .dir-sub{ font-size:11px; color:var(--ink-soft); margin-top:2px; }
.footer-link{ font-size:11.5px; color:#8b9bb0; cursor:pointer; font-weight:600; text-decoration:none; }
.footer-link:hover{ color:#fff; text-decoration:underline; }
.role-pill{ font-family:var(--sans); font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:6px; display:inline-block; }
.role-pill.manager{ background:#1a2432; color:#fff; }
.role-pill.all{ background:var(--accent-soft); color:#0a6b62; }
.role-pill.ombor{ background:#e8effc; color:#1d4ed8; }
.role-pill.narxlar{ background:var(--amber-soft); color:var(--amber); }
.role-pill.hisobot{ background:#f3e8fd; color:#7e22ce; }
.role-pill.hujjatlar{ background:#fdeef0; color:#be123c; }
.role-pill.samozakup{ background:#e0f2fe; color:#0369a1; }
.role-pill.infografika{ background:#dcfce7; color:#15803d; }
.role-pill.tiketlar{ background:#ffedd5; color:#c2410c; }
.role-pill.raqobatchilar{ background:#ede9fe; color:#6d28d9; }

/* Raqobatchilar */
.raq-sku-row{ cursor:pointer; }
.raq-sku-row:hover{ background:var(--bg); }
.raq-topbar{ flex-direction:column; align-items:stretch; gap:10px; }
.raq-back{
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  font-size:12px; font-weight:600; color:var(--ink-soft); text-decoration:none;
  border:1px solid var(--line); border-radius:20px; padding:5px 12px 5px 9px;
  transition:border-color .15s, color .15s, background .15s;
}
.raq-back:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.raq-topbar-main{ display:flex; align-items:center; gap:14px; width:100%; }
.raq-topbar-thumb{
  width:46px; height:54px; border-radius:9px; flex:none; overflow:hidden;
  background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.raq-topbar-thumb img{ width:100%; height:100%; object-fit:cover; }
.raq-topbar-meta{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.raq-sku-tag{
  font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--ink-soft);
  background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:2px 8px;
}
.raq-list{ display:flex; flex-direction:column; gap:9px; }
.raq-card{ border:1.5px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; }
.raq-card.mine{ border-color:var(--accent); }
.raq-card-head{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  background:none; border:none; padding:13px 16px; font-family:var(--sans);
}
.raq-card-name{ font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.badge-mine{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--accent-soft); color:#0a6b62; text-transform:uppercase; letter-spacing:.05em; }
.raq-card-brief{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); white-space:nowrap; flex:none; }
.raq-card-caret{ flex:none; color:var(--ink-soft); transition:transform .15s; }
.raq-card.open .raq-card-caret{ transform:rotate(180deg); }
.raq-card-body{ display:none; padding:0 16px 16px 16px; border-top:1px solid var(--line); }
.raq-card.open .raq-card-body{ display:block; padding-top:14px; }
.raq-meta-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap:10px 16px; margin-bottom:8px; }
.raq-meta-grid div{ font-size:12.5px; }
.raq-meta-grid em{ display:block; font-style:normal; font-size:10.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }

.raq-metric-row{ display:grid; grid-template-columns:110px 1fr; gap:16px; padding:13px 0; }
.raq-metric-row + .raq-metric-row{ border-top:1px dashed var(--line); }
.raq-metric-label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); padding-top:2px; }
.raq-bars{ display:flex; flex-direction:column; gap:8px; }
.raq-bar-line{ display:grid; grid-template-columns:170px 1fr 90px; gap:10px; align-items:center; }
.raq-bar-name{ font-size:12px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:4px; }
.raq-bar-name .dim{ color:#c3c9d1; }
.raq-bar-name .mine-tag{ color:#0a6b62; }
.raq-bar-track{ background:var(--bg); border-radius:6px; height:10px; overflow:hidden; }
.raq-bar-fill{ height:100%; border-radius:6px; background:var(--amber); }
.raq-bar-fill.mine{ background:var(--accent); }
.raq-bar-val{ font-family:var(--mono); font-size:11.5px; text-align:right; color:var(--ink); }
.raq-crown{ color:var(--amber); font-size:11px; }

.raq-summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .raq-summary-grid{ grid-template-columns:1fr; } }
.raq-sum-card{ border-radius:12px; padding:16px 18px; border:1px solid var(--line); }
.raq-sum-card.strength{ background:var(--accent-soft); border-color:var(--accent); }
.raq-sum-card.weakness{ background:var(--danger-soft); border-color:var(--danger); }
.raq-sum-card h3{ margin:0 0 10px 0; font-size:13.5px; }
.raq-sum-card.strength h3{ color:#0a6b62; }
.raq-sum-card.weakness h3{ color:var(--danger); }
.raq-sum-card ul{ margin:0; padding-left:18px; font-size:12.5px; line-height:1.7; color:var(--ink); }
.raq-reco-card{ background:var(--card); border:1px solid var(--accent); border-radius:12px; padding:16px 18px; margin-top:16px; }
.raq-reco-card h3{ margin:0 0 10px 0; font-size:13.5px; color:#0a6b62; }
.raq-reco-item{ display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:12.5px; line-height:1.6; }
.raq-reco-item:last-child{ border-bottom:none; }
.raq-reco-num{ font-family:var(--mono); color:#0a6b62; font-weight:700; min-width:18px; }
.role-pill.yordamchi{ background:#f0f1f3; color:var(--ink-soft); }
.perm-pill{ font-family:var(--mono); font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:6px; }
.perm-pill.edit{ background:var(--accent-soft); color:#0a6b62; }
.perm-pill.view{ background:#f0f1f3; color:var(--ink-soft); }
/* Xodimlar: rollar ierarxiyasi — yopiq holatda boshlanadigan accordion */
.role-hier{ border:1px solid var(--line); border-radius:14px; background:var(--card); padding:14px 18px; margin-bottom:20px; }
.role-hier-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:none; padding:0; margin:0; cursor:pointer; font-family:var(--sans); text-align:left;
}
.role-hier-title{ display:flex; flex-direction:column; gap:2px; }
.role-hier-title b{ font-size:14px; color:var(--ink); }
.role-hier-title span{ font-size:11.5px; color:var(--ink-soft); }
.role-hier-caret{ flex:none; color:var(--ink-soft); transition:transform .15s; }
.role-hier.open .role-hier-caret{ transform:rotate(180deg); }
.role-hier-body{ display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.role-hier.open .role-hier-body{ display:block; }
.role-tier{ display:grid; grid-template-columns:92px 1fr; gap:14px; padding:13px 0; }
.role-tier + .role-tier{ border-top:1px dashed var(--line); }
.role-tier-badge{ display:flex; flex-direction:column; gap:6px; }
.tier-num{ width:26px; height:26px; border-radius:8px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12.5px; font-weight:700; }
.role-tier-badge em{ font-style:normal; font-size:10px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; line-height:1.3; }
.role-tier-items{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap:9px; }
.role-def{ display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:10px; padding:9px 11px; background:var(--bg); }
.role-def .role-pill{ align-self:flex-start; }
.role-def-text{ font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
.role-hier-foot{ margin-top:6px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-soft); }
.role-hier-foot b{ color:var(--ink); }
@media (max-width:600px){ .role-tier{ grid-template-columns:1fr; gap:8px; } }

/* Xodim qo'shish: tanlangan rol tavsifi */
.role-desc{ margin-top:7px; font-size:12px; line-height:1.5; color:var(--ink); border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 8px 8px 0; padding:8px 11px; }
.role-desc:empty{ display:none; }

details > summary{ list-style:none; }
details > summary::-webkit-details-marker{ display:none; }

/* ============================ Sidebar footer: profil + tez amallar ========= */
/* Hisob bloki — bosilganda Sozlamalar sahifasini ochadi. */
.footer-user{
  display:flex; align-items:center; gap:9px; margin-bottom:11px; min-width:0;
  padding:7px 8px; margin-left:-8px; margin-right:-8px; border-radius:10px;
  text-decoration:none; color:inherit; transition:background .15s;
}
.footer-user:hover{ background:rgba(255,255,255,0.06); }
.footer-user.active{ background:rgba(13,148,136,0.16); }
/* Sozlamalar tugmasi — hisob blokining o'ng chetida. Aksent rangda ajratilgan,
   chunki foydalanuvchi hisobga doir hamma narsani shu yerdan topadi. */
.footer-user-cog{
  flex:none; width:28px; height:28px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,148,136,0.2); border:1px solid rgba(45,212,191,0.45);
  color:#5eead4; box-shadow:0 0 0 0 rgba(45,212,191,0.35);
  transition:transform .3s ease, background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.footer-user:hover .footer-user-cog{
  background:var(--accent); border-color:var(--accent); color:#fff;
  transform:rotate(90deg); box-shadow:0 0 0 4px rgba(45,212,191,0.16);
}
.footer-user.active .footer-user-cog{ background:var(--accent); border-color:var(--accent); color:#fff; }
.footer-avatar{
  width:30px; height:30px; border-radius:9px; flex:none; overflow:hidden;
  background:linear-gradient(135deg, var(--accent), #0a6b62);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:700; color:#fff;
}
.footer-avatar img,
.profile-avatar img,
.mini-avatar img,
.staff-avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-avatar, .mini-avatar, .staff-avatar{ overflow:hidden; }
.footer-user-text{ min-width:0; flex:1; }
.footer-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.footer-act{
  position:relative; width:32px; height:32px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--sidebar-text); background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08); text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;
}
.footer-act:hover{ background:rgba(255,255,255,0.1); color:#fff; }
.footer-act.active{ border-color:var(--accent); color:#fff; }
.footer-act-danger:hover{ border-color:var(--danger); color:#fca5a5; }
.footer-badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--danger); color:#fff;
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--sidebar);
}
.lang-switch{
  display:flex; border-radius:9px; overflow:hidden; flex:none;
  border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04);
}
.lang-opt{
  padding:0 9px; height:30px; display:flex; align-items:center; text-decoration:none;
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:0.04em;
  color:var(--sidebar-text); transition:background .15s, color .15s;
}
.lang-opt:hover{ color:#fff; background:rgba(255,255,255,0.07); }
.lang-opt.active{ background:var(--accent); color:#fff; }
/* Login/ro'yxatdan o'tish ekranida til tanlagich — o'ng yuqori burchakda. */
.auth-lang{ position:fixed; top:18px; right:18px; z-index:20; background:rgba(255,255,255,0.9); border-color:var(--line); }
.auth-lang .lang-opt{ color:var(--ink-soft); }
.auth-lang .lang-opt:hover{ color:var(--ink); background:var(--bg); }
.auth-lang .lang-opt.active{ background:var(--accent); color:#fff; }
.sidebar.collapsed .footer-user{ justify-content:center; }
.sidebar.collapsed .footer-actions{ justify-content:center; }
.sidebar.collapsed .lang-switch{ flex-direction:column; }
.sidebar.collapsed .lang-opt{ height:24px; justify-content:center; padding:0 6px; }

/* ============================ Bildirishnomalar ============================ */
.notif-list{ display:flex; flex-direction:column; gap:10px; }
.notif-card{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--ink-soft);
  border-radius:var(--radius); padding:14px 18px;
}
.notif-card.info{ border-left-color:#1d4ed8; }
.notif-card.success{ border-left-color:var(--accent); }
.notif-card.warning{ border-left-color:var(--amber); }
.notif-card.fresh{ background:#fbfdff; box-shadow:0 1px 10px rgba(13,148,136,0.08); }
.notif-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.notif-title{ font-size:14px; font-weight:700; }
.notif-new{
  font-size:9.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  background:var(--accent); color:#fff; padding:2px 7px; border-radius:5px;
}
.notif-meta{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-soft); }
.notif-body{ font-size:13px; line-height:1.65; color:var(--ink-soft); white-space:pre-line; }

/* ============================ Admin panel ================================= */
.admin-brand{ display:flex; align-items:center; gap:9px; margin-bottom:18px; min-width:0; }
.admin-brand-mark{
  width:30px; height:30px; border-radius:9px; flex:none; background:linear-gradient(135deg,#6d28d9,#4c1d95);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.admin-brand-text{ color:#fff; font-weight:700; font-size:14px; line-height:1.15; }
.admin-brand-text em{ display:block; font-style:normal; font-size:10px; color:var(--sidebar-text); font-weight:500; letter-spacing:0.05em; text-transform:uppercase; }
.admin-back{
  display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:8px;
  color:var(--sidebar-text); text-decoration:none; font-size:12.5px;
  border:1px dashed rgba(255,255,255,0.13);
}
.admin-back:hover{ color:#fff; border-color:rgba(255,255,255,0.28); }
.admin-chart-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:22px; }
.admin-chart-card h3{ font-size:13.5px; margin-bottom:14px; }
.section-head{ display:flex; align-items:center; gap:12px; margin:0 0 12px 0; flex-wrap:wrap; }
.section-head h3{ font-size:13.5px; font-weight:700; }
.section-head .spacer{ flex:1; }
.admin-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; align-items:start; }
/* Ustun ichidagi jadval min-content kengligini majburlab, gridni tashqariga
   cho'zib yubormasligi uchun. */
.admin-grid > *{ min-width:0; }
.mini-list{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.mini-row{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.mini-row:last-child{ border-bottom:none; }
.mini-row:hover{ background:var(--bg); }
.mini-avatar{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:var(--accent-soft); color:#0a6b62;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:700;
}
.mini-body{ min-width:0; flex:1; }
.mini-body b{ display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-body em{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-soft); font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-side{ font-size:11px; color:var(--ink-soft); font-family:var(--mono); flex:none; white-space:nowrap; }
.admin-flag{ font-size:10px; font-weight:700; padding:3px 8px; border-radius:6px; background:#ede9fe; color:#5b21b6; }
.mp-tag{ display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px; background:var(--bg); color:var(--ink-soft); border:1px solid var(--line); margin-right:3px; }
.profile-head{ display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px; flex-wrap:wrap; }
.profile-avatar{
  width:58px; height:58px; border-radius:16px; flex:none;
  background:linear-gradient(135deg, var(--accent), #0a6b62); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:19px; font-weight:700;
}
.profile-head h2{ font-size:18px; }
.profile-head .phone{ font-family:var(--mono); font-size:13px; color:var(--ink-soft); margin-top:2px; }
/* Har bir katak alohida kartochka — qatordagi bo'sh joy kulrang bo'lib
   ko'rinmasligi uchun (gap orqali emas, border orqali ajratiladi). */
.profile-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(170px, 100%),1fr)); gap:10px; margin-bottom:18px; }
.profile-fact{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:13px 16px; }
.profile-fact span{ display:block; font-size:11px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.profile-fact b{ font-size:13.5px; font-weight:600; }

/* Grafiklar uchun aniq balandlikdagi quti. Chart.js `maintainAspectRatio:false`
   bilan shu qutini to'ldiradi — aks holda tor ekranda grafik nisbat bo'yicha
   siqilib, 60-70px lik yupqa chiziqqa aylanib qolardi. */
.chart-box{ position:relative; height:210px; }
@media (max-width:900px){ .chart-box{ height:230px; } }
@media (max-width:480px){ .chart-box{ height:200px; } }

/* ============================ Fayl tanlagich =============================== */
.file-picker{ position:relative; }
.file-picker-input{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:1;
}
.file-picker-drop{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border:1.5px dashed var(--line); border-radius:10px; background:var(--bg);
  transition:border-color .15s, background .15s;
}
.file-picker:hover .file-picker-drop,
.file-picker.drag .file-picker-drop{ border-color:var(--accent); background:var(--accent-soft); }
.file-picker.has-file .file-picker-drop{ border-style:solid; border-color:var(--line); background:var(--card); }
.file-picker-icon{
  flex:none; width:34px; height:34px; border-radius:9px; background:var(--card);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); transition:background .15s, color .15s, border-color .15s;
}
.file-picker.has-file .file-picker-icon{ background:var(--accent-soft); color:#0a6b62; border-color:transparent; }
.file-picker-text{ flex:1; min-width:0; }
.file-picker-name{
  display:block; font-size:12.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.file-picker.has-file .file-picker-name{ color:#0a6b62; }
.file-picker-hint{ display:block; font-size:10.5px; color:var(--ink-soft); margin-top:1px; }
.file-picker-btn{
  flex:none; font-size:11.5px; font-weight:700; padding:7px 13px; border-radius:7px;
  background:var(--ink); color:#fff; white-space:nowrap;
}

/* ============================ Hisob sozlamalari =========================== */
.settings-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.settings-grid > *{ min-width:0; }
@media (max-width:900px){ .settings-grid{ grid-template-columns:1fr; } .plain-bar{ padding:14px 16px; } }
.switch-row{
  display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; font-weight:600;
  border:1.5px solid var(--line); border-radius:10px; padding:11px 12px; background:var(--card);
  transition:border-color .15s, background .15s;
}
.switch-row:hover{ border-color:#c9cfd6; }
.switch-row input{ position:absolute; opacity:0; width:0; height:0; }
.switch-box{
  flex:none; width:18px; height:18px; border-radius:6px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:transparent; font-size:11px; font-weight:800;
  transition:border-color .15s, background .15s, color .15s;
}
.switch-row input:checked ~ .switch-box{ background:var(--accent); border-color:var(--accent); color:#fff; }
.switch-row:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.acct-store-list{ display:flex; flex-direction:column; gap:8px; }
.acct-store{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--bg);
}

/* Sidebar'siz sodda qobiq (do'koni yo'q hisob uchun) */
.plain-shell{ max-width:1000px; margin:0 auto; }
.plain-bar{
  display:flex; align-items:center; gap:12px; padding:14px 28px;
  background:var(--card); border-bottom:1px solid var(--line);
}

/* ============================ Qidiruvli tanlagich (SKU) ==================== */
/* `select.sku-select` JS orqali shu razmetkaga aylanadi — asl <select> forma
   uchun DOM'da yashirin holda qoladi (search-select.js). */
.ss-wrap{ position:relative; }
.ss-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; background:var(--card);
  font-family:var(--sans); font-size:13.5px; color:var(--ink); text-align:left; cursor:pointer;
  transition:border-color .15s;
}
.ss-toggle:hover{ border-color:#c9cfd6; }
.ss-wrap.open .ss-toggle{ border-color:var(--accent); }
.ss-value{ min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-wrap.ss-placeholder .ss-value{ color:var(--ink-soft); }
.ss-wrap.ss-placeholder .ss-value:empty::before{ content:"— tanlang —"; }
.ss-caret{ flex:none; color:var(--ink-soft); transition:transform .15s; }
.ss-wrap.open .ss-caret{ transform:rotate(180deg); }
.ss-panel{
  display:none; position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:50;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 34px rgba(15,20,28,0.16); padding:7px; max-width:100%;
}
.ss-wrap.open .ss-panel{ display:block; }
.ss-panel.ss-panel-up{ top:auto; bottom:calc(100% + 5px); }
.ss-search{
  width:100%; border:1px solid var(--line); border-radius:7px; padding:8px 10px;
  font-size:13px; font-family:var(--sans); outline:none; margin-bottom:6px;
}
.ss-search:focus{ border-color:var(--accent); }
.ss-options{ max-height:230px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
.ss-option{
  padding:8px 9px; border-radius:6px; font-size:13px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .12s;
}
.ss-option:hover{ background:var(--bg); }
.ss-option.active{ background:var(--accent-soft); color:#0a6b62; font-weight:600; }
.ss-empty{ padding:14px 9px; text-align:center; font-size:12.5px; color:var(--ink-soft); }
/* Ombor grafik filtri ixcham holatda ishlatiladi — modal ichidagi to'liq
   kenglikdagi maydonlardan farqli. */
.chart-controls .ss-wrap{ min-width:220px; }
.chart-controls .ss-toggle{ padding:7px 10px; font-size:12.5px; }

/* ============================ Do'kon banneri ============================== */
.store-banner{
  position:relative; height:132px; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(120deg,#0e1520,#1f4c47); margin-bottom:18px;
  display:flex; align-items:flex-end; padding:16px 20px;
}
.store-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.store-banner-veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,15,22,0.15),rgba(10,15,22,0.72)); }
.store-banner-body{ position:relative; display:flex; align-items:center; gap:12px; min-width:0; }
.store-banner-logo{
  width:46px; height:46px; border-radius:12px; flex:none; overflow:hidden; background:rgba(255,255,255,0.14);
  border:1.5px solid rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; color:#fff; font-size:15px;
}
.store-banner-logo img{ position:static; width:100%; height:100%; object-fit:cover; }
.store-banner-text b{ display:block; color:#fff; font-size:17px; font-weight:700; }
.store-banner-text em{ font-style:normal; font-size:11.5px; color:rgba(255,255,255,0.75); }
.store-banner-empty{ font-size:11.5px; color:rgba(255,255,255,0.6); }
.upload-row{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.upload-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.btn-mini{ font-size:12px; padding:7px 12px; }

/* ============================ Xodimlar kartochkalari ====================== */
.staff-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px, 100%),1fr)); gap:12px; margin-bottom:20px; }
.staff-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 16px; display:flex; flex-direction:column; gap:11px; position:relative;
}
.staff-card.is-me{ border-color:var(--accent); background:linear-gradient(180deg,var(--accent-soft),var(--card) 55%); }
.staff-top{ display:flex; align-items:center; gap:11px; min-width:0; }
.staff-avatar{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:linear-gradient(135deg,#233042,#131a24); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:13px; font-weight:700;
}
.staff-card.is-me .staff-avatar{ background:linear-gradient(135deg,var(--accent),#0a6b62); }
.staff-id{ min-width:0; flex:1; }
.staff-name{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.staff-name small{ font-weight:500; color:var(--ink-soft); }
.staff-phone{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.staff-remove{
  flex:none; width:26px; height:26px; border-radius:7px; border:1px solid var(--line);
  background:var(--card); color:var(--ink-soft); cursor:pointer; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.staff-remove:hover{ border-color:var(--danger); color:var(--danger); }
.staff-tags{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.staff-foot{ font-size:11.5px; color:var(--ink-soft); border-top:1px dashed var(--line); padding-top:9px; line-height:1.5; }

/* Do'kon tanlash — endi gorizontal (yonma-yon) kartochkalar */
.store-chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(170px, 100%),1fr)); gap:8px; }
/* `.field label{display:block}` bilan bir xil aniqlikda bo'lmasligi uchun
   element+sinf tanlagichi ishlatiladi (`.img-box` bilan bir xil yechim). */
label.store-chip{
  display:flex; align-items:center; gap:9px; padding:9px 11px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:10px; background:var(--card);
  transition:border-color .15s, background .15s;
}
.store-chip:hover{ border-color:#c9cfd6; }
.store-chip input{ display:none; }
.store-chip-avatar{
  width:28px; height:28px; border-radius:8px; flex:none; overflow:hidden;
  background:var(--bg); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:700;
}
.store-chip-avatar img{ width:100%; height:100%; object-fit:cover; }
.store-chip-body{ min-width:0; flex:1; font-size:12.5px; font-weight:600; }
.store-chip-body em{ display:block; font-style:normal; font-size:10.5px; color:var(--ink-soft); font-family:var(--mono); font-weight:500; }
.store-chip-tick{
  flex:none; width:18px; height:18px; border-radius:6px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:10px; color:transparent;
}
/* Tanlangan holat JS qo'shadigan `.checked` sinfi orqali beriladi, `:has()` esa
   JS ishlamasa ham to'g'ri ko'rinishi uchun zaxira sifatida turadi. */
.store-chip.checked,
.store-chip:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.store-chip.checked .store-chip-tick,
.store-chip:has(input:checked) .store-chip-tick{ background:var(--accent); border-color:var(--accent); color:#fff; }
.store-chip.checked .store-chip-avatar,
.store-chip:has(input:checked) .store-chip-avatar{ background:#fff; color:#0a6b62; }

.mobile-nav-toggle{
  /* Sidebar (z-index:100 ochiq holatda) va backdrop (99) dan PASTROQ qasddan —
     drawer ochilganda tugma ular ortida yashirinib qoladi, aks holda ochiq
     drawer ustiga suzib chiqib pastdagi nav elementlarini (Mening do'konim,
     Do'kon egasi, hisob bloki) yopib qo'yardi. Yopiq holatda drawer ekrandan
     tashqarida (`translateX(-100%)`) bo'lgani uchun z-index tartibi muhim emas. */
  display:none; position:fixed; top:14px; left:14px; z-index:90;
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.mobile-backdrop{ display:none; position:fixed; inset:0; background:rgba(15,20,28,0.5); z-index:99; }
.mobile-backdrop.show{ display:block; }

@media (max-width:900px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .dir-grid{ grid-template-columns:1fr; }
  .mobile-nav-toggle{ display:flex; }
  /* The desktop icon-rail "collapse" mode makes no sense as an off-canvas
     drawer — force full labels regardless of the user's saved desktop
     preference, and let the hamburger own open/close instead of the toggle. */
  .sidebar{
    position:fixed; left:0; top:0; height:100vh; height:100dvh; width:250px;
    transform:translateX(-100%); transition:transform .25s ease; z-index:100;
    box-shadow:0 0 30px rgba(0,0,0,0.3);
  }
  .sidebar.mobile-open{ transform:translateX(0); }
  .sidebar.collapsed{ width:250px; padding-left:14px; padding-right:14px; }
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-group-label{ display:block; }
  .sidebar.collapsed .nav-item{ justify-content:flex-start; padding:10px 12px; }
  .sidebar.collapsed .store-current,
  .sidebar.collapsed .footer-logout{ justify-content:flex-start; }
  .sidebar-toggle{ display:none; }
  /* Mobil ekranda topbar qatorlarga bo'linadi (sarlavha + qidiruv + tugmalar)
     va sticky bo'lganida ekranning uchdan birini doimiy egallab qoladi.
     Shuning uchun u sahifa bilan birga siljiydi. */
  .topbar{ position:static; gap:10px; }
  /* Menyu tugmasi pastki chap burchakka o'tadi: tepada turganda sarlavha va
     kartochkalarni yopib qo'yardi, pastda esa barmoqqa ham yaqinroq. */
  .mobile-nav-toggle{
    top:auto; bottom:18px; left:16px; width:46px; height:46px; border-radius:15px;
    /* Aksent rang: sahifaning oq foni ustida ham, qora "legend" bloki ustida
       ham ajralib turadi. */
    background:var(--accent); color:#fff; border-color:var(--accent);
    box-shadow:0 8px 22px rgba(13,148,136,0.42), 0 0 0 3px rgba(255,255,255,0.65);
  }
  .content{ padding-bottom:84px; }
}
@media (max-width:900px){
  .admin-grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  /* Telefon ekranida 250px drawer + 196px flyout sig'maydi — shu kenglikdan
     pastda do'kon menyusi drawer ichida ochiladi. */
  .store-menu{
    display:none; position:static; width:auto; margin-top:8px; max-height:230px;
    transform:none; box-shadow:none; opacity:1; visibility:visible;
  }
  .store-switch.open .store-menu{ display:block; transform:none; }
  .store-menu::before{ display:none; }
  .store-switch.open .store-caret{ transform:rotate(90deg); }
  /* Xodim ko'p bo'lgan hisobda (bosh xodim: barcha bo'lim + Boshqaruv guruhi +
     do'kon menyusi ochiq) nav ro'yxati past telefon ekranida drawer
     balandligidan oshib ketishi mumkin — shu holatda drawer o'zi ichida
     aylantiriladi. Faqat shu breakpointdan boshlab yoqiladi, chunki undan
     kengroq ekranlarda do'kon menyusi hali `position:absolute` flyout —
     `overflow-y:auto` ikkinchi o'qni ham qirqib, flyoutni ko'rinmas qilib
     qo'yardi (overflow spetsifikatsiyasi bo'yicha bitta o'q "visible" bo'lmasa,
     ikkinchisi ham majburan "auto" bo'ladi). */
  .sidebar{ overflow-y:auto; }
}
@media (max-width:700px){
  /* Ikki ustunli forma qatorlari torda siqilib o'qib bo'lmaydi — bir ustunga. */
  .field-row{ grid-template-columns:1fr; }
  .raq-metric-row{ grid-template-columns:1fr; gap:8px; }
  .raq-bar-line{ grid-template-columns:1fr 60px; grid-template-areas:"name name" "track val"; }
  .raq-bar-name{ grid-area:name; }
  .raq-bar-track{ grid-area:track; }
  .raq-bar-val{ grid-area:val; }
  .finchart-stats{ gap:22px; }
  .raq-grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .cards{ grid-template-columns:1fr; }
  /* Barmoq bilan bosish uchun kattaroq nishon (ko'rinishi o'zgarmaydi). */
  .sku-cell .caret{ width:26px; height:26px; font-size:10px; }
  .icon-btn{ width:30px; height:30px; }
  .content{ padding:16px 14px 40px 14px; }
  .topbar{ padding:14px; }
  .modal{ padding:18px 16px; }
  .modal-actions{ flex-direction:column-reverse; }
  .modal-actions .btn{ width:100%; }
  .finchart-card{ padding:18px 16px 14px; }
  .finchart-stat-value{ font-size:18px; }
  .company-tabs{ flex-direction:column; }
  .company-tab{ width:100%; }
  .raq-topbar-main{ flex-wrap:wrap; }
  .date-range{ flex-wrap:wrap; }
}