/* ========================================================================== resto_saas — yagona dizayn tizimi (design system) -------------------------------------------------------------------------- Bu fayl butun loyihaning ko'rinishini boshqaradi: mijoz sahifasi, rahbar paneli, ofitsiant/kuryer/oshpaz panellari va kirish sahifalari. MUHIM: brend rangi va shrifti har bir restoran uchun har xil bo'lgani uchun ular BU YERDA emas, har bir base shablonning qismida CSS o'zgaruvchilari sifatida e'lon qilinadi: :root { --brand: {{ brand_color }}; --brand-on: {{ brand_on_color }}; --brand-font: '{{ brand_font }}'; } Shu sababli bu faylda hech qachon to'g'ridan-to'g'ri brend rangi yozilmaydi — faqat var(--brand) va undan hosil qilingan soyalar ishlatiladi. ========================================================================== */ /* ========================================================================== 1. TOKENLAR ========================================================================== */ :root { /* --- Neytral shkala --- */ --n-0: #ffffff; --n-25: #fcfcfd; --n-50: #f8f9fb; --n-100: #f1f3f6; --n-200: #e6e9ee; --n-300: #d3d8e0; --n-400: #a3abb8; --n-500: #737d8c; --n-600: #545d6b; --n-700: #3c444f; --n-800: #262c35; --n-900: #161a20; /* --- Semantik rollar --- */ --bg-app: var(--n-50); --bg-surface: var(--n-0); --bg-subtle: var(--n-100); --border: var(--n-200); --border-strong: var(--n-300); --text: var(--n-800); /* Kontrast (audit 2026-09-20, J8). Ilgari `--text-muted: var(--n-500)` (4.17:1) va `--text-faint: var(--n-400)` (2.31:1) edi — ikkalasi ham WCAG talabidan (4.5:1) past, holbuki ular bezak emas, HAQIQIY MATN uchun ishlatiladi: kuryerning pastki navigatsiya yozuvlari (10px), mijozning buyurtma bosqichlari, jadval sarlavhalari, placeholder. Endi ikkalasi ham yorug'ida ham, qorong'usida ham 4.5:1 dan yuqori — qiymatlar o'lchab tanlangan. */ --text-muted: var(--n-600); --text-faint: #67707e; --text-invert: var(--n-0); /* --- Holat ranglari: fon / matn / chegara --- */ --success-bg: #ecfdf3; --success-fg: #047857; --success-bd: #a7f3d0; --warning-bg: #fffaeb; --warning-fg: #b45309; --warning-bd: #fde68a; --danger-bg: #fef3f2; --danger-fg: #b42318; --danger-bd: #fecdca; --info-bg: #eff8ff; --info-fg: #175cd3; --info-bd: #b2ddff; /* --- Brend soyalari (fallback; quyida color-mix bilan aniqlashtiriladi) --- */ --brand-50: var(--n-50); --brand-100: var(--n-100); --brand-200: var(--n-200); --brand-700: var(--brand, #FF6B00); /* --- Oraliqlar --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; /* --- Burchaklar --- */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* --- Soyalar --- */ --sh-xs: 0 1px 2px rgba(16, 24, 40, .05); --sh-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --sh-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04); --sh-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03); /* --- Shrift o'lchamlari --- */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px; /* --- Sidebar va savat paneli: bular YORUG' rejimda ham quyuq bo'ladi, shuning uchun neytral shkala bilan birga teskari aylanmasligi kerak --- */ --sidebar-bg: #161a20; --sidebar-fg: #a3abb8; --sidebar-fg-strong: #ffffff; /* Audit 2026-09-24, O13: #545d6b edi — 2,6:1 (WCAG 4,5:1 talab). */ --sidebar-dim: #8a93a3; --sidebar-disabled: #3c444f; --sidebar-divider: rgba(255, 255, 255, .08); --sidebar-hover: rgba(255, 255, 255, .05); --sidebar-active: rgba(255, 255, 255, .07); --bar-bg: #161a20; --bar-fg: #ffffff; /* Brauzerning o'z elementlari (scrollbar, sana tanlagich) mos kelishi uchun */ color-scheme: light; /* --- Animatsiya --- */ --t-fast: 120ms ease; --t: 180ms cubic-bezier(.4, 0, .2, 1); /* --- Qatlamlar --- */ --z-nav: 40; --z-bar: 50; --z-drawer: 60; --z-overlay: 55; } /* Brend soyalarini aniq hisoblash (zamonaviy brauzerlar) */ @supports (color: color-mix(in srgb, red 50%, white)) { :root { --brand-50: color-mix(in srgb, var(--brand) 8%, white); --brand-100: color-mix(in srgb, var(--brand) 14%, white); --brand-200: color-mix(in srgb, var(--brand) 26%, white); --brand-700: color-mix(in srgb, var(--brand) 86%, black); /* Audit 2026-09-23, "barcha panellar" qayta ko'rib chiqish: sidebar'dagi faol/hover holat ilgari OQ shaffoflik (neytral, brendsiz) edi — shu sababli boshqaruv paneli "generic admin shablon"dek ko'rinardi. Endi brend rangining o'zidan olingan shaffof qatlam ishlatiladi, fallback esa (bu blok qo'llab-quvvatlanmasa) yuqoridagi neytral qiymatlarda qoladi. */ --sidebar-hover: color-mix(in srgb, var(--brand) 10%, transparent); --sidebar-active: color-mix(in srgb, var(--brand) 22%, transparent); } } /* ========================================================================== 1b. QORONG'U REJIM -------------------------------------------------------------------------- Ikki holatda yoqiladi: 1) qurilma sozlamasi qorong'u VA foydalanuvchi yorug'ni majburlamagan; 2) foydalanuvchi tugma orqali qorong'uni tanlagan (data-theme="dark"). Quyidagi ikki blok bir xil — biri media-so'rov ichida bo'lgani uchun ularni birlashtirib bo'lmaydi. Ikkalasi bitta manbadan yozilgan, shuning uchun biri o'zgarsa, ikkinchisi ham o'zgarishi shart. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Neytral shkala teskari: kichik raqam = fon, katta raqam = matn. Shu sababli semantik tokenlar (--bg-app, --text va h.k.) o'z-o'zidan to'g'ri qiymat oladi — ularni qayta yozish shart emas. */ /* Qorong'u rejimda `--text-faint` alohida yoziladi: u neytral shkaladan emas, o'lchab tanlangan qiymatdan olinadi (audit J8). */ --text-faint: #7b8796; --n-0: #12161c; --n-25: #141920; --n-50: #0d1014; --n-100: #1a1f27; --n-200: #262c36; --n-300: #343c48; --n-400: #5d6775; --n-500: #8892a1; --n-600: #a7b0bd; --n-700: #c6ccd6; --n-800: #e5e9ef; --n-900: #f4f6f9; /* Holat ranglari — qorong'u fonda och pastel fon ishlamaydi, shuning uchun to'q fon + yorqin matn */ --success-bg: #0c2a1e; --success-fg: #4ade80; --success-bd: #14532d; --warning-bg: #2b1f07; --warning-fg: #fbbf24; --warning-bd: #78350f; --danger-bg: #2c1113; --danger-fg: #f87171; --danger-bd: #7f1d1d; --info-bg: #0d1f33; --info-fg: #60a5fa; --info-bd: #1e3a8a; /* Sidebar qorong'u rejimda ham quyuq qoladi, lekin sahifa fonidan biroz ajralib tursin */ --sidebar-bg: #14181f; --sidebar-fg: #9aa3b1; --sidebar-fg-strong: #ffffff; /* Audit 2026-09-24, O13: #6b7585 edi — 3,8:1. */ --sidebar-dim: #8a93a3; --sidebar-disabled: #454d59; --sidebar-divider: rgba(255, 255, 255, .07); --sidebar-hover: rgba(255, 255, 255, .05); --sidebar-active: rgba(255, 255, 255, .09); --bar-bg: #1a1f27; --bar-fg: #ffffff; /* Soyalar qorong'u fonda quyuqroq bo'lishi kerak */ --sh-xs: 0 1px 2px rgba(0, 0, 0, .35); --sh-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3); --sh-md: 0 4px 8px -2px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .3); --sh-lg: 0 12px 16px -4px rgba(0, 0, 0, .55), 0 4px 6px -2px rgba(0, 0, 0, .3); color-scheme: dark; } @supports (color: color-mix(in srgb, red 50%, white)) { :root:not([data-theme="light"]) { /* Brend soyalari qorong'u fon bilan aralashtiriladi, matn esa ochroq */ --brand-50: color-mix(in srgb, var(--brand) 14%, #12161c); --brand-100: color-mix(in srgb, var(--brand) 22%, #12161c); --brand-200: color-mix(in srgb, var(--brand) 34%, #12161c); --brand-700: color-mix(in srgb, var(--brand) 72%, white); /* Audit 2026-09-23: sidebar faol/hover holati — shaffof qatlam bo'lgani uchun qorong'uda ham xuddi shu formula ishlaydi, lekin yuqoridagi (149-qator) oddiy oq-shaffoflik qiymatlari BU YERDA ustidan qayta yozilishi kerak, aks holda ular ustun kelib qoladi. */ --sidebar-hover: color-mix(in srgb, var(--brand) 10%, transparent); --sidebar-active: color-mix(in srgb, var(--brand) 24%, transparent); } } /* Select strelkasi qorong'u fonda ko'rinadigan bo'lsin */ :root:not([data-theme="light"]) select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238892a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* Buyurtma holatlari — qattiq yozilgan uchtasi uchun qorong'u variant */ :root:not([data-theme="light"]) .status-PREPARING { background: #2b1608; color: #fb923c; } :root:not([data-theme="light"]) .status-DELIVERED { background: #1d1a33; color: #a78bfa; } :root:not([data-theme="light"]) .status-PAID { background: #0c2a1e; color: #4ade80; } } :root[data-theme="dark"] { /* Neytral shkala teskari: kichik raqam = fon, katta raqam = matn. Shu sababli semantik tokenlar (--bg-app, --text va h.k.) o'z-o'zidan to'g'ri qiymat oladi — ularni qayta yozish shart emas. */ /* Qorong'u rejimda `--text-faint` alohida yoziladi: u neytral shkaladan emas, o'lchab tanlangan qiymatdan olinadi (audit J8). */ --text-faint: #7b8796; --n-0: #12161c; --n-25: #141920; --n-50: #0d1014; --n-100: #1a1f27; --n-200: #262c36; --n-300: #343c48; --n-400: #5d6775; --n-500: #8892a1; --n-600: #a7b0bd; --n-700: #c6ccd6; --n-800: #e5e9ef; --n-900: #f4f6f9; /* Holat ranglari — qorong'u fonda och pastel fon ishlamaydi, shuning uchun to'q fon + yorqin matn */ --success-bg: #0c2a1e; --success-fg: #4ade80; --success-bd: #14532d; --warning-bg: #2b1f07; --warning-fg: #fbbf24; --warning-bd: #78350f; --danger-bg: #2c1113; --danger-fg: #f87171; --danger-bd: #7f1d1d; --info-bg: #0d1f33; --info-fg: #60a5fa; --info-bd: #1e3a8a; /* Sidebar qorong'u rejimda ham quyuq qoladi, lekin sahifa fonidan biroz ajralib tursin */ --sidebar-bg: #14181f; --sidebar-fg: #9aa3b1; --sidebar-fg-strong: #ffffff; /* Audit 2026-09-24, O13: #6b7585 edi — 3,8:1. */ --sidebar-dim: #8a93a3; --sidebar-disabled: #454d59; --sidebar-divider: rgba(255, 255, 255, .07); --sidebar-hover: rgba(255, 255, 255, .05); --sidebar-active: rgba(255, 255, 255, .09); --bar-bg: #1a1f27; --bar-fg: #ffffff; /* Soyalar qorong'u fonda quyuqroq bo'lishi kerak */ --sh-xs: 0 1px 2px rgba(0, 0, 0, .35); --sh-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3); --sh-md: 0 4px 8px -2px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .3); --sh-lg: 0 12px 16px -4px rgba(0, 0, 0, .55), 0 4px 6px -2px rgba(0, 0, 0, .3); color-scheme: dark; } @supports (color: color-mix(in srgb, red 50%, white)) { :root[data-theme="dark"] { /* Brend soyalari qorong'u fon bilan aralashtiriladi, matn esa ochroq */ --brand-50: color-mix(in srgb, var(--brand) 14%, #12161c); --brand-100: color-mix(in srgb, var(--brand) 22%, #12161c); --brand-200: color-mix(in srgb, var(--brand) 34%, #12161c); --brand-700: color-mix(in srgb, var(--brand) 72%, white); /* Audit 2026-09-23: yuqoridagi (214-qator) oq-shaffoflik qiymatlarini bekor qilib, sidebar faol/hover holatini brendga moslaydi (bu yerdagi formula qorong'u/yorug'dan mustaqil, chunki shaffof qatlam). */ --sidebar-hover: color-mix(in srgb, var(--brand) 10%, transparent); --sidebar-active: color-mix(in srgb, var(--brand) 24%, transparent); } } /* Select strelkasi qorong'u fonda ko'rinadigan bo'lsin */ :root[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238892a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* Buyurtma holatlari — qattiq yozilgan uchtasi uchun qorong'u variant */ :root[data-theme="dark"] .status-PREPARING { background: #2b1608; color: #fb923c; } :root[data-theme="dark"] .status-DELIVERED { background: #1d1a33; color: #a78bfa; } :root[data-theme="dark"] .status-PAID { background: #0c2a1e; color: #4ade80; } /* ========================================================================== 2. RESET VA ASOSIY ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* 2026-09-25 (6-audit, "har bir bo'limni tanlaganimizda baribir sahifa biroz siljib ketmoqda"): sahifalar orasida balandlik farq qiladi — ba'zilarida vertikal skroll-panel chiqadi (tor kontent balandligi ekrandan oshadi), ba'zilarida yo'q. Skroll-panel o'zi bir necha piksel joy egallaydi, shu sabab markazlashtirilgan `max-width` konteynerlar (masalan `.about, .branches, .home`) sahifadan sahifaga bir necha piksel chapga/o'ngga siljib ko'rinardi. `scrollbar-gutter: stable` — skroll-panel HAR DOIM (kontent balandligidan qat'iy nazar) shu joyni band qilib turishini ta'minlaydi, shunda siljish yo'qoladi. Eski Safari'da qo'llab-quvvatlanmasa ham xavfsiz — oddiygina e'tiborga olinmaydi, hech qanday regressiyaga sabab bo'lmaydi. */ html { scrollbar-gutter: stable; } body { margin: 0; background: var(--bg-app); color: var(--text); font-family: var(--brand-font), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--fs-base); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; color: var(--text); } p { margin: 0 0 var(--sp-3); } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: var(--bg-subtle); padding: 1px 5px; border-radius: var(--r-sm); } hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; } /* Fokus halqasi — klaviatura bilan yurganda ko'rinadi */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } ::selection { background: var(--brand-200); } /* Faqat ekranni o'quvchi dasturlar uchun */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 3. TIPOGRAFIKA YORDAMCHILARI ========================================================================== */ .text-muted { color: var(--text-muted); } .text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } .num { font-variant-numeric: tabular-nums; } .text-pos { color: var(--success-fg); } .text-neg { color: var(--danger-fg); } .lead { color: var(--text-muted); font-size: var(--fs-base); margin: var(--sp-1) 0 0; } /* ========================================================================== 4. IKONKALAR ========================================================================== */ .icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1em; height: 1em; line-height: 1; } /* `display: inline-flex` brauzerning `[hidden]{display:none}` qoidasini bekor qiladi — shuning uchun alohida yoziladi (audit 2026-09-20, O4). Aks holda login sahifasidagi "parolni ko'rsatish" tugmasida ikkala ko'z ikonkasi bir vaqtda ko'rinib turardi. */ .icon[hidden] { display: none; } .icon svg { width: 100%; height: 100%; display: block; } /* 2026-09-24 (to'liq audit, 2-band — foydalanuvchi: "professional dizayner nazari bilan audit qil"): `.icon-sm` shu auditda qo'shildi — ilgari faqat md/lg/xl bor edi, "kichik" ikonkalar esa (topbar, qator ikonkalari) har biri o'zicha (ba'zisi atrofdagi shriftdan meros, ba'zisi qattiq kodlangan 15px) turlicha o'lchamda chiqardi (bitta sahifada 8 xil piksel o'lchami jonli o'lchovda topilgan). */ .icon-sm { font-size: 16px; } .icon-md { font-size: 18px; } .icon-lg { font-size: 22px; } .icon-xl { font-size: 28px; } /* Ikonka uchun yumshoq fonli kvadrat (statistika kartalarida) */ .icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-700); flex-shrink: 0; } .icon-tile.is-success { background: var(--success-bg); color: var(--success-fg); } .icon-tile.is-warning { background: var(--warning-bg); color: var(--warning-fg); } .icon-tile.is-danger { background: var(--danger-bg); color: var(--danger-fg); } .icon-tile.is-info { background: var(--info-bg); color: var(--info-fg); } .icon-tile.is-muted { background: var(--bg-subtle); color: var(--text-muted); } /* "Yopish/bekor qilish" (X) ikonkasi — 2026-09-27, foydalanuvchi so'rovi: loyihadagi BARCHA yopish/bekor qilish X ikonkalari endi doim QIZIL — X "bekor qilish"ni anglatadi, shu ma'no rangda ham aks etsin. `.icon` klassi butun saytda ko'p turli maqsadda ishlatilgani uchun (o'chirish, qo'ng'iroq, tema va h.k.) ranglash TO'G'RIDAN-TO'G'RI `.icon`ga emas, balki loyihada "yopish" ma'nosini bildiruvchi aniq belgilovchilarga (data-close/data-att-cancel/data-cart-close/data-topnav-close va .search-clear/.lightbox-close) qaratilgan — shu orqali boshqa ikonkalar (masalan "o'chirish" chelagi) qizil bo'lib qolmaydi. `svg` to'g'ridan-to'g'ri nishonlanadi, chunki ba'zi joylarda (masalan `.att-modal-close`) ikonka `.icon` o'ragichisiz to'g'ridan-to'g'ri tugma ichida keladi. */ [data-close] svg, [data-att-cancel] svg, [data-cart-close] svg, [data-topnav-close] svg, .search-clear svg, .lightbox-close svg { color: var(--danger-fg); } /* ========================================================================== 5. TUGMALAR ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 40px; padding: 0 var(--sp-4); border: 1px solid transparent; border-radius: var(--r-md); background: var(--brand); color: var(--brand-on, #fff); font: inherit; font-size: var(--fs-base); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); -webkit-tap-highlight-color: transparent; } .btn:hover { background: var(--brand-700); } .btn:active { transform: translateY(1px); } /* O'chirilgan tugma. Ilgari bu yerda `opacity: .5` turardi — qorong'u rejimda brend rangi fon bilan aralashib ketib, yozuv deyarli o'qilmas holga kelardi. Shuning uchun shaffoflik o'rniga neytral fon va so'ngan matn rangi ishlatiladi: u ikkala rejimda ham bir xil ko'rinadi va "hozir bosib bo'lmaydi" degan ma'noni aniq beradi. */ .btn:disabled { background: var(--bg-subtle); border-color: var(--border); color: var(--text-muted); box-shadow: none; cursor: not-allowed; pointer-events: none; } .btn-secondary { background: var(--bg-surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--sh-xs); } .btn-secondary:hover { background: var(--bg-subtle); border-color: var(--n-400); } .btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; box-shadow: none; } .btn-ghost:hover { background: var(--bg-subtle); color: var(--text); } .btn-danger { background: var(--bg-surface); color: var(--danger-fg); border-color: var(--danger-bd); box-shadow: var(--sh-xs); } .btn-danger:hover { background: var(--danger-bg); } .btn-success { background: var(--bg-surface); color: var(--success-fg); border-color: var(--success-bd); box-shadow: var(--sh-xs); } .btn-success:hover { background: var(--success-bg); } /* O'lchamlar */ .btn-sm { height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-sm); } .btn-lg { height: 48px; padding: 0 var(--sp-5); font-size: var(--fs-md); } .btn-xl { height: 58px; padding: 0 var(--sp-6); font-size: var(--fs-lg); font-weight: 600; } .btn-block { width: 100%; } .btn-icon { width: 36px; height: 36px; padding: 0; } .btn-icon.btn-sm { width: 30px; height: 30px; } /* ========================================================================== 6. FORMALAR ========================================================================== */ .field { margin-bottom: var(--sp-4); } .field:last-child { margin-bottom: 0; } label, .field-label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 500; color: var(--text); } .field-label .optional { font-weight: 400; color: var(--text-faint); } .input, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="url"], input[type="search"], select, textarea { width: 100%; height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text); font: inherit; font-size: var(--fs-base); transition: border-color var(--t-fast), box-shadow var(--t-fast); } textarea { height: auto; min-height: 84px; padding: var(--sp-3); line-height: 1.55; resize: vertical; } .input:hover, input:hover, select:hover, textarea:hover { border-color: var(--n-400); } /* Sichqoncha bilan bosilganda — yumshoq halqa. */ .input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); } /* Klaviatura bilan kelganda — aniq ko'rinadigan kontur (audit 2026-09-20, O9). Ilgari faqat yuqoridagi qoida bor edi: `outline: none` global `:focus-visible` qoidasidan kuchliroq (0,1,1 va 0,1,0), o'rniga qo'yilgan `--brand-100` esa oq kartada deyarli ko'rinmaydigan ochiq tus — ya'ni klaviatura bilan ishlaydigan foydalanuvchi qaysi maydonda turganini umuman bilmasdi. */ .input:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: 0 0 0 3px var(--brand-100); } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:disabled, select:disabled, textarea:disabled { background: var(--bg-subtle); color: var(--text-muted); cursor: not-allowed; } /* Select — o'z strelkasi bilan */ select { appearance: none; -webkit-appearance: none; padding-right: var(--sp-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737d8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-3) center; background-size: 16px 16px; } select[multiple] { height: auto; padding: var(--sp-2); background-image: none; } .input-lg, .input-lg input, .input-lg select { height: 48px; font-size: var(--fs-md); } /* Checkbox / radio */ input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; } .check-row { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 0; } .check-row label { margin: 0; cursor: pointer; font-weight: 400; } /* Fayl tanlash */ input[type="file"] { width: 100%; height: auto; padding: var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--bg-subtle); font-size: var(--fs-sm); cursor: pointer; } input[type="file"]:hover { border-color: var(--brand); background: var(--brand-50); } .file-preview { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); margin-bottom: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-subtle); } .file-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); display: block; } /* Yordam matni va xatolar */ .help-text { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; } .errorlist { list-style: none; margin: var(--sp-2) 0 0; padding: 0; color: var(--danger-fg); font-size: var(--fs-sm); } .errorlist:empty { display: none; } .errorlist li { margin-top: 2px; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger-bd); } /* Forma tarmog'i */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); } .form-grid .field { margin-bottom: 0; } .form-grid .span-2 { grid-column: 1 / -1; } .form-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); } fieldset { margin: var(--sp-5) 0 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-app); } legend { padding: 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); } /* ========================================================================== 7. KARTA ========================================================================== */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); /* Audit 2026-09-23: pastroq soya — .card passiv/ma'lumotnoma sirt (sozlama, forma, statistika), jonli/harakatga chaqiruvchi .order-card'dan pastroq vizual og'irlikda bo'lishi kerak. */ box-shadow: var(--sh-xs); } .card > .card-body { padding: var(--sp-6); } .card.is-narrow { max-width: 560px; } .card.is-form { max-width: 740px; } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border); } .card-header h2, .card-header h3 { font-size: var(--fs-md); font-weight: 600; } .card-header .sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); } /* ========================================================================== 8. SAHIFA VA BO'LIM SARLAVHALARI ========================================================================== */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); } .page-head h2 { font-size: var(--fs-xl); } .page-head .page-head-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-7) 0 var(--sp-4); } .section-head:first-child { margin-top: 0; } .section-head h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); } .section-head .count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full); background: var(--bg-subtle); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; } /* Audit 2026-09-21, M9: bu qoida ilgari `pos/dashboard.html`, `cashier/dashboard.html` va `cashier/shift_result.html`ning har birida ALOHIDA-ALOHIDA, so'zma-so'z bir xil qilib takrorlangan edi — endi bitta umumiy joyda. */ /* Audit 2026-09-23: kassa/kuryer kabi bir nechta bo'limni ketma-ket ko'rsatadigan sahifalarda ilgari bo'limlar orasida faqat matn sarlavhasi bor edi — telefonda bu "uzluksiz quti oqimi"dek ko'rinardi. Endi har bir yangi bo'lim tepasida aniq chiziq + ko'proq bo'shliq bilan ajratiladi. */ .section-title { font-size: var(--fs-lg); margin: var(--sp-8) 0 var(--sp-3); padding-top: var(--sp-6); border-top: 1px solid var(--border); } .section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .back-link { display: inline-flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); transition: color var(--t-fast); } .back-link:hover { color: var(--brand); } /* ========================================================================== 9. JADVAL ========================================================================== */ .table-wrap { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; } .table-scroll { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .table th { position: sticky; top: 0; z-index: 1; padding: var(--sp-3) var(--sp-4); background: var(--bg-subtle); border-bottom: 1px solid var(--border); text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr { transition: background var(--t-fast); } .table tbody tr:hover { background: var(--bg-app); } .table .align-right { text-align: right; } .table .num { font-variant-numeric: tabular-nums; } .table .primary-cell { font-weight: 500; } .table-actions { display: flex; align-items: center; gap: var(--sp-1); justify-content: flex-end; } .table-actions form { margin: 0; } /* Jadval ichidagi kichik forma: "To'lov turi" tanlovi + tugma bir qatorda (audit 2026-09-20, O7). Tor ekranda o'ralib tushadi. */ .inline-form { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; } /* ========================================================================== 10. BADGE / HOLAT ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px var(--sp-2); border-radius: var(--r-full); background: var(--bg-subtle); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500; line-height: 1.5; white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: .7; } .badge-success { background: var(--success-bg); color: var(--success-fg); } .badge-warning { background: var(--warning-bg); color: var(--warning-fg); } .badge-danger { background: var(--danger-bg); color: var(--danger-fg); } .badge-brand { background: var(--brand-50); color: var(--brand-700); } /* Buyurtma holatlari — butun tizimda bir xil rang-kod */ .status-NEW { background: var(--danger-bg); color: var(--danger-fg); } .status-ACCEPTED { background: var(--warning-bg); color: var(--warning-fg); } .status-PREPARING { background: #fff4e6; color: #c2410c; } .status-READY { background: var(--success-bg); color: var(--success-fg); } .status-ON_THE_WAY { background: var(--info-bg); color: var(--info-fg); } .status-DELIVERED { background: #f4f3ff; color: #5925dc; } .status-PAID { background: #f0fdf4; color: #15803d; } .status-CANCELLED { background: var(--bg-subtle); color: var(--text-muted); } /* Chapdagi rangli chiziq uchun (buyurtma kartasi) */ /* Holat chizig'i ranglari — `.status-*` nishonlari singari qorong'u rejimda ham qayta e'lon qilinadi (audit 2026-09-20, Ki7). Ilgari faqat nishonlar tuzatilgan, yonidagi 4px chiziq esa yorug' rejim ranglarida qolgan edi va qorong'u fonda deyarli qora ko'rinardi. */ .bar-NEW { --status-bar: #d92d20; } .bar-ACCEPTED { --status-bar: #dc6803; } .bar-PREPARING { --status-bar: #ea580c; } .bar-READY { --status-bar: #12b76a; } .bar-ON_THE_WAY { --status-bar: #2e90fa; } .bar-DELIVERED { --status-bar: #7a5af8; } .bar-PAID { --status-bar: #15803d; } .bar-CANCELLED { --status-bar: var(--n-300); } /* Qorong'u rejim uchun yorqinroq variantlar (audit Ki7) — 4px chiziq qora fonda ham ajralib tursin. */ :root[data-theme="dark"] .bar-NEW { --status-bar: #f97066; } :root[data-theme="dark"] .bar-ACCEPTED { --status-bar: #fdb022; } :root[data-theme="dark"] .bar-PREPARING { --status-bar: #fd853a; } :root[data-theme="dark"] .bar-READY { --status-bar: #32d583; } :root[data-theme="dark"] .bar-ON_THE_WAY { --status-bar: #53b1fd; } :root[data-theme="dark"] .bar-DELIVERED { --status-bar: #a48afb; } :root[data-theme="dark"] .bar-PAID { --status-bar: #3ccb7f; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar-NEW { --status-bar: #f97066; } :root:not([data-theme="light"]) .bar-ACCEPTED { --status-bar: #fdb022; } :root:not([data-theme="light"]) .bar-PREPARING { --status-bar: #fd853a; } :root:not([data-theme="light"]) .bar-READY { --status-bar: #32d583; } :root:not([data-theme="light"]) .bar-ON_THE_WAY { --status-bar: #53b1fd; } :root:not([data-theme="light"]) .bar-DELIVERED { --status-bar: #a48afb; } :root:not([data-theme="light"]) .bar-PAID { --status-bar: #3ccb7f; } } /* ========================================================================== 11. STATISTIKA KARTALARI ========================================================================== */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); } .stat { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); /* Audit 2026-09-23: statistika — passiv ma'lumotnoma, .order-card kabi jonli/harakatga chaqiruvchi karta emas (16-bo'limga q.). */ box-shadow: var(--sh-xs); padding: var(--sp-5); /* Audit 2026-09-24, O9: grid ichida tor ustun kartadan kengaymasin va qiymat shrifti kartaning O'Z kengligiga qarab moslashsin (pastda). */ min-width: 0; container-type: inline-size; } .stat-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); } .stat-label { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.35; } .stat-value { font-size: var(--fs-3xl); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; /* Audit 2026-09-24, O9: pul summasi bo'linmas bo'shliqlar bilan yoziladi ("1 152 000"), ya'ni o'ralmaydi — 375px telefonda "so'm" karta chetidan chiqib ketar, katta summada esa butun sahifa yon tomonga suriladigan bo'lib qolardi. Endi: shrift karta kengligiga moslashadi (faqat pul summalarida — `.is-money`, pastga qarang), "so'm" sig'masa keyingi qatorga tushadi. Raqam guruh o'rtasidan ("9 / 76") faqat juda uzun summada, eng oxirgi chora sifatida bo'linadi. */ display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-1); /* `anywhere` (break-word emas): flex ichidagi matnning min-content kengligini ham kamaytiradi — aks holda juda uzun summa karta chetidan chiqib ketardi. Shrift to'g'ri tanlangani uchun amalda faqat trillionli summada ishga tushadi. */ overflow-wrap: anywhere; } /* Pul summasi: shrift kartaning o'z kengligiga moslashadi (12cqi — "400 052 162,66" kabi 14 belgili summa ham bir qatorga sig'adi). Oddiy sonlar ("0", "12") esa ataylab katta qoladi — ularni kichraytirishga sabab yo'q. */ .stat-value.is-money { font-size: clamp(14px, 12cqi, var(--fs-3xl)); } .stat-value.is-negative { color: var(--danger-fg); } /* Audit 2026-09-24, J3: statistika qiymati ostidagi izoh (masalan "Qaytarishlar: −45 000 so'm"). */ .stat-note { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-muted); } .stat-value.is-positive { color: var(--success-fg); } .stat-unit { font-size: var(--fs-base); font-weight: 500; color: var(--text-muted); } /* ========================================================================== 12. BO'SH HOLAT ========================================================================== */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-9) var(--sp-5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); } .empty-state > .icon { font-size: 40px; color: var(--n-300); margin-bottom: var(--sp-3); } /* Ichkaridagi tugma ikonkasi katta bo'lib ketmasligi kerak — `>` bilan faqat bevosita bolaga tegishli qilib qo'yildi, lekin eski `.empty-state .icon` yozuvi tugma ichidagi ikonkani ham 40px qilib yuborardi. */ .empty-state .btn .icon { font-size: 1em; color: inherit; margin-bottom: 0; } .empty-state h4 { font-size: var(--fs-md); font-weight: 500; margin-bottom: var(--sp-1); } .empty-state p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 380px; margin: 0; } .empty-state .btn { margin-top: var(--sp-4); } .empty-state.is-compact { padding: var(--sp-6) var(--sp-4); } /* display: flex brauzerning [hidden] qoidasini bekor qiladi — shuning uchun (masalan qidiruv natijasi bo'sh holati) alohida yozilishi shart. */ .empty-state[hidden] { display: none; } /* Mijoz menyusidagi ikkita "bo'sh holat" (savat, qidiruv natijasi) — 11/10 vizual sayqal (2026-09-26, 2-bosqich): oddiy kulrang 24px ikonka o'rniga, brendga mos (`--brand-50`/`--brand-700`, mavjud ranglar tizimidan) kattaroq, bir necha qatlamli SVG tasvir (`icons/illustration-empty-*.svg`). Boshqa (masalan boshqaruv panelidagi) `.empty-state`larga TA'SIR QILMAYDI — ataylab alohida, yangi klass, umumiy `.empty-state > .icon` qoidasiga tegmaydi. */ .empty-illustration { display: inline-flex; width: 88px; height: 88px; margin-bottom: var(--sp-3); } .empty-illustration svg { width: 100%; height: 100%; display: block; } .empty-illustration .ill-accent { fill: var(--brand-50); } .empty-illustration .ill-line { stroke: var(--brand-700); fill: none; } .empty-illustration .ill-dot { fill: var(--brand-700); } .cart-empty .empty-illustration { width: 72px; height: 72px; } /* ========================================================================== 13. BILDIRISHNOMALAR (alert / messages) ========================================================================== */ .messages { list-style: none; margin: 0 0 var(--sp-5); padding: 0; } .messages:empty { display: none; } .alert, .messages li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); border: 1px solid var(--border); border-left: 3px solid var(--n-400); border-radius: var(--r-md); background: var(--bg-surface); font-size: var(--fs-base); color: var(--text); } .messages li:last-child { margin-bottom: 0; } .alert-success, .messages li.success { background: var(--success-bg); border-color: var(--success-bd); border-left-color: var(--success-fg); color: var(--success-fg); } .alert-error, .messages li.error { background: var(--danger-bg); border-color: var(--danger-bd); border-left-color: var(--danger-fg); color: var(--danger-fg); } .alert-warning, .messages li.warning { background: var(--warning-bg); border-color: var(--warning-bd); border-left-color: var(--warning-fg); color: var(--warning-fg); } .alert-info, .messages li.info, .messages li.debug { background: var(--info-bg); border-color: var(--info-bd); border-left-color: var(--info-fg); color: var(--info-fg); } .alert .icon { margin-top: 2px; font-size: 18px; } .alert-body { flex: 1; min-width: 0; } .alert-body strong { display: block; margin-bottom: 2px; } /* ========================================================================== 14. BOSHQARUV PANELI KARKASI (sidebar + main) ========================================================================== */ .app { display: flex; min-height: 100vh; } .sidebar { width: 248px; flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-fg); display: flex; flex-direction: column; padding: var(--sp-5) 0 var(--sp-4); overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5) var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--sidebar-divider); } .sidebar-brand img, .sidebar-brand .brand-fallback { width: 36px; height: 36px; border-radius: var(--r-md); object-fit: cover; flex-shrink: 0; } .sidebar-brand .brand-fallback { display: flex; align-items: center; justify-content: center; background: var(--brand); color: var(--brand-on, #fff); font-weight: 700; font-size: var(--fs-lg); text-transform: uppercase; } .brand-text { min-width: 0; } .brand-name { font-size: var(--fs-base); font-weight: 600; color: var(--sidebar-fg-strong); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-sub { font-size: var(--fs-xs); color: var(--sidebar-dim); margin-top: 1px; } .nav-group { margin-bottom: var(--sp-5); } .nav-group:last-child { margin-bottom: 0; } .nav-group-title { padding: 0 var(--sp-5); margin-bottom: var(--sp-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sidebar-dim); } .nav-link { position: relative; display: flex; align-items: center; gap: var(--sp-3); height: 40px; padding: 0 var(--sp-5); color: var(--sidebar-fg); font-size: var(--fs-base); transition: background var(--t-fast), color var(--t-fast); } .nav-link .icon { font-size: 18px; } .nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-strong); } .nav-link.active { background: var(--sidebar-active); color: var(--sidebar-fg-strong); font-weight: 500; } .nav-link.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 0 3px 3px 0; background: var(--brand); } .nav-link.disabled { color: var(--sidebar-disabled); cursor: default; } .nav-link.disabled:hover { background: none; color: var(--sidebar-disabled); } .soon-badge { margin-left: auto; padding: 1px 6px; border-radius: var(--r-full); background: var(--sidebar-hover); color: var(--sidebar-dim); font-size: 10px; font-weight: 500; } /* --- Asosiy ustun --- */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 64px; padding: 0 var(--sp-7); background: var(--bg-surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-nav); } .topbar h1 { font-size: var(--fs-lg); /* Audit 2026-09-21, M5: tor ekranda `.topbar-right` (til, mavzu, foydalanuvchi) joy talab qilib turgani uchun sarlavhaga deyarli joy qolmasdi — u har bir so'zdan keyin qatorga o'tib, oxir-oqibat 1-2 harfli qatorlarga bo'linib ketardi. Endi sig'maganda chiroyli "..." bilan bir qatorda kesiladi. */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; } .topbar-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; /* h1 ellipsis qila olishi uchun ushbu konteyner ham qisqarishi kerak — aks holda sarlavha "yashirin" kengligi bilan cho'zilib, `.topbar-right`ni sahifadan chiqarib yuborardi. */ flex: 1 1 auto; } .topbar-right { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } .nav-toggle { display: none; } .user-chip { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-md); } .user-chip .user-meta { line-height: 1.25; } .user-chip .user-name { font-size: var(--fs-sm); font-weight: 500; } .user-chip .user-role { font-size: var(--fs-xs); color: var(--text-muted); } .avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-50); color: var(--brand-700); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; flex-shrink: 0; } .avatar.is-lg { width: 48px; height: 48px; font-size: var(--fs-lg); } .content { flex: 1; padding: var(--sp-7); max-width: 1440px; width: 100%; } .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(22, 26, 32, .5); z-index: var(--z-overlay); } /* ========================================================================== 15. ISHCHI PANEL KARKASI (ofitsiant / kuryer / oshpaz) ========================================================================== */ .worker-shell { max-width: 1100px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-9); } /* Oshxona ekrani odatda katta monoblokda turadi — kengroq maydon beriladi, shunda bir vaqtning o'zida ko'proq buyurtma ko'rinadi. */ .worker-shell.is-wide { max-width: 1680px; } .worker-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .worker-header .brand-row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .worker-header img.brand-logo, .worker-header .brand-fallback { width: 38px; height: 38px; border-radius: var(--r-md); object-fit: cover; flex-shrink: 0; } .worker-header .brand-fallback { display: flex; align-items: center; justify-content: center; background: var(--brand); color: var(--brand-on, #fff); font-weight: 700; text-transform: uppercase; } .worker-header h1 { font-size: var(--fs-xl); } /* 2026-09-24 (8-audit, to'rtinchi tur — foydalanuvchi: "restoran nomi ta'sir qiladigan boshqa sahifalarni ham ko'zdan kechir"): bu yerda ham (`.worker-header .sub`) — `{{ brand_name }} · {{ staff nomi }}` — xuddi shu flex-element muammosi bor edi: `.brand-row`ning o'zi `min-width:0` olgan, LEKIN h1+sub'ni o'rab turgan ICHKI `

` (nomsiz, brand-row'ning bevosita farzandi) buni OLMAGAN edi — agar brend nomi YOKI xodim FAMILIYASI bo'sh joysiz uzun bo'lsa (o'zbek ismlari ko'pincha shunday), bu qator ham xuddi footer'dagi kabi "toshib" ketishi mumkin edi. Oshxona paneli (`.kitchen-header`)da brend nomi umuman ko'rsatilmagani uchun (faqat belgi/rasm sifatida) u yerga tegilmadi — faqat shu yerda, "ishchi" (ofitsiant/kassir) panelida haqiqiy xavf bor edi. */ .worker-header .brand-row > div { min-width: 0; } .worker-header .sub { font-size: var(--fs-xs); color: var(--text-muted); overflow-wrap: break-word; word-break: break-word; } /* Yuqoridagi segment navigatsiya (desktop) */ .wnav { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1); margin-bottom: var(--sp-5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); } /* Chiqish tugmasi endi POST formasi ichidagi