/* ============================================================ Compas — design tokens + base styles ============================================================ */ :root { --bg: #f5f6fa; /* Whole-app backdrop — a soft diagonal wash (white near the sidebar, leaning toward a faint brand-tinted blue-violet on the right), not a flat fill. Painted once on (background-attachment: fixed) so it reads as ONE continuous surface behind sidebar+topbar+page, the same "everything is one canvas" look as the reference. */ --bg-grad-start: #ffffff; --bg-grad-end: #eaeeff; --surface: #ffffff; --surface-2: #faf9fd; --border: #e6e4f0; --border-strong: #d6d3e6; /* Hairline for chrome that should nearly disappear into the canvas (sidebar/topbar) — much subtler than --border, which stays reserved for content dividers (cards, tables, sections) that need real definition. */ --border-faint: #eae8f2; --text: #17152b; --text-2: #524d6b; --text-3: #6f6a89; --muted: #9490ac; /* Compas brand: indigo-violet primary */ --primary: #5b3df0; --primary-700: #4728cc; --primary-600: #4f2fdb; --primary-50: #f1eefe; --primary-100: #e4defd; /* Gamification accent: warm coral/amber, reserved for badges/coins/mood */ --accent: #ff7a45; --accent-2: #ffb020; --accent-50: #fff4ec; --accent-100: #ffe3cf; --green: #1f7a52; --green-50: #eafbf3; --green-100: #cdf3e2; --amber: #a2650f; --amber-50: #fffbeb; --amber-100: #fef3c7; --rose: #ad2f52; --rose-50: #fef1f5; --rose-100: #fbdbe6; --blue: #33629b; --blue-50: #eef5ff; --blue-100: #dbe9ff; --slate: #524d6b; --slate-50: #f4f3f9; --slate-100: #e9e7f3; --gold: #c8930a; --silver: #7c8291; --bronze: #b06a3a; /* 2026-08-10 (davomi #30) — macOS/iOS uslubidagi soyalar: WEB-standart "qattiq, yaqin, ko'p qatlamli" soyalar o'rniga, macOS'ning o'zi ishlatadigan "yumshoq, keng tarqalgan, juda shaffof" soyasi — kichik offset, KATTA blur radiusi, juda past opacity (elementning "chindan ko'tarilgan" emas, "engil suzayotgan" tuyg'usini beradi). */ --shadow-sm: 0 1px 3px rgba(23,21,43,0.04); --shadow: 0 4px 14px rgba(23,21,43,0.07); --shadow-lg: 0 22px 50px rgba(30,20,70,0.16), 0 4px 14px rgba(30,20,70,0.06); /* Text colors for the handful of places that paint their own solid text directly onto a -50/-100 tint background outside the .chip system (coin balance, probation ribbon, accent chip/count) — kept as tokens (not hardcoded hex) purely so dark mode can flip them to a light shade instead of a dark one. */ --accent-text: #b8460f; --coin-text: #94420a; --probation-text: #7a4a06; /* 2026-08-10 (davomi #30) — macOS/iOS'ning "davomiy burchak" (continuous corner) hissi uchun butun radius-shkalasi kattalashtirildi (12→14, 8→10, 18→22) — bu tokenlar orqali BARCHA komponentlarga (cardlar, tugmalar, inputlar, modallar, chiplar...) bir vaqtning o'zida qo'llaniladi, chunki ular deyarli barchasi shu o'zgaruvchilarni ishlatadi (loyihaning boshqa hech bir joyida qattiq px yozilmagan). */ --radius: 14px; --radius-sm: 10px; --radius-lg: 22px; --radius-pill: 999px; /* Motion system — one consistent set of durations/easings for the whole app, replacing scattered per-component values. Micro-interactions (hover/press) use --dur-fast + --ease-standard; content reveals (tabs, modals, staggered lists) use --dur-base/--dur-slow + --ease-out; reward moments (badges, coins, reactions, mood picks) use --ease-bounce, kept for moments that deserve delight, not everywhere. */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; --ease-standard: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); } /* ============================================================ Dark mode — same token set, deep indigo-black canvas (keeps the brand's violet undertone instead of going neutral-gray), card surfaces one step lighter than the canvas, -50/-100 tints become translucent dark overlays instead of pale washes, and every color that gets read as TEXT (primary-700, green, rose, amber, blue...) is brightened so it stays legible on the dark canvas. Two ways this activates, both needed (see app.js wlApplyTheme / i18n.js wlSetTheme): 1. System preference, when the user hasn't picked explicitly — guarded by :not([data-theme="light"]) so an explicit light choice always overrides the OS setting. 2. Explicit in-app toggle — `:root[data-theme="dark"]`, which wins regardless of OS preference (must come after the media-query block so it takes precedence in the cascade). ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f0e1a; --bg-grad-start: #14121f; --bg-grad-end: #1b1830; --surface: #1a1830; --surface-2: #211f3a; --border: #322f4d; --border-strong: #423e63; --border-faint: #1f1d34; --text: #f2f1f8; --text-2: #c3c0d9; --text-3: #9d99b8; --muted: #7d799a; --primary: #8567ff; --primary-700: #b7a4ff; --primary-600: #9a7fff; --primary-50: rgba(133,103,255,0.16); --primary-100: rgba(133,103,255,0.28); --accent: #ff9466; --accent-2: #ffc24d; --accent-50: rgba(255,148,102,0.14); --accent-100: rgba(255,148,102,0.26); --green: #4fd8a0; --green-50: rgba(79,216,160,0.14); --green-100: rgba(79,216,160,0.26); --amber: #f0b429; --amber-50: rgba(240,180,41,0.14); --amber-100: rgba(240,180,41,0.26); --rose: #ff7fa0; --rose-50: rgba(255,127,160,0.14); --rose-100: rgba(255,127,160,0.26); --blue: #6fa8dc; --blue-50: rgba(111,168,220,0.14); --blue-100: rgba(111,168,220,0.26); --slate: #c3c0d9; --slate-50: #211f3a; --slate-100: #2b2847; --gold: #e0b23a; --silver: #a7acb9; --bronze: #c98a5e; --shadow-sm: 0 1px 3px rgba(0,0,0,0.28); --shadow: 0 4px 14px rgba(0,0,0,0.32); --shadow-lg: 0 22px 50px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.3); --accent-text: #ffc9a8; --coin-text: #ffcf8f; --probation-text: #ffd699; } } :root[data-theme="dark"] { --bg: #0f0e1a; --bg-grad-start: #14121f; --bg-grad-end: #1b1830; --surface: #1a1830; --surface-2: #211f3a; --border: #322f4d; --border-strong: #423e63; --border-faint: #1f1d34; --text: #f2f1f8; --text-2: #c3c0d9; --text-3: #9d99b8; --muted: #7d799a; --primary: #8567ff; --primary-700: #b7a4ff; --primary-600: #9a7fff; --primary-50: rgba(133,103,255,0.16); --primary-100: rgba(133,103,255,0.28); --accent: #ff9466; --accent-2: #ffc24d; --accent-50: rgba(255,148,102,0.14); --accent-100: rgba(255,148,102,0.26); --green: #4fd8a0; --green-50: rgba(79,216,160,0.14); --green-100: rgba(79,216,160,0.26); --amber: #f0b429; --amber-50: rgba(240,180,41,0.14); --amber-100: rgba(240,180,41,0.26); --rose: #ff7fa0; --rose-50: rgba(255,127,160,0.14); --rose-100: rgba(255,127,160,0.26); --blue: #6fa8dc; --blue-50: rgba(111,168,220,0.14); --blue-100: rgba(111,168,220,0.26); --slate: #c3c0d9; --slate-50: #211f3a; --slate-100: #2b2847; --gold: #e0b23a; --silver: #a7acb9; --bronze: #c98a5e; --shadow-sm: 0 1px 3px rgba(0,0,0,0.28); --shadow: 0 4px 14px rgba(0,0,0,0.32); --shadow-lg: 0 22px 50px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.3); --accent-text: #ffc9a8; --coin-text: #ffcf8f; --probation-text: #ffd699; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Staggered entrance: wlStaggerIn() (app.js) sets --i per matched child; each one cascades in with an increasing delay instead of popping at once. */ @keyframes wl-stagger-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .wl-stagger-item { animation: wl-stagger-in var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); } /* Reward-moment pop — a small spring scale, used sparingly for reactions, badge sends, coin gains. Not a hover state; triggered via .wl-pop class toggled briefly by JS. */ @keyframes wl-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } } .wl-pop { animation: wl-pop 340ms var(--ease-bounce); } * { box-sizing: border-box; } /* Thin, low-contrast scrollbars app-wide (sidebar, modal bodies, tables, any overflow area) — the chunky default OS scrollbar reads as visual noise against the rest of the polish here. */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; } /* A plain solid bar looked flat, so the thumb is shaped like a slim dumbbell instead: full-thickness caps for the top/bottom quarters, pinched down to a 2px hairline through the middle half — three layered backgrounds (top block / center line / bottom block) rather than a single fill. --sb makes the hover color swap apply to all three layers at once. Firefox has no equivalent for a shaped thumb, so it falls back to the plain thin bar from scrollbar-color above. */ *::-webkit-scrollbar-thumb { --sb: var(--border-strong); background-repeat: no-repeat; background-position: top center, center, bottom center; background-size: 100% 25%, 2px 100%, 100% 25%; background-image: linear-gradient(var(--sb), var(--sb)), linear-gradient(var(--sb), var(--sb)), linear-gradient(var(--sb), var(--sb)); border-radius: 10px; } *::-webkit-scrollbar-thumb:hover { --sb: var(--muted); } html, body { margin: 0; padding: 0; color: var(--text); /* Fixed-attachment so the wash stays put as content scrolls — sidebar and topbar paint no background of their own (see .sidebar/.topbar below), so this one gradient reads as a single continuous surface across the whole app instead of three separately-tiled ones. */ background-color: var(--bg); background-image: linear-gradient(100deg, var(--bg-grad-start) 0%, var(--bg-grad-end) 100%); background-attachment: fixed; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.45; } button, input, textarea, select { font-family: inherit; } a { color: inherit; text-decoration: none; } h1,h2,h3,h4 { margin: 0; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } svg { display: block; } .ico-sm { width: 18px; height: 18px; flex-shrink: 0; } .ico-xs { width: 11px; height: 11px; flex-shrink: 0; vertical-align: -1px; } .tnum { font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } .text-2 { color: var(--text-2); } .text-3 { color: var(--text-3); } .label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; } /* ============================================================ Layout — shell ============================================================ */ .shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; transition: grid-template-columns var(--dur-slow) var(--ease-standard); } /* The right-hand column (topbar+page) is .shell's second direct child, an unnamed
wrapping
+
identically on every page — matched here by element type so no HTML edit was needed across all 46 pages. Giving it its OWN 100vh scroll container (exactly like .sidebar already has) makes .topbar's `position: sticky; top: 0` resolve against a container that reliably starts at the viewport top, instead of the page-wide window scroll — the previous window-level-scroll setup let the topbar drift out of view under some content-height combinations. */ .shell > div { height: 100vh; overflow-y: auto; } .sidebar { /* No background/border of its own at all — fully transparent, so the single fixed gradient painted on shows straight through and the sidebar reads as part of the same continuous surface as the page, with literally no seam (not even a faint one). */ background: transparent; padding: 18px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar .brand { display: flex; align-items: center; gap: 11px; padding: 0 18px 16px; border-bottom: 1px solid var(--border-faint); margin-bottom: 10px; /* Root-cause (2026-08-10, davomi #26): `.sidebar` o'zi skroll-konteyner (overflow-y:auto), va `.brand` uning ICHIDAGI oddiy, skrollga bo'ysunuvchi element edi — nav-ro'yxati uzun bo'lib pastga skroll qilinganda, logotip+nom headerchasi HAM birga yuqoriga chiqib ketardi. `position:sticky; top:0` shu ICHKI skroll-konteynerga nisbatan headerni tepada ushlab turadi (`.topbar`ning `.shell > div`ga nisbatan sticky bo'lishi bilan bir xil naqsh). `backdrop-filter` — pastdan skroll qilib o'tayotgan nav-item matni sticky header orqali "ko'rinib qolmasligi" uchun (sidebar ATAYLAB shaffof, shuning uchun oddiy fon rangi qo'yish gradient bilan "chok" hosil qilardi — buning o'rniga orqa fonni xiralashtirish, rang qo'shmasdan, matnni o'qilishi mumkin qiladi). */ position: sticky; top: 0; z-index: 2; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .brand-text { flex: 1; min-width: 0; } .sidebar-toggle { border:1px solid var(--border-faint); background: var(--surface); border-radius: 8px; width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer; color: var(--text-3); flex-shrink: 0; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .sidebar-toggle:hover { background: var(--primary-50); color: var(--primary); } /* A generic rotating chevron didn't say "sidebar" — swapped for a small panel-layout glyph (outer window + a filled left strip standing in for the sidebar itself). State reads through the fill switching off, not through rotation, so the icon itself no longer needs to spin. */ .sidebar-toggle svg { width: 16px; height: 16px; } .sidebar-toggle svg .wl-sidebar-fill { transition: fill var(--dur-base) var(--ease-standard); } /* Collapsed state: icon-only sidebar. Toggled via wlToggleSidebar() (app.js), persisted in localStorage so it survives navigation between these full page loads. Shared by Compass and Compass Owner. */ .shell.sidebar-collapsed { grid-template-columns: 76px 1fr; } /* Collapsed brand row used to keep the logo + toggle side-by-side (justify-content:center, gap:11px) — in the 76px collapsed width that left no room for either, so the logo got pushed left and visually clipped/jammed against the toggle button. Stacking them (logo above, toggle below) gives each the full 76px to itself instead. */ .shell.sidebar-collapsed .brand { flex-direction: column; gap: 10px; padding: 14px 0 16px; justify-content: center; } .shell.sidebar-collapsed .brand-text, .shell.sidebar-collapsed .nav-section-title, .shell.sidebar-collapsed .nav-item span, .shell.sidebar-collapsed .nav-count, .shell.sidebar-collapsed .sidebar-footer, .shell.sidebar-collapsed .owner-badge { display: none; } /* sidebar-footer-icons (2026-08-10, davomi #30) — "barcha bo'limlar"/ ko'rinish-almashtirgich tugmalari — ATAYLAB collapsed/dock rejimlarida ham yashirilMAYDI (pastroqda ko'ring): bular navigatsiya-boshqaruvi, sof bezak-matn emas, shu sabab har doim, qaysi rejimda bo'lishidan qat'iy nazar, foydalanuvchiga ochiq turishi kerak (aks holda, masalan, Dock rejimidan RO'YXAT rejimiga qaytarib bo'lmay qolardi). */ .shell.sidebar-collapsed .sidebar-footer-icons { flex-direction: column; } .shell.sidebar-collapsed .sidebar-toggle svg .wl-sidebar-fill { fill: none; } .shell.sidebar-collapsed .nav-section { padding-left: 0; padding-right: 0; } .shell.sidebar-collapsed .nav-item { justify-content: center; padding: 10px; margin: 0 8px; } /* ============================================================ Sidebar — "Dock" ko'rinishi (2026-08-10, davomi #26). Ikkinchi, mustaqil sidebar-USLUBI (`.sidebar-collapsed`dan farqli — bu KENGLIK-siqish emas, butunlay BOSHQA dizayn: macOS/Ubuntu dock'idagi kabi katta, dumaloq- burchakli, soyali "plitka" iconlar, vertikal qatorda, bo'lim-nomlari (MAIN/PEOPLE/LIFE) va matn-yorliqlar butunlay yashiringan). Sidebar pastidagi `#wl-sidebarview-btn` orqali (wlToggleSidebarView, app.js — 2026-08-10 davomi #30'da topbar'dan shu yerga ko'chirildi) ikkala ko'rinish orasida almashtiriladi, `wl_sidebar_view` sifatida saqlanadi. Mavjud `......` DOM tuzilmasi o'ZGARTIRILMAYDI — bu FAQAT CSS-transformatsiya: yorliq-matni (span) o'chirilmaydi, shunchaki ko'rinmas holatga o'tkaziladi va sichqon olib borilganda floating-tooltip sifatida qayta ishlatiladi (yangi DOM/ JS shart emas, uchala shell — Compass/Business/Owner — bir xil HTML naqshiga ega bo'lgani uchun BITTA CSS bloki barchasida ishlaydi). */ .shell.sidebar-dock { grid-template-columns: 108px 1fr; } .shell.sidebar-dock .sidebar { padding: 16px 14px; } .shell.sidebar-dock .brand { flex-direction: column; gap: 8px; padding: 16px 8px; margin: 0 0 18px; border-bottom: none; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); backdrop-filter: none; -webkit-backdrop-filter: none; } .shell.sidebar-dock .brand-text, .shell.sidebar-dock .sidebar-toggle, .shell.sidebar-dock .nav-section-title, .shell.sidebar-dock .sidebar-footer { display: none; } .shell.sidebar-dock .nav-section { padding: 0; } .shell.sidebar-dock .nav-item { position: relative; width: 56px; height: 56px; margin: 0 auto 12px; padding: 0; justify-content: center; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .shell.sidebar-dock .nav-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); background: var(--slate-50); } .shell.sidebar-dock .nav-item.active { background: var(--primary); box-shadow: var(--shadow); } .shell.sidebar-dock .nav-item.active::before { display: none; } .shell.sidebar-dock .nav-item svg { width: 22px; height: 22px; } .shell.sidebar-dock .nav-item.active svg { color: #fff; } .shell.sidebar-dock .nav-count { position: absolute; top: -4px; right: -4px; margin-left: 0; } /* Yorliq-matni (mavjud ) — dock rejimida ENDI oddiy yashirilgan (2026-08-10, davomi #30): ilgari shu ning o'zi CSS `position:absolute` orqali floating-tooltip sifatida ishlatilardi, lekin `.sidebar`ning o'z `overflow-y:auto` skroll-konteyneri (CSS spetsifikatsiyasiga ko'ra overflow-x'ni ham majburiy "auto" qilib qo'yadi) uni KESIB TASHLARDI — foydalanuvchi buni xato sifatida ko'rsatdi ("ko'rinma qolayabdi, ichkariga kirib qolayabdi"). Endi tooltip butunlay JS-portal orqali (`#wl-dock-tip`, ga bevosita qo'shiladigan, hech qanday overflow-cheklovchi ota-onasiz element — pastroqda, `.wl-dock-tip`) ko'rsatiladi — shu shunchaki ko'rinmas, faqat matn-manba sifatida DOM'da qoladi. */ .shell.sidebar-dock .nav-item span:not(.nav-count) { display: none; } /* Dock-tooltip portal (app.js, wlEnsureDockTip) — ning bevosita farzandi, `position:fixed` bilan sichqoncha turgan nav-item'ning ANIQ ekran-koordinatasiga joylashtiriladi (getBoundingClientRect), shu sabab HECH QANDAY ota-ona konteynerning overflow'iga bog'liq emas va HECH QACHON kesilmaydi. */ .wl-dock-tip { position: fixed; transform: translateY(-50%); background: var(--text); color: var(--surface); font-size: 11.5px; font-weight: 600; white-space: nowrap; padding: 6px 11px; border-radius: 8px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; z-index: 500; transition: opacity var(--dur-fast) var(--ease-standard); } .wl-dock-tip.show { opacity: 1; } .sidebar .brand-mark { /* Was a gradient badge behind a plain vector glyph -- now shows the real logo mark (images/main_icon.svg) directly, full-color and self-contained, so it no longer needs a colored backdrop. */ width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; } .sidebar .brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; } /* white-space:nowrap — Compass Business/Owner's "Compass [BUSINESS]"/ "Compass [OWNER]" badge was wrapping onto a second line in the 252px sidebar (the badge's own padding pushed the combined width past what fit); shrinking .owner-badge below plus forcing single-line here together keep it on one line without needing a wider sidebar. */ .sidebar .brand-name { font-weight: 800; font-size: 15px; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; } .sidebar .brand-sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; letter-spacing: 0.03em; } .owner-badge { display:inline-flex; align-items:center; padding:1px 6px; border-radius: var(--radius-pill); font-size:8px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; background: var(--slate-50); color: var(--text-2); border:1px solid var(--border); } /* Module toggle (business/roles.html) — disabled nav items in the main shell */ .nav-item.disabled { opacity: .45; cursor: not-allowed; } .nav-item.disabled:hover { background: transparent; color: var(--text-3); } /* Generic 3-way segmented control (module status picker) */ .segmented { display:flex; background: var(--slate-50); border-radius: var(--radius-pill); padding: 2px; border: 1px solid var(--border); flex-shrink:0; } .segmented button { border:none; background:transparent; padding:5px 10px; border-radius: var(--radius-pill); font-size:10.5px; font-weight:700; color:var(--text-3); cursor:pointer; white-space:nowrap; } .segmented button.active { background: var(--surface); color: var(--primary-700); box-shadow: var(--shadow-sm); } .segmented button.active.warn { color: var(--amber); } .segmented button.active.danger { color: var(--rose); } /* Dashboard-layout's width/height pickers (business/dashboard-layout.html) — same segmented pill component as everywhere else, just with a small icon alongside the label instead of text-only. */ .wl-dashlayout-seg button { display: inline-flex; align-items: center; gap: 5px; } .wl-dashlayout-seg button svg { width: 12px; height: 12px; flex-shrink: 0; } /* Role permission matrix (business/roles.html role modal) */ .wl-perm-group { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; } .wl-perm-group summary { padding: 10px 14px; font-size: 12.5px; font-weight: 800; cursor: pointer; background: var(--surface-2); list-style: none; } .wl-perm-group summary::-webkit-details-marker { display: none; } .wl-perm-group summary::before { content: '▸ '; color: var(--muted); } .wl-perm-group[open] summary::before { content: '▾ '; } .wl-perm-rows { padding: 4px 14px 10px; } .wl-perm-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--border); flex-wrap:wrap; } .wl-perm-row:first-child { border-top: none; } .wl-perm-row-label { font-size:12.5px; font-weight:700; min-width:150px; } .wl-perm-row-actions { display:flex; gap:12px; flex-wrap:wrap; } .wl-perm-check { display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-2); cursor:pointer; white-space:nowrap; } .wl-perm-check input { cursor:pointer; } /* Owner catalog icon/color pickers (business/settings.html) */ .wl-icon-picker { display:flex; flex-wrap:wrap; gap:8px; max-height:168px; overflow-y:auto; padding:10px; border:1px solid var(--border); border-radius:var(--radius-sm); } .wl-icon-pick-btn { width:36px; height:36px; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--text-2); transition:border-color .15s ease, background .15s ease, color .15s ease; padding:0; } .wl-icon-pick-btn svg { width:18px; height:18px; } .wl-icon-pick-btn:hover { border-color:var(--primary); color:var(--primary-700); } .wl-icon-pick-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; } .wl-pal-picker { display:flex; gap:8px; } .wl-pal-pick-btn { width:30px; height:30px; padding:0; border-radius:50%; border:2px solid transparent; cursor:pointer; } .wl-pal-pick-btn.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); } /* Building configuration wizard (business/building.html) */ .wl-wizard-progress { display:flex; gap:6px; margin-bottom:20px; } .wl-wizard-progress .seg { flex:1; height:4px; border-radius:2px; background:var(--slate-100); transition: background .2s ease; } .wl-wizard-progress .seg.done { background:var(--primary); } .wl-stepper { display:flex; align-items:center; gap:14px; } .wl-stepper button { width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--surface-2); font-weight:800; font-size:15px; cursor:pointer; display:grid; place-items:center; color:var(--text-2); } .wl-stepper button:hover { border-color:var(--primary-100); background:var(--primary-50); color:var(--primary-700); } .wl-stepper .val { font-size:17px; font-weight:800; min-width:22px; text-align:center; } @keyframes wl-floor-grow { from { opacity:0; transform: scaleY(.7); } to { opacity:1; transform: scaleY(1); } } .wl-floor-grow-anim { animation: wl-floor-grow .32s ease-out; transform-origin: top; } /* Organization structure — hierarchical chart view (business/structure.html) */ .wl-org-chart-wrap { overflow-x: auto; padding: 10px 0 20px; } .wl-org-chart, .wl-org-chart ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; } .wl-org-chart li { display: flex; flex-direction: column; align-items: center; padding: 0 12px; position: relative; } .wl-org-chart li > ul { padding-top: 28px; position: relative; } .wl-org-chart li > ul::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0; border-top: 2px solid var(--border-strong); } .wl-org-chart li > ul > li::before { content: ''; position: absolute; top: -28px; left: 50%; width: 0; height: 28px; border-left: 2px solid var(--border-strong); } .wl-org-box { display: flex; flex-direction: column; align-items: center; min-width: 130px; padding: 10px 12px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .15s ease, transform .15s ease; } .wl-org-box:hover { border-color: var(--primary-100); transform: translateY(-2px); } .wl-org-pick-row:hover { background: var(--primary-50) !important; } .wl-switch-user-row { display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:var(--radius-sm); cursor:pointer; } .wl-switch-user-row:hover { background: var(--surface-2); } .wl-switch-user-row.active { background: var(--primary-50); } .sidebar .nav-section { padding: 10px 10px 2px; } .sidebar .nav-section-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 8px 10px 6px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 13.5px; font-weight: 600; text-decoration: none; position: relative; margin: 1px 0; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .nav-item:hover { background: var(--slate-50); color: var(--text); } /* 2026-08-10 (davomi #31) — macOS Finder/Mail/System Settings'ning sidebar-tanlov tili: chap-tomon "chiziq" (avvalgi holat — Windows/ Material web-ilova konvensiyasi) O'RNIGA, FAQAT to'liq, yumaloq- burchakli "pill" fon — macOS hech qachon chiziq-indikator ishlatmaydi, tanlangan qatorning O'ZI rangli, ozgina "ko'tarilgan" (soya) chip sifatida ko'rinadi. */ .nav-item.active { background: var(--primary-50); color: var(--primary-700); box-shadow: var(--shadow-sm); } .nav-item svg { width:17px; height:17px; flex-shrink:0; opacity: 0.9; } .nav-item.active svg { color: var(--primary-700); } .nav-count { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--slate-100); color: var(--text-2); } .nav-item.active .nav-count { background: var(--primary-100); color: var(--primary-700); } .nav-count.accent { background: var(--accent-100); color: var(--accent-text); } .sidebar .sidebar-footer { padding: 12px 18px; border-top: 1px solid var(--border-faint); margin-top: 14px; font-size: 11.5px; color: var(--muted); line-height: 1.6; } /* Sidebar pastidagi ikonka-qatori (2026-08-10, davomi #30) — "barcha bo'limlar" (FAQAT Compass'ning o'zida — #wl-appgrid-btn) va ro'yxat/ dock ko'rinish-almashtirgichi (#wl-sidebarview-btn, uchala qobiqda ham) — ilgari topbar'da boshqa iconlar bilan "aralashib" turgan, endi sidebar'ning o'z pastki qismiga ko'chirildi. `.sidebar`ning o'z skroll- konteyneriga nisbatan `position:sticky; bottom:0` — nav-ro'yxati uzun bo'lib skroll qilinganda ham HAR DOIM ko'rinadigan, bosiladigan holda qoladi (aynan `.brand`ning `sticky; top:0` bilan bir xil naqsh). */ .sidebar-footer-icons { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: center; gap: 8px; padding: 10px 0 4px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ============================================================ "Barcha bo'limlar" — Activities/Launchpad uslubidagi to'liq-ekran panjara (2026-08-10, davomi #30, FAQAT Compass'ning o'zida — app.js, wlOpenAppGrid/wlEnsureAppGridOverlay). Mavjud `.modal-overlay` naqshidan ATAYLAB mustaqil (o'z klasslari) — chunki vizual maqsad butunlay boshqa: kichik markazlashgan quti emas, TO'LIQ-EKRAN, kuchli xiralashtirilgan orqa fon ustidagi katta panjara. */ .wl-appgrid-overlay { position: fixed; inset: 0; z-index: 400; /* 2026-08-10 (davomi #30 uzayishi): dastlabki qiymat (0.55 xiralik + 18px blur) "bunchalik emas" deb topildi — sezilarli darajada yumshatildi, orqa fon HALI HAM xiralashadi, lekin ancha yengilroq. */ background: rgba(15,13,28,0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 24px 24px; opacity: 0; pointer-events: none; transition: opacity .22s var(--ease-out); } .wl-appgrid-overlay.show { opacity: 1; pointer-events: auto; } .wl-appgrid-panel { width: 100%; max-width: 860px; max-height: 78vh; overflow-y: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 20px 24px 28px; transform: translateY(-16px) scale(.97); transition: transform .22s var(--ease-bounce); } .wl-appgrid-overlay.show .wl-appgrid-panel { transform: translateY(0) scale(1); } .wl-appgrid-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; position: sticky; top: 0; } .wl-appgrid-search { flex: 1; display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--border-faint); border-radius: var(--radius-pill); padding: 10px 16px; color: var(--muted); } .wl-appgrid-search svg { width: 16px; height: 16px; flex-shrink: 0; } .wl-appgrid-search input { flex: 1; border: none; background: none; font-size: 14px; color: var(--text); } .wl-appgrid-search input:focus { outline: none; } /* 2026-08-10 (davomi #30 uzayishi) — root-cause: har bo'lim O'ZINING ALOHIDA `.wl-appgrid-grid`iga ega edi, shu sabab kam-elementli bo'lim (masalan 2-3 ta) o'z qatorini TO'LDIRMASDAN darhol yangi qatorga "sinib" ketardi — "bo'linib bo'linib chiqayabdi" degan shikoyat aynan shu edi. Tuzatish: endi BITTA umumiy oqim-panjara (`#wl-appgrid-body` o'zi grid-konteyner) — bo'lim-sarlavhalari grid ICHIDA, lekin `grid-column: 1 / -1` orqali TO'LIQ qator kengligini egallaydigan "ajratuvchi" sifatida, plitkalar esa bo'lim-chegarasidan qat'iy nazar BIR QATORGA NECHTA SIG'SA SHUNCHA joylashib, qatorni TO'LDIRIB ketadi. Plitkalar o'lchami ham (96px→116px, ikonka 46px→52px) biroz kattalashtirildi. */ .wl-appgrid-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 2px 6px; } .wl-appgrid-section-title { grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 20px 0 8px; } .wl-appgrid-section-title:first-child { margin-top: 0; } .wl-appgrid-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; padding: 16px 8px; border-radius: var(--radius); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .wl-appgrid-tile:hover { background: var(--slate-50); transform: translateY(-2px); } .wl-appgrid-tile-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), #8a5cf6); color: #fff; box-shadow: var(--shadow-sm); } .wl-appgrid-tile-ico svg { width: 24px; height: 24px; } .wl-appgrid-tile-lbl { font-size: 11.5px; font-weight: 600; color: var(--text-2); line-height: 1.3; } /* ============================================================ Topbar ============================================================ */ .topbar { /* Same treatment as .sidebar — fully transparent, no seam, the fixed body gradient shows straight through. */ background: transparent; padding: 0 26px; height: 60px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; } .topbar-left { display:flex; align-items:center; gap:16px; min-width:0; } .topbar .crumbs { display:flex; align-items:center; gap:8px; font-size:14px; font-weight: 700; color: var(--text); white-space:nowrap; } .wl-today-chip { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color: var(--text-3); background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--radius-pill); padding: 5px 12px; white-space:nowrap; flex-shrink:0; box-shadow: var(--shadow-sm); } .wl-today-chip svg { width:13px; height:13px; color: var(--primary-700); } .topbar .search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--radius-pill); padding: 7px 14px; width: 260px; color: var(--muted); font-size: 13px; box-shadow: var(--shadow-sm); } .topbar .search svg { width: 15px; height: 15px; } .topbar-right { display: flex; align-items: center; gap: 14px; } /* "Profil almashtirish" (wl-switch-user-btn) va "Chiqish" ikonalarini yonma-yon, topbar'ning eng oxirida ushlab turadigan tor guruh (2026-08-10, davomi #33) — foydalanuvchi aniq shu ikkisini yonma-yon ko'rishni so'radi; oraga user-chip kirib ketmasligi uchun ikkalasi alohida `.topbar-endgroup`ga chiqarilgan (odatiy `.topbar-right`ning 14px gap'i o'rniga qisqaroq 8px, "juftlik" hissi uchun). */ .topbar-endgroup { display: flex; align-items: center; gap: 8px; } /* Eski 3-tugmali UZ/RU/EN blok — HALI HAM login sahifalarida (login.html, business/login.html, owner/login.html) ishlatiladi, shu sabab bu klass olib tashlanmadi. Asosiy topbar'da endi `.wl-lang-menu` dropdown'i bor (pastda). */ .lang-toggle { display:flex; background: var(--slate-50); border-radius: var(--radius-pill); padding: 2px; border: 1px solid var(--border-faint); } .lang-toggle button { border: none; background: transparent; padding: 5px 11px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; color: var(--text-3); cursor: pointer; } .lang-toggle button.active { background: var(--surface); color: var(--primary-700); box-shadow: var(--shadow-sm); } /* Til-almashtirish dropdown (wlToggleLangMenu/wlRenderLangMenu, app.js) — Bildirishnoma/Pomodoro panellari bilan bir xil "floating card" tili, lekin qattiq top-right burchak o'rniga JS orqali ANIQ tugma tagiga joylashadi (uchala qobiqda tugma joyi har xil bo'lishi mumkin). */ .wl-lang-menu { position: fixed; width: 156px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 60px -16px rgba(23,21,43,0.28), 0 6px 18px -6px rgba(23,21,43,0.10); padding: 6px; z-index: 150; opacity: 0; pointer-events: none; transform: translateY(-10px) scale(.96); transition: opacity .18s var(--ease-out), transform .18s var(--ease-bounce); } .wl-lang-menu.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .wl-lang-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; transition: background .12s ease; } .wl-lang-menu-item:hover { background: var(--surface-2); } .wl-lang-menu-item.active { background: var(--primary-50); color: var(--primary-700); } .wl-lang-menu-item svg { width: 13px; height: 13px; flex-shrink: 0; } .icon-btn { width: 34px; height: 34px; border-radius: 50%; display:grid; place-items:center; border: 1px solid var(--border-faint); background: var(--surface); cursor: pointer; position: relative; color: var(--text-2); box-shadow: var(--shadow-sm); } .icon-btn svg { width: 16px; height: 16px; } .icon-btn .dot { position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background: var(--rose); border: 1.5px solid var(--surface); } .icon-btn:disabled { opacity: .4; cursor: not-allowed; } .user-chip { display:flex; align-items:center; gap:9px; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: var(--radius-pill); } .user-chip:hover { background: var(--slate-50); } .user-chip .meta { line-height: 1.25; } .user-chip .name { font-size: 13px; font-weight: 700; color: var(--text); } .user-chip .role { font-size: 11px; color: var(--muted); } /* ============================================================ Avatars ============================================================ */ .avatar { border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: -0.02em; overflow: hidden; background: linear-gradient(135deg, var(--primary) 0%, #8a5cf6 100%); } .avatar.has-photo { background: var(--slate-100); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .avatar.has-photo:hover { transform: scale(1.07); box-shadow: 0 0 0 3px var(--primary-100); } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar.sz-24 { width: 24px; height: 24px; font-size: 10px; } .avatar.sz-28 { width: 28px; height: 28px; font-size: 11px; } .avatar.sz-32 { width: 32px; height: 32px; font-size: 12px; } .avatar.sz-40 { width: 40px; height: 40px; font-size: 13px; } .avatar.sz-48 { width: 48px; height: 48px; font-size: 15px; } .avatar.sz-64 { width: 64px; height: 64px; font-size: 19px; } .avatar.sz-88 { width: 88px; height: 88px; font-size: 26px; border: 3px solid var(--surface); box-shadow: 0 0 0 3px var(--primary-100); } /* Muted, flat avatar tones — serious/ATS look. Gradient primary is reserved for "me". */ .avatar.pal-2 { background: #5b6472; } .avatar.pal-3 { background: #3f6b8f; } .avatar.pal-4 { background: #4a7a6b; } .avatar.pal-5 { background: #6e5a86; } .avatar.pal-6 { background: #7a6350; } .avatar-stack { display: flex; } .avatar-stack .avatar { margin-left: -8px; } .avatar-stack .avatar:first-child { margin-left: 0; } /* ============================================================ Cards & surfaces ============================================================ */ .page { padding: 24px 28px 60px; max-width: 1360px; } .page-head { margin-bottom: 20px; } .page-head h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; } .page-head p { margin-top: 4px; color: var(--text-3); font-size: 13.5px; } .grid { display: grid; gap: 16px; } .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .grid.dash { grid-template-columns: 2fr 1fr; align-items: start; } .card { /* 2026-08-10 (davomi #31) — `.btn` bilan bir xil qaror: chegara xiraroq (`--border-faint`), hajm-hissi asosan soyadan keladi. */ background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px 20px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; } .card-head h3 { font-size: 14.5px; font-weight: 800; } .card-head .link { font-size: 12.5px; font-weight: 700; color: var(--primary-700); cursor: pointer; } .stat { display:flex; flex-direction: column; gap: 3px; } .stat .v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } .stat .l { font-size: 11.5px; color: var(--muted); font-weight: 600; } .chip { display:inline-flex; align-items:center; gap:5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; } .chip.primary { background: var(--primary-50); color: var(--primary-700); } .chip.accent { background: var(--accent-50); color: var(--accent-text); } .chip.green { background: var(--green-50); color: var(--green); } .chip.amber { background: var(--amber-50); color: var(--amber); } .chip.rose { background: var(--rose-50); color: var(--rose); } .chip.blue { background: var(--blue-50); color: var(--blue); } .chip.slate { background: var(--slate-50); color: var(--text-2); } /* Styled status sitting next to a decorative chip. Color set via a modifier class, applied/swapped by JS to match the current value. */ .wl-status-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: none; border-radius: var(--radius-pill); padding: 4px 26px 4px 12px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; background-repeat: no-repeat; background-position: right 9px center; background-size: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23524d6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); transition: background-color var(--dur-fast) var(--ease-standard); } .wl-status-select.slate { background-color: var(--slate-50); color: var(--text-2); } .wl-status-select.blue { background-color: var(--blue-50); color: var(--blue); } .wl-status-select.amber { background-color: var(--amber-50); color: var(--amber); } .wl-status-select.green { background-color: var(--green-50); color: var(--green); } .wl-status-select.rose { background-color: var(--rose-50); color: var(--rose); } /* 2026-08-10 (davomi #31) — macOS tugma-tili: qattiq, aniq chegara (border) o'rniga yumshoq soya orqali "ko'tarilgan" ko'rinish — chegara endi FAQAT xira ajratuvchi chiziq (`--border-faint`), asosiy hajm-hissi `--shadow-sm`dan keladi (macOS'ning o'zi ham tugmalarni shu tarzda ko'rsatadi — qalin chegara emas, yengil ko'tarilish). */ .btn { display: inline-flex; align-items:center; gap: 7px; justify-content:center; border-radius: var(--radius-sm); padding: 8px 16px; font-size: 13px; font-weight: 700; border: 1px solid var(--border-faint); background: var(--surface); color: var(--text-2); cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease; } .btn:hover { background: var(--slate-50); box-shadow: var(--shadow); } .btn:active { transform: scale(0.96); } .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 14px -5px rgba(91,61,240,0.55); } .btn.primary:hover { background: var(--primary-700); transform: translateY(-1px); box-shadow: 0 9px 18px -6px rgba(91,61,240,0.6); } .btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.ghost { background: transparent; border-color: transparent; } .btn.sm { padding: 5px 11px; font-size: 12px; } .btn svg { width: 15px; height: 15px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn:disabled:active { transform: none; } /* ============================================================ Org-chain breadcrumb ============================================================ */ /* Slim single-line reporting-chain strip, sits above the page content */ .org-strip { display:flex; align-items:center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 28px; height: 40px; } .org-strip .os-label { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 6px; flex-shrink: 0; } .org-strip .oc-item { display:flex; align-items:center; gap:5px; padding: 2px 9px 2px 2px; border-radius: var(--radius-pill); cursor: pointer; flex-shrink: 0; } .org-strip .oc-item:hover { background: var(--slate-50); } .org-strip .oc-item span { font-size: 12px; font-weight: 600; color: var(--text-2); } .org-strip .oc-item .oc-role { font-size: 10.5px; font-weight: 500; color: var(--muted); margin-left: 2px; } .org-strip .oc-item .oc-role::before { content: "\00b7"; margin-right: 4px; } .org-strip .oc-arrow { color: var(--muted); flex-shrink: 0; display:flex; } .org-strip .oc-arrow svg { width: 13px; height: 13px; } .org-strip .oc-item.me { background: var(--primary-50); } .org-strip .oc-item.me span { color: var(--primary-700); font-weight: 700; } /* legacy alias kept for any inline org-chain usage inside cards */ .org-chain { display:flex; align-items:center; gap: 6px; flex-wrap: wrap; } .org-chain .oc-item { display:flex; align-items:center; gap:6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px 11px 4px 4px; cursor: pointer; } .org-chain .oc-item:hover { border-color: var(--primary-100); background: var(--primary-50); } .org-chain .oc-item span { font-size: 12px; font-weight: 700; color: var(--text-2); } .org-chain .oc-arrow { color: var(--muted); } .org-chain .oc-item.me { background: var(--primary-50); border-color: var(--primary-100); } .org-chain .oc-item.me span { color: var(--primary-700); } /* ============================================================ Tabs ============================================================ */ .tabs { display:flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; position: relative; overflow-x: auto; } .tab-btn { border: none; background: transparent; padding: 10px 16px; font-size: 13.5px; font-weight: 700; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease; white-space: nowrap; flex-shrink: 0; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--primary-700); } .tab-indicator { position: absolute; bottom: -1px; height: 2px; background: var(--primary); border-radius: 2px; transition: left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1); } .tab-panel { display: none; animation: wl-fade-in .18s ease; } .tab-panel.active { display: block; } @keyframes wl-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ Badges (gamification) ============================================================ */ .badge-tile { display:flex; flex-direction: column; align-items:center; text-align:center; gap: 8px; padding: 14px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; } .badge-tile:hover { border-color: var(--accent-100); background: var(--accent-50); transform: translateY(-3px); box-shadow: var(--shadow); } .badge-tile:hover .badge-ico { transform: scale(1.08) rotate(-4deg); } .badge-ico { transition: transform .2s cubic-bezier(.34,1.56,.64,1); } .badge-ico { width: 52px; height: 52px; border-radius: 16px; display:grid; place-items:center; box-shadow: var(--shadow-sm); } .badge-ico svg { width: 26px; height: 26px; color: #fff; } .badge-tile .bname { font-size: 12px; font-weight: 700; line-height: 1.25; } .badge-tile .bcount { font-size: 10.5px; color: var(--muted); font-weight: 600; } .coin-pill { display:inline-flex; align-items:center; gap:6px; background: linear-gradient(135deg, var(--accent-50), var(--amber-50)); border: 1px solid var(--accent-100); border-radius: var(--radius-pill); padding: 5px 12px 5px 8px; } .coin-pill .ico { width:20px; height:20px; border-radius:50%; background: linear-gradient(135deg, var(--accent-2), var(--accent)); display:grid; place-items:center; color:#fff; font-size:11px; font-weight:800; } .coin-pill b { font-size: 13px; color: var(--coin-text); } /* Dashboard card grid — layout (which cards, order, width, height) comes entirely from WL_DASHBOARD_CARDS (mock-data.js), rendered by wlRenderDashboardGrid() (app.js). Owner-configurable, see business/dashboard-layout.html. */ .wl-dash-grid { display:grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; gap:16px; } .wl-dash-card.w-2 { grid-column: span 2; } .wl-dash-card.h-md { min-height:230px; } .wl-dash-card.h-lg { min-height:340px; } @media (max-width: 1100px) { .wl-dash-grid { grid-template-columns: 1fr; } .wl-dash-card.w-2 { grid-column: span 1; } } /* HR Calendar (hr-calendar.html) — employee rows x day columns matrix. Status colors are shared between the day cells AND the legend dots (single selector list) so they can never drift out of sync. */ .wl-hrcal-legend { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px; } .wl-hrcal-legend-item { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-2); font-weight:600; } .wl-hrcal-legend-dot { width:14px; height:14px; border-radius:4px; flex-shrink:0; } .wl-hrcal-cell.office, .wl-hrcal-legend-dot.office, .wl-hrcal-picker .dot.office { background:var(--green-100); } .wl-hrcal-cell.remote, .wl-hrcal-legend-dot.remote, .wl-hrcal-picker .dot.remote { background:var(--blue-100); } .wl-hrcal-cell.sick, .wl-hrcal-legend-dot.sick, .wl-hrcal-picker .dot.sick { background:var(--rose-100); } .wl-hrcal-cell.authorized, .wl-hrcal-legend-dot.authorized, .wl-hrcal-picker .dot.authorized { background:var(--amber-100); } .wl-hrcal-cell.unauthorized, .wl-hrcal-legend-dot.unauthorized, .wl-hrcal-picker .dot.unauthorized { background:var(--rose); } .wl-hrcal-cell.weekend, .wl-hrcal-legend-dot.weekend { background:var(--slate-100); } .wl-hrcal-cell.future, .wl-hrcal-legend-dot.future { background:transparent; border:1px dashed var(--border); } .wl-hrcal-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm); } .wl-hrcal-table { border-collapse:collapse; width:max-content; font-size:12px; } .wl-hrcal-table th, .wl-hrcal-table td { border:1px solid var(--border); } .wl-hrcal-emp-col { position:sticky; left:0; background:var(--surface); z-index:2; text-align:left; min-width:200px; padding:9px 12px; } .wl-hrcal-table thead th.wl-hrcal-emp-col { z-index:3; } .wl-hrcal-day-th { min-width:56px; text-align:center; font-size:11.5px; font-weight:800; color:var(--text-2); background:var(--surface-2); padding:8px 4px; } .wl-hrcal-day-th .dow { display:block; font-size:9.5px; font-weight:600; text-transform:uppercase; color:var(--text-3); margin-top:2px; } .wl-hrcal-cell-wrap { text-align:center; padding:6px; } .wl-hrcal-cell { width:38px; height:38px; border-radius:8px; margin:0 auto; display:flex; align-items:center; justify-content:center; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .wl-hrcal-cell.editable { cursor:pointer; } .wl-hrcal-cell.editable:hover { transform: scale(1.1); box-shadow: 0 0 0 2px var(--primary); } .wl-hrcal-times { display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1; font-size:8.5px; font-weight:800; color: var(--green); font-variant-numeric: tabular-nums; } .wl-hrcal-summary-col { position:sticky; right:0; background:var(--surface); z-index:2; text-align:left; min-width:190px; padding:10px 12px; } .wl-hrcal-table thead th.wl-hrcal-summary-col { z-index:3; } .wl-hrcal-sum-row { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-2); margin-top:4px; } .wl-hrcal-sum-row .ico { width:14px; height:14px; color:var(--text-3); flex-shrink:0; display:flex; } .wl-hrcal-sum-row .ico svg { width:13px; height:13px; } .wl-hrcal-picker { display:flex; flex-direction:column; gap:6px; } .wl-hrcal-picker button { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:12px; font-weight:700; text-align:left; } .wl-hrcal-picker button:hover { border-color:var(--primary); background:var(--primary-50); } .wl-hrcal-picker .dot { width:12px; height:12px; border-radius:4px; flex-shrink:0; } .wl-dashlayout-confirmbar { position: sticky; top: 70px; z-index: 15; display:flex; align-items:center; justify-content:space-between; gap:12px; background: var(--primary-50); border: 1px solid var(--primary-100); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom:16px; font-size:12.5px; font-weight:700; color: var(--primary-700); } /* Drag-and-drop reordering (business/dashboard-layout.html preview only) */ .wl-dash-grid[id="wl-dashlayout-preview"] .wl-dash-card { cursor: grab; transition: opacity var(--dur-fast) var(--ease-standard), outline-color var(--dur-fast) var(--ease-standard); outline: 2px solid transparent; outline-offset: 3px; } .wl-dash-card.wl-dash-dragging { opacity: .35; cursor: grabbing; } .wl-dash-card.wl-dash-drop-target { outline-color: var(--primary); } /* Drag-and-drop reordering (hr-scenarios.html step builder) — same technique as business/dashboard-layout.html above, applied to a vertical list of step rows instead of a card grid. */ .wl-step-row { transition: opacity var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .wl-step-row.dragging { opacity: .35; cursor: grabbing; } .wl-step-row.drop-target { border-color: var(--primary) !important; background: var(--primary-50); } /* Ssenariy builder — kutubxonadagi "mavjud qadam" chip'lari (owner/scenarios.html) */ .wl-step-chip { transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .wl-step-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .wl-step-chip:active { cursor: grabbing; } /* Karta/Ro'yxat ko'rinish almashtirgich (hr-scenarios.html) — icon-only segmented */ #wl-process-view-toggle button { display: flex; align-items: center; justify-content: center; padding: 6px 9px; } #wl-process-view-toggle button svg { width: 15px; height: 15px; } /* Dashboard "hours this month" card — icon sub-stats row + quick-request button */ .wl-hours-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .wl-hour-substats { display:flex; justify-content:space-between; gap:4px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); } .wl-substat { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; min-width:0; text-align:center; } .wl-substat-ico { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; } .wl-substat-ico svg { width:11px; height:11px; } .wl-substat-val { font-size:12.5px; font-weight:800; line-height:1.1; } .wl-substat-lbl { font-size:9px; color:var(--text-3); font-weight:600; line-height:1.2; } /* Compact weekly-lateness mini bar-chart (replaces stacked full-width bar rows) */ .wl-late-compact { display:flex; justify-content:space-between; align-items:flex-end; gap:8px; height:64px; margin-top:4px; } .wl-late-col { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; } .wl-late-track { width:100%; max-width:26px; height:38px; background:var(--slate-100); border-radius:5px; display:flex; align-items:flex-end; overflow:hidden; } .wl-late-fill { width:100%; background:var(--primary-100); border-radius:2px; transition:height var(--dur-base) var(--ease-standard); } .wl-late-fill.warn { background:var(--rose-100); } .wl-late-val { font-size:10px; font-weight:800; color:var(--text-2); } .wl-late-lbl { font-size:9px; color:var(--text-3); font-weight:600; } .wl-company-card { background: linear-gradient(160deg, var(--primary-50), var(--surface) 55%); border-color: var(--primary-100); display:flex; flex-direction:column; } .wl-company-logo { width:52px; height:52px; border-radius:16px; flex-shrink:0; background: linear-gradient(135deg, var(--primary) 0%, #8a5cf6 100%); display:grid; place-items:center; color:#fff; box-shadow: var(--shadow-sm); } .wl-company-logo svg { width:26px; height:26px; } .wl-company-mission { font-size:12.5px; line-height:1.55; color: var(--text-2); margin-top:14px; } .wl-company-stats { display:flex; gap:18px; margin-top:auto; padding-top:16px; } .wl-company-stat-val { font-size:16px; font-weight:800; line-height:1.1; } .wl-company-stat-lbl { font-size:10px; color:var(--text-3); font-weight:600; margin-top:2px; } .wl-quick-req-btn { display:inline-flex; align-items:center; gap:7px; padding:6px 14px 6px 6px; border-radius: var(--radius-pill); border:1px solid var(--primary-100); background: linear-gradient(135deg, var(--primary-50), var(--surface)); color: var(--primary-700); font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .wl-quick-req-btn .ico { width:22px; height:22px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; flex-shrink:0; } .wl-quick-req-btn .ico svg { width:13px; height:13px; } .wl-quick-req-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(91,61,240,0.45); border-color: var(--primary); } .wl-quick-req-btn:active { transform: scale(0.97); } .wl-qr-type-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; } .wl-qr-type-card { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:14px 8px; border-radius: var(--radius-sm); border:1px solid var(--border); cursor:pointer; transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .wl-qr-type-card:hover { border-color: var(--primary); background: var(--primary-50); transform: translateY(-2px); } .wl-qr-type-card .name { font-size:11.5px; font-weight:700; line-height:1.25; } .wl-qr-back { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color: var(--text-3); cursor:pointer; background:none; border:none; padding:0; margin-bottom:12px; } .wl-qr-back:hover { color: var(--primary); } .wl-qr-back svg { width:14px; height:14px; } .wl-qr-back-ico { transform: rotate(180deg); } .wl-dashlayout-up { transform: rotate(-90deg); } .wl-dashlayout-down { transform: rotate(90deg); } .wl-chevron-left { transform: rotate(180deg); } /* Tuzilma — bosilganda ochiladigan/yopiladigan VIZUAL org-daraxt (directory.html), quti-va-chiziq diagramma sifatida — xuddi business/structure.html'ning "Sxema" ko'rinishi bilan bir xil `.wl-org-chart`/ `.wl-org-box` uslubidan foydalanadi (2026-08-08'da avval oddiy indentli akkordeon-ro'yxat sifatida qurilgan edi — foydalanuvchi buni emas, markazlashgan vizual quti-diagrammani nazarda tutgan edi, shu sababli qayta qurildi). Qaysi tugunlar ochiqligini `directory.html`dagi JS (`wlOrgExpanded` to'plami) boshqaradi — CSS faqat quti ustiga qo'shimcha ko'rinish (bosiladigan kursor, ochiq/yopiq chevron) beradi. */ .wl-orgchart-box { cursor: pointer; position: relative; } .wl-orgchart-box.leaf { cursor: default; } .wl-orgchart-box .icon-btn { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; } .wl-orgchart-box .icon-btn svg { width: 11px; height: 11px; } .wl-orgchart-toggle { display: inline-flex; align-items: center; gap: 3px; margin-top: 8px; font-size: 10px; font-weight: 700; color: var(--text-3); } .wl-orgchart-toggle svg { width: 11px; height: 11px; transition: transform var(--dur-fast) var(--ease-standard); } .wl-orgchart-toggle.open svg { transform: rotate(90deg); } /* Pomodoro — topbar icon is just a running/green blink indicator (.topbar is position:sticky, so this stays visible on scroll); the live countdown + controls live in the floating .wl-pomo-card instead (see below). */ .wl-pomo-btn { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:var(--radius-pill); cursor:pointer; color:var(--text-2); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .wl-pomo-btn:hover { background: var(--slate-50); } .wl-pomo-ico { width:18px; height:18px; display:flex; border-radius:50%; overflow:hidden; } .wl-pomo-ico svg { width:18px; height:18px; } .wl-pomo-ico img { width:100%; height:100%; object-fit:cover; display:block; } .wl-pomo-modal-ico { display:inline-flex; width:22px; height:22px; border-radius:50%; overflow:hidden; vertical-align:middle; margin-right:5px; } .wl-pomo-modal-ico img { width:100%; height:100%; object-fit:cover; display:block; } .wl-pomo-btn.running { background: var(--green-50); color: var(--green); } .wl-pomo-btn.running .wl-pomo-ico { animation: wl-pomo-blink 1.6s ease-in-out infinite; } @keyframes wl-pomo-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes wl-pomo-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .wl-pomo-flash { animation: wl-pomo-pulse .5s ease 3; } /* Floating Pomodoro card (top-right) — same fixed-panel language as .wl-mood-panel, but top instead of bottom since the topbar icon already owns the bottom-right/mood-FAB corner. Only shown while a session is active (toggled via .show, not removed from the DOM). Redesigned 2026-08-08 after feedback that the flat bordered-boxes/hard-divider look read as dated — now a soft frosted-glass card with a mode-tinted gradient wash (top rose/green fade to the base surface color), no hard rules anywhere, and a pill-shaped primary CTA instead of two boxy side-by-side buttons. .work/.rest (toggled in JS alongside the mode) drive both the background wash and the ring/CTA color. */ .wl-pomo-card { position: fixed; top: 76px; right: 24px; width: 272px; z-index: 150; background: var(--surface); border: 1px solid var(--border); border-radius: 26px; box-shadow: 0 24px 60px -16px rgba(23,21,43,0.28), 0 6px 18px -6px rgba(23,21,43,0.10); padding: 22px 22px 24px; text-align: center; opacity: 0; pointer-events: none; transform: translateY(-14px) scale(.94); transition: opacity .22s var(--ease-out), transform .22s var(--ease-bounce), background .35s ease; overflow: hidden; } .wl-pomo-card.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .wl-pomo-card.work { background: linear-gradient(180deg, var(--rose-50) 0%, var(--surface) 60%); } .wl-pomo-card.rest { background: linear-gradient(180deg, var(--green-50) 0%, var(--surface) 60%); } /* Bildirishnoma paneli — topbar qo'ng'iroqcha ikonkasi bosilganda ochiladi (wlInitNotifBell, app.js), Pomodoro floating-card bilan bir xil naqsh. */ .wl-notif-panel { position: fixed; top: 76px; right: 24px; width: 320px; max-height: 420px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 60px -16px rgba(23,21,43,0.28), 0 6px 18px -6px rgba(23,21,43,0.10); opacity: 0; pointer-events: none; transform: translateY(-14px) scale(.96); transition: opacity .18s var(--ease-out), transform .18s var(--ease-bounce); z-index: 150; } .wl-notif-panel.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .wl-notif-panel-head { font-size: 11.5px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding: 14px 16px 8px; } .wl-notif-row { padding: 10px 16px; cursor: pointer; border-top: 1px solid var(--border); transition: background .12s ease; } .wl-notif-row:hover { background: var(--surface-2); } .wl-notif-row.unread { background: var(--primary-50); } .wl-notif-row.unread:hover { background: var(--primary-100); } .wl-notif-row-text { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.4; } .wl-notif-row-date { font-size: 10.5px; color: var(--text-3); margin-top: 3px; } /* Reset + manual-close icon buttons, top-right corner — ghost/borderless by default (a soft tinted circle only on hover) so they read as quiet utility controls, not two more boxes competing with the CTA below. */ .wl-pomo-card-controls { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; flex-direction: row; align-items: center; gap: 2px; } .wl-pomo-card-controls .icon-btn { position: relative; width: 28px; height: 28px; flex: 0 0 28px; border: none; background: transparent; color: var(--text-3); opacity: .6; transition: opacity var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .wl-pomo-card-controls .icon-btn:hover { opacity: 1; background: rgba(23,21,43,0.06); color: var(--text); } .wl-pomo-card-controls .icon-btn svg { width: 13px; height: 13px; } /* Mode label sits above the ring (not inside it) so the ring can stay dedicated to just the (larger) time readout. */ .wl-pomo-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 800; color: #fff; letter-spacing: .04em; text-transform: uppercase; margin: 8px 0 16px; } .wl-pomo-chip.work { background: linear-gradient(135deg, var(--rose), #d1476f); box-shadow: 0 6px 16px -4px rgba(173,47,82,.5); } .wl-pomo-chip.rest { background: linear-gradient(135deg, var(--green), #2fa374); box-shadow: 0 6px 16px -4px rgba(31,122,82,.5); } .wl-pomo-ring-wrap { width: 140px; height: 140px; margin: 0 auto; filter: drop-shadow(0 8px 20px rgba(23,21,43,0.10)); } .wl-pomo-card-time { font-size: 36px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* One full-width gradient pill CTA (Pauza/Davom ettirish/Boshlash) + a plain text link underneath for the secondary (Bekor qilish) action — replaces the old pair of equal-width bordered boxes, which read like a dated OK/Cancel dialog rather than a focused single call-to-action. */ .wl-pomo-card-actions { margin-top: 22px; } .wl-pomo-card-primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; border: none; border-radius: var(--radius-pill); padding: 13px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .wl-pomo-card-primary:active { transform: scale(.97); } .wl-pomo-card-primary svg { width: 15px; height: 15px; } .wl-pomo-card-primary.work { background: linear-gradient(135deg, var(--rose), #d1476f); color: #fff; box-shadow: 0 12px 26px -10px rgba(173,47,82,.6); } .wl-pomo-card-primary.work:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(173,47,82,.65); } .wl-pomo-card-primary.rest { background: linear-gradient(135deg, var(--green), #2fa374); color: #fff; box-shadow: 0 12px 26px -10px rgba(31,122,82,.6); } .wl-pomo-card-primary.rest:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(31,122,82,.65); } .wl-pomo-card-cancel { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 6px; border: none; background: transparent; font-size: 11.5px; font-weight: 700; color: var(--text-3); cursor: pointer; transition: color var(--dur-fast) var(--ease-standard); } .wl-pomo-card-cancel:hover { color: var(--rose); } .wl-pomo-card-cancel svg { width: 13px; height: 13px; flex-shrink: 0; } /* Session dots — whitespace instead of a hard divider line separates them from the CTA above (dividers read "form", spacing reads "app"). */ .wl-pomo-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; } .wl-pomo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-100); flex-shrink: 0; transition: all .2s ease; } .wl-pomo-dot.done { background: var(--green); } .wl-pomo-dot.active { width: 8px; height: 8px; background: var(--green); box-shadow: 0 0 0 3px var(--green-50); animation: wl-pomo-dot-pulse 1.6s ease-in-out infinite; } .wl-pomo-dot.next { background: transparent; border: 1.5px solid var(--green); } .wl-pomo-dots-count { margin-left: 5px; font-size: 10px; font-weight: 800; color: var(--text-3); font-variant-numeric: tabular-nums; } @keyframes wl-pomo-dot-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--green-50); } 50% { box-shadow: 0 0 0 6px var(--green-50); } } /* ============================================================ Progress / charts (inline SVG, no libs) ============================================================ */ .ring-wrap { position: relative; width: 128px; height: 128px; } .ring-wrap svg { transform: rotate(-90deg); } .ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .ring-center .pct { font-size: 21px; font-weight: 800; } .ring-center .sub { font-size: 10.5px; color: var(--muted); font-weight: 600; } .bar-row { display:flex; align-items:center; gap: 10px; margin-bottom: 8px; } .bar-row .lbl { width: 34px; font-size: 11px; color: var(--muted); font-weight: 700; } .bar-track { flex:1; height: 8px; border-radius: var(--radius-pill); background: var(--slate-100); overflow: hidden; } .bar-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--primary), #8a5cf6); } .bar-fill.warn { background: linear-gradient(90deg, var(--accent-2), var(--accent)); } .bar-row .val { width: 26px; text-align:right; font-size: 11px; font-weight: 700; color: var(--text-2); } /* ============================================================ Salary reveal ============================================================ */ .salary-toggle { display:flex; align-items:center; justify-content:space-between; cursor: pointer; } .salary-body { max-height: 0; overflow: hidden; transition: max-height .25s ease; } .salary-body.open { max-height: 400px; } .salary-line { display:flex; align-items:center; justify-content:space-between; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13px; } .salary-line:last-child { border-bottom: none; } .salary-line .amt.pos { color: var(--green); font-weight: 700; } .salary-line .amt.neg { color: var(--rose); font-weight: 700; } .salary-total { display:flex; align-items:center; justify-content:space-between; padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--border); } .salary-total .v { font-size: 19px; font-weight: 800; } /* ============================================================ Mood stickers ============================================================ */ .mood-row { display:flex; gap: 10px; } .mood-opt { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding: 14px 8px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: 24px; transition: border-color .15s ease, background .15s ease, transform .15s cubic-bezier(.34,1.56,.64,1); } .mood-opt span.lbl { font-size: 11px; font-weight: 700; color: var(--text-3); } .mood-opt:hover { border-color: var(--primary-100); transform: translateY(-2px); } .mood-opt.selected { border-color: var(--primary); background: var(--primary-50); transform: scale(1.05); } .mood-opt.lg { padding: 20px 8px; font-size: 34px; } /* Floating mood check-in (bottom-right FAB + panel) */ .wl-mood-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: grid; place-items: center; font-size: 26px; cursor: pointer; z-index: 150; transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s ease; } .wl-mood-fab:hover { border-color: var(--primary-100); transform: scale(1.08) rotate(-4deg); } .wl-mood-panel { position: fixed; bottom: 92px; right: 24px; width: 290px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px; z-index: 150; opacity: 0; pointer-events: none; transform: translateY(10px) scale(.96); transition: opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1); } .wl-mood-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } /* Unseen-news bubbles — vertical stack, sits left of the mood FAB */ .wl-news-bubbles { position: fixed; bottom: 24px; right: 92px; display:flex; flex-direction:column-reverse; gap: 10px; z-index: 149; } .wl-news-bubble { width: 46px; height: 46px; border-radius: 50%; cursor: pointer; position: relative; overflow: hidden; background: var(--surface); border: 2px solid var(--surface); box-shadow: var(--shadow-lg); display: grid; place-items: center; transition: transform .15s cubic-bezier(.34,1.56,.64,1); } .wl-news-bubble:hover { transform: scale(1.1) translateY(-2px); } .wl-news-bubble img { width: 100%; height: 100%; object-fit: cover; } .wl-news-bubble .ico-wrap { width: 100%; height: 100%; display:grid; place-items:center; background: linear-gradient(135deg, var(--primary), #8a5cf6); color: #fff; } .wl-news-bubble .ico-wrap svg { width: 20px; height: 20px; } .wl-news-bubble .dot { position:absolute; top:-1px; right:-1px; width:13px; height:13px; border-radius:50%; background: var(--accent); border: 2px solid var(--surface); } .wl-mood-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; gap: 10px; } .wl-mood-head span { font-size: 13px; font-weight: 800; line-height: 1.3; } /* ============================================================ Directory / people cards ============================================================ */ .people-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* Xodimlar — "trading card" ko'rinishi (directory.html, "Kartalar" tab). FIFA/beysbol o'yinchi kartalariga o'xshab: burchakda "reyting" belgisi (staj asosida hisoblangan, sof bezak — real baholash emas), katta avatar, ism/lavozim, pastda texnologiya/qiziqish teglari + jamoa/staj qatorlari. Rang mavzusi pal-2..pal-6 bo'yicha aylanadi — har kartaning o'z "jamoa rangi" bordek turli-tuman ko'rinish uchun. */ .wl-pcard-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:18px; } .wl-pcard { position:relative; border-radius:20px; padding:20px 16px 16px; overflow:hidden; cursor:pointer; color:#fff; text-align:center; box-shadow: 0 12px 28px -14px rgba(20,10,50,.5); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .wl-pcard:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 18px 36px -14px rgba(20,10,50,.55); } .wl-pcard.theme-a { background: linear-gradient(160deg, #5b3df0 0%, #2c1d7a 65%, #150f3d 100%); } .wl-pcard.theme-b { background: linear-gradient(160deg, #3f6b8f 0%, #1f3a52 65%, #0f1c29 100%); } .wl-pcard.theme-c { background: linear-gradient(160deg, #4a7a6b 0%, #23433a 65%, #10201b 100%); } .wl-pcard.theme-d { background: linear-gradient(160deg, #6e5a86 0%, #35294a 65%, #1a1424 100%); } .wl-pcard.theme-e { background: linear-gradient(160deg, #7a6350 0%, #3c2f26 65%, #1e1712 100%); } .wl-pcard-rating { position:absolute; top:14px; left:16px; text-align:left; line-height:1; max-width:84px; } .wl-pcard-rating .num { font-size:26px; font-weight:900; display:block; text-shadow: 0 2px 6px rgba(0,0,0,.3); } .wl-pcard-rating .pos { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:84px; } .wl-pcard-probation { position:absolute; top:14px; right:14px; background: var(--amber-100); color:var(--probation-text); font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:3px 7px; border-radius:6px; z-index:2; } .wl-pcard-avatar-wrap { margin:46px auto 10px; position:relative; z-index:1; } .wl-pcard-avatar-wrap .avatar { width:84px; height:84px; margin:0 auto; border:3px solid rgba(255,255,255,.35); font-size:26px; } .wl-pcard-name { font-size:14.5px; font-weight:900; text-transform:uppercase; letter-spacing:.01em; line-height:1.2; } .wl-pcard-role { font-size:10.5px; font-weight:700; opacity:.85; margin-top:3px; } .wl-pcard-divider { height:1px; background:rgba(255,255,255,.18); margin:14px 0 12px; } .wl-pcard-section-lbl { font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; opacity:.6; text-align:left; margin-bottom:6px; } .wl-pcard-tags { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-start; margin-bottom:12px; } .wl-pcard-tag { background:rgba(255,255,255,.14); border-radius:6px; padding:3px 8px; font-size:9.5px; font-weight:700; } .wl-pcard-foot { display:flex; justify-content:space-between; font-size:10px; font-weight:700; opacity:.9; text-align:left; } .wl-pcard-foot span { display:block; } .wl-pcard-foot .lbl { font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.65; margin-bottom:2px; } /* ============================================================ Org chart tree ============================================================ */ .org-tree { display:flex; flex-direction:column; align-items:center; gap: 0; } .org-level { display:flex; gap: 34px; justify-content:center; position: relative; padding-top: 28px; } .org-level::before { content:""; position:absolute; top:0; left:50%; width:1px; height:28px; background: var(--border-strong); } .org-level:first-child::before { display:none; } .org-node { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; position:relative; padding: 10px 12px; border-radius: var(--radius-sm); transition: background .15s ease, transform .15s ease; } .org-node:hover { background: var(--slate-50); transform: translateY(-2px); } .org-node .nm { font-size: 11.5px; font-weight: 700; text-align:center; } .org-node .rl { font-size: 10px; color: var(--muted); text-align: center; } /* ============================================================ Calendar ============================================================ */ .cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .cal-day-head { font-size: 11px; font-weight:700; color: var(--muted); text-align:center; padding-bottom: 4px; } .cal-cell { min-height: 92px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; } .cal-cell .dnum { font-size: 11px; font-weight: 700; color: var(--text-3); } .cal-cell.today { border-color: var(--primary); background: var(--primary-50); } .cal-cell.other { opacity: 0.4; } .cal-evt { font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 4px; margin-top: 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cal-evt.meet { background: var(--blue-100); color: var(--blue); } .cal-evt.rm1 { background: var(--primary-100); color: var(--primary-700); } .cal-evt.room { background: var(--accent-100); color: var(--accent-text); } .cal-evt.event{ background: var(--green-100); color: var(--green); } /* ============================================================ Rooms ============================================================ */ /* Building-shaped frame for room booking — floors stacked top-to-bottom like a real building */ .wl-building { border: 2px solid var(--border-strong); border-radius: 22px 22px 10px 10px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-lg); } .wl-building-roof { height: 14px; background: linear-gradient(135deg, var(--primary), #8a5cf6); } .wl-floor { padding: 20px 24px; border-top: 2px solid var(--border-strong); } .wl-floor:first-of-type { border-top: none; } .wl-floor.basement { background: repeating-linear-gradient(135deg, var(--slate-50) 0 8px, var(--surface-2) 8px 16px); border-top: 4px solid var(--border-strong); } .wl-floor-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; gap: 10px; } .wl-floor-badge { display:flex; align-items:center; gap:12px; } .wl-floor-num { width: 36px; height: 36px; border-radius: 9px; background: var(--slate-50); color: var(--text-2); display:grid; place-items:center; font-size: 11px; font-weight: 800; flex-shrink:0; } .wl-floor-name { font-size: 14px; font-weight: 800; } .wl-floor-level { font-size: 11px; color: var(--muted); font-weight: 600; } .room-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; transition: box-shadow .18s ease, transform .18s ease; } .room-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .room-card .rname { font-size: 14px; font-weight: 800; } /* Barcha xonalar jadvali (Gantt-uslub) — rooms.html'ning "Calendar ko'rinishi", qavatlar bo'yicha guruhlangan, sahifa ichida almashtiriladigan ko'rinish. */ .wl-sched-floor-group { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 10px; } .wl-sched-floor-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .wl-sched-floor-label { font-size: 11px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding: 6px 0; } .wl-sched-row-wrap { display: flex; align-items: center; gap: 12px; padding: 8px 0; } .wl-sched-label { width: 150px; flex-shrink: 0; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--border); padding-right: 10px; } .wl-sched-row { position: relative; height: 30px; flex: 1; background: var(--slate-50); border-radius: 7px; cursor: default; } .wl-sched-row.wl-sched-clickable { cursor: pointer; } .wl-sched-row.wl-sched-draggable { cursor: crosshair; } .wl-sched-open { position: absolute; top: 0; bottom: 0; background: var(--green-50); border-radius: 7px; } .wl-sched-busy { position: absolute; top: 0; bottom: 0; background: var(--rose-100); border-left: 2px solid var(--rose); border-radius: 4px; } .wl-sched-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: .7; pointer-events: none; } .wl-sched-drag { position: absolute; top: 0; bottom: 0; background: rgba(91,61,240,0.25); border: 1px solid var(--primary); border-radius: 4px; pointer-events: none; z-index: 5; } .wl-sched-axis { display: flex; padding-left: 162px; position: relative; height: 16px; margin-bottom: 4px; } .wl-sched-axis span { position: absolute; font-size: 9.5px; font-weight: 700; color: var(--text-3); transform: translateX(-50%); } /* Chiroyli hover-tooltip — bron qilingan vaqt blokiga sichqoncha olib borilganda kim va nima sababdan bron qilganini ko'rsatadi (oldingi oddiy brauzer `title` atributi o'rniga). */ .wl-hover-tip { /* Slot yuqoriga emas, PASTGA ochiladi — band bo'lak modal (masalan xona-bron oynasi)ning yuqori chetiga yaqin bo'lganda, tepaga ochilgan tooltip modal chegarasidan tashqariga "chiqib ketardi" (kesilib ko'rinmasdan qolardi). Pastga ochilish bu muammoni yo'q qiladi va odatiy joylashuvda ham xuddi shunday ishlaydi. */ display: none; position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 7px 10px; border-radius: 8px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; z-index: 30; box-shadow: var(--shadow-lg); pointer-events: none; text-align: center; } .wl-hover-tip::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--text); } .wl-hover-tip-wrap { position: relative; } .wl-sched-busy:hover .wl-hover-tip, .wl-hover-tip-wrap:hover .wl-hover-tip { display: block; } .slot-row { display:flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .slot { padding: 5px 9px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; border: 1px solid var(--border); background: var(--surface-2); cursor:pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .slot.busy { background: var(--rose-50); color: var(--rose); border-color: var(--rose-100); cursor: not-allowed; } .slot.free:hover { background: var(--green-50); border-color: var(--green-100); color: var(--green); transform: translateY(-1px) scale(1.04); } .slot.free.selected { background: var(--primary); border-color: var(--primary); color: #fff; } /* ============================================================ Modal ============================================================ */ .modal-overlay { /* 2026-08-10 (davomi #31) — macOS "sheet"-uslubidagi engil xiralashtirish (backdrop-filter) qo'shildi — avvalgi qattiq, aniq qora parda o'rniga yumshoqroq, orqa fonni xiralashtiradigan frosted-glass hissi. */ position: fixed; inset: 0; background: rgba(23,21,43,0.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display:flex; align-items:center; justify-content:center; z-index: 100; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .18s ease; } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateY(10px) scale(.97); transition: transform .22s cubic-bezier(.34,1.56,.64,1); } .modal-overlay.open .modal { transform: translateY(0) scale(1); } /* Pomodoro settings — a small anchored popover (top-right, near the topbar icon that opens it) instead of a centered dimmed modal: no backdrop, and the box itself is capped much narrower than the default .modal. Reuses the same wlOpenModal()/wlCloseModal()/wlInitModals() plumbing (backdrop click still closes it — the overlay still spans the full screen, just invisible) so no JS changes were needed, only layout. */ .wl-pomo-modal-overlay { background: transparent; align-items: flex-start; justify-content: flex-end; padding: 76px 24px 20px 20px; } .wl-pomo-modal-overlay .modal { max-width: 280px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--border); } /* Avatar preview lightbox — click any photo avatar to see it large & circular */ .avatar-lightbox { background: rgba(15,13,28,0.78); } .avatar-lightbox-inner { position: relative; display:flex; flex-direction:column; align-items:center; gap: 16px; transform: translateY(10px) scale(.94); transition: transform .22s cubic-bezier(.34,1.56,.64,1); } .avatar-lightbox.open .avatar-lightbox-inner { transform: translateY(0) scale(1); } .avatar-lightbox-inner img { width: min(280px, 70vw); height: min(280px, 70vw); border-radius: 50%; object-fit: cover; border: 4px solid rgba(255,255,255,0.9); box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 0 4px var(--primary-100); } .avatar-lightbox-name { font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.4); } .avatar-lightbox-close { position: absolute; top: -18px; right: -18px; width: 34px; height: 34px; border-radius: 50%; border: none; background: #fff; color: var(--text); cursor: pointer; font-size: 18px; line-height: 1; display: grid; place-items: center; box-shadow: var(--shadow-lg); } .modal-head { display:flex; align-items:center; justify-content:space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); } .modal-head h3 { font-size: 15px; font-weight: 800; } .modal-close { border:none; background: var(--slate-50); width: 28px; height: 28px; border-radius: 50%; cursor:pointer; display:grid; place-items:center; color: var(--text-2); font-size: 17px; line-height: 1; } .modal-body { padding: 18px 20px; display:flex; flex-direction:column; gap: 13px; } .modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display:flex; justify-content:flex-end; gap: 8px; } /* 2026-08-10 (davomi #31) — GLOBAL forma-boshqaruv bazasi: ilgari FAQAT `.field` ICHIDAGI input/select/textarea uslublangan edi — sahifalar bo'ylab ko'plab filtr-select'lar, sana-maydonlari va h.k. `.field` o'rovchisisiz to'g'ridan-to'g'ri ishlatilgan (masalan hr-surveys.html filtrlari, hr-employees.html jadval-filtrlari) va shu sabab brauzerning XOM standart ko'rinishida (radius/padding/fon-ranggisiz) qolib ketgan edi — dizayn-tizimidan chetga chiqib, "macOS uslubi" maqsadiga zid edi. Endi BAZA darajasida (element-selektor, past spetsifiklik — `.field` ichidagi maxsus uslublarni HECH QACHON bekor qilmaydi) qo'llaniladi, shu bilan BIR MARTA yozilgan qoida BARCHA 46+ sahifadagi har qanday input/select/textarea'ga (maxsus klass bilan alohida uslublanmagan bo'lsa) avtomatik tarqaladi. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; font-family: inherit; background: var(--surface-2); color: var(--text); } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); background: var(--surface); /* macOS'ning yumshoq "halo" fokus-uzugi — qattiq chegara-rang o'zgarishi o'rniga (avvalgi holat), yorug' rangli soya-uzuk qo'shiladi. */ box-shadow: 0 0 0 3px var(--primary-50); } /* Har qanday ` o'rniga: qidiruv maydoni + bosiladigan taklif-chiplar (LinkedIn-uslubidagi ko'nikma-tanlash naqshi), tanlanganlar rangli chip+daraja bilan. ============================================================ */ .wl-skill-block { margin-bottom: 22px; } .wl-skill-block-title { font-size: 12.5px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .wl-skill-block-count { font-size: 10px; font-weight: 700; color: var(--muted); background: var(--slate-50); padding: 1px 7px; border-radius: var(--radius-pill); } .wl-skill-mine { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .wl-skill-mine-chip { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 13px; border-radius: var(--radius-pill); background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; } .wl-skill-mine-chip select { border: none; background: rgba(255,255,255,0.2); color: #fff; font-size: 10px; font-weight: 700; border-radius: var(--radius-pill); padding: 3px 4px; cursor: pointer; } .wl-skill-mine-chip select option { color: #17152b; } .wl-skill-remove { cursor: pointer; opacity: .85; display: flex; padding: 2px; border-radius: 50%; } .wl-skill-remove:hover { opacity: 1; background: rgba(255,255,255,0.18); } .wl-skill-remove svg { width: 11px; height: 11px; } .wl-skill-empty-hint { font-size: 11px; color: var(--muted); } .wl-skill-search-wrap { position: relative; margin-bottom: 10px; max-width: 320px; } .wl-skill-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--muted); pointer-events: none; } .wl-skill-search { width: 100%; padding: 8px 12px 8px 33px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 12px; background: var(--surface-2); color: var(--text); transition: border-color .15s ease, background .15s ease; box-sizing: border-box; } .wl-skill-search:focus { outline: none; border-color: var(--primary); background: var(--surface); } .wl-skill-suggestions { display: flex; flex-wrap: wrap; gap: 7px; } .wl-skill-suggest-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 13px; border-radius: var(--radius-pill); border: 1.5px dashed var(--border-strong); background: var(--surface); color: var(--text-2); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease; } .wl-skill-suggest-chip:hover { border-color: var(--primary); color: var(--primary-700); background: var(--primary-50); transform: translateY(-1px); } .wl-skill-suggest-chip.wl-hidden { display: none; } /* ============================================================ Profil wizard (Account sahifasi + HR tahrirlash oynasi) — node-node, o'ngga qarab bosqichlar. Kichik ekranda gorizontal skroll bilan. ============================================================ */ .wl-pw-steps { display: flex; align-items: flex-start; gap: 0; margin-bottom: 26px; overflow-x: auto; padding-bottom: 4px; } .wl-pw-step { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; width: 92px; text-align: center; } .wl-pw-step-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--slate-100); color: var(--muted); font-size: 12px; font-weight: 800; border: 2px solid transparent; transition: all .15s ease; } .wl-pw-step-dot svg { width: 14px; height: 14px; } .wl-pw-step.active .wl-pw-step-dot { background: var(--primary-50); color: var(--primary); border-color: var(--primary); } .wl-pw-step.done .wl-pw-step-dot { background: var(--green-100); color: var(--green); } .wl-pw-step-label { font-size: 10.5px; font-weight: 700; color: var(--text-2); line-height: 1.4; } .wl-pw-step.active .wl-pw-step-label { color: var(--primary-700); } .wl-pw-step-frac { font-size: 9.5px; font-weight: 600; color: var(--muted); } .wl-pw-step-line { flex: 1; height: 2px; background: var(--border); margin: 15px 2px 0; min-width: 16px; } .wl-pw-panel { min-height: 160px; } .wl-pw-nav { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); } /* ============================================================ Misc ============================================================ */ .locked-note { display:flex; align-items:center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 10px 12px; background: var(--slate-50); border-radius: var(--radius-sm); } .locked-note svg { width: 14px; height: 14px; } /* Copilot chat */ .chat-wrap { display:flex; flex-direction:column; height: 62vh; } .chat-log { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap: 14px; padding: 4px 2px 10px; } .chat-row { display:flex; gap: 10px; max-width: 72%; } .chat-row.user { align-self: flex-end; flex-direction: row-reverse; } .chat-bubble { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; line-height: 1.5; } .chat-row.bot .chat-bubble { background: var(--surface-2); border: 1px solid var(--border); border-top-left-radius: 4px; } .chat-row.user .chat-bubble { background: var(--primary); color: #fff; border-top-right-radius: 4px; } .chat-input-row { display:flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); } .chat-input-row input { flex:1; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 10px 16px; font-size: 13px; background: var(--surface-2); } .chat-input-row input:focus { outline:none; border-color: var(--primary); background: var(--surface); } .chat-suggest { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 12px; } .chat-suggest button { border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; } .chat-suggest button:hover { border-color: var(--primary-100); background: var(--primary-50); color: var(--primary-700); } .chat-header { display:flex; align-items:center; gap:10px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border); } .chat-header .name { font-size:13.5px; font-weight:800; } .chat-header .status { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--green); font-weight:700; margin-top:1px; } .chat-header .status .dot { width:6px; height:6px; border-radius:50%; background:var(--green); } .chat-time { font-size:10px; color: var(--muted); margin-top:4px; } .chat-row.user .chat-time { text-align:right; } .chat-typing { display:inline-flex; gap:4px; align-items:center; padding:11px 15px; } .chat-typing span { width:6px; height:6px; border-radius:50%; background: var(--muted); animation: wl-typing-bounce 1.2s infinite ease-in-out; } .chat-typing span:nth-child(2) { animation-delay: .15s; } .chat-typing span:nth-child(3) { animation-delay: .3s; } @keyframes wl-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } /* Compass Copilot — dedicated professional AI-assistant layout (wl-cp-* prefix; independent of the shared .chat-* classes above, which stay used as-is elsewhere: my-team.html, hr-recruiting.html candidate chat). */ .wl-cp-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 76vh; } .wl-cp-header { display:flex; align-items:center; gap:12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .wl-cp-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), #8a5cf6); box-shadow: 0 0 0 3px var(--primary-50), 0 2px 10px rgba(91,61,240,0.25); } .wl-cp-header-name { font-size: 13.5px; font-weight: 800; } .wl-cp-header-status { display:flex; align-items:center; gap:5px; font-size: 11px; color: var(--green); font-weight: 700; margin-top: 1px; } .wl-cp-header-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .wl-cp-new { margin-left: auto; } .wl-cp-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; } .wl-cp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 20px; } .wl-cp-empty-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), #8a5cf6); box-shadow: 0 4px 20px rgba(91,61,240,0.3); } .wl-cp-empty-title { font-size: 16px; font-weight: 800; } .wl-cp-empty-sub { font-size: 12.5px; color: var(--text-2); max-width: 360px; } .wl-cp-prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; width: 100%; max-width: 560px; margin-top: 6px; } .wl-cp-prompt-card { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .wl-cp-prompt-card:hover { border-color: var(--primary-100); background: var(--primary-50); color: var(--primary-700); transform: translateY(-1px); } .wl-cp-prompt-card .ico { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: var(--primary-50); color: var(--primary); } .wl-cp-row { display: flex; gap: 10px; max-width: 82%; } .wl-cp-row.user { align-self: flex-end; flex-direction: row-reverse; } .wl-cp-row.bot { align-self: flex-start; } .wl-cp-row .wl-cp-avatar-sm { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), #8a5cf6); } .wl-cp-content { min-width: 0; } .wl-cp-row.user .wl-cp-bubble { background: var(--primary); color: #fff; border-radius: var(--radius); border-top-right-radius: 4px; padding: 10px 14px; font-size: 13px; line-height: 1.55; } .wl-cp-row.bot .wl-cp-text { font-size: 13px; line-height: 1.65; color: var(--text); padding-top: 3px; } .wl-cp-actions { display: flex; gap: 4px; margin-top: 6px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); } .wl-cp-row.bot:hover .wl-cp-actions { opacity: 1; } .wl-cp-action-btn { border: none; background: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; font-size: 13px; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .wl-cp-action-btn:hover { background: var(--surface-2); color: var(--text-2); } .wl-cp-action-btn.active { color: var(--primary); } .wl-cp-time { font-size: 10px; color: var(--muted); margin-top: 4px; } .wl-cp-row.user .wl-cp-time { text-align: right; } .wl-cp-typing-label { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; } .wl-cp-input-bar { flex-shrink: 0; padding: 14px 20px 18px; border-top: 1px solid var(--border); } .wl-cp-input-row { display: flex; align-items: flex-end; gap: 10px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); padding: 8px 8px 8px 16px; transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .wl-cp-input-row:focus-within { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-50); } .wl-cp-input-row textarea { flex: 1; border: none; background: none; resize: none; font-family: inherit; font-size: 13.5px; line-height: 1.5; padding: 6px 0; max-height: 120px; } .wl-cp-input-row textarea:focus { outline: none; } .wl-cp-send-btn { width: 34px; height: 34px; border-radius: 50%; border: none; flex-shrink: 0; display: grid; place-items: center; background: var(--primary); color: #fff; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .wl-cp-send-btn:hover { background: var(--primary-700); transform: scale(1.05); } .wl-cp-send-btn:disabled { background: var(--border-strong); cursor: not-allowed; transform: none; } .wl-cp-hint { text-align: center; font-size: 10.5px; color: var(--muted); margin-top: 8px; } .divider { height: 1px; background: var(--border); margin: 16px 0; } /* Security cameras — building floors with clickable camera icons + status panel */ .cam-btn { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius: var(--radius-pill); border:1px solid var(--border); background: var(--surface); cursor:pointer; font-size:11.5px; font-weight:700; color: var(--text-2); transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; } .cam-btn svg { width:14px; height:14px; } .cam-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .cam-btn .status-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; } .cam-btn.online .status-dot { background: var(--green); } .cam-btn.offline .status-dot { background: var(--muted); } .cam-btn.selected { background: var(--primary); border-color: var(--primary); color: #fff; } .cam-btn.selected .status-dot { background: #fff; } .cam-feed { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: linear-gradient(160deg, #1a1830, #2b2550); display:flex; flex-direction:column; align-items:center; justify-content:center; color: rgba(255,255,255,0.55); gap:10px; position: relative; overflow:hidden; } .cam-feed svg { width: 40px; height: 40px; } .cam-feed .live-badge { position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:6px; background: rgba(0,0,0,0.45); padding:4px 10px; border-radius: var(--radius-pill); font-size:10.5px; font-weight:800; color:#fff; } .cam-feed .live-badge .dot { width:6px; height:6px; border-radius:50%; background: var(--rose); animation: wl-typing-bounce 1.4s infinite; } .cam-feed.offline { background: linear-gradient(160deg, #2a2a2a, #1a1a1a); } /* Camera grid tiles ("Barcha kameralar" tab) */ .cam-tile { cursor: pointer; transition: transform .15s ease; } .cam-tile:hover { transform: translateY(-2px); } .cam-tile .cam-feed { aspect-ratio: 16 / 10; margin-bottom: 8px; } .cam-tile .cam-feed svg { width: 26px; height: 26px; } /* Enlarge button overlaid on the selected-camera feed panel */ .cam-feed .enlarge-btn { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.45); border: none; color: #fff; cursor: pointer; display: grid; place-items: center; } .cam-feed .enlarge-btn svg { width: 15px; height: 15px; } .cam-feed .enlarge-btn:hover { background: rgba(0,0,0,0.65); } /* Camera enlarge modal — zoom */ .cam-zoom-wrap { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; background: #0f0d1c; } .cam-zoom-wrap .cam-feed { width: 100%; height: 100%; aspect-ratio: auto; transition: transform .15s ease; } .cam-zoom-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; } .cam-zoom-controls .btn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; } .cam-zoom-controls span { font-size: 12.5px; font-weight: 700; min-width: 44px; text-align: center; } /* Project stage pipeline — Not started -> Analysis -> Coding -> Done */ .stage-pipeline { display:flex; align-items:center; gap: 0; } .stage-pipeline .seg { display:flex; align-items:center; flex:1; } .stage-pipeline .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--slate-100); flex-shrink: 0; } .stage-pipeline .dot.done { background: var(--green); } .stage-pipeline .dot.current { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); } .stage-pipeline .line { flex: 1; height: 2px; background: var(--slate-100); margin: 0 2px; } .stage-pipeline .line.done { background: var(--green); } .stage-labels { display:flex; justify-content:space-between; margin-top: 6px; } .stage-labels span { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; } /* Compass-spin loading transition — used for page-load flashes and save/update/delete/load waits, so every "please wait" moment in the platform reinforces the Compas brand. */ .wl-loader-overlay { position: fixed; inset: 0; background: transparent; z-index: 500; display:flex; align-items:center; justify-content:center; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .wl-loader-overlay.show { opacity: 1; pointer-events: auto; } .wl-loader-overlay.hide { opacity: 0; pointer-events: none; } .wl-loader-box { width: 76px; height: 76px; border-radius: var(--radius-lg); background: rgba(23, 21, 43, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-lg); } .wl-loader-compass { width: 32px; height: 32px; color: #fff; animation: wl-compass-spin .9s linear infinite; } @keyframes wl-compass-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .wl-btn-spinner { width: 14px; height: 14px; animation: wl-compass-spin .9s linear infinite; } /* ============================================================ News feed — birthdays, weddings, anniversaries, announcements ============================================================ */ .news-card { padding-top: 0; overflow: hidden; } .news-strip { height: 5px; margin: 0 -20px 16px; background: var(--primary); } .news-card[data-type="birthday"] .news-strip { background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .news-card[data-type="wedding"] .news-strip { background: linear-gradient(90deg, var(--rose), #ff8fa8); } .news-card[data-type="anniversary"] .news-strip { background: linear-gradient(90deg, var(--gold), var(--accent-2)); } .news-card[data-type="company"] .news-strip { background: linear-gradient(90deg, var(--primary), #8a5cf6); } .news-head { display:flex; align-items:center; gap:14px; margin-bottom: 12px; } .news-hero-avatar .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent-100); } .news-card[data-type="wedding"] .news-hero-avatar .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--rose-100); } .news-card[data-type="anniversary"] .news-hero-avatar .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--amber-100); } .news-type-ico { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; display:grid; place-items:center; background: linear-gradient(135deg, var(--primary), #8a5cf6); color: #fff; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary-100); } .news-type-ico svg { width: 24px; height: 24px; } .news-title { font-size: 15px; font-weight: 800; line-height: 1.4; letter-spacing: -0.005em; } .news-meta { display:flex; align-items:center; gap:5px; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 3px; } .news-meta svg { width: 12px; height: 12px; } .news-text { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0 0 12px; } .news-sticker { font-size: 20px; line-height: 1; margin-left: 6px; } .news-image { display: block; width: calc(100% + 40px); margin: 0 -20px 12px; max-height: 360px; object-fit: cover; } .wl-sticker-picker { display: flex; flex-wrap: wrap; gap: 8px; } .wl-sticker-opt { font-size: 20px; padding: 6px 11px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .wl-sticker-opt:hover { transform: translateY(-2px); } .wl-sticker-opt.selected { border-color: var(--primary); background: var(--primary-50); } .news-actions { display:flex; align-items:center; gap: 12px; padding: 6px 0; flex-wrap: wrap; } .news-react { display:flex; align-items:center; gap:6px; border:none; background:none; cursor:pointer; color: var(--text-3); font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-pill); transition: background .15s ease, color .15s ease, transform .12s ease; } .news-react svg { width: 16px; height: 16px; transition: fill .15s ease, stroke .15s ease; } .news-react:hover { background: var(--accent-50); color: var(--accent-text); } .news-react.active { background: var(--accent-50); color: var(--accent-text); } .news-react.active svg { fill: var(--accent); stroke: var(--accent); } .news-react:active { transform: scale(0.92); } .news-liked-by { display:flex; align-items:center; gap:8px; } .news-liked-by .avatar-stack .avatar { width:22px; height:22px; border: 2px solid var(--surface); } .news-liked-by span { font-size: 11.5px; color: var(--muted); font-weight: 600; } .news-comment-count { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 600; } .news-comments { display:flex; flex-direction:column; gap: 12px; padding-top: 12px; } .news-view-all-comments { display:block; border:none; background:none; padding:0; margin-bottom: 10px; font-size: 12px; font-weight: 700; color: var(--text-3); cursor: pointer; } .news-view-all-comments:hover { color: var(--primary-700); } .news-comment { display:flex; gap: 10px; } .news-comment.reply { margin-left: 38px; } .news-comment-body { flex:1; background: var(--surface-2); border-radius: var(--radius); padding: 8px 12px; min-width: 0; } .news-comment-head { display:flex; align-items:center; gap:8px; font-size: 12px; margin-bottom: 2px; } .news-comment-head b { font-weight: 700; } .news-comment-body p { font-size: 12.5px; color: var(--text-2); line-height: 1.45; } .news-reply-btn { border:none; background:none; padding:0; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--primary-700); cursor: pointer; } .news-reply-btn:hover { text-decoration: underline; } /* G'oyalar (ideas.html) — reaksiya qo'shish tugmasi FAQAT kartaga sichqoncha olib borilganda (yoki tanlangan/ochiq bo'lsa doim) ko'rinadi, pastki o'ng burchakda — "card ustiga olib borsam pastida o'ng ga qarab strelka chiqadi" talabiga mos. `.idea-card` konteyneri `position:relative`ga ega bo'lishi shart (absolyut joylashuv shundan hisoblanadi). */ .idea-card { position: relative; } /* 2026-08-10 (davomi #29): izoh bo'limi ochilganda (`.commenting`, izoh yozish maydoni ko'rinadigan holat) reaksiya-tugmasi BUTUNLAY yashiriladi — foydalanuvchi izoh yozish uchun kartaning pastki qismiga sichqonchani olib borganda, u ALI kartaning ustida bo'lgani uchun reaksiya-tugmasi "chiqaverardi", bu chalg'ituvchi edi. */ .idea-card.commenting .idea-reaction-zone { display: none; } .idea-reaction-zone { position: absolute; right: 16px; bottom: 16px; } .idea-reaction-toggle { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, background .15s ease; } .idea-card:hover .idea-reaction-toggle, .idea-reaction-toggle.open { opacity: 1; transform: translateY(0); } .idea-reaction-toggle.open { background: var(--primary-50); color: var(--primary-700); border-color: var(--primary); } .idea-reaction-toggle svg { width: 15px; height: 15px; } /* 2026-08-10 (davomi #28) yana tuzatildi — ikkita real xato bor edi: (1) panel toggle tugmasidan 10px BO'SHLIQ bilan ochilardi — sichqoncha shu bo'shliqni kesib o'tayotganda, LAHZALIK hech narsa hover qilinmagan holatga tushib qolardi (panel pointer-events:none'ga qaytardi va ko'zdan g'oyib bo'lardi, hatto sichqoncha hali harakatlanayotgan bo'lsa ham — "ustiga olib borganimda bosmasam yo'qolib qolayabdi"). Tuzatish: bo'shliq NOLGA tushirildi (`left: 100%` — chegaralar tekkan holda) — sichqoncha toggle'dan panelga o'tayotganda BIR PIKSEL ham "hech narsa hover qilinmagan" oraliq bo'lmaydi (panel DOM'da zonaning FARZANDI, shuning uchun uni hover qilish HAM zonani hover qilish hisoblanadi — CSS ota-bola hover-tarqalishi — lekin FAQAT bo'shliq yo'q bo'lsagina uzluksiz ishlaydi). (2) panel endi CHAP emas, O'NG tomonga ochiladi (foydalanuvchi aniq shuni so'radi). */ .idea-reaction-picker { position: absolute; left: 100%; bottom: 0; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border-radius: 22px; padding: 8px 6px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateX(-6px); transition: opacity .15s ease, transform .15s ease; } .idea-reaction-zone:hover .idea-reaction-picker, .idea-reaction-picker:hover, .idea-reaction-picker.open { opacity: 1; pointer-events: auto; transform: translateX(0); } .idea-reaction-picker .wl-sticker-opt { display: block; } .idea-reaction-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .idea-reaction-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); cursor: default; } .idea-reaction-pill.mine { border-color: var(--primary); background: var(--primary-50); color: var(--primary-700); } .news-composer { display:flex; align-items:center; gap: 10px; margin-top: 14px; } .news-composer input { flex:1; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 12.5px; background: var(--surface-2); } .news-composer input:focus { outline:none; border-color: var(--primary); background: var(--surface); } /* Lightweight data table (HR pages) */ /* 2026-08-10 (davomi #31) — macOS Finder/Mail ro'yxat-tili: xiraroq ajratuvchi chiziqlar (`--border-faint`), ozgina ko'proq bo'shliq, va qatorga hover qilinganda ORQA FON butun kenglikka emas, balki BIRINCHI/OXIRGI katakning burchaklari dumaloqlanib, "ichkariga torтilgan pill" hissi beradi (`border-collapse:collapse` bilan ham ishlaydigan, hujayra-darajasidagi radius-trik). */ .wl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .wl-table th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0 12px 10px; border-bottom: 1px solid var(--border-faint); } .wl-table td { padding: 12px; border-bottom: 1px solid var(--border-faint); vertical-align: middle; } .wl-table tbody tr:last-child td { border-bottom: none; } .wl-table tbody tr:hover { background: var(--surface-2); } .wl-table tbody tr:hover td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .wl-table tbody tr:hover td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .wl-table td.num, .wl-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .wl-table.lg th { font-size: 12px; } .wl-table.lg td { font-size: 14px; padding: 13px 12px; } .file-drop-row { display:flex; align-items:center; gap: 12px; padding: 14px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); } .file-drop-row:hover { border-color: var(--primary); } .file-drop.drag-over, .file-drop-row.drag-over { border-color: var(--primary); background: var(--primary-50); border-style: solid; } .file-drop.has-file, .file-drop-row.has-file { border-style: solid; border-color: var(--green-100); background: var(--green-50); } /* Daily reminder banner (dashboard) */ .wl-banner { display:flex; align-items:center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--primary-50); border: 1px solid var(--primary-100); margin-bottom: 16px; } .wl-banner .ico { width: 32px; height: 32px; border-radius: 9px; background: var(--surface); color: var(--primary-700); display:grid; place-items:center; flex-shrink:0; } .wl-banner .txt { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--primary-700); } .wl-banner .close { border:none; background:none; cursor:pointer; color: var(--primary-700); opacity: 0.7; font-size: 16px; line-height: 1; flex-shrink: 0; } .wl-banner .close:hover { opacity: 1; } .timeline { display:flex; flex-direction:column; gap: 0; } .tl-item { display:flex; gap: 14px; padding-bottom: 20px; position: relative; } .tl-item::before { content:""; position:absolute; left:15px; top: 32px; bottom: 0; width: 1px; background: var(--border); } .tl-item:last-child::before { display:none; } .tl-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-50); color: var(--primary-700); display:grid; place-items:center; flex-shrink:0; } .tl-dot svg { width: 15px; height: 15px; } .tl-body { flex: 1; } .tl-title { font-size: 13px; font-weight: 700; } .tl-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .tl-text { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.5; } /* ============================================================ Compass Owner — Subscription Plan cards + Organization cards (owner/plans.html, owner/organizations.html, 2026-08-08). Same "raised card, colored top accent, ghost corner controls" language as the redesigned Pomodoro card — one consistent visual system across the app rather than each new feature inventing its own. ============================================================ */ .wl-plan-card, .wl-org-card { position: relative; overflow: hidden; margin: 0; cursor: pointer; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .wl-plan-card:hover, .wl-org-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary-100); } .wl-plan-card::before, .wl-org-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), #8a5cf6); } .wl-org-card.status-cancelled::before { background: linear-gradient(90deg, var(--rose), #d1476f); } .wl-owner-card-controls { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; gap: 2px; } .wl-owner-card-controls .icon-btn { width: 28px; height: 28px; border: none; background: transparent; color: var(--text-3); opacity: .6; transition: opacity var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .wl-owner-card-controls .icon-btn:hover { opacity: 1; background: rgba(23,21,43,0.06); color: var(--text); } .wl-owner-card-controls .icon-btn svg { width: 13px; height: 13px; } .wl-plan-card-price { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 14px; } .wl-plan-card-price .per { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: 0; margin-left: 2px; } .wl-plan-feature { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .wl-plan-feature-label { font-size: 10.5px; font-weight: 700; color: var(--text-3); width: 62px; flex-shrink: 0; } .wl-plan-feature-track { flex: 1; height: 6px; border-radius: 99px; background: var(--slate-100); overflow: hidden; } .wl-plan-feature-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primary), #8a5cf6); } .wl-plan-feature-val { font-size: 10px; font-weight: 800; color: var(--text-2); width: 30px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; } .wl-plan-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .wl-org-card-head { display: flex; align-items: center; gap: 12px; padding-right: 24px; } .wl-org-avatar { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0; } .wl-org-meta-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); margin-top: 8px; } .wl-org-meta-row svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--muted); } .wl-org-plan-select { width: 100%; margin-top: 4px; padding: 7px 10px; border-radius: var(--radius-pill); border: 1.5px solid var(--primary-100); background: var(--primary-50); color: var(--primary-700); font-size: 11.5px; font-weight: 800; cursor: pointer; } .wl-org-card-actions { display: flex; gap: 8px; margin-top: 14px; } .wl-org-card-actions .btn { flex: 1; } @media (max-width: 1100px) { .grid.dash { grid-template-columns: 1fr; } .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } .people-grid { grid-template-columns: repeat(2, 1fr); } }