@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ============================================================================ THEME TOKENS — light (default) + dark ([data-theme="dark"] on ) The sidebar is always the brand-navy "chrome" (see .sidebar below) — the content area (cards, tables, forms, modals) fully switches theme. ============================================================================ */ :root { --bg:#F6F7FB; --sur:#FFFFFF; --sur2:#F1F2F6; --sur3:#E9EBF2; --brd:#E5E7EF; --tx:#12141C; --tx2:#5B5F72; --tx3:#9296A6; --a:#4A55E8; --a-ink:#FFFFFF; --a2:#DD9A2E; --a3:#17A96B; --red:#E5484D; --pur:#8B5CF6; --teal:#0FB5A6; --org:#F97316; --r:10px; --rl:16px; --rxl:20px; --sh-sm:0 1px 2px rgba(16,24,40,.05); --sh-md:0 4px 14px rgba(16,24,40,.07); --sh-lg:0 16px 44px rgba(16,24,40,.14); --sidebar-w:246px; color-scheme: light; } [data-theme="dark"] { --bg:#0E1015; --sur:#171923; --sur2:#1D2029; --sur3:#262A36; --brd:#2A2E3B; --tx:#F3F4F8; --tx2:#AFB2C4; --tx3:#767A8C; --a:#7C8BFF; --a-ink:#0E1015; --a2:#F0B559; --a3:#3ADD98; --red:#FF6F73; --pur:#B394FF; --teal:#37DCCB; --org:#FDA556; --sh-sm:0 1px 2px rgba(0,0,0,.3); --sh-md:0 6px 18px rgba(0,0,0,.35); --sh-lg:0 20px 50px rgba(0,0,0,.5); color-scheme: dark; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-font-smoothing:antialiased} body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--tx);font-size:14px;line-height:1.6;transition:background .2s ease,color .2s ease} ::selection{background:var(--a);color:var(--a-ink)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--brd);border-radius:10px} ::-webkit-scrollbar-track{background:transparent} /* ============================================================================ APP SHELL — sidebar + main content ============================================================================ */ .app-shell{display:flex;min-height:100vh} /* ── SIDEBAR (always brand-navy, both themes) ── */ .sidebar{ width:var(--sidebar-w);flex-shrink:0;position:sticky;top:0;height:100vh; background:linear-gradient(185deg,#171B27 0%,#10121B 100%); display:flex;flex-direction:column;z-index:300; border-right:1px solid rgba(255,255,255,.06); } .sidebar-header{padding:22px 20px 18px;display:flex;align-items:center} .brand-wordmark-img{height:22px;width:auto;display:block} .sidebar-nav{flex:1;overflow-y:auto;padding:6px 12px;display:flex;flex-direction:column;gap:2px} .tnav-link{ display:flex;align-items:center;gap:10px;text-align:left;text-decoration:none; color:rgba(255,255,255,.62);font-size:13.5px;font-weight:500; padding:9px 12px;border-radius:10px;white-space:nowrap; border:none;background:none;cursor:pointer;font-family:'Inter',sans-serif; transition:background .15s ease,color .15s ease; } .tnav-link:hover{background:rgba(255,255,255,.06);color:#fff} .tnav-link.active{background:var(--a);color:var(--a-ink);box-shadow:var(--sh-sm)} .sidebar-footer{padding:14px 16px 18px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:10px} .sidebar-footer-row{display:flex;align-items:center;gap:8px} .me-badge{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.08);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;display:flex;align-items:center;gap:7px} .me-badge span{overflow:hidden;text-overflow:ellipsis} .me-badge .avatar-img,.me-badge .avatar-fallback{flex-shrink:0} .bell{position:relative;cursor:pointer;color:rgba(255,255,255,.75);font-size:16px;background:rgba(255,255,255,.06);border:none;width:32px;height:32px;border-radius:9px;flex-shrink:0;transition:background .15s} .bell:hover{background:rgba(255,255,255,.12);color:#fff} .bell-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--red);display:none;border:2px solid #171B27} .bell-dot.show{display:block} .logout-btn{font-size:12px;font-weight:600;padding:7px 12px;border-radius:9px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:all .15s;width:100%} .logout-btn:hover{background:rgba(255,255,255,.12);color:#fff} /* Theme toggle — sliding pill switch */ .theme-toggle{ display:flex;align-items:center;gap:8px;width:100%;cursor:pointer; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08); border-radius:10px;padding:6px 10px;color:rgba(255,255,255,.75);font-size:12px;font-weight:600; font-family:'Inter',sans-serif;transition:background .15s; } .theme-toggle:hover{background:rgba(255,255,255,.11)} .theme-toggle-track{position:relative;width:34px;height:19px;border-radius:20px;background:rgba(255,255,255,.15);flex-shrink:0;transition:background .2s} .theme-toggle-knob{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;font-size:9px} [data-theme="dark"] .theme-toggle-track{background:var(--a)} [data-theme="dark"] .theme-toggle-knob{transform:translateX(15px)} /* Mobile: hamburger + off-canvas sidebar */ .mobile-topbar{display:none} .sidebar-backdrop{display:none} /* ── MAIN CONTENT ── */ .main-content{flex:1;min-width:0;max-width:1080px;margin:0 auto;padding:2.25rem 2rem 6rem;width:100%} /* Behzod skrinshoti (2026-07-22, band 7): Loyihalar jadvali uchun 1080px o'qish-kengligi juda tor edi — keng ekranlarda ikkala tomonda ~644px bo'sh joy qolib, jadval kerakidan ko'ra ko'proq gorizontal scroll talab qilardi. Faqat Loyihalar bo'limi uchun to'liq kenglikni ishlatamiz — boshqa bo'limlar (matn/forma asosidagi) o'qish-kengligini saqlab qoladi. main.js gotoSection() shu klassni #mainContent'ga qo'yadi/olib tashlaydi. */ .main-content.wide-content{max-width:none} section{display:none} section.active{display:block} /* ── PAGE HEADER (was .hero) — subtle tinted banner, modern & light ── */ .hero{ border-radius:var(--rxl);padding:1.6rem 1.9rem;margin-bottom:1.5rem;position:relative;overflow:hidden; background:var(--sur);border:1px solid var(--brd);box-shadow:var(--sh-sm); } .hero::before{content:'';position:absolute;inset:0;opacity:.07;background:var(--hero-tone,var(--a))} .hero-blue{--hero-tone:var(--a)} .hero-green{--hero-tone:var(--a3)} .hero-amber{--hero-tone:var(--a2)} .hero-pur{--hero-tone:var(--pur)} .hero-tag{position:relative;display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb, var(--hero-tone,var(--a)) 14%, transparent);color:var(--hero-tone,var(--a));border-radius:20px;font-size:11px;font-weight:700;padding:4px 12px;margin-bottom:.7rem;letter-spacing:.3px} .hero h1{position:relative;font-family:'Inter',sans-serif;font-weight:800;font-size:1.55rem;letter-spacing:-.01em;line-height:1.25;color:var(--tx);margin-bottom:.35rem} .hero p{position:relative;color:var(--tx2);font-size:13px;max-width:620px} h2.stitle{font-weight:800;font-size:1.3rem;color:var(--tx);margin-bottom:.3rem;letter-spacing:-.01em} .sdesc{color:var(--tx2);margin-bottom:1.5rem;font-size:13px} /* ── CARDS ── */ .card{background:var(--sur);border:1px solid var(--brd);border-radius:var(--rl);padding:1.3rem 1.5rem;margin-bottom:1rem;box-shadow:var(--sh-sm);transition:box-shadow .15s} .card h2{font-size:.98rem;font-weight:700;color:var(--tx);margin-bottom:.2rem;letter-spacing:-.005em} .card h3{font-size:.8rem;color:var(--tx2);font-weight:400;margin-bottom:.85rem} .card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.25rem} /* ── STAT GRID ── */ .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px} .stat-card{background:var(--sur);border:1px solid var(--brd);border-radius:var(--rl);padding:16px 18px;box-shadow:var(--sh-sm);transition:box-shadow .15s,transform .15s} .stat-card:hover{box-shadow:var(--sh-md);transform:translateY(-1px)} .stat-lbl{font-size:10.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-weight:600} .stat-val{font-size:24px;font-weight:800;color:var(--tx);line-height:1;letter-spacing:-.02em} .stat-sub{font-size:11px;margin-top:6px;color:var(--tx2)} .c-green{color:var(--a3)} .c-red{color:var(--red)} .c-blue{color:var(--a)} .c-amber{color:var(--a2)} .c-pur{color:var(--pur)} /* ── TABLES ── */ .tw{overflow-x:auto;border-radius:var(--r);border:1px solid var(--brd)} table{width:100%;border-collapse:collapse;font-size:13px} th{background:var(--sur2);border:none;border-bottom:1px solid var(--brd);padding:9px 13px;text-align:left;font-weight:700;color:var(--tx2);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px} td{border:none;border-bottom:1px solid var(--brd);padding:10px 13px;vertical-align:middle;color:var(--tx)} /* MUHIM: bu qoida bo'lmasa, brauzer ustun matnini konteyner kengligiga moslab "siqib" ko'rsatadi va .tw'ning overflow-x:auto'si HECH QACHON ishga tushmaydi (jadval hech qachon konteynerdan "kattaroq" bo'lib qolmaydi) — natijada oxirgi ustunlar ekrandan tashqarida "kesilib" qoladi (Behzod bag-hisoboti, 2026-07-21: "BAJARILDI" ustuni va undan keyingisi, shu jumladan ichki "vazifa" sub-jadvali). Avvalgi tuzatish faqat tor .tv-grid-wrap/.tv-table (Loyihalar asosiy jadvali) uchun ishlagan, ichki sub-jadvallar (renderProjectTasksInline/renderProjectPayrollInline, oddiy .tw ishlatadi) buni olmagan edi — endi BARCHA .tw jadvallariga umumiy qo'llaniladi. */ th,td{white-space:nowrap} tr:last-child td{border-bottom:none} tbody tr{transition:background .12s} tbody tr:hover td{background:var(--sur2)} /* ── BADGES ── */ .badge{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;border:none;cursor:default;font-family:'Inter',sans-serif;letter-spacing:.1px} .b-blue{background:color-mix(in srgb, var(--a) 15%, transparent);color:var(--a)} .b-green{background:color-mix(in srgb, var(--a3) 15%, transparent);color:var(--a3)} .b-amber{background:color-mix(in srgb, var(--a2) 18%, transparent);color:var(--a2)} .b-red{background:color-mix(in srgb, var(--red) 15%, transparent);color:var(--red)} .b-pur{background:color-mix(in srgb, var(--pur) 15%, transparent);color:var(--pur)} .b-gray{background:var(--sur2);color:var(--tx2)} .b-teal{background:color-mix(in srgb, var(--teal) 18%, transparent);color:var(--teal)} .b-org{background:color-mix(in srgb, var(--org) 18%, transparent);color:var(--org)} /* ── PROGRESS BARS ── */ .prog-wrap{margin:4px 0} .prog-bg{height:7px;background:var(--sur3);border-radius:4px;overflow:hidden;width:90px;display:inline-block;vertical-align:middle} .prog-fill{height:100%;border-radius:4px;transition:width .4s} .pf-blue{background:var(--a)} .pf-green{background:var(--a3)} .pf-amber{background:var(--a2)} .pf-red{background:var(--red)} /* ── CALLOUTS ── */ .hl{border-left:3px solid var(--a2);background:color-mix(in srgb, var(--a2) 8%, var(--sur));border-radius:0 var(--r) var(--r) 0;padding:.9rem 1.1rem;margin:.75rem 0;font-size:13px} .hl strong{color:var(--a2)} .tip{background:color-mix(in srgb, var(--a) 9%, var(--sur));border-radius:var(--r);padding:10px 14px;font-size:12.5px;color:var(--a);margin:.6rem 0;display:flex;gap:7px;align-items:flex-start} .tip-red{background:color-mix(in srgb, var(--red) 9%, var(--sur));color:var(--red)} .tip-green{background:color-mix(in srgb, var(--a3) 9%, var(--sur));color:var(--a3)} .tip-amber{background:color-mix(in srgb, var(--a2) 10%, var(--sur));color:var(--a2)} .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} @media(max-width:640px){.g2,.g3{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}} /* ── KPI ROWS ── */ .kpi-row{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--brd);font-size:13px;flex-wrap:wrap} .kpi-row:last-child{border-bottom:none} .kpi-name{flex:1;font-weight:600;min-width:160px;color:var(--tx)} .kpi-bar-wrap{flex:2;display:flex;align-items:center;gap:8px;min-width:140px} .kpi-bar-bg{flex:1;height:8px;background:var(--sur3);border-radius:4px;overflow:hidden} .kpi-bar-fill{height:100%;border-radius:4px} .kpi-pct{min-width:36px;text-align:right;font-weight:700;font-size:12.5px} /* ── MINI NAV (sub-tabs within a section) ── */ .mnav{display:flex;gap:6px;margin-bottom:1.25rem;overflow-x:auto;padding-bottom:2px} .mn{background:var(--sur);border:1px solid var(--brd);border-radius:20px;padding:6px 15px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--tx2);white-space:nowrap;font-family:'Inter',sans-serif;transition:all .15s;box-shadow:var(--sh-sm)} .mn.active,.mn:hover{background:var(--a);color:var(--a-ink);border-color:var(--a)} .flow{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:.5rem 0} .flow-item{padding:5px 12px;border-radius:var(--r);font-size:12.5px;font-weight:600;border:1px solid;cursor:default} .fl-wait{background:color-mix(in srgb, var(--a) 10%, var(--sur));color:var(--a);border-color:color-mix(in srgb, var(--a) 30%, var(--sur))} .fl-act{background:color-mix(in srgb, var(--a2) 12%, var(--sur));color:var(--a2);border-color:color-mix(in srgb, var(--a2) 30%, var(--sur))} .fl-rev{background:color-mix(in srgb, var(--pur) 12%, var(--sur));color:var(--pur);border-color:color-mix(in srgb, var(--pur) 30%, var(--sur))} .fl-done{background:color-mix(in srgb, var(--a3) 12%, var(--sur));color:var(--a3);border-color:color-mix(in srgb, var(--a3) 30%, var(--sur))} .fl-redo{background:color-mix(in srgb, var(--red) 12%, var(--sur));color:var(--red);border-color:color-mix(in srgb, var(--red) 30%, var(--sur))} .fl-arr{color:var(--tx3);font-size:12px} .chk{list-style:none} .chk li{padding:4px 0;font-size:13px;display:flex;gap:7px;align-items:flex-start} .chk li::before{content:'✓';color:var(--a3);font-weight:700;flex-shrink:0} .emp-card{background:var(--sur);border:1px solid var(--brd);border-radius:var(--r);padding:1rem} .emp-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;color:#fff} .emp-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:.75rem} .emp-name{font-weight:600;font-size:14px} .emp-pos{font-size:12px;color:var(--tx2)} /* ── FORMS / BUTTONS ── */ .btn{display:inline-flex;align-items:center;gap:6px;background:var(--a);color:var(--a-ink);border:none;border-radius:10px;padding:9px 17px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;box-shadow:var(--sh-sm)} .btn:hover{filter:brightness(1.07);box-shadow:var(--sh-md);transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn-sm{padding:6px 12px;font-size:11.5px;border-radius:8px} .btn-green{background:var(--a3)} .btn-red{background:var(--red)} .btn-gray{background:var(--sur2);color:var(--tx);box-shadow:none} .btn-gray:hover{background:var(--sur3)} .btn-outline{background:none;border:1px solid var(--brd);color:var(--tx2);box-shadow:none} .btn-outline:hover{border-color:var(--a);color:var(--a);background:color-mix(in srgb, var(--a) 6%, transparent)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none} /* ── DAVR-TANLASH PANELI (period filter) — segmented control uslubida. Hafta/Oy/Chorak/Yil bitta "quyi qoplama" ichida sirg'anadigan faol segment sifatida, alohida "Sanalarni tanlash" konturli tugma, va aniqlangan sana oralig'i alohida chip'da ko'rinadi (2026-07-20, Behzod so'rovi bilan qayta dizayn qilindi — ilgari oddiy pill-tugmalar qatori edi). ── */ .pf-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pf-seg{display:inline-flex;background:var(--sur2);border-radius:11px;padding:3px;gap:1px} .pf-seg button{border:none;background:transparent;padding:7px 15px;font-size:12px;font-weight:600;color:var(--tx2);border-radius:8px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;font-family:'Inter',sans-serif;white-space:nowrap} .pf-seg button:hover{color:var(--tx)} .pf-seg button.active{background:var(--sur);color:var(--a);box-shadow:var(--sh-sm);font-weight:700} .pf-custom{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--brd);color:var(--tx2);padding:7px 14px;border-radius:11px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;white-space:nowrap} .pf-custom:hover{border-color:var(--a);color:var(--a);background:color-mix(in srgb, var(--a) 6%, transparent)} .pf-custom.active{border-color:var(--a);color:var(--a);background:color-mix(in srgb, var(--a) 8%, transparent);font-weight:700} .pf-range{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx2);background:var(--sur2);padding:6px 12px;border-radius:20px;font-weight:600} .pf-range b{color:var(--tx);font-weight:700} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:.75rem} .form-grid.full{grid-template-columns:1fr} .f-field{display:flex;flex-direction:column;gap:5px} .f-field label{font-size:11.5px;font-weight:700;color:var(--tx2)} .f-field input,.f-field select,.f-field textarea{border:1px solid var(--brd);border-radius:9px;padding:9px 11px;font-size:13px;font-family:'Inter',sans-serif;background:var(--sur2);color:var(--tx);transition:border-color .15s,background .15s} .f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--a);background:var(--sur)} .f-field textarea{resize:vertical;min-height:60px} .f-span2{grid-column:span 2} @media(max-width:600px){.form-grid{grid-template-columns:1fr}.f-span2{grid-column:span 1}} /* ── BUG REPORT FAB ── */ .bug-report-fab{position:fixed;bottom:22px;right:22px;width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff;border:none;font-size:22px;cursor:pointer;box-shadow:var(--sh-lg);z-index:400;display:flex;align-items:center;justify-content:center;transition:transform .15s} .bug-report-fab:hover{transform:scale(1.08)} /* ── MODAL ── */ .modal-bg{position:fixed;inset:0;background:rgba(10,12,20,.5);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;z-index:500;overflow-y:auto;padding:6vh 1rem} .modal-bg.show{display:flex} .modal{background:var(--sur);border:1px solid var(--brd);border-radius:var(--rxl);padding:1.6rem;max-width:560px;width:100%;box-shadow:var(--sh-lg);margin-bottom:2rem} .modal h2{font-weight:800;font-size:1.2rem;margin-bottom:1rem;letter-spacing:-.01em;color:var(--tx)} .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:1.25rem} .modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--tx2)} /* ── TASDIQLASH/XABAR OYNASI (Behzod so'rovi, 2026-07-22: native confirm()/ alert() ilova dizayniga mos emas edi — shu custom modal ular o'rniga ishlatiladi, q. main.js showConfirm/showAlert). #modalBg dan yuqori z-index — forma modali ochiq bo'lsa ham ustidan chiqa oladi. ── */ .confirm-bg{position:fixed;inset:0;background:rgba(10,12,20,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:700;padding:1rem} .confirm-bg.show{display:flex} .confirm-box{background:var(--sur);border:1px solid var(--brd);border-radius:var(--rxl);padding:1.5rem 1.7rem;max-width:400px;width:100%;box-shadow:var(--sh-lg)} .confirm-box h3{font-weight:800;font-size:1.05rem;margin:0 0 .6rem;color:var(--tx)} .confirm-box p{font-size:13.5px;color:var(--tx2);line-height:1.5;white-space:pre-wrap;margin:0} .confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:1.3rem} /* ── NOTIFICATION PANEL ── */ .notif-panel{position:fixed;top:16px;left:calc(var(--sidebar-w) + 16px);width:340px;max-height:70vh;overflow-y:auto;background:var(--sur);border:1px solid var(--brd);border-radius:var(--rl);box-shadow:var(--sh-lg);z-index:400;display:none} .notif-panel.show{display:block} .notif-item{padding:12px 15px;border-bottom:1px solid var(--brd);font-size:12.5px;color:var(--tx)} .notif-item:last-child{border-bottom:none} .notif-item.unread{background:color-mix(in srgb, var(--a) 6%, var(--sur))} .notif-title{font-weight:700;margin-bottom:2px} .notif-time{font-size:10.5px;color:var(--tx3);margin-top:4px} /* ── Tier 1 (2026-07-22): butun tizim bo'yicha yagona qidiruv ── */ .gsearch-wrap{position:relative;padding:0 16px 12px} .gsearch-input{width:100%;border:1px solid var(--brd);border-radius:8px;padding:7px 10px;font-size:12.5px;background:var(--sur2);color:var(--tx)} .gsearch-dropdown{position:absolute;left:16px;right:16px;top:100%;margin-top:2px;background:var(--sur);border:1px solid var(--brd);border-radius:var(--rl);box-shadow:var(--sh-lg);max-height:360px;overflow-y:auto;z-index:410;display:none} .gsearch-dropdown.show{display:block} .gsr-group-label{padding:6px 12px;font-size:10.5px;font-weight:700;color:var(--tx3);background:var(--sur2);text-transform:uppercase;letter-spacing:.03em} .gsr-item{padding:9px 12px;font-size:12.5px;color:var(--tx);border-bottom:1px solid var(--brd);cursor:pointer} .gsr-item:last-child{border-bottom:none} .gsr-item:hover{background:color-mix(in srgb, var(--a) 8%, var(--sur))} .gsr-empty{padding:14px 12px;font-size:12px;color:var(--tx3);text-align:center} .gsearch-highlight{animation:gsearch-flash 1.8s ease-out} @keyframes gsearch-flash{0%{background:color-mix(in srgb, var(--a) 30%, transparent)}100%{background:transparent}} /* ── CHAT ── */ .chat-wrap{display:flex;border:1px solid var(--brd);border-radius:var(--rl);background:var(--sur);box-shadow:var(--sh-sm);height:calc(100vh - 300px);min-height:420px;overflow:hidden} .chat-sidebar{width:260px;flex-shrink:0;border-right:1px solid var(--brd);overflow-y:auto;background:var(--sur2)} .chat-ch-item{padding:11px 14px;border-bottom:1px solid var(--brd);cursor:pointer;position:relative;transition:background .12s} .chat-ch-item:hover{background:var(--sur3)} .chat-ch-item.active{background:color-mix(in srgb, var(--a) 10%, var(--sur2));border-left:3px solid var(--a)} .chat-ch-name{font-size:12.5px;font-weight:700;color:var(--tx);padding-right:26px} .chat-ch-last{font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .chat-ch-badge{position:absolute;top:11px;right:12px;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:0 4px} .chat-main{flex:1;display:flex;flex-direction:column;min-width:0} .chat-header{padding:13px 18px;border-bottom:1px solid var(--brd);font-weight:700;font-size:13.5px;color:var(--tx)} .chat-messages{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px} .chat-empty{margin:auto} .chat-msg{max-width:72%;align-self:flex-start;display:flex;flex-direction:column} .chat-msg.mine{align-self:flex-end;align-items:flex-end} .chat-msg-meta{font-size:10.5px;color:var(--tx3);margin-bottom:3px} .chat-msg-delete{border:none;background:transparent;color:var(--tx3);cursor:pointer;font-size:10px;padding:1px 3px;border-radius:4px;line-height:1;margin-left:4px;opacity:.6} .chat-msg-delete:hover{opacity:1;background:var(--sur3);color:var(--red)} .chat-msg-bubble{background:var(--sur2);border-radius:14px 14px 14px 4px;padding:9px 13px;font-size:13px;color:var(--tx);white-space:pre-wrap;word-break:break-word} .chat-msg.mine .chat-msg-bubble{background:var(--a);color:var(--a-ink);border-radius:14px 14px 4px 14px} .chat-input-row{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--brd);position:relative;align-items:center} .chat-input-row input{flex:1;border:1px solid var(--brd);border-radius:20px;padding:9px 16px;font-size:13px;font-family:'Inter',sans-serif;background:var(--sur2);color:var(--tx);width:100%} .chat-input-row input:focus{outline:none;border-color:var(--a);background:var(--sur)} .chat-input-row .btn{border-radius:20px;flex-shrink:0} .chat-input-wrap{flex:1;position:relative;min-width:0} .chat-emoji-toggle{border:1px solid var(--brd);background:var(--sur2);border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0} .chat-emoji-toggle:hover{background:var(--sur3)} /* @mention / #hashtag avtomaten to'ldirish popoveri */ .chat-ac-dropdown{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:var(--sur);border:1px solid var(--brd);border-radius:var(--r);box-shadow:var(--sh-md);max-height:220px;overflow-y:auto;z-index:30} .chat-ac-item{padding:8px 12px;font-size:12.5px;color:var(--tx);cursor:pointer;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--brd)} .chat-ac-item:last-child{border-bottom:none} .chat-ac-item:hover{background:var(--sur3)} .chat-ac-avatar{font-size:13px} .chat-ac-sub{margin-left:auto;font-size:10.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px} .chat-ac-empty{padding:10px 12px;font-size:12px;color:var(--tx3)} /* Emoji/stiker tanlagich popoveri */ .chat-emoji-popover{position:absolute;bottom:calc(100% + 8px);left:16px;background:var(--sur);border:1px solid var(--brd);border-radius:var(--r);box-shadow:var(--sh-md);padding:8px;z-index:30;width:220px} .chat-emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px} .chat-emoji-btn{border:none;background:transparent;font-size:18px;line-height:1;padding:6px;border-radius:6px;cursor:pointer} .chat-emoji-btn:hover{background:var(--sur3)} /* Xabar ichidagi @mention va #hashtag belgilash */ .chat-mention{color:var(--a);font-weight:700;background:color-mix(in srgb, var(--a) 14%, transparent);padding:1px 5px;border-radius:5px} .chat-msg.mine .chat-mention{background:color-mix(in srgb, #fff 30%, transparent);color:var(--a-ink)} .chat-hashtag{color:var(--teal);font-weight:600;cursor:pointer} .chat-hashtag:hover{text-decoration:underline} .chat-hashtag-project{color:var(--pur);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px} .chat-msg.mine .chat-hashtag,.chat-msg.mine .chat-hashtag-project{color:var(--a-ink);text-decoration-color:currentColor} .chat-attach-toggle{border:1px solid var(--brd);background:var(--sur2);border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0} .chat-attach-toggle:hover{background:var(--sur3)} /* ── BIRIKTIRMALAR (fayl/skrinshot) ── */ .chat-attachments{display:flex;flex-direction:column;gap:5px;margin-top:5px} .chat-attachment{display:flex;align-items:center;gap:6px;background:var(--sur2);border:1px solid var(--brd);border-radius:9px;padding:5px 9px;font-size:11.5px;max-width:280px} .chat-msg.mine .chat-attachment{background:color-mix(in srgb, #fff 12%, var(--a));border-color:transparent;color:var(--a-ink)} .chat-attachment.pending{opacity:.85} .chat-attachment-icon{flex-shrink:0;font-size:13px} .chat-attachment-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .chat-attachment-size{flex-shrink:0;color:var(--tx3);font-size:10.5px} .chat-msg.mine .chat-attachment-size{color:color-mix(in srgb, var(--a-ink) 70%, transparent)} .chat-attachment-link{flex-shrink:0;color:var(--a);font-weight:700;text-decoration:none} .chat-attachment-link:hover{text-decoration:underline} .chat-attachment-badge{flex-shrink:0;font-size:10px;color:var(--tx3);white-space:nowrap} .chat-attachment-remove{flex-shrink:0;border:none;background:transparent;color:var(--tx3);cursor:pointer;font-size:12px;padding:2px 4px;border-radius:5px;line-height:1} .chat-attachment-remove:hover{background:var(--sur3);color:var(--red)} .chat-pending-row:empty{display:none} .chat-pending-attachments{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px} .chat-pending-attachment{display:flex;align-items:center;gap:6px;background:var(--sur2);border:1px solid var(--brd);border-radius:9px;padding:5px 9px;font-size:11.5px;max-width:220px} .chat-pending-attachment .chat-attachment-name{max-width:120px} /* ── LOYIHA FAYLLARI (Fayl standarti kengaytmasi) ── */ .pf-selector-row{margin-bottom:10px} .pf-select{border:1px solid var(--brd);border-radius:9px;padding:9px 11px;font-size:13px;font-family:'Inter',sans-serif;background:var(--sur2);color:var(--tx);min-width:280px} .pf-upload-row{margin-bottom:14px} .pf-file-list{display:flex;flex-direction:column;gap:8px} .pf-file-row{display:flex;align-items:center;gap:10px;border:1px solid var(--brd);border-radius:var(--r);padding:10px 12px;background:var(--sur2)} .pf-file-row.pending{opacity:.85} .pf-file-info{flex:1;min-width:0} .pf-file-name{font-weight:700;font-size:13px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pf-file-meta{font-size:11px;color:var(--tx3);margin-top:2px} .pf-empty{padding:14px 0} /* Chat qidiruv */ .chat-search-row{display:flex;gap:8px;margin:12px 0} .chat-search-row input{flex:1;border:1px solid var(--brd);border-radius:20px;padding:9px 16px;font-size:13px;font-family:'Inter',sans-serif;background:var(--sur2);color:var(--tx)} .chat-search-row input:focus{outline:none;border-color:var(--a);background:var(--sur)} .chat-search-result{cursor:pointer;max-width:100%;align-self:stretch} .chat-search-result:hover .chat-msg-bubble{background:color-mix(in srgb, var(--a) 10%, var(--sur2))} /* ── AVATAR (ilova bo'ylab: sidebar, HR jadvali, chat, sozlamalar) ── */ .avatar-img{border-radius:50%;object-fit:cover;flex-shrink:0} .avatar-fallback{border-radius:50%;background:var(--a);color:var(--a-ink);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0} /* ── SOZLAMALAR ── */ .settings-avatar-row{display:flex;align-items:center;gap:18px;margin-top:.5rem} /* ── LOGIN PAGE ── */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#171B27 0%,#10121B 100%);padding:1.5rem;position:relative} .login-theme-toggle{position:absolute;top:20px;right:20px} .login-card{background:var(--sur);border:1px solid var(--brd);border-radius:var(--rxl);padding:2.5rem;max-width:400px;width:100%;box-shadow:var(--sh-lg)} .login-brand{display:flex;justify-content:center;margin-bottom:1.1rem} .login-brand img{height:26px;width:auto} .login-sub{text-align:center;color:var(--tx2);font-size:12.5px;margin-bottom:1.5rem} .login-card .f-field{margin-bottom:12px} .login-card .btn{width:100%;justify-content:center;padding:11px} .login-switch{text-align:center;font-size:12.5px;color:var(--tx2);margin-top:14px;cursor:pointer} .login-switch span{color:var(--a);font-weight:700} .login-msg{font-size:12.5px;border-radius:9px;padding:9px 13px;margin-bottom:12px} .login-msg.err{background:color-mix(in srgb, var(--red) 12%, var(--sur));color:var(--red)} .login-msg.ok{background:color-mix(in srgb, var(--a3) 12%, var(--sur));color:var(--a3)} .spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .empty-state{text-align:center;padding:2.2rem 1rem;color:var(--tx3);font-size:13px} /* ============================================================================ TABLEVIEW — Lark/Airtable uslubidagi jadval asboblar paneli (tableview.js: Maydonlar/Filtr/Guruhlash/Saralash/Qator balandligi/Shartli rang). 2026-07-18 qo'shildi — avval bu klasslar hech qanday CSS'ga ega emas edi (browser standart ko'rinishida chiqardi — Behzod skrinshot izohidagi asosiy sabab). ============================================================================ */ .tv-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} .tv-tbtn{display:inline-flex;align-items:center;gap:6px;background:var(--sur);border:1px solid var(--brd);border-radius:9px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--tx2);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;box-shadow:var(--sh-sm)} .tv-tbtn:hover{border-color:var(--a);color:var(--a)} .tv-tbtn.active{background:var(--a);color:var(--a-ink);border-color:var(--a)} .tv-tbtn-count{background:color-mix(in srgb, currentColor 18%, transparent);border-radius:20px;padding:1px 7px;font-size:10.5px;font-weight:700;line-height:1.5} .tv-panel-wrap{position:relative} .tv-panel{position:absolute;top:6px;left:0;z-index:120;min-width:340px;max-width:calc(100vw - 48px);background:var(--sur);border:1px solid var(--brd);border-radius:var(--rl);box-shadow:var(--sh-lg);padding:14px 16px;margin-bottom:12px} .tv-panel-title{font-size:12.5px;font-weight:700;color:var(--tx);margin-bottom:10px} .tv-panel-body{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto} .tv-panel-empty{font-size:12px;color:var(--tx3);padding:8px 0} .tv-panel-hint{font-size:11px;color:var(--tx3);margin-top:6px;line-height:1.5} .tv-panel .btn{margin-top:10px} .tv-field-list{display:flex;flex-direction:column;gap:2px} .tv-field-row{display:flex;align-items:center;gap:4px;padding:4px 2px;border-radius:7px} .tv-field-row:hover{background:var(--sur2)} .tv-arrow{background:none;border:1px solid var(--brd);border-radius:6px;width:22px;height:22px;font-size:9px;color:var(--tx3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Inter',sans-serif} .tv-arrow:hover:not(:disabled){border-color:var(--a);color:var(--a)} .tv-arrow:disabled{opacity:.35;cursor:not-allowed} .tv-field-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx);cursor:pointer;flex:1;padding:2px 4px} .tv-field-check input{accent-color:var(--a);width:15px;height:15px;cursor:pointer} .tv-rule-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--brd)} .tv-rule-row:last-child{border-bottom:none} .tv-rule-row select,.tv-rule-row input{border:1px solid var(--brd);border-radius:7px;padding:6px 8px;font-size:12px;font-family:'Inter',sans-serif;background:var(--sur2);color:var(--tx);min-width:0} .tv-rule-row select:focus,.tv-rule-row input:focus{outline:none;border-color:var(--a);background:var(--sur)} .tv-rule-del{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:13px;padding:4px 6px;border-radius:6px;margin-left:auto} .tv-rule-del:hover{background:color-mix(in srgb, var(--red) 12%, transparent);color:var(--red)} .tv-dir-btn{background:var(--sur2);border:1px solid var(--brd);border-radius:7px;padding:6px 10px;font-size:11.5px;font-weight:600;color:var(--tx2);cursor:pointer;font-family:'Inter',sans-serif} .tv-dir-btn:hover{border-color:var(--a);color:var(--a)} .tv-rule-row-color{align-items:flex-start} .tv-swatch-row{display:flex;gap:5px;flex-wrap:wrap;align-items:center} .tv-swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0} .tv-swatch.active{border-color:var(--tx)} .tv-height-row{display:flex;gap:6px} .tv-height-btn{background:var(--sur2);border:1px solid var(--brd);border-radius:8px;padding:7px 14px;font-size:12px;font-weight:600;color:var(--tx2);cursor:pointer;font-family:'Inter',sans-serif} .tv-height-btn.active{background:var(--a);color:var(--a-ink);border-color:var(--a)} .tv-height-btn:hover:not(.active){border-color:var(--a);color:var(--a)} .tv-grid-wrap table.tv-table td,.tv-grid-wrap table.tv-table th{white-space:nowrap} .tv-h-compact td{padding-top:5px;padding-bottom:5px} .tv-h-medium td{padding-top:10px;padding-bottom:10px} .tv-h-tall td{padding-top:16px;padding-bottom:16px} .tv-group-row td{background:var(--sur2);font-size:11.5px;font-weight:700;color:var(--tx2);cursor:pointer;padding:7px 13px} .tv-group-row:hover td{background:var(--sur3)} .tv-group-caret{display:inline-block;width:14px;font-size:9px;color:var(--tx3)} .tv-group-count{color:var(--tx3);font-weight:600;margin-left:6px} /* Loyihalar jadvali: birinchi ikki ustun ("frozen columns") gorizontal scroll qilinganda ham doim ko'rinib turadi — Behzod skrinshot izohi, 2026-07-20: ko'p ustunli jadvalda o'ngga (Amallar tugmalari tomon) scroll qilinganda chapdagi identifikator ustunlar ekrandan chiqib ketib, qaysi qator ekanini bilib bo'lmay qolgan edi. Ustun nomlariga emas, POZITSIYAGA (birinchi ikkita ko'rinadigan ustun) bog'langan — shu sabab foydalanuvchi "Maydonlar" panelidan ustunlarni qayta tartiblasa ham to'g'ri ishlayveradi. Rang qoidasi (shartli rang) qo'llangan qatorlarda projectRowHtml shu ikki katakka inline background beradi (render.js) — shuning uchun quyidagi orqa fon faqat rang qoidasi bo'lmagan holatlar uchun ishlatiladi. */ /* Behzod skrinshoti (2026-07-22, band 7): jadval balandligi cheklanmagani uchun gorizontal scrollbar butun jadval OXIRIDA (ko'pincha ekrandan ancha pastda, sahifani uzoq scroll qilgandan keyingina) chiqar edi — trackpad/sichqoncha g'ildiragi bilan qatorlar USTIDA turib gorizontal surish mumkin bo'lsa-da, scrollbar'ni topib uni qo'lda tortish esa noqulay edi. Balandlikni cheklab, o'z ichki vertikal scrolliga ega qilamiz — shunda gorizontal scrollbar doim ko'rinadigan qatorlar OSTIDA, yaqin joyda turadi. Sarlavha (thead) esa sticky-top bilan vertikal scroll paytida ham doim ko'rinib turadi. */ .tv-grid-wrap{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 300px);overscroll-behavior:contain} .tv-grid-wrap table.tv-table thead th{position:sticky;top:0;z-index:4;background:var(--sur2)} /* border-collapse:collapse (umumiy "table" qoidasi) bilan position:sticky katakchalar turli brauzerlarda (ayniqsa Safari) beqaror ishlaydi — frozen ustunlar ba'zan orqa fonsiz yoki noto'g'ri joylashgan ko'rinadi. separate + border-spacing:0 vizual jihatdan bir xil ko'rinadi, lekin sticky pozitsiyalash barqaror ishlaydi. */ .tv-grid-wrap table.tv-table{border-collapse:separate;border-spacing:0} .tv-grid-wrap table.tv-table th:nth-child(1), .tv-grid-wrap table.tv-table tbody tr:not(.tv-group-row)>td:nth-child(1){ position:sticky;left:0;z-index:2;width:90px;min-width:90px;max-width:90px; overflow:hidden;text-overflow:ellipsis; } .tv-grid-wrap table.tv-table th:nth-child(2), .tv-grid-wrap table.tv-table tbody tr:not(.tv-group-row)>td:nth-child(2){ position:sticky;left:90px;z-index:2;width:200px;min-width:200px;max-width:200px; overflow:hidden;text-overflow:ellipsis;border-right:1px solid var(--brd); } .tv-grid-wrap table.tv-table th:nth-child(1), .tv-grid-wrap table.tv-table th:nth-child(2){z-index:6;background:var(--sur2)} .tv-grid-wrap table.tv-table tbody tr:not(.tv-group-row)>td:nth-child(1), .tv-grid-wrap table.tv-table tbody tr:not(.tv-group-row)>td:nth-child(2){background:var(--bg)} .tv-grid-wrap table.tv-table tbody tr:not(.tv-group-row):hover>td:nth-child(1), .tv-grid-wrap table.tv-table tbody tr:not(.tv-group-row):hover>td:nth-child(2){background:var(--sur2)} /* band 7 (2026-07-22) — "Amallar" ustunini o'ngga sticky qilish URINISHI BEKOR QILINDI: Behzod skrinshotida ko'rsatganidek, bu PM ustuni va chat kengaytma qatorini (colspan=99 — u ham ":last-child" ga to'g'ri keladi) sticky Amallar katakchasi bosib, VIZUAL USTMA-UST tushishga sabab bo'ldi (sticky faqat elementni qayta joylashtiradi, jadval ustunlari tabiiy oqimini "band qilib qo'ymaydi" — shu joyga tabiiy holda tushadigan boshqa katakchalar uning OSTIDA "ko'milib" qoladi). To'g'ri yechim — tor ekranda karta ko'rinishi (pastda, renderProjectsCards) va standart holatda gorizontal scroll/"Maydonlar" orqali ustun tanlash. */ /* ── QATOR AMALLAR MENYUSI ("⋮") — Loyihalar jadvali va shunga o'xshash jadvallar uchun ixcham amallar menyusi (render.js projectRowHtml, main.js toggleRowMenu). position:fixed — .tw'ning overflow-x:auto konteyneri menyuni "kesib qo'ymasligi" uchun. ── */ .row-menu{position:relative;display:inline-block} .row-menu-trigger{min-width:30px;padding:5px 9px;font-size:15px;line-height:1;font-weight:700} .row-menu-dropdown{position:fixed;display:none;flex-direction:column;min-width:200px;background:var(--sur);border:1px solid var(--brd);border-radius:var(--r);box-shadow:var(--sh-lg);z-index:250;padding:5px;gap:1px} .row-menu-dropdown.open{display:flex} .row-menu-dropdown button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;padding:8px 10px;border-radius:7px;font-size:12.5px;color:var(--tx);cursor:pointer;white-space:nowrap;font-family:'Inter',sans-serif} .row-menu-dropdown button:hover{background:var(--sur2)} .row-menu-dropdown button.row-menu-danger{color:var(--red)} /* ============================================================================ RESPONSIVE — sidebar becomes an off-canvas drawer below 900px ============================================================================ */ @media(max-width:900px){ .app-shell{display:block} .mobile-topbar{ display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:250; background:linear-gradient(185deg,#171B27 0%,#10121B 100%);padding:12px 16px; } .mobile-topbar .brand-wordmark-img{height:18px} .hamburger{background:rgba(255,255,255,.08);border:none;color:#fff;width:34px;height:34px;border-radius:9px;font-size:16px;cursor:pointer;flex-shrink:0} .sidebar{position:fixed;left:0;top:0;height:100vh;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--sh-lg)} .sidebar.open{transform:translateX(0)} .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:290} .sidebar-backdrop.show{display:block} .main-content{padding:1.5rem 1rem 6rem} .notif-panel{left:16px;right:16px;width:auto} .stat-grid{grid-template-columns:repeat(2,1fr)} .chat-wrap{flex-direction:column;height:auto} .chat-sidebar{width:100%;max-height:180px;border-right:none;border-bottom:1px solid var(--brd)} .chat-messages{max-height:50vh} .chat-search-row{flex-wrap:wrap} .chat-search-row input{width:100%} .chat-emoji-popover{left:0} }