/* PenoDecorPro ERP — Umumiy CSS uslublar v2.0 */ /* Barcha sahifalar shu fayldan uslub oladi */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } * { font-family: 'Inter', system-ui, -apple-system, sans-serif; } .mono { font-family: 'JetBrains Mono', monospace; } /* Barcha ikonkalar uchun standart o'lcham — Bosh sahifadagi bilan bir xil. Kerak bo'lgan joyda (masalan kichik tugmalar, sidebar) alohida belgilangan o'lcham bundan ustun turadi. */ .ti { font-size: 18px; /* U-13: yozuv shkalasida (ilgari 19) */ } :root { --sidebar-w: 240px; --topbar-h: 58px; /* kech155 (zip 208 — EGASI TANLOVI «B · Toza ko'k», 23.10): aksent ko'k. Belgi NOMLARI («gold») ataylab o'sha — 200+ joyda ishlatiladi; qiymati — ko'k. Ilgari: #B9783F / #8F5B2A / #9A6231 / #F8F2EB, fon #F8F8F6, chegaralar #E8E3DD / #F0ECE6 (iliq) */ --gold: #2563EB; /* aksent (ramka, belgi, ikonka) — oq fonda 5.2:1 */ --gold-dark: #1D4ED8; /* aksent MATN — oq / och ko'k fonda ≥ 5.6:1 */ --gold-btn: #2563EB; /* OQ yozuvli tugma / belgi foni — 5.2:1 */ --gold-tint: #EEF4FF; /* och ko'k fon (tanlangan, faol) */ --gold-hover: #1D4ED8; /* tugma ustiga kelinganda (oq yozuvli FON) — ikkala rejimda bir xil */ --dark: #1E293B; --dark2: #2A3649; --dark3: #334155; --bg: #F4F6FA; --white: #ffffff; --border: #E2E7EF; --border2: #EDF0F5; --border-strong: #C5CEDC; /* kech120 (zip 134 — G2-23): 5 shablon ishlatardi, hech qayerda aniqlanmagan edi (ramka chizilmasdi) */ --placeholder: #98A1B0; /* kech120 (zip 134 — G2-08): namuna matni — yorliqdan (--text3) och, qiymatdan aniq farqli */ --text: #1A1F2B; --text2: #4A5366; /* ≥ 6:1 hamma och fonda */ --text3: #5B6476; /* ≥ 5:1 hamma och fonda (ilgari #696D78) */ /* chap menyu (kech155, zip 208): yorug' rejimda OQ, tungi rejimda qorong'i (pastda) */ --menu-fon: #FFFFFF; --menu-chiziq: #E2E7EF; --menu-ichki: #EDF0F5; --menu-nom: #1A1F2B; --menu-matn: #2B3038; --menu-sust: #5B6476; --menu-hover: #F1F4F9; --menu-faol-fon: #EEF4FF; --menu-faol-chegara: #C9D9FA; --menu-faol-matn: #1D4ED8; --menu-skroll: #CBD5E1; --green: #22C55E; --red: #EF4444; --blue: #3B82F6; --orange: #F59E0B; --radius-card: 13px; --shadow-card: 0 1px 2px rgba(24,27,34,.05), 0 1px 3px rgba(24,27,34,.04); } /* ============================================================ DARK MODE — bo'lganda ishga tushadi Faqat rang o'zgaruvchilari qayta belgilanadi — boshqa hech narsa o'zgarmaydi, shuning uchun BARCHA sahifalarga avtomatik ta'sir qiladi. ============================================================ */ html[data-theme="dark"] { --gold: #3B82F6; /* kech155 (zip 208): ko'k aksent — qorong'i kartada ≥ 4.5:1 */ --gold-dark: #93B4F5; /* ko'k MATN — qorong'i kartada ≥ 7:1 (ilgari oltin #D09A63) */ --gold-tint: #1A2741; --menu-fon: #181B22; --menu-chiziq: #2D3038; --menu-ichki: #2D3038; --menu-nom: #FFFFFF; --menu-matn: #E5E5E0; --menu-sust: #9198A3; --menu-hover: #23262E; --menu-faol-fon: rgba(59,130,246,0.16); --menu-faol-chegara: rgba(59,130,246,0.32); --menu-faol-matn: #93B4F5; --menu-skroll: #333333; --bg: #16181F; --white: #1E212A; --border: #34384A; --border2: #282C38; --border-strong: #4A5064; --placeholder: #6B7080; --text: #ECEAE6; --text2: #A3A6B0; --text3: #9096A2; /* kech118 (zip 122): kartada 5.4:1 (ilgari #6E7280 — 3.4) */ --shadow-card: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25); } html[data-theme="dark"] body { background: var(--bg); color: var(--text); } /* kech120 (zip 134 — F bosqichi 4-qism, audit G2-08, O'LCHANGAN: brauzer standarti #757575 — yorliqlardan ham to'q, kiritilgan qiymatga yaqin; «Karniz M-06», «Karimov Botir» yozib qo'yilgan ma'lumotdek ko'rinardi) — namuna matni hamma joyda och kulrang */ ::placeholder { color: var(--placeholder); opacity: 1; } /* kech120 (zip 135 — G1-13): ma'lumotsiz grafik o'rnidagi yozuv (`grafikBosh`, base.html) */ .grafik-bosh { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 120px; padding: 12px; text-align: center; color: var(--text3); font-size: 13px; } html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card { background: var(--white); border-color: var(--border); } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--white); color: var(--text); border-color: var(--border); } html[data-theme="dark"] .erp-topbar { background: var(--white); border-color: var(--border); } /* kech118 (zip 122 — tungi rejim to'liq): asosiy qora tugma qorong'i fonda ko'rinmasdi (#181B22 tugma #16181F sahifada) — tungi rejimda yorug' tugma, to'q yozuv (`--doim-` — rejimga qarab almashmaydigan rang). O'z fon rangi yozilgan tugma (style="background:#DC2626", oltin …) — oq yozuv qoladi (to'q yozuv rangli fonda o'qilmasdi) */ html[data-theme="dark"] .btn-dark { background: var(--doim-eceae6); color: var(--doim-16181f); } html[data-theme="dark"] .btn-dark:hover { background: var(--doim-d6d3cd); } html[data-theme="dark"] .btn-dark[style*="background"] { color: #fff; } html[data-theme="dark"] .stat-card.emph { background: #2A2E3A; } .stat-card.emph .emph-havola { color: var(--doim-93c5fd); } /* kech155 (zip 208): qorong'i kartada 8,1:1 */ html[data-theme="dark"] .stat-card.emph .emph-havola { color: var(--gold-dark); } /* tugmaning brauzer standart rangi (qora) qorong'i fonda ko'rinmasdi — o'z rangi yozilmagan tugmalar matn rangini oladi (`:where` — o'ziga xoslik 0: sinf / ichki uslubdagi rang ustun) */ :where(html[data-theme="dark"]) button { color: var(--text); background-color: #2A2E3A; border-color: var(--border); } body { background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; } /* ============================================================ LAYOUT ============================================================ */ .erp-layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; overflow: hidden; } /* ============================================================ SIDEBAR ============================================================ */ .sidebar { background: var(--menu-fon); border-right: 1px solid var(--menu-chiziq); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; min-height: 0; height: 100vh; } .sidebar::-webkit-scrollbar { width: 3px; } .sidebar::-webkit-scrollbar-thumb { background: var(--menu-skroll); border-radius: 2px; } .s-logo { padding: 22px 20px 16px; border-bottom: 1px solid var(--menu-ichki); flex-shrink: 0; } .s-logo .logo-name { font-size: 18px; font-weight: 600; color: var(--menu-nom); /* kech155 (zip 208): yorug' rejimda oq menyuda to'q, tungi rejimda — oq */ letter-spacing: -.3px; } .s-logo .logo-name span { color: var(--gold); } .s-logo .logo-ver { font-size: 12px; color: var(--menu-sust); margin-top: 3px; } /* kech155 (zip 211d / 211e — egasi so'rovi 24.10): logotip — menyu tepasidagi to'rtburchak joyni to'liq egallaydi (yumaloq 42 px emas); oq taglik — tungi rejimda ham shaffof logotipning to'q yozuvi ko'rinadi (yorug' rejimda menyu ham oq — taglik sezilmaydi). Taglik ichi 180 px (`.s-logo` 20 px + 8 px chekinish); logotip mazmuni 180 × 140 gacha (`main.LOGO_MENYU_ENI / _BOYI`) */ .s-logo-plita { padding: 8px; box-sizing: border-box; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; } /* mazmun o'lchamidagi oyna — atrofidagi bo'sh joy ko'rinmaydi (bo'yi ichidagi `padding-top` foizidan — eniga mutanosib) */ .s-logo-kesim { position: relative; overflow: hidden; max-width: 100%; } .s-logo-rasm { position: absolute; display: block; max-width: none; height: auto; } .s-logo-oddiy { display: block; max-width: 100%; max-height: 140px; object-fit: contain; } .s-user { padding: 14px 20px; border-bottom: 1px solid var(--menu-ichki); display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .s-user .u-avatar { width: 34px; height: 34px; background: var(--gold-btn); /* kech155 (zip 208): oq yozuv — 5,2:1 ikkala rejimda (tungi --gold #3B82F6 da 3,7 bo'lardi) */ border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff; flex-shrink: 0; } .s-user .u-name { font-size: 13px; font-weight: 700; color: var(--menu-nom); } .s-user .u-role { font-size: 12px; color: var(--menu-sust); margin-top: 2px; font-weight: 600; } .s-nav { padding: 12px 0; flex: 1; } .nav-label { font-size: 12px; color: var(--menu-sust); text-transform: uppercase; letter-spacing: .5px; padding: 10px 20px 4px; font-weight: 700; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 2px 10px; border-radius: 9px; cursor: pointer; transition: all .15s; text-decoration: none; border: 1px solid transparent; } .nav-item:hover { background: var(--menu-hover); } .nav-item.active { background: var(--menu-faol-fon); border-color: var(--menu-faol-chegara); } .nav-item .n-ico { font-size: 16px; width: 20px; text-align: center; color: var(--menu-sust); } .nav-item .n-txt { font-size: 13px; color: var(--menu-matn); flex: 1; font-weight: 800; letter-spacing: .1px; } .nav-item.active .n-txt { color: var(--menu-faol-matn); font-weight: 800; } /* kech155 (zip 208): oq menyuda 5.9:1, tungi — 7:1 */ .nav-item.active .n-ico { color: var(--gold); } .nav-item .n-badge { font-size: 12px; background: var(--gold-btn); color: #fff; padding: 2px 7px; border-radius: 10px; font-weight: 600; } .s-bottom { padding: 12px 20px; border-top: 1px solid var(--menu-ichki); flex-shrink: 0; } .s-logout { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--menu-sust); cursor: pointer; padding: 8px 10px; border-radius: 8px; text-decoration: none; transition: all .15s; } .s-logout:hover { background: var(--menu-hover); color: var(--m-b91c1c); } /* ============================================================ MAIN AREA ============================================================ */ .erp-main { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); min-height: 0; } .erp-topbar { background: var(--white); padding: 0 24px; height: var(--topbar-h); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .tb-left .page-title { font-size: 16px; font-weight: 600; color: var(--text); } .tb-left .page-sub { font-size: 12px; color: var(--text3); margin-top: 2px; } .tb-right { display: flex; gap: 8px; align-items: center; } /* U-13 (kech123, O'LCHANGAN: «Loy retseptlari» sahifasining uzun izohi o'ng tomonni siqib, «Кирилл» va «Yangi loy retsepti» tugmalari ikki qatorga o'tib 54 px bo'lardi): o'ng tomon (tugmalar) siqilmaydi, chap tomondagi uzun matn «…» bilan qisqaradi (to'liq matni — sichqoncha ustida). Telefonda — base.html dagi o'z qoidalari. */ .erp-topbar .tb-left { flex: 1 1 auto; min-width: 0; } .erp-topbar .tb-left .page-title, .erp-topbar .tb-left .page-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .erp-topbar .tb-right { flex-shrink: 0; margin-left: 16px; } .erp-topbar .btn { white-space: nowrap; } /* ============================================================ U-13 — YAGONA KO'RINISH (kech123; egasi QARORI 02.10 «Avval yagona ko'rinish»). O'LCHANGAN (work/u13/olchov.py — HAQIQIY Chromium, 23 sahifa, 1440 / 390 px): bir xil vazifadagi tugmalar 31 xil balandlikda (15–74 px), 11 xil burchakda, tugma yozuvi 12 xil, sahifa matni 21 xil o'lchamda; maydonlar 17 xil balandlikda. Endi BITTA qoida — o'lchamlar shu yerda (token), sahifalar KLASS ishlatadi (shablonda balandlik / ichki joy / burchak yozilmaydi): tugma kompyuter telefon (≤ 768 px) yozuv .btn-sm 32 36 13 px — jadval / qator / karta ichidagi amal .btn-md 36 40 13 px — yuqori panel, bo'lim sarlavhasidagi amal, tab .btn-icon kvadrat — o'lchami yonidagi klassdan: `.btn-icon` 40 × 40, `.btn-icon.btn-md` 36 × 36, `.btn-icon.btn-sm` 32 × 32 (telefonda 44 / 40 / 36); faqat belgili tugma (`title` / `aria-label` bilan), belgi 18 px .btn 40 44 14 px — asosiy amal (forma, oyna, sahifa) .btn-lg 44 48 16 px — kirish sahifalari .chip 32 36 13 px — filtr (to'liq yumaloq) .maydon 40 44 14 px (telefonda 16 — iPhone fokusda kattalashtirmaydi) Burchak — 8 px (filtr chiplari — to'liq yumaloq). Yagona yozuv qatori (line-height) va ichki joy hisobi bilan tugma `display` qanday bo'lmasin (flex / block / inline-block) aynan shu balandlikda chiqadi. Yozuv shkalasi: 12 / 13 / 14 / 16 / 18 / 24 / 32 px — boshqa o'lcham ishlatilmaydi (`tools/test_u13.py` tekshiradi). ============================================================ */ :root { --h-sm: 32px; --h-md: 36px; --h-btn: 40px; --h-lg: 44px; --r-btn: 8px; --fs-maydon: 14px; --fs-maydon-sm: 13px; } @media (max-width: 768px) { :root { --h-sm: 36px; --h-md: 40px; --h-btn: 44px; --h-lg: 48px; --fs-maydon: 16px; --fs-maydon-sm: 16px; } } /* o'z o'lchami yozilmagan tugma / maydon — brauzer standarti (13,33 px) emas, shkaladagi o'lcham (`:where` — o'ziga xoslik 0: har qanday sahifa / klass qoidasi ustun) */ :where(button) { font-size: 14px; } :where(input, select, textarea) { font-size: var(--fs-maydon); } /* ============================================================ TUGMALAR ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; vertical-align: middle; box-sizing: border-box; min-height: var(--h-btn); padding: calc((var(--h-btn) - 22px) / 2) 16px; border: 1px solid transparent; border-radius: var(--r-btn); font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s, opacity .15s, transform .15s; } .btn:active { transform: scale(.98); } .btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; } .btn .ti { font-size: 16px; line-height: 1; } .btn-sm, .btn-xs { min-height: var(--h-sm); padding: calc((var(--h-sm) - 20px) / 2) 12px; font-size: 13px; line-height: 18px; } .btn-md { min-height: var(--h-md); padding: calc((var(--h-md) - 20px) / 2) 14px; font-size: 13px; line-height: 18px; } .btn-lg { min-height: var(--h-lg); padding: calc((var(--h-lg) - 22px) / 2) 20px; font-size: 16px; line-height: 20px; } .btn-icon { width: var(--h-btn); min-width: var(--h-btn); height: var(--h-btn); min-height: var(--h-btn); padding: 0; flex-shrink: 0; } .btn-icon .ti { font-size: 18px; } .btn-icon.btn-md { width: var(--h-md); min-width: var(--h-md); height: var(--h-md); min-height: var(--h-md); padding: 0; } .btn-icon.btn-sm { width: var(--h-sm); min-width: var(--h-sm); height: var(--h-sm); min-height: var(--h-sm); padding: 0; } .btn-icon.btn-sm .ti { font-size: 16px; } .btn-block { display: flex; width: 100%; } /* yuqori paneldagi har tugma — o'rta o'lcham (tungi rejim / qo'ng'iroqcha belgi-tugmalari bilan bir qatorda, bir balandlikda) */ .erp-topbar .btn { min-height: var(--h-md); padding: calc((var(--h-md) - 20px) / 2) 14px; font-size: 13px; line-height: 18px; } .erp-topbar .btn.btn-icon { width: var(--h-md); min-width: var(--h-md); height: var(--h-md); padding: 0; } .btn-dark { background: var(--dark); color: #fff; } .btn-dark:hover { background: #222; } .btn-gold { background: var(--gold-btn); color: #fff; } .btn-gold:hover { background: var(--gold-hover); } .btn-green { background: #15803D; color: #fff; } /* kech118 (U-03): oq yozuv 5.0:1 (ilgari #22C55E — 2.3) */ .btn-green:hover { opacity: .88; } .btn-red { background: #DC2626; color: #fff; } .btn-red:hover { opacity: .88; } .btn-outline { background: var(--white); color: var(--text); border: 1px solid var(--border); } .btn-outline:hover { background: var(--bg); } /* ikkinchi darajali (fonsiz) — kartadagi «Batafsil», belgi-tugma */ .btn-ghost { background: transparent; color: var(--text2); border-color: transparent; } .btn-ghost:hover { background: var(--bg); color: var(--text); } /* xavfli amal (o'chirish) — ramkali, qizil yozuv */ .btn-danger { background: var(--white); color: var(--m-dc2626); border-color: var(--ch-f3c7c7); } .btn-danger:hover { background: var(--f-fee2e2); } /* ramkali oltin (ikkinchi darajali muhim amal — «Tahrirlash», «Hisob-kitob») va ramkali yashil */ .btn-gold-outline { background: var(--white); color: var(--gold-dark); border-color: var(--gold); } .btn-gold-outline:hover { background: var(--gold-tint); } .btn-green-outline { background: var(--white); color: var(--m-15803d); border-color: var(--ch-86efac); } .btn-green-outline:hover { background: var(--f-dcfce7); } /* yumshoq (och fonli) — oyna «✕», qator ichidagi belgi-tugma, «Yana ko'rsatish» */ .btn-soft { background: var(--border2); color: var(--text2); border-color: transparent; } .btn-soft:hover { background: var(--border); color: var(--text); } /* matn ichidagi havola-tugma («To'liq to'lash», «+ Yangi material») — tugma o'lchami qoidasidan tashqari (matn qatorida) */ .btn-link { background: none; border: none; padding: 0; color: var(--gold-dark); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .btn-link:hover { color: var(--gold-hover); } /* tanlov kartasi — ikki qatorli variant tugmasi (sarlavha + izoh: «O'chirish va xomashyoni omborga qaytarish») */ .btn-tanlov { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; width: 100%; min-height: var(--h-btn); padding: 10px 14px; text-align: left; white-space: normal; } /* FILTR CHIPLARI — bir guruhdan bittasi tanlanadi (`.active` yoki aria-pressed="true") */ .chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; vertical-align: middle; min-height: var(--h-sm); padding: calc((var(--h-sm) - 20px) / 2) 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); color: var(--text2); font-family: inherit; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .chip:hover { border-color: var(--border-strong); color: var(--text); } .chip.active, .chip[aria-pressed="true"] { background: var(--gold-tint); border-color: var(--gold); color: var(--gold-dark); } /* TABLAR — sahifa ichidagi bo'limlar (bitta tanlangan); o'rta o'lcham */ .tablar { display: flex; flex-wrap: wrap; gap: 6px; } .tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; vertical-align: middle; min-height: var(--h-md); padding: calc((var(--h-md) - 20px) / 2) 14px; border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--white); color: var(--text2); font-family: inherit; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .tab:hover { color: var(--text); border-color: var(--border-strong); } .tab.active, .tab[aria-selected="true"] { background: var(--dark); border-color: var(--dark); color: #fff; } html[data-theme="dark"] .tab.active, html[data-theme="dark"] .tab[aria-selected="true"] { background: var(--doim-eceae6); border-color: var(--doim-eceae6); color: var(--doim-16181f); } /* MAYDON — kiritish / tanlash (tugma bilan bir balandlikda) */ .maydon { box-sizing: border-box; min-height: var(--h-btn); padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--white); color: var(--text); font-family: inherit; font-size: var(--fs-maydon); line-height: 20px; outline: none; transition: border-color .15s; } textarea.maydon { padding: 10px 12px; min-height: 80px; } .maydon-sm { min-height: var(--h-sm); padding: 0 8px; font-size: var(--fs-maydon-sm); } /* jadval qatoridagi tanlov / ixcham filtr maydoni */ .maydon:focus { border-color: var(--gold); } /* ============================================================ KARTOCHKALAR ============================================================ */ .card { background: var(--white); border-radius: var(--radius-card); border: 1px solid var(--border); box-shadow: var(--shadow-card); overflow: hidden; } .card-head { padding: 14px 16px; border-bottom: 1px solid var(--border2); display: flex; justify-content: space-between; align-items: center; } .card-head h3 { font-size: 14px; font-weight: 600; color: var(--text); } .card-head .ch-action { font-size: 12px; color: var(--gold-dark); cursor: pointer; font-weight: 500; } .card-body { padding: 16px; } /* KPI kartochkalar */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .kpi-card { background: var(--white); border-radius: var(--radius-card); border: 1px solid var(--border); box-shadow: var(--shadow-card); padding: 14px 16px; } .kpi-val { font-size: 24px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .kpi-label { font-size: 12px; color: var(--text3); font-weight: 500; } .kpi-badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 6px; margin-top: 6px; font-weight: 500; } .kpi-badge.up { background: var(--f-dcfce7); color: var(--m-1e7e34); } .kpi-badge.warn { background: var(--f-fef3c7); color: var(--m-92400e); } .kpi-badge.info { background: var(--f-eff6ff); color: var(--m-1a6fa8); } /* ============================================================ JADVAL ============================================================ */ .erp-table { width: 100%; border-collapse: collapse; } .erp-table th { padding: 10px 14px; text-align: left; font-size: 12px; color: var(--text3); font-weight: 500; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border2); background: var(--white); } .erp-table td { padding: 11px 14px; font-size: 13px; color: var(--text2); border-bottom: 1px solid var(--ch-f8f8f8); } .erp-table tr:hover td { background: var(--f-f8fafc); } .erp-table tr:last-child td { border-bottom: none; } /* ============================================================ STATUS BADGELAR ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 500; } .badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; display: inline-block; } .badge-new { background: var(--f-eff6ff); color: var(--m-1a6fa8); } .badge-new::before { background: #1a6fa8; } .badge-progress { background: var(--f-fef3c7); color: var(--m-92400e); } .badge-progress::before { background: var(--f-f59e0b); } .badge-ready { background: var(--f-dcfce7); color: var(--m-1e7e34); } .badge-ready::before { background: var(--f-22c55e); } .badge-delivered { background: var(--f-f3e8ff); color: var(--m-6c3483); } .badge-delivered::before { background: #8E44AD; } .badge-cancelled { background: var(--f-f5f5f5); color: var(--m-888888); } .badge-cancelled::before { background: #aaa; } .badge-warning { background: var(--f-fef3c7); color: var(--m-92400e); } .badge-danger { background: var(--f-fee2e2); color: var(--m-dc2626); } .badge-info { background: var(--f-eff6ff); color: var(--m-1a6fa8); } /* ============================================================ FORMA ELEMENTLARI ============================================================ */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 13px; color: var(--text3); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: var(--h-btn); /* U-13: maydon — `.btn` bilan bir balandlikda (ilgari 46 px) */ padding: 0 12px; border: 1.5px solid var(--border); border-radius: var(--r-btn); font-size: var(--fs-maydon); line-height: 20px; color: var(--text); outline: none; background: var(--f-fafafa); transition: border .15s, background .15s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gold); background: var(--white); } /* U-13 (kech123): belgilash katagi / tanlov doirasi — maydon qoidasidan TASHQARI (aks holda 100 % kenglik va 40 px balandlik: doira 40 px, yonidagi matn siqiladi); shunday variant yorlig'i («Hozir hisob-kitob qilinsin», «Yo'q — loygacha») — bosh harflarda emas */ .form-group input[type=checkbox], .form-group input[type=radio] { width: auto; min-height: 0; padding: 0; flex-shrink: 0; } .form-group label:has(> input[type=checkbox]), .form-group label:has(> input[type=radio]) { text-transform: none; letter-spacing: normal; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .unit-input-wrap{display:flex;align-items:stretch;min-height:var(--h-btn);box-sizing:border-box;border:1.5px solid var(--border);border-radius:var(--r-btn);overflow:hidden;background:var(--white);transition:border .15s,background .15s} .unit-input-wrap:focus-within{border-color:var(--gold);background:var(--white)} .unit-input-wrap input,.unit-input-wrap select{border:none!important;outline:none;min-height:0;padding:0 12px;font-size:var(--fs-maydon);line-height:20px;color:var(--text);width:100%;background:transparent!important} .unit-input-wrap .unit-suffix{display:flex;align-items:center;padding:0 13px;background:var(--gold-tint);color:var(--gold-dark);font-size:13px;font-weight:700;white-space:nowrap;flex-shrink:0} .detal-result{margin-top:16px;padding:16px;background:var(--f-f1f5f9);border-radius:12px;display:flex;gap:22px;flex-wrap:wrap;align-items:center} .result-cards{display:flex;gap:14px;flex-wrap:wrap;width:100%} .result-card{background:var(--white);border-radius:10px;border:1px solid var(--ch-e2e8f0);padding:12px 14px;flex:1;min-width:150px} .result-card label{font-size:12px;font-weight:700;color:var(--gold-dark);display:flex;align-items:center;gap:4px;margin-bottom:8px;text-transform:none} .dval-box{display:flex;align-items:stretch;min-height:var(--h-btn);box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r-btn);overflow:hidden;background:var(--white)} .dval-box input{border:none;outline:none;padding:9px 12px;font-size:16px;color:var(--m-222222);width:100%;background:transparent;font-weight:600} .dval-box .unit-suffix{display:flex;align-items:center;padding:0 12px;background:var(--gold-tint);color:var(--gold-dark);font-size:12px;font-weight:700;white-space:nowrap} .result-card.main label{color:var(--m-166534)} .dval-box.main input{color:var(--m-16a34a);font-size:18px;font-weight:800} .dval-box.main .unit-suffix{background:var(--f-dcfce7);color:var(--m-166534)} /* ============================================================ CONTENT WRAPPER ============================================================ */ .erp-content { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; } .erp-content::-webkit-scrollbar { width: 9px; } .erp-content::-webkit-scrollbar-track { background: transparent; } .erp-content::-webkit-scrollbar-thumb { background: var(--f-b8bcc4); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } .erp-content::-webkit-scrollbar-thumb:hover { background: #9a9fab; background-clip: padding-box; } .erp-content { scrollbar-width: auto; scrollbar-color: #b8bcc4 transparent; } /* ============================================================ ALERT / XABAR ============================================================ */ .alert { border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; font-size: 13px; } .alert-warning { background: var(--f-fef3c7); border: 1px solid var(--ch-fde68a); color: var(--m-92400e); } .alert-danger { background: var(--f-fee2e2); border: 1px solid #F1948A; color: var(--m-dc2626); } .alert-success { background: var(--f-dcfce7); border: 1px solid var(--ch-a9dfbf); color: var(--m-1e7e34); } .alert-info { background: var(--f-eff6ff); border: 1px solid var(--ch-aed6f1); color: var(--m-1a6fa8); } /* ============================================================ MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal { background: var(--white); border-radius: 14px; padding: 24px; max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; } .modal-title { font-size: 16px; font-weight: 600; margin-bottom: 18px; color: var(--text); } /* ============================================================ YORDAMCHI KLASSLAR ============================================================ */ .text-gold { color: var(--gold-dark); } .text-green { color: var(--m-15803d); } /* kech118 (U-03): matn — 5.0:1 */ .text-red { color: var(--m-dc2626); } /* kech118 (U-03): matn — 4.8:1 */ .text-gray { color: var(--text3); } .text-sm { font-size: 12px; } .text-xs { font-size: 12px; } .fw-600 { font-weight: 600; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .flex { display: flex; } .flex-center { display: flex; align-items: center; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .w-full { width: 100%; } .hidden { display: none; } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--f-dddddd); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--f-cccccc); } /* ============================================================ BOSH SAHIFA — STAT KARTOCHKA (ikonka bilan) ============================================================ */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .stat-card { background: var(--white); border-radius: var(--radius-card); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.05); padding: 16px; transition: box-shadow .15s, transform .15s; } .stat-card:hover { box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 8px 22px rgba(16,24,40,.09); transform: translateY(-1px); } .stat-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--gold-tint), rgba(255,255,255,.4)); color: var(--gold-dark); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } .stat-label { font-size: 13px; color: var(--text3); font-weight: 600; margin-bottom: 4px; } .stat-val { font-size: 24px; font-weight: 700; color: var(--text); } .stat-trend { font-size: 13px; margin-top: 6px; font-weight: 500; } .stat-trend.up { color: var(--m-1e7e34); } .stat-trend.warn { color: var(--m-92400e); } .stat-card.emph { background: var(--dark); border: none; } .stat-card.emph .stat-label { color: var(--m-999999); } .stat-card.emph .stat-val { color: #fff; } .stat-card.emph .stat-icon { background: rgba(59,130,246,.22); color: var(--doim-93c5fd); } /* ============================================================ GAUGE (ishlab chiqarish holati) ============================================================ */ .gauge-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .gauge-legend-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .gauge-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 7px; } /* ============================================================ RO'YXAT SATRLARI (buyurtmalar, faoliyat) ============================================================ */ .list-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border2); } .list-row:last-child { border-bottom: none; } .list-title { font-size: 13px; color: var(--text); font-weight: 500; } .list-sub { font-size: 12px; color: var(--text3); margin-top: 2px; } .list-time { font-size: 12px; color: var(--text3); white-space: nowrap; margin-left: 10px; } /* ============================================================ XOMASHYO ZAXIRA CHIZIG'I ============================================================ */ .stock-row { margin-bottom: 12px; } .stock-row:last-child { margin-bottom: 0; } .stock-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; } .stock-name { color: var(--text); } .stock-qty { font-weight: 500; } .stock-bar { height: 5px; background: var(--border2); border-radius: 4px; overflow: hidden; } .stock-bar-fill { height: 100%; border-radius: 4px; } /* ============================================================ USTALAR REYTINGI ============================================================ */ .leaderboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; } .lb-item { text-align: center; } .lb-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; margin: 0 auto 8px; background: var(--border2); color: var(--text2); } .lb-item.rank1 .lb-avatar { background: var(--gold-btn); color: #fff; } .lb-name { font-size: 12px; font-weight: 500; color: var(--text); } .lb-meta { font-size: 12px; color: var(--text3); margin-top: 1px; } /* ============================================================ MOBIL MOSLASHUV (RESPONSIVE) — 768px va undan tor ekranlar ============================================================ */ .mobile-menu-btn { display: none; } .sidebar-overlay { display: none; } @media (max-width: 768px) { .erp-layout { grid-template-columns: 1fr; } /* Mobil brauzerlarda 100vh manzil satri/pastki panelni hisobga olmaydi — shu sabab sahifaning pastki qismi ko'rinmay qolar edi. 100dvh haqiqiy ko'rinadigan balandlikni hisoblaydi (qo'llab-quvvatlamaydigan brauzerlarda bu qator e'tiborga olinmay, yuqoridagi 100vh kuchda qoladi). */ body { height: 100dvh; } .erp-layout { height: 100dvh; } .sidebar { height: 100dvh; } /* Sahifaning eng pastki qatori/kartasi mobil brauzer panellari tomonidan yopilib qolmasligi uchun qo'shimcha bo'sh joy */ .erp-content { padding-bottom: 90px; } .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); max-width: 82vw; z-index: 1300; transform: translateX(-100%); transition: transform .25s ease; /* kech119 (C — telefon, O'LCHANGAN skrinshotlarda): yopiq menyuning soyasi ekranning chap chetiga ~20 px kirib, har sahifada qora chiziq ko'rinardi — soya faqat menyu OCHIQ bo'lganda */ box-shadow: none; } .sidebar.sidebar-open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.25); } .sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1250; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .sidebar-overlay.active { opacity: 1; pointer-events: auto; } .mobile-menu-btn { display: flex; font-size: 14px; align-items: center; justify-content: center; width: var(--h-md); height: var(--h-md); border-radius: var(--r-btn); border: 1px solid var(--border); background: var(--white); color: var(--text2); cursor: pointer; margin-right: 10px; flex-shrink: 0; } .erp-topbar { height:auto; min-height:var(--topbar-h); padding:10px 12px; flex-wrap: wrap; gap: 8px; } .tb-right { flex-wrap: wrap; row-gap: 8px; } .tb-left { display: flex; align-items: center; min-width: 0; } .tb-left .page-title { font-size: 16px; } .tb-left .page-sub { display: none; } /* Ko'p ustunli setkalar mobil ekranda 1-2 ustunga tushadi */ .kpi-grid, .stat-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .form-row, .form-row-3 { grid-template-columns: 1fr; } } /* kech119 (C BOSQICH — telefon; audit G5-16): rasm qo'shish / almashtirish belgisi (kamera) faqat sichqoncha ustiga kelganda ko'rinardi — telefonda (sichqonchasiz qurilma) umuman ko'rinmasdi. Sichqonchasiz qurilmada va tor ekranda doim ko'rinadi, barmoq uchun kattaroq. */ @media (hover: none), (max-width: 768px) { .cam-overlay, .proj-thumb-cam, .mat-thumb-cam { opacity: 1 !important; width: 26px !important; height: 26px !important; font-size: 14px !important; } } /* kech119 (C BOSQICH — telefon; audit G5-15, G2-18, O'LCHANGAN work/k125/telefon.py: 390 px da Tayyor mahsulotlar / Qaytarishlar / Loyihalar birinchi ekranini 5–6 ta katta raqam kartasi egallardi — birinchi mahsulot 954 px da, ekran 844 px): telefonda raqam kartalari IXCHAM — ikki ustun, belgi chapda, raqam yonida (karta ~60 px). */ @media (max-width: 600px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; } .stat-card { padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; } .stat-card > * { grid-column: 2; min-width: 0; } .stat-card > .stat-icon { grid-column: 1; grid-row: 1 / span 3; width: 30px; height: 30px; font-size: 16px; margin-bottom: 0; border-radius: 9px; } .stat-label { font-size: 12px; margin-bottom: 0; line-height: 1.3; } .stat-val { font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; } .stat-trend { margin-top: 2px; font-size: 12px; } /* kech119 (C — telefon, G1-20 / G6-15, O'LCHANGAN: Dashboard pul kartalari shablonda «4 / 3 ustun» qat'iy (har biri ~80 px, «764 ming so'm» sig'masdi), KPI sahifasi kartalari 390 px da sahifani 456 px ga kengaytirardi): telefonda IKKI ustun, raqam sig'masa keyingi qatorga o'tadi (shablondagi ustun soni — `!important` bilan bekor) */ .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; } .kpi-card { padding: 10px 12px; min-width: 0; gap: 10px !important; } .kpi-card > div { min-width: 0; } .kpi-val { font-size: 18px; overflow-wrap: anywhere; } .kpi-ikon { width: 32px !important; height: 32px !important; font-size: 16px !important; border-radius: 9px !important; } /* kech119 (C — telefon, G3-19 / G6-15): keng jadval telefonda KARTALAR — har qator alohida karta, har katak «nomi — qiymati» (`data-label`), amal tugmalari kartaning pastida ko'rinib turadi (ilgari jadval 720 px, ✎ / 🗑, «O'chir» / «Parol» o'ng chetda ekrandan tashqarida — surish kerakligini hech narsa bildirmasdi). Jadvalga `telefon-karta` sinfi, kataklarga `data-label` beriladi; nomsiz katak (`data-label=""`) — faqat qiymat (tugmalar). */ table.telefon-karta, table.telefon-karta > tbody, table.telefon-karta > tbody > tr, table.telefon-karta > tbody > tr > td { display: block; width: 100%; } table.telefon-karta { min-width: 0 !important; } table.telefon-karta > thead { display: none; } table.telefon-karta > tbody > tr { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--white); } table.telefon-karta > tbody > tr > td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0 !important; border: none !important; text-align: right !important; min-width: 0; overflow-wrap: anywhere; } /* kech147 (zip 189): `margin-right:auto` — katakda bir nechta tugun bo'lsa (holat nuqtasi + qoldiq, «Tashlandi» + 🧩) ular BIRGA o'ngda; ilgari `space-between` birinchisini kartaning o'rtasiga qo'yardi (O'LCHANGAN: nuqta 165–172 px, qiymat 256–320 px) */ table.telefon-karta > tbody > tr > td::before { content: attr(data-label); color: var(--text3); font-size: 12px; font-weight: 600; text-align: left; flex-shrink: 0; max-width: 45%; margin-right: auto; } table.telefon-karta > tbody > tr > td[data-label=""]::before, table.telefon-karta > tbody > tr > td:not([data-label])::before { content: none; } table.telefon-karta > tbody > tr > td[data-label=""], table.telefon-karta > tbody > tr > td:not([data-label]) { justify-content: flex-end; flex-wrap: wrap; } table.telefon-karta > tbody > tr > td[colspan] { justify-content: center; text-align: center !important; } /* kech147 (zip 186, O'LCHANGAN 320 × 460: «Ta'minotchilar ro'yxati» sarlavhasidagi 180 px qidiruv maydoni, O'chirilganlar jurnali sarlavhasidagi «Barcha amallar — Tizim jurnallari →» havolasi kartadan chiqib qirqilardi yoki sarlavhani 96 px ga siqardi): karta sarlavhasi sig'masa ikkinchi qatorga o'tadi */ .card-head { flex-wrap: wrap; row-gap: 6px; column-gap: 10px; } } /* kech147 (zip 186, O'LCHANGAN 667 × 375 — telefon YOTIQ: Moliya tranzaksiyalari 633 / 840 px va Foydalanuvchilar 633 / 752 px jadvali yon tomonga surilardi, ✎ / 🗑 / «Parol» tugmalari birinchi ekranda yo'q, nom ustunlari 109–118 px da 4–10 satr): `telefon-karta` jadvallari yotiq telefonda ham KARTA (≤ 950 px eni VA ≤ 500 px bo'yi — planshet / kompyuterga ta'sir qilmaydi) */ @media (max-width: 950px) and (max-height: 500px) { table.telefon-karta, table.telefon-karta > tbody, table.telefon-karta > tbody > tr, table.telefon-karta > tbody > tr > td { display: block; width: 100%; } table.telefon-karta { min-width: 0 !important; } table.telefon-karta > thead { display: none; } table.telefon-karta > tbody > tr { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--white); } table.telefon-karta > tbody > tr > td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0 !important; border: none !important; text-align: right !important; min-width: 0; overflow-wrap: anywhere; } /* kech147 (zip 189): `margin-right:auto` — katakda bir nechta tugun bo'lsa (holat nuqtasi + qoldiq, «Tashlandi» + 🧩) ular BIRGA o'ngda; ilgari `space-between` birinchisini kartaning o'rtasiga qo'yardi (O'LCHANGAN: nuqta 165–172 px, qiymat 256–320 px) */ table.telefon-karta > tbody > tr > td::before { content: attr(data-label); color: var(--text3); font-size: 12px; font-weight: 600; text-align: left; flex-shrink: 0; max-width: 45%; margin-right: auto; } table.telefon-karta > tbody > tr > td[data-label=""]::before, table.telefon-karta > tbody > tr > td:not([data-label])::before { content: none; } table.telefon-karta > tbody > tr > td[data-label=""], table.telefon-karta > tbody > tr > td:not([data-label]) { justify-content: flex-end; flex-wrap: wrap; } table.telefon-karta > tbody > tr > td[colspan] { justify-content: center; text-align: center !important; } } /* ============================================================ kech118 (B bosqichi — audit U-14, O'LCHANGAN: Tab bilan yurganda Loyihalar 8, Kirim 7, Xarajat 9 maydon belgilanmasdi): klaviatura bilan o'tganda qayerda turgani HAR elementda ko'rinsin. `!important` — shablonlardagi `outline:none` (inline) ustidan. O'z hoshiyasi (focus-within) bilan belgilanadigan o'ralgan maydonlar — o'rovchisi belgilanadi. ============================================================ */ :where(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"], [onclick]):focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 2px; } :where(input, select, textarea):focus-visible { outline-offset: 1px; } .unit-input-wrap input:focus-visible, .unit-input-wrap select:focus-visible, .dval-box input:focus-visible { outline: none !important; } .dval-box:focus-within { outline: 2px solid var(--gold); outline-offset: 1px; } /* ============================================================ kech120 (zip 130 — E bosqichi 4-qism, audit G4-20 / G5-19): QIDIRUVLI TANLAGICH (`static/tanlov.js`). Asl `