/* ===================================================================== BAUST ERP — Дизайн-система v1 (CSS) Єдине джерело правди для нового інтерфейсу. Світла тема, мінімалізм, принцип «увага — головний ресурс»: акцент тільки там, куди треба дивитись. Як це влаштовано: - Усі кольори/радіуси/тіні задані ОДИН раз у :root як змінні (--bt-*). - Компоненти — це класи з префіксом .bt- (button, card, sidebar, table…). - Щоб не зачепити стару частину ERP, базові стилі живуть під коренем .bt-app. Еталон: жива вітрина /uikit (resources/views/uikit/index.blade.php) — кожен компонент там справжній. Правила роботи — CLAUDE.md у корені прод-репо. ===================================================================== */ /* ---------- Шрифт Gilroy (файли в /public/fonts) ---------- */ @font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-Regular.woff2') format('woff2'),url('../fonts/Gilroy-Regular.woff') format('woff');font-weight:300 400;font-style:normal;font-display:swap;} @font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-Medium.woff2') format('woff2'),url('../fonts/Gilroy-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-SemiBold.woff2') format('woff2'),url('../fonts/Gilroy-SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-Bold.woff2') format('woff2'),url('../fonts/Gilroy-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-ExtraBold.woff2') format('woff2'),url('../fonts/Gilroy-ExtraBold.woff') format('woff');font-weight:800;font-style:normal;font-display:swap;} @font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-Black.woff2') format('woff2'),url('../fonts/Gilroy-Black.woff') format('woff');font-weight:900;font-style:normal;font-display:swap;} /* ---------- 01 · Токени (змінні) ---------- */ :root{ /* Три акценти — і тільки три. ПАЛІТРА ЮРІЯ 17.07.2026 (увімкнена в :root 18.07.2026 — перенесена з uikit-palette-preview.css, файл видалено). ЧОТИРИ РІВНІ в кожній сім'ї: *-ink — ним ПИШУТЬ (текст, іконки, суми) — див. 01b акцент — ним ФАРБУЮТЬ помітне (кнопки, риски, активна навігація) *-tint2 — світла заливка: бейджі та «світлі частини» *-tint — ледь помітна заливка: hover, який не має кричати Відтінок усередині сім'ї збігається (розбіг 3-10°), тому рівні виглядають як один колір різної сили, а не як різні кольори. */ --bt-green:#A3C456; /* дохід / бренд / активна навігація · hsl(78,48%,55%) */ --bt-green-press:#85B31B; /* press-стан залитої зеленої */ --bt-green-tint:#ECF4D8; /* ледь помітна заливка: hover фін-кнопки, активна іконка */ --bt-green-tint2:#EAF5C6; /* світла заливка: бейдж «В роботі», світлі блоки */ --bt-green-seg:#B4DD55; /* активний сегмент перемикача */ --bt-green-border:#D6E6B0; /* рамка зеленого «+» квадрата */ --bt-blue:#65A5F2; /* прибуток / дія / фокус · hsl(213,84%,67%) — головна цифра «куди дивимось» */ --bt-blue-press:#2273D6; /* press-стан залитої синьої */ --bt-blue-tint:#F4F9FE; /* hover ghost-синього */ --bt-blue-tint2:#DFF3FE; /* світла заливка: бейджі «Завершено»/«Здано» */ --bt-blue-border:#D6E8FF; /* outline-рамка синьої фін-кнопки */ /* ⭐ ЧЕТВЕРТИЙ АКЦЕНТ — ФІОЛЕТОВИЙ, тільки для ДИВІДЕНДІВ (Юрій, 07.08.2026: «все, що стосується дивідендів, зроби у всій системі фіолетовим»). Того ж дня валовий прибуток став СИНІМ, тож синій звільнився від подвійного значення: раніше ним малювали і дивіденди (інфопанель, банк-фід, таб /bills), і прибуток — на річному звіті через це прибуток мусив бути фіолетовим, а дивіденди синіми, тобто рівно навпаки до решти ЕРП. Тепер правило одне: СИНІЙ = валовий прибуток, ФІОЛЕТОВИЙ = дивіденди. Світлота підібрана в сім'ю до --bt-blue/--bt-coral (L≈70%), ink 5.85 ✓ AA. */ --bt-violet:#9C79EC; /* дивіденди · hsl(258,75%,70%) — заливка, лінія, крапка */ --bt-violet-press:#7A50DE; /* press-стан залитої фіолетової */ --bt-violet-tint:#F7F4FE; /* hover ghost-фіолетового */ --bt-violet-tint2:#EDE6FD; /* світла заливка: бейджі «Дивіденди» */ --bt-violet-border:#E0D6FB;/* outline-рамка фіолетової фін-кнопки */ --bt-coral:#EC939D; /* витрати / деструктив · hsl(353,70%,75%) */ --bt-coral-press:#E07581; /* press-стан залитої коралової */ --bt-coral-tint:#FBEAEC; /* hover м'якої деструкції */ --bt-coral-tint2:#FEE0E4; /* світла заливка: бейдж «Призупинено» */ --bt-coral-border:#F1D6D9; /* рамка soft-danger */ /* 4-й колір ПОЗА трьома акцентами — свідоме рішення Юрія 18.07.2026. Поки ЄДИНА роль: жовте кільце-мітка «замовник» (щоб відрізняти замовника від співробітників компанії). Не заводити в загальні акценти без потреби. */ --bt-yellow:#FFD400; /* мітка «замовник» · hsl(50,100%,50%) — яскравий (рішення Юрія 18.07) */ /* ---------- Сірі й лінії · рівень «Спокійний» (рішення Юрія 25.07.2026) ------ Приміряно наживо на /uikit тимчасовим перемикачем «Примірка контрасту» (знятий 26.07 — тони варіантів лишились у коментарі uikit.css), обрано середній рівень: лінії й сірі підняті до комфортних порогів, бренд-кольори (green/blue/ coral-ink) НЕ чіпані — характер інтерфейсу лишився той самий. Цифра після кольору = контраст: на білому / на --bt-bg (гірше з двох і рахуємо). */ --bt-ink:#1A1D23; /* основний текст, числа · 16.9 */ --bt-gray-d:#6F7783; /* другорядний текст, лейбли, підписи · 4.52/4.22 — AA на обох тлах (було #767C84 · 4.21/3.93 — на сірій підкладці не дотягувало) */ --bt-gray:#7E8691; /* плейсхолдери, іконки · 3.68/3.43 (було #9098A2 · 2.92/2.72) */ /* ⭐ ОДНА ЛІНІЯ НА ВСЮ СИСТЕМУ (рішення Юрія 26.07.2026). Спершу (25.07) лінію розвели на два тони — розділювач світліший, межа контрола темніша «за нормою». Юрій подивився на /entity і зарубав: «тупо, що лінія пошуку темніша за лінію проекту». Тон звели в ОДИН. Першим поставили 3.31 (мінімум за SC 1.4.11), але на щільних сторінках він читався важким — того ж дня Юрій примірявся на /uikit («М'якша») і затвердив легший тон на всю систему. Ще того ж дня, дивлячись на /entity (список Об'єктів, багато рядків одразу), Юрій попросив «тоньше» ще раз — звели тон ще на один крок світліше (фізично лінія лишається 1px — браузер не малює субпіксельні лінії надійно на звичайних екранах; «тонше» = менший контраст). ⚠ СВІДОМИЙ РОЗМІН: 2.14 < 3, тож межа поля/чекбокса формально не проходить WCAG 2.2 SC 1.4.11 (як і попередній тон 2.61). Це рішення Юрія «вигляд > норма» — те саме, що вже діє для ink-кольорів. Не «виправляти» назад без його рішення. Ролі-токени лишились (нижче) — вони описують ЗМІСТ межі й дають змогу колись розвести тони назад, не переписуючи 300 місць. Зараз їхні значення однакові. */ --bt-line:#AAB2BE; /* ЄДИНИЙ тон межі · 2.14 на білому / 2.00 на --bt-bg. Було: #DCE0E6 · 1.33 (до 25.07) → #C0C6CF · 1.72 (25.07) → #848E9D · 3.31 (ранок 26.07) → #98A1AE · 2.61 (26.07, «М'якша»). */ /* ⚠ ВИНЯТОК зі «однієї лінії» (рішення Юрія 26.07.2026): на Оргсхемі багато тонких ліній накладаються одна на одну (з'єднувачі дерева + рамки карток), і загальний --bt-line там читається затерто. Юрій попросив темніше — САМЕ на Оргсхемі, решту системи не займали. Узяли готовий історичний тон #848E9D (той самий, що коротко був --bt-line уранці 26.07, до пом'якшення) — не вигадували нового. Барвисті межі департаментів/відділів (--bt-org-unit, --bt-org-depthead — колір відділу) цей токен НЕ зачіпає, вони самостійні. */ --bt-org-line:#848E9D; /* 3.31 на білому — лінії дерева й нейтральні картки Оргсхеми */ --bt-line-ctl:var(--bt-line); /* МЕЖА КОНТРОЛА: поле, select, чекбокс, ghost-кнопка, сегмент. Роль лишаємо окремою: якщо колись повертаємось до норми SC 1.4.11 — піднімати треба саме її (≥3:1, напр. #848E9D), не чіпаючи розділювачі. */ /* Затемнення під плаваючим шаром (скрим модалки, нижній лист на телефоні). 31.08.2026: значення тут було літералом просто в .bt-modal — винесене в токен, бо мобільні листи «Задач» затемнюють тло тим самим тоном. */ --bt-scrim:rgba(20,28,44,.44); --bt-fill:#DCE0E6; /* ПЛАШКА (заливка, не лінія): фон аватара-заглушки, трек перемикача, плитка іконки, kbd. НЕ темнішає разом із межами — інакше стає брудно-сірою; ініціали --bt-ink-2 на ній 4.79 ✓ */ --bt-bg:#F6F7F9; /* фон сторінки */ --bt-card:#FFFFFF; /* картки */ --bt-row-active:#F1F3F5; /* hover/активний рядок навігації (світло-сірий) */ --bt-row-press:#E4E7EB; /* натиснута/вибрана кнопка (темніший сірий) */ --bt-dashed:var(--bt-line);/* пунктирна «додати» — той самий тон, що й решта меж (26.07: одна лінія на всю систему). Від суцільної її відрізняє САМ ПУНКТИР, а не окремий колір. */ /* Радіуси */ --bt-r-card:14px; --bt-r-card-sm:14px; /* рішення Юрія 17.07: звичайна картка 14 (було 16); більшість компонентів і так на 14 — тепер один радіус */ --bt-r-fin:11px; --bt-r-btn:10px; --bt-r-9:9px; --bt-r-input:8px; --bt-r-7:7px; --bt-r-6:6px; /* Керма форм — ЄДИНА система (уніфікація 17.07): одна висота + один фокус для полів/пошуку/випадайок/select2. Висота = висота кнопок (40px), тож поле й кнопка поруч стоять на одній лінії. */ --bt-ctl-h:40px; /* Висота смуги режиму «чужими очима» (.bt-impbar). Токен, бо на цю висоту мусять піднятись і ті, кого смуга накриває: підвал бічного меню (профіль) і нижній край головної області. 36px — «трохи вужче» за перші 44 (Юрій, 27.07). */ --bt-viewbar-h:36px; --bt-ring:rgba(101,165,242,.30); /* м'який ореол фокуса = --bt-blue @ 30% */ --bt-focus:0 0 0 2px var(--bt-ring); /* лише м'який синій ореол; тонкий темний край дає 1px-рамка контролу (:focus → border-color:--bt-blue) */ /* Тіні — драбина висоти: чим «вище» елемент над сторінкою, тим глибша тінь. Фон сторінки БІЛИЙ, тому білу поверхню від нього відділяє саме тінь, а не сірий фон. Правило вибору — див. «ПРАВИЛО ТІНЕЙ» перед секцією КАРТКИ (не вигадувати нових rgba). ⭐ 26.07.2026: Юрій попросив прибрати тіні з усього, що лежить У ПОТОЦІ сторінки (картки, поля, кнопки) — за зразком .obj-card на /entity («межа тримає форму»). Перші 5 щаблів драбини (outline…raise-hover) обнулено тут ЦЕНТРАЛЬНО — все, що на них посилається, стало пласким одразу, без правок у кожному місці. --bt-sh-card/--bt-sh-pop/--bt-sh-modal НЕ займали — вони або обслуговують мішані ролі (--bt-sh-card ще й на .bt-zoomctl, плаваючому над полотном Оргсхеми), або належать ПЛАВАЮЧИМ елементам (попап/меню, модалка) — той контент лежить ПОВЕРХ сторінки, а не в її потоці, і без тіні губиться в тлі. Ролі-токени лишили (значення :none — той самий патерн, що вже діяв для ink/ліній): не «повертати» тіні назад без рішення Юрія. */ --bt-sh-outline:none; /* було 0 1px 2px rgba(20,30,50,.06) — дрібний контрол у потоці (поле, ghost-кнопка) */ --bt-sh-ctl:none; /* було 0 1px 2px rgba(20,30,50,.05),0 2px 8px rgba(20,30,50,.06) — контрол тулбара (пошук, кнопка дії) */ --bt-sh-ctl-hover:none; /* було 0 2px 4px rgba(20,30,50,.06),0 4px 12px rgba(20,30,50,.08) — його ж hover */ --bt-sh-raise:none; /* було 0 1px 2px rgba(20,30,50,.04),0 2px 10px rgba(20,30,50,.05) — підйом картки на білому тлі */ --bt-sh-raise-hover:none; /* було 0 2px 4px rgba(20,30,50,.05),0 8px 22px rgba(20,30,50,.07) — hover клікабельної картки */ --bt-sh-card:0 8px 28px rgba(20,30,50,.11); /* підйом розкритої/вибраної картки, плаваюча панель; 01.08.2026 Юрій: «трохи більше тінь» (було 0 6px 22px .06) */ /* ⭐ РОЗКРИТА КАРТКА-АКОРДЕОН — єдиний вигляд на всю ЕРП (канон /payroll, рішення Юрія 01.08.2026). Складається з ДВОХ шарів: синє кільце 2px впритул до сірої межі + той самий підйом --bt-sh-card. Сіра межа картки при цьому НЕ перефарбовується — вона лишається, синє йде ЗОВНІ неї. Беруть УСІ картки, що розкриваються: .obj-card, .bt-emp-card, .bt-cl-card, .bt-bills-row, .bt-list--cards, .pr-card. Не чіпає рядки в спільній рамці (.bt-list--table) — там картки як такої немає. */ --bt-sh-open:0 0 0 2px var(--bt-blue-border),var(--bt-sh-card); --bt-sh-pop:0 14px 40px rgba(20,30,50,.18); /* поповер/меню */ --bt-sh-modal:0 24px 60px rgba(20,30,50,.28); /* модальне вікно */ --bt-font:'Gilroy',-apple-system,'Helvetica Neue',Arial,sans-serif; /* ---------- 01b · Ink-роль акцентів ---------------------------------- --bt-green/blue/coral — кольори ЗАЛИВКИ, текстом ними НЕ пишуть. Для тексту, іконок і цифр — *-ink. Правило: заливка/фон → базовий токен; текст/іконка → *-ink. Значення — палітра Юрія 17.07.2026. Контраст на білому нижчий за WCAG 4.5 (2.75 / 4.17 / 3.46) — СВІДОМЕ рішення Юрія: вигляд > норма. Не «виправляти» на темніші без його рішення. ⛔ Історія: колись тут стояли ЧУЖІ #1f6feb (GitHub) і #dc3545 (Bootstrap) — код завів їх сам, бо базові токени нечитабельні. Не повертати. */ --bt-green-ink:#78AB00; /* hsl(78,100%,34%) · 2.75 — текст сум доходу */ --bt-green-ink2:#8FCC00; /* світліший акцент: іконка «додати» */ /* ⛔ Темнішого зеленого для іконок у киті НЕМАЄ і не заводити (рішення Юрія 27.07.2026): примірявся #5B8200 (4.53 ✓ AA) на іконці папки в дереві — поруч із зеленою книжкою головного меню це читається як ДРУГИЙ зелений. Усі «ти тут»-іконки — один тон, --bt-green-ink. Хочеться темніше — міняти сам токен, а не заводити сусідній. */ --bt-blue-ink:#1B7AEC; /* hsl(213,85%,52%) · 4.17 — посилання, сині цифри */ --bt-violet-ink:#6A4BD6; /* hsl(252,62%,56%) · 5.85 ✓ AA — суми дивідендів */ --bt-coral-ink:#E75A6A; /* hsl(353,75%,63%) · 3.46 — текст витрат, помилки */ --bt-ink-2:#5A6068; /* 5.26 на --bt-avatar-bg; ініціали аватара */ /* ---------- 01b² · Неназвані поверхні -------------------------------- */ --bt-avatar-bg:var(--bt-fill); /* фон аватара-заглушки = колір лінії (рішення Юрія 17.07.2026: сторінка Співробітники вже так робила, звели всі аватари до одного). Було var(--bt-avatar-bg). Ініціали --bt-ink-2 на ньому: 4.79 ✓ */ --bt-zebra:#FBFCFD; /* зебра таблиці / фон розкритої панелі */ /* ---------- 01c · Відступи (ролі, НЕ числова драбина) ----------------- Фізична шкала кіта — крок 2px (2…18), непарні (7/11) — свідома оптика: 7px + рамка 1px = 8px за габаритом. Старі літерали НЕ чіпаємо; ці токени — для НОВОГО коду. */ --bt-gap-hair:4px; /* мікро-проміжок: аватар↔текст, щільні стоси (найужив. на реальних сторінках) */ --bt-gap-icon:6px; /* іконка ↔ текст усередині кнопки/бейджа */ --bt-gap-inline:8px; /* між контролами в рядку */ --bt-gap-stack:12px; /* між рядками у стовпці */ --bt-gap-group:16px; /* між картками/групами */ --bt-gap-section:24px; /* між секціями сторінки */ --bt-pad-card:18px 20px; /* .bt-card */ --bt-pad-btn:7px 11px; /* компактна кнопка */ /* ---------- 01c² · Типографіка (ролі з канонічних font:-шорткатів) --- */ --bt-t-micro:700 10px/1 var(--bt-font); /* .bt-kpi__label */ --bt-t-badge:700 11px/1 var(--bt-font); /* .bt-badge */ --bt-t-cell:500 13px/1.3 var(--bt-font); /* комірка таблиці */ --bt-t-body:500 14px/1.4 var(--bt-font); /* база .bt-app */ --bt-t-title:800 16px/1.1 var(--bt-font); /* заголовок картки */ --bt-t-kpi:800 19px/1 var(--bt-font); /* число KPI */ /* ---------- 01c³ · Радіуси-ролі (аліаси; числові --bt-r-9/-7/-6 — застаріле «число під псевдонімом», нове писати через ролі) ---------- */ /* Бейдж — ПОВНА пігулка (рішення Юрія 26.07.2026; було var(--bt-r-7) = 7px). 999px, а не 50%: 50% на прямокутнику дає еліпс, 999px — правильні півкола з боків при будь-якій висоті. Один токен на всю сім'ю бейджів: .bt-badge (+ усі --work/--done/--wait/--pause/--delivered/--pick), .bt-empd-badge, .bt-cld-pill, .uk-badge-prop. */ --bt-r-badge:999px; --bt-r-chip:var(--bt-r-6); --bt-r-ctl:var(--bt-r-btn); /* 10px — радіус керма форм = радіус кнопок (уніфікація 17.07; було 9px, ніде не вживалось; НЕ чіпаємо --bt-r-input=8px, бо він живить чужі поверхні) */ /* ---------- 01e · Списки: поверхні й геометрія ------------------------ Значення з макета «13 · Списки» (Claude Design, версія Юрія 07.2026). Самі компоненти .bt-list ще НЕ в кіті — спершу словник; сьогодні ці кольори живуть хардкодами в .obj-row:hover / .obj-panel / .proj-card. */ --bt-list-hover:#FAFBFC; /* hover рядка списку */ --bt-list-open:var(--bt-card); /* фон розкритої панелі — БІЛИЙ (рішення Юрія 18.07): відкрита картка = біла, відділена тонкою лінією + м'якою тінню-підйомом */ --bt-r-pop:12px; /* поповер/меню (у кіті досі 7 хардкодів 12px) */ --bt-r-avatar:50%; /* кругла іконка/аватар */ --bt-sh-listcard:0 1px 2px rgba(20,30,50,.05),0 6px 16px rgba(20,30,50,.06); /* ⛔ НЕ ВЖИВАТИ (рішення Юрія 31.07.2026): картки списків по всій ЕРП — білий фон + межа --bt-line, БЕЗ тіні (форму тримає лінія, як .obj-card). Тіні лишаються плаваючим шарам (--bt-sh-pop) і контролам (--bt-sh-ctl). Токен збережено лише для історії/вітрини — у коді 0 вживань. */ /* ---------- 01d · Міст: legacy-палітра --erp-* ------------------------ 19 сторінок (облік часу, аналітика, зарплати…) завели власну палітру, бо кіту бракувало ink-ролі (див. 01b). Тепер --erp-* визначається ТУТ і ніде більше; дублікати :root у Blade видалено 2026-07-17. НОВИЙ КОД --erp-* НЕ ВИКОРИСТОВУЄ — тільки --bt-*. Саме в :root (не під .bt-app): модалки, приклеєні JS-ом до , живуть поза .bt-app і мусять бачити ці змінні. */ /* 18.07.2026: палітру Юрія увімкнено → міст переведено на кітові ink. primary: #1f6feb → #1B7AEC — різниця ока не ловить (той самий рід синього). danger: #dc3545 → коралова ink — легасі-сторінки стали в сім'ю кіту. */ --erp-primary:var(--bt-blue-ink); /* #1B7AEC */ --erp-primary-hover:var(--bt-blue-press); --erp-danger:var(--bt-coral-ink); /* #E75A6A */ --erp-danger-hover:#D93649; /* коралова ink −10 світлоти (та сама сходинка, що була в парі dc3545→b2202f) */ --erp-text:var(--bt-ink); /* був #0f172a → #1A1D23, Δ невидима */ --erp-border:var(--bt-line); /* був #d6dde6 → #C0C6CF (25.07) → одна лінія #98A1AE (26.07) */ --erp-bg-lighter:var(--bt-card); /* #ffffff — точний збіг */ --erp-bg-soft:var(--bt-bg); /* був #f2f4f8 → #F6F7F9, Δ невидима */ /* Ці — вже приглушені й рідні синьому роду кіту (hue 215-220° ≈ --bt-blue 221°, насиченість 17-25%), тому переливати нема куди: лишаються як є. */ --erp-secondary:#455873; /* hsl(215,25%,36%) · 7.25 */ --erp-muted:#5f6c86; /* hsl(220,17%,45%) · 5.28 */ /* --erp-success:#28a745 ВИДАЛЕНО 17.07.2026 — 0 вживань у коді (мертвий бутстрап-зелений). Треба «успіх» текстом → --bt-green-ink. */ --erp-warning-bg:#fff4d6; --erp-warning-border:#fcd34d; --erp-warning-text:#9a3412; } /* ---------- Lucide-іконки: рівно 1.25px на всіх ---------- */ svg.lucide{stroke-width:1.25px;} svg.lucide *{vector-effect:non-scaling-stroke;} /* ---------- Базовий каркас (тільки під .bt-app, щоб не чіпати стару ERP) ---------- */ .bt-app, .bt-app *{box-sizing:border-box;} .bt-app{ /* Каркас (сайдбар + верхня смуга) зафіксований рівно на висоту екрана й сам НЕ прокручується. Прокрутка живе всередині .bt-main (своя для кожної сторінки); на оргсхемі .bt-main--fixed вимикає її (там зум/панорама полотна). */ margin:0; height:100vh; overflow:hidden; display:flex; /* Каркас білий (як сайдбар/топбар): legacy .content і так білий, а новий фон прибирає сірий обідок, що проступав по краях. Дрібні сірі акценти (бейджі, hover, поля пошуку) лишаються на --bt-bg і не міняються. */ background:var(--bt-card); color:var(--bt-ink); font-family:var(--bt-font); font-size:14px; font-weight:500; line-height:1.4; font-variant-numeric:tabular-nums; /* Свідомо БЕЗ -webkit-font-smoothing та text-rendering:optimizeLegibility: на Windows/Chrome optimizeLegibility «розмиває» дрібний текст, а еталонні макети (які виглядають чітко) цих директив не мають. Хай браузер малює текст стандартним шляхом (ClearType/DirectWrite) — так найчіткіше. */ } .bt-app ::-webkit-scrollbar{width:10px;height:10px;} .bt-app ::-webkit-scrollbar-thumb{background:#D9DDE2;border-radius:6px;border:2px solid var(--bt-bg);} /* ===================================================================== 09 · ЛІВА БОКОВА ПАНЕЛЬ (сайдбар) ===================================================================== */ .bt-sidebar{ width:248px; flex:none; background:var(--bt-card); border-right:1px solid var(--bt-line); display:flex; flex-direction:column; /* position:relative (НЕ sticky): застосунок сам не прокручується, тож стікі не потрібен; а sticky створює окремий GPU-шар, на якому текст і SVG-логотип малюються м'якше (без ClearType). relative зберігає z-index-стек для флайауту. */ position:relative; height:100vh; /* z-index підіймає весь сайдбар (і його флайаут-меню) над основним контентом, інакше попап профілю ховається під полотном оргсхеми. */ z-index:40; } .bt-sidebar__head{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 12px 0 18px;} .bt-sidebar__logo{height:31px;width:auto;display:block;margin-left:7px;} .bt-sidebar__logo-mark{height:30px;width:auto;display:none;margin:0 auto;} /* хрестик у шапці панелі — ховає бічне меню (десктоп) / закриває драуер (мобільний) */ .bt-sidebar__close{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center; cursor:pointer;background:none;border:none;color:var(--bt-gray);} .bt-sidebar__close i,.bt-sidebar__close svg{width:19px;height:19px;color:var(--bt-gray);} .bt-sidebar__close:hover{background:var(--bt-row-active);} .bt-sidebar__nav{display:flex;flex-direction:column;gap:2px;padding:6px 12px 0;overflow-y:auto;flex:1;cursor:pointer;} /* секційний надзаголовок усередині навігації */ .bt-nav-group{font:800 10px/1 var(--bt-font);letter-spacing:.07em;text-transform:uppercase; color:var(--bt-gray);padding:14px 13px 6px;} .bt-nav-row{ display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:9px; font:500 13.5px/1 var(--bt-font);color:var(--bt-gray-d); text-decoration:none;cursor:pointer;white-space:nowrap; /* плавне згортання/розгортання: відступ (іконка «пливе»), фон при наведенні */ transition:padding .18s ease, background .12s ease; } .bt-nav-row i,.bt-nav-row svg{width:18px;height:18px;flex:none;color:var(--bt-gray-d);} /* текст пункту: у згорнутому стані плавно «стискається» й зникає замість миттєвого пропадання */ .bt-nav-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; transition:max-width .18s ease, opacity .14s ease;max-width:170px;} .bt-nav-row:hover{background:var(--bt-row-active);} .bt-nav-row.is-active{font-weight:700;color:var(--bt-ink);background:var(--bt-row-active);} .bt-nav-row.is-active i,.bt-nav-row.is-active svg{color:var(--bt-green-ink);} /* «скоро» — модуль ще не зроблено */ .bt-nav-row.is-soon{cursor:default;opacity:.6;} /* селектор з елементом span — щоб перебити .bt-nav-row span (flex:1/max-width/overflow) */ .bt-nav-row span.bt-nav-row__soon{font:700 8.5px/1 var(--bt-font);letter-spacing:.05em;text-transform:uppercase; color:var(--bt-gray);background:var(--bt-bg);border:1px solid var(--bt-line); border-radius:5px;padding:3px 5px;flex:none;max-width:none;overflow:visible;} /* профіль (низ) — без лінії-роздільника: рішення Юрія 28.07.2026, профіль відділяє від меню сам простір (margin-top:auto), зайва межа не потрібна */ .bt-sidebar__foot{margin-top:auto;padding:10px 12px 12px;position:relative;} .bt-profile{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:10px;cursor:pointer;transition:padding .18s ease;} .bt-profile:hover{background:var(--bt-bg);} .bt-profile__ava{width:40px;height:40px;border-radius:50%;background:var(--bt-avatar-bg) center/cover;flex:none;} /* обгортка тексту профілю: ховаємо переповнення, щоб під час анімації ширини ім'я плавно «виїжджало», а не переносилось на 2 рядки й не стрибало назад */ .bt-profile__meta{overflow:hidden;} .bt-profile__name{font:700 13px/1.1 var(--bt-font);color:var(--bt-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bt-profile__role{font:500 11px/1 var(--bt-font);color:var(--bt-gray);margin-top:4px;} .bt-profile i{width:16px;height:16px;color:var(--bt-gray);flex:none;} /* меню профілю (поповер, відкривається вгору) */ .bt-usermenu{position:absolute;left:12px;right:12px;bottom:64px;background:var(--bt-card); border:1px solid var(--bt-line);border-radius:12px;box-shadow:var(--bt-sh-pop);padding:6px;display:none;} .bt-usermenu.is-open{display:block;} /* згорнутий стан: меню профілю виїжджає ВГОРУ над аватаром (як у розгорнутому), лише фіксуємо ширину, бо панель вузька. Зʼявляється при наведенні або кліку. */ .bt-app.is-collapsed .bt-usermenu{left:10px;right:auto;bottom:64px;width:216px;z-index:60;} /* показ при наведенні (в обох станах панелі) керується класом is-hover через JS (mouseenter/mouseleave), а не CSS :hover — інакше меню «вискакує» одразу після оновлення сторінки, якщо курсор просто стоїть над аватаром. */ .bt-usermenu.is-hover{display:block;} /* рядок меню — той самий вигляд, що й пункт навігації (.bt-nav-row) */ .bt-usermenu__row{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:9px;cursor:pointer; font:500 13.5px/1 var(--bt-font);color:var(--bt-gray-d);text-decoration:none;} /* і , і згенерований lucide — інакше svg лишається 24px і кольору за замовч. */ .bt-usermenu__row i,.bt-usermenu__row svg{width:18px;height:18px;color:var(--bt-gray);flex:none;} .bt-usermenu__row:hover{background:var(--bt-row-active);} .bt-usermenu__row--danger,.bt-usermenu__row--danger i,.bt-usermenu__row--danger svg{color:var(--bt-coral);} /* «Журнал дій» (лише власник/CEO): зелений значок-акцент; активний стан = поточна сторінка */ .bt-usermenu__row--accent i,.bt-usermenu__row--accent svg{color:var(--bt-green);} .bt-usermenu__row.is-active{background:var(--bt-row-active);font-weight:700;color:var(--bt-ink);} .bt-usermenu__sep{margin:5px;height:1px;background:var(--bt-line);} /* Тумблер (.bt-switch) — ЄДИНЕ визначення в секції «05 · ПЕРЕМИКАЧІ ТА ПОЛЯ». Другого варіанта (34×20 з окремим __knob) більше немає — дубль імені ламав каскад; розмітки під нього ніде не було. */ .bt-usermenu__hint{font:500 11px/1.35 var(--bt-font);color:var(--bt-gray);padding:2px 13px 8px;} /* «Дивитися очима» (⭐ 01.08.2026) — модалка вибору людини з меню профілю. Живе тут, у каркасі, а не в CSS сторінки: пункт меню є на КОЖНІЙ сторінці, тож і вікно мусить виглядати однаково скрізь. Самі рядки списку — кітові .bt-picker__* (той самий вигляд, що в пікерах оргсхеми); свого тут лише абзац-пояснення, міра списку й середня колонка рядка. */ .bt-viewas__hint{font:500 13px/1.5 var(--bt-font);color:var(--bt-gray-d);margin:0 0 14px;} .bt-viewas__list{margin-top:10px;max-height:340px;overflow-y:auto;} .bt-viewas__mid{flex:1;min-width:0;} /* .bt-picker__name у киті інлайновий (у пікері він лежить у flex-обгортці) — тут робимо його рядком, інакше підпис-функція злипався б із іменем. */ .bt-viewas__mid .bt-picker__name{display:block;} /* Підпис — функції людини через «·». У кого їх десяток (Юрій, керівники), рядок роздувався на пів вікна й список ставав нечитабельним: тримаємо ОДИН рядок із багатокрапкою — вибирають усе одно за іменем. display:block обов'язковий: на інлайновому елементі overflow не діє, і багатокрапка не з'явилась би — текст просто вилазив би за край вікна. */ .bt-viewas__mid .bt-picker__role{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bt-viewas__empty{padding:18px 10px;text-align:center;font:500 13px/1.4 var(--bt-font);color:var(--bt-gray);} /* Сторінка «Доступу немає» (errors/403) — своя, без каркаса: вона мусить малюватись навіть коли зламався сам каркас. ⭐ 01.08.2026. */ .bt-err403{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;} .bt-err403__box{max-width:520px;text-align:center;background:var(--bt-card);border:1px solid var(--bt-line); border-radius:var(--bt-r-card);padding:40px 32px;box-shadow:var(--bt-sh-raise);} .bt-err403__ic{width:52px;height:52px;margin:0 auto 18px;border-radius:14px;display:flex;align-items:center; justify-content:center;background:var(--bt-row-active);} .bt-err403__ic i,.bt-err403__ic svg{width:24px;height:24px;color:var(--bt-gray-d);} .bt-err403__ttl{font:800 20px/1.25 var(--bt-font);letter-spacing:-.01em;color:var(--bt-ink);margin-bottom:10px;} .bt-err403__txt{font:500 14px/1.6 var(--bt-font);color:var(--bt-gray-d);} .bt-err403__acts{margin-top:22px;display:flex;justify-content:center;} /* ===================================================================== ДЕРЕВО / СПИСОК НАВІГАЦІЇ (.bt-tree) — КАНОНІЧНИЙ КОМПОНЕНТ --------------------------------------------------------------------- ⚠️ ПРАВИЛО ЄДНОСТІ (обов'язкове для всіх списків/дерев ЕРП): • Виділення вибраного рядка = фон var(--bt-row-active) + текст та іконка var(--bt-ink) + жирний + зелена мітка зліва (у документа в неї витягується його ж чорна крапка). Наведення — ТОЙ САМИЙ сірий: різницю несуть мітка й жирність. Рівно як у головного меню (.bt-nav-row), де активний пункт теж сидить на --bt-row-active і виділяється зеленою іконкою. ⛔ Темніший --bt-row-press у дереві НЕ вживаємо: поруч із меню два різних сірих читались як помилка (рішення Юрія 27.07.2026). НЕ використовувати синій (--bt-blue) для виділення чи навігації — синій лише для кнопок-дій і фокуса полів. • Спокійний рядок — навмисно НЕ як у меню: там --bt-gray-d/500 (меню це обрамлення), тут --bt-ink/400 (дерево це зміст сторінки). Рішення Юрія 27.07.2026 на Базі знань. Не «вирівнювати» назад під .bt-nav-row. • Другорядні рядки гілки («додати») лишаються сірими — .bt-tree__add. • Іконка типу = 18px, колір var(--bt-gray) → var(--bt-ink) в активному. • Рівні вкладеності — через CSS-змінну --d (0,1,2…) на рядку. Розмітка: .bt-tree > .bt-tree__row[style="--d:N"] з дочірніми .bt-tree__tw (трикутник) · .bt-tree__ic (іконка) · .bt-tree__label [· .bt-tree__act > .bt-tree__mini]. Перейменування — .bt-tree__rename. ===================================================================== */ /* ⭐ КРОК РІВНЯ — 24px, і це не «на око» (рішення Юрія 28.07.2026: «щоб трикутнички вкладених папок і булети статей стояли під іконкою папки зверху»). 24 = ширина колонки трикутника (14) + проміжок (8) + 2 (іконка 18px ширша за колонку трикутника на 4px, тож її центр іще на 2px правіше). Виходить, центр трикутника дитини стає рівно в центр ІКОНКИ батька (7 + 24 = 31): трикутник вкладеної папки й крапка документа сідають точно під неї, а не під батьківську стрілку. Крок один на всі три місця, де він трапляється (рядок, папка, «додати»), тому й винесений у змінну: розʼїдуться — дерево розсиплеться на дві різні сітки. */ .bt-tree{--bt-tree-step:24px;display:flex;flex-direction:column;gap:1px;} .bt-tree__row{ position:relative;display:flex;align-items:center;gap:8px; /* Відступ рівня — ЗОВНІШНІМ полем, не падінгом: інакше фон виділення тягнеться від краю панелі однаково на всіх рівнях. З margin сам блок рядка коротшає з глибиною й читається як обойма саме цього документа (рішення Юрія 27.07.2026). Плашку обтинає зліва те, що власний падінг перенесений у поле: фон стартує рівно перед крапкою, лишаючи сіру «губу», а вміст стоїть де стояв. Ще лівіше — це вже колонка трикутника, тобто повернення до фону на всю ширину. База 8px однакова в документа й папки (у папки це 2px поля + 6px падінгу), тому на одному рівні крапка документа стоїть рівно в колонці трикутника сусідньої папки, а під іконку батька їх обох заводить КРОК рівня — див. --bt-tree-step. Хто чіпає базу, чіпає й .bt-tree__add — вони мусять стояти в одну лінію. */ min-height:34px;padding:5px 8px 5px 0;margin-left:calc(var(--d,0)*var(--bt-tree-step,24px) + 8px); border-radius:9px;cursor:pointer;user-select:none; /* Спокійний рядок — ЧОРНИЙ і ТОНКИЙ (рішення Юрія 27.07.2026). Різницю з вибраним несуть фон + жирність, а не приглушений колір: дерево тут не другорядне меню, а основний зміст сторінки. */ font:400 13.5px/1 var(--bt-font);color:var(--bt-ink); transition:background .12s ease; } /* ПАПКА (є стрілочка) — плашка починається на 6px лівіше (рішення Юрія 27.07.2026: «щоб стрілочка не була зажата»). Обмін чесний: скільки знято з поля, стільки додано в падінг, тож стрілочка·іконка·підпис лишаються РІВНО там, де стояли, — ширшає тільки фон. Документам це не потрібно: у них у тій самій колонці стоїть крапка, а сіра «губа» перед нею — навмисна. */ .bt-tree__row:has(.bt-tree__tw > *){margin-left:calc(var(--d,0)*var(--bt-tree-step,24px) + 2px);padding-left:6px;} .bt-tree__row:hover{background:var(--bt-row-active);} .bt-tree__row.is-active{background:var(--bt-row-active);color:var(--bt-ink);font-weight:700;} /* трикутник розкриття — тонкий, вторинний; стоїть першим, одразу від краю плашки */ .bt-tree__tw{flex:0 0 14px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:var(--bt-gray);} .bt-tree__tw i{width:14px;height:14px;} .bt-tree__row.is-active .bt-tree__tw{color:var(--bt-ink);} /* ⭐ КРАПКА ДОКУМЕНТА = ЗЕЛЕНА МІТКА ВИБРАНОГО. Одна фігура на два стани (рішення Юрія 28.07.2026: «хочу, щоб кожна стаття була з чорним булетом, а на натисканні він — бумс — і прямокутничок»). Раніше це були дві різні речі: риска приїжджала абсолютом збоку, а листок стояв ні з чим. Тепер крапка живе в колонці трикутника й на вибраному рядку ВИТЯГУЄТЬСЯ вгору-вниз — та сама ширина, те саме місце, тому виділення читається як «моя крапка стала міткою», а не як «щось приїхало». Ширина 5px і в крапки, і в мітки — просив Юрій. Малює її :empty: у документа колонка трикутника порожня, у папки в ній стрілка, тож правило папок не чіпає — вибране в них, як і раніше, показує сіра плашка плюс зелена іконка (див. нижче). Псевдоелемент `> *` не ловить, тому :has(.bt-tree__tw > *) далі відрізняє папку від документа. Тон мітки — --bt-green-ink, ТОЙ САМИЙ, що в зеленої іконки активного пункту меню (.bt-nav-row.is-active i): обидва позначають «ти тут», тож мусять збігатися. Заливковий --bt-green тут не годиться — на 5px мітці він дає контраст ~2 і поруч із меню читається як інший зелений. «Бумс» — це easing із перельотом (.34,1.56): мітка на мить вискакує вище кінцевої висоти й сідає назад. Анімується ЛИШЕ висота/радіус/колір самої фігури, рядок не рухається. */ .bt-tree__tw:empty::before{ content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--bt-ink); transition:height .2s cubic-bezier(.34,1.56,.64,1),border-radius .2s ease,background .12s ease; } /* 20px = висота колишньої риски (top/bottom 7px у 34px рядка) — мітка лишилась тією ж, змінилось тільки, ЗВІДКИ вона береться. Прямокутник БЕЗ заокруглень (просив Юрій ще 27.07.2026), тож радіус іде в 0. */ .bt-tree__row.is-active .bt-tree__tw:empty::before{ height:20px;border-radius:0;background:var(--bt-green-ink); } /* Кому анімації протипоказані — той бачить ті самі два стани, просто без стрибка. */ @media (prefers-reduced-motion:reduce){ .bt-tree__tw:empty::before{transition:none;} } /* іконка типу — як іконки головного меню (18px, сіра → темна активна) */ .bt-tree__ic{flex:0 0 18px;display:flex;align-items:center;justify-content:center;color:var(--bt-gray);} .bt-tree__ic i,.bt-tree__ic svg{width:18px;height:18px;} .bt-tree__row.is-active .bt-tree__ic{color:var(--bt-ink);} /* ПАПКА з іконкою у вибраному стані — іконка ЗЕЛЕНА (рішення Юрія 27.07.2026). Це та сама роль «ти тут», що й зелена мітка документа: у папки мітки немає (див. правило вище — стрілка займає її колонку), тож її бере на себе іконка. Умови рівно дві й обидві обов'язкові: рядок активний І має стрілку (:has на .bt-tree__tw > *, як у правила мітки). У документа іконки немає взагалі (малюється лише на depth 0), у неактивної папки іконка лишається сірою. Тон — --bt-green-ink, ТОЙ САМИЙ, що в риски й у зеленої іконки активного пункту меню (.bt-nav-row.is-active i) — ОДИН і той самий --bt-green-ink, звірено поруч 27.07.2026: дві зелені іконки на екрані мусять бути одного тону, інакше читаються як два різні зелені. Заливковий --bt-green на 18px іконці дає ~2. */ .bt-tree__row.is-active:has(.bt-tree__tw > *) .bt-tree__ic{color:var(--bt-green-ink);} .bt-tree__emoji{font-size:15px;line-height:1;} .bt-tree__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* інлайн-перейменування */ .bt-tree__rename{flex:1;min-width:0;font:inherit;color:var(--bt-ink);background:var(--bt-card); border:1px solid var(--bt-gray-d);border-radius:6px;padding:2px 6px;outline:0;} /* дії рядка — з'являються при наведенні (нейтральні, без синього). :focus-within — щоб дії були досяжні з клавіатури: інакше до кнопок, схованих під :hover, табом не дійти взагалі. */ .bt-tree__act{display:none;align-items:center;gap:1px;flex:none;margin-left:2px;} .bt-tree__row:hover .bt-tree__act, .bt-tree__row:focus-within .bt-tree__act{display:flex;} .bt-tree__mini{width:22px;height:22px;display:flex;align-items:center;justify-content:center; border:0;background:transparent;border-radius:6px;color:var(--bt-gray);cursor:pointer;} .bt-tree__mini:hover{background:var(--bt-row-press);color:var(--bt-ink);} .bt-tree__mini i{width:15px;height:15px;} .bt-tree__mini--danger:hover{color:var(--bt-coral);} .bt-tree__empty{padding:16px 12px;color:var(--bt-gray);font:500 13px/1.5 var(--bt-font);} /* Рядок «додати» в кінці розкритої гілки (плюс + підпис). НАВМИСНО не .bt-tree__row: drag-and-drop ловить рядки саме за цим класом (rowSel), а в «додати» немає data-id — він став би перетягуваним і ламав би порядок. Не-рядки всередині гілки dnd вже вміє (так само живе .bt-tree__empty) — їде разом зі своєю групою. Поле — те саме, що в рядка-документа (рівень + 8px), тож hover-фон стає рівно під сірою плашкою сусідів. А падінг доводить плюсик до лінії їхніх підписів, а не лівіше: слот трикутника тут ні до чого, розкривати в «додати» нічого. */ .bt-tree__add{ display:flex;align-items:center;gap:8px; min-height:34px;padding:5px 8px 5px 22px;margin-left:calc(var(--d,0)*var(--bt-tree-step,24px) + 8px); border-radius:9px;cursor:pointer;user-select:none; font:500 13.5px/1 var(--bt-font);color:var(--bt-gray); transition:background .12s ease,color .12s ease; } .bt-tree__add i,.bt-tree__add svg{width:14px;height:14px;flex:none;} .bt-tree__add:hover{background:var(--bt-row-active);color:var(--bt-ink);} /* лічильник у кінці рядка + режим редагування (--edit) і стани перетягування — драйвер у bt-tree-dnd.js */ .bt-tree__n{flex:none;font:700 11px/1 var(--bt-font);color:var(--bt-gray);font-variant-numeric:tabular-nums;} /* третє входження тієї ж декларації (.bt-seg__n, .bt-arch__n) → правило трійки */ .bt-tree__row .bt-badge{flex:none;} /* бейдж у рядку не розтягує рядок і не з'їдає місце в .bt-tree__label */ .bt-tree--edit .bt-tree__row{cursor:grab;} /* тягнеться ВЕСЬ рядок: окремої drag-ручки в ЕРП немає */ /* Тач: :hover не існує, тож у режимі редагування дії мусять бути видні завжди — інакше на телефоні до «+»/«кошика» не дістатись. АЛЕ тільки на тач-пристроях: на десктопі це правило перебивало :hover вище і плюсики з кошиками світились у КОЖНОМУ рядку (правило Юрія 27.07.2026 — «тільки при наведенні»). */ @media (hover:none){ .bt-tree--edit .bt-tree__act{display:flex;} } .bt-tree__row.is-dragging{opacity:.45;} .bt-tree__row.is-droptarget{box-shadow:inset 0 0 0 2px var(--bt-gray-d);border-radius:9px;} /* «кинути всередину» — нейтральна рамка, вигляд узятий із Бази знань */ .bt-tree .bt-drop-line{background:var(--bt-ink);pointer-events:none;} /* гасить синю базову .bt-drop-line: у дереві синього бути не може (правило єдності вгорі блоку) */ /* ===================================================================== ПОШУК (.bt-search) — КАНОНІЧНЕ просте поле пошуку --------------------------------------------------------------------- Просте поле з плейсхолдером «Пошук», БЕЗ іконки-лупи. Стандарт за замовчуванням для пошуку у списках/панелях. (Винятки зі своїм виглядом: .obj-search — пошук на сторінці з кнопкою очистки; .bt-picker__search — компактний пошук у пікерах.) Нові екрани беруть .bt-search. Розмітка: , через обгортку не заскоупити; опція dropdownCssClass у нашій збірці select2 4.0.13 non-full кидає виняток і вбиває віджет). Навмисно вузький скоуп, щоб не зачепити старі сторінки з дефолтним select2 (облік часу, аналітика). */ .bt-select2 .select2-container--default .select2-selection--single{height:var(--bt-ctl-h);position:relative; box-sizing:border-box;display:flex;align-items:center; border:1px solid var(--bt-line-ctl);border-radius:var(--bt-r-ctl);background:var(--bt-card); padding:0 30px 0 12px;transition:border-color .12s ease, box-shadow .12s ease;} .bt-select2 .select2-container--default .select2-selection--single:hover{border-color:var(--bt-gray);} .bt-select2 .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--bt-ink);font:700 16px/1 var(--bt-font);padding:0;} .bt-select2 .select2-container--default .select2-selection--single .select2-selection__placeholder{ color:var(--bt-gray);font-weight:500;} .bt-select2 .select2-container--default .select2-selection--single .select2-selection__arrow{ position:absolute;top:0;right:8px;height:100%;width:12px;margin:0; display:flex;align-items:center;justify-content:center;} .bt-select2 .select2-container--default .select2-selection--single .select2-selection__arrow b{ position:static;margin:0;border-color:var(--bt-gray) transparent transparent;border-width:5px 4px 0;} .bt-select2 .select2-container--default.select2-container--open .select2-selection--single, .bt-select2 .select2-container--default.select2-container--focus .select2-selection--single{ border-color:var(--bt-blue);box-shadow:var(--bt-focus);} .bt-select2-drop.select2-dropdown{border:1px solid var(--bt-line);border-radius:var(--bt-r-input); font:600 12.5px/1.3 var(--bt-font);color:var(--bt-ink);box-shadow:0 8px 24px rgba(0,0,0,.08);overflow:hidden;} .bt-select2-drop .select2-search--dropdown .select2-search__field{border:1px solid var(--bt-line-ctl); border-radius:var(--bt-r-input);padding:7px 10px;font:600 12.5px/1 var(--bt-font);outline:none;} .bt-select2-drop .select2-results__option{padding:8px 11px;} .bt-select2-drop .select2-results__option--highlighted[aria-selected]{background:var(--bt-row-active);color:var(--bt-ink);} .bt-select2-drop .select2-results__option[aria-selected=true]{background:var(--bt-blue-tint);color:var(--bt-ink);} /* ---------- Випадайка (.bt-dd) — кастомний поповер-select ---------------- Канонічна заміна нативному усередині: нативні доступність/клавіатура/форма, а вигляд малюємо самі. Стан читається з :checked (JS не потрібен). Залитий = --bt-blue (як увімкнений тумблер). Розмітка: input ПЕРЕД .bt-check__box (селектори ~ спираються на цей порядок). */ .bt-check{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none; font:500 13.5px/1.2 var(--bt-font);color:var(--bt-ink);} .bt-check__input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;} /* прихований, але фокусований; тримається всередині свого лейбла */ .bt-check__box{flex:none;width:18px;height:18px;border-radius:var(--bt-r-6);box-sizing:border-box; border:1.5px solid var(--bt-line-ctl);background:var(--bt-card); display:grid;place-items:center;transition:background .13s ease,border-color .13s ease;} .bt-check__mark{width:12px;height:12px;color:#fff;display:block;} .bt-check__mark path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .18s ease .02s;} .bt-check:hover .bt-check__box{border-color:var(--bt-blue);} .bt-check__input:checked ~ .bt-check__box{background:var(--bt-blue);border-color:var(--bt-blue);} .bt-check__input:checked ~ .bt-check__box .bt-check__mark path{stroke-dashoffset:0;} .bt-check__input:focus-visible ~ .bt-check__box{border-color:var(--bt-blue);box-shadow:var(--bt-focus);} .bt-check__input:disabled ~ .bt-check__box{background:var(--bt-bg);border-color:var(--bt-line);} .bt-check__input:disabled ~ .bt-check__label{color:var(--bt-gray);} .bt-check:has(.bt-check__input:disabled){cursor:not-allowed;} @media (prefers-reduced-motion:reduce){.bt-check__mark path{transition:none;}} /* ===================================================================== КАРТКИ ТА KPI ★ ПРАВИЛО ТІНЕЙ (діє на ВСІ сторінки — не вигадувати своїх rgba) ★ Фон сторінки БІЛИЙ (--bt-card, див. .bt-app). Тому білу поверхню від фону відділяє ТІНЬ, а не сірий фон і не сама лише рамка. Біла картка з рамкою, але без тіні = помилка: вона «прилипає» до фону. Що брати: контейнер контенту (картка, панель, рядок списку) .... --bt-sh-raise └ якщо він клікабельний, додати :hover ............. --bt-sh-raise-hover └ якщо він розкривається (.is-open) ................ --bt-sh-open ⭐ ★ ПРАВИЛО КАРТКИ-АКОРДЕОНА (рішення Юрія 01.08.2026, канон — /payroll) ★ Усі картки ЕРП, що розкриваються по кліку, виглядають ОДНАКОВО: закрита ... білий фон + межа 1px --bt-line + радіус --bt-r-card, БЕЗ тіні (правило «списки без тіней» 31.07 — форму тримає лінія); відкрита .. та сама сіра межа ЛИШАЄТЬСЯ + синє кільце 2px зовні неї + підйом-тінь — усе це один токен --bt-sh-open. ⛔ Межу відкритої картки НЕ перефарбовувати (border-color:--bt-blue-border було на .pr-card до 01.08 — Юрій відхилив: «хочу щоб лінія залишалась як і була»). ⛔ Не збирати кільце вручну — беруть токен, інакше сторінки роз'їдуться на «різні синьі». контрол ТУЛБАРА на білому (пошук, кнопка дії) ........ --bt-sh-ctl └ його :hover ..................................... --bt-sh-ctl-hover дрібний контрол у потоці (поле, ghost-кнопка) ........ --bt-sh-outline поповер/меню ......................................... --bt-sh-pop модалка/шторка ....................................... --bt-sh-modal Як застосовувати — У ТАКОМУ ПОРЯДКУ: 1. Вішай .bt-card на розмітку — базовий клас уже містить фон+рамку+радіус+тінь. 2. Не виходить (свій радіус/падінги/структура) — успадкуй тінь класом .bt-raise / .bt-raise--link / .bt-ctl-raise (нижче). 3. Лише якщо і це не підходить — пиши box-shadow:var(--bt-sh-*) вручну. НІКОЛИ не копіюй значення тіні літералом: зміниш потім в одному місці — решта роз'їдеться. ⚠️ Пастка: box-shadow НЕ додається, а ЗАМІНЮЄТЬСЯ цілком. Якщо стан додає inset-риску, тінь спокою треба перелічити ЗАНОВО через кому, інакше вона зникне: .x--flag{box-shadow:inset 3px 0 0 var(--bt-coral),var(--bt-sh-raise);} ✅ .x--flag{box-shadow:inset 3px 0 0 var(--bt-coral);} ❌ картка стала пласкою ===================================================================== */ .bt-card{background:var(--bt-card);border:1px solid var(--bt-line);border-radius:var(--bt-r-card);padding:18px 20px;box-shadow:var(--bt-sh-raise);} .bt-card--sm{border-radius:var(--bt-r-card-sm);} .bt-card--link{cursor:pointer;transition:box-shadow .15s ease;} .bt-card--link:hover{box-shadow:var(--bt-sh-raise-hover);} .bt-card__title{font:800 16px/1.1 var(--bt-font);margin:0 0 16px;} /* Домішки тіні для випадків, коли .bt-card не надіти (своя структура/радіус). Дають ТІЛЬКИ тінь — фон, рамку й радіус лишає за собою сторінковий клас. */ .bt-raise{box-shadow:var(--bt-sh-raise);} .bt-raise--link{box-shadow:var(--bt-sh-raise);transition:box-shadow .15s ease;} .bt-raise--link:hover{box-shadow:var(--bt-sh-raise-hover);} .bt-ctl-raise{box-shadow:var(--bt-sh-ctl);transition:box-shadow .15s ease;} .bt-ctl-raise:hover{box-shadow:var(--bt-sh-ctl-hover);} /* KPI-картка (.bt-kpi / ): плоска ЛІНІЯ-рамка (без підйому-тіні), кольорова КРАПКА перед лейблом = «сім'я» показника (дохід=зелений / прибуток=синій / витрати=кораловий / нейтральне=сіре), під нею — велике значення. Виділена картка (.is-active, проп active) — 2px рамка кольору своєї сім'ї (як картка «нам винні» в оригіналі). box-sizing:border-box + компенсація відступу на 1px, щоб перехід рамки 1px→2px не зсував ні розмір, ні текст. */ .bt-kpi{--kpi-accent:var(--bt-gray);box-sizing:border-box; background:var(--bt-card);border:1px solid var(--bt-line);border-radius:var(--bt-r-card-sm);padding:15px 17px;} .bt-kpi--income{--kpi-accent:var(--bt-green);} .bt-kpi--profit{--kpi-accent:var(--bt-blue);} .bt-kpi--expense{--kpi-accent:var(--bt-coral);} .bt-kpi.is-active{border:2px solid var(--kpi-accent);padding:14px 16px;} .bt-kpi__label{display:flex;align-items:center;gap:7px;font:700 10px/1 var(--bt-font); letter-spacing:.06em;text-transform:uppercase;color:var(--bt-gray);} .bt-kpi__label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kpi-accent);flex:none;} .bt-kpi__value{font:800 22px/1 var(--bt-font);letter-spacing:-.01em;color:var(--bt-ink);margin-top:11px;} .bt-kpi__sub{font:400 12px/1.4 var(--bt-font);color:var(--bt-gray);margin-top:6px;} /* Вибірна група KPI (.bt-kpi-group, role="radiogroup"): картки стають клікабельними — вибір переносить активну рамку (.is-active, 2px колір сім'ї). Реакція на наведення: рамка кольору сім'ї + легкий підйом. Фокус із клавіатури — канонічний ореол. Роль radio, roving tabindex і стрілки — у uikit.js (поведінка), тут лише вигляд. */ .bt-kpi-group .bt-kpi{cursor:pointer;user-select:none;transition:border-color .12s ease, box-shadow .12s ease;} .bt-kpi-group .bt-kpi:hover:not(.is-active){border-color:var(--kpi-accent);box-shadow:var(--bt-sh-raise);} .bt-kpi-group .bt-kpi:focus-visible{outline:none;box-shadow:var(--bt-focus);} .bt-num{font-variant-numeric:tabular-nums;} /* ТЕКСТОВЕ ПОСИЛАННЯ (31.08.2026, правило трійки). Примітиву не було, і сателіти переоголошували його самі — 58 місць із color:var(--bt-blue-ink) і 30 із underline (.pf-short__link, .pf-file, [data-pf-worked], .hrc-link, .bt-bills-salary__proj…). Тут — один рецепт: синій ink, підкреслення на hover (а не постійне: у таблицях суцільні підкреслення шумлять), press темнішим, канонічний ореол фокуса з клавіатури. ⛔ Ставити на справжній : span із кліком з клавіатури недосяжний. Для чисел комбінувати з .bt-num, щоб цифри не пливли. */ .bt-link{color:var(--bt-blue-ink);text-decoration:none;cursor:pointer; border-radius:var(--bt-r-6);} /* радіус — лише щоб ореол фокуса не був гострим */ .bt-link:hover{text-decoration:underline;text-underline-offset:2px;} .bt-link:active{color:var(--bt-blue-press);} .bt-link:focus-visible{outline:none;box-shadow:var(--bt-focus);} .t-green{color:var(--bt-green-ink);} .t-blue{color:var(--bt-blue-ink);} .t-coral{color:var(--bt-coral-ink);} .t-ink{color:var(--bt-ink);} .t-gray{color:var(--bt-gray);} .t-gray-d{color:var(--bt-gray-d);} /* статус-бейджі. Правило Юрія 17.07.2026: фон = *-tint2 (світла заливка), текст = *-ink (колір, яким пишуть) — а не акцент по тінту, як було. */ /* ПРАВИЛО (Юрій, 26.07.2026): статус-бейдж ЗАВЖДИ в один рядок. font:700 11px/1 має line-height 1 — при переносі другий рядок наліплюється на перший впритул і пігулка розповзається вертикальним овалом. Тому white-space:nowrap тут, а не в місцях уживання: підганяти треба КОНТЕЙНЕР під найдовший статус («Здано, очікує оплати»), а не різати текст. */ .bt-badge{display:inline-block;white-space:nowrap;padding:6px 12px;border-radius:var(--bt-r-badge);font:700 11px/1 var(--bt-font);background:var(--bt-bg);color:var(--bt-gray-d);text-transform:none;} /* text-transform:none вище — захист від легасі app.css `label{text-transform:uppercase}`: бейдж усередині ) лишається звичайним → «різний шрифт». Клас .bt-badge (0-0-1-0) сильніший за label (0-0-0-1), тож регістр усюди однаковий, як задумано в киті. */ /* Статус-бейджі: клас подвоєно (специфічність 0-0-2-0), щоб колір тексту переміг легасі-правило app.css `.content a span{color:inherit}` (0-0-1-2) у картках-посиланнях (.proj-card — це ). Без цього всі бейджі всередині карток успадковували сірий --bt-gray-d замість власного кольору. Значення ті самі. */ .bt-badge.bt-badge--work{background:var(--bt-green-tint2);color:var(--bt-green-ink);} /* «Завершено» — чорна плашка, білий текст (рішення Юрія 24.07). Клас подвоєно (.bt-badge.bt-badge--done, специфічність 0-0-2-0), щоб перемогти легасі-правило app.css `.content a span{color:inherit}` (0-0-1-2): картка проєкту — це , і без подвоєння бейдж успадковував сірий --bt-gray-d від .proj-card__sub замість #fff. */ .bt-badge.bt-badge--done{background:var(--bt-ink);color:#fff;} .bt-badge.bt-badge--pause{background:var(--bt-coral-tint2);color:var(--bt-coral-ink);} /* Нейтральний сірий — статуси ДО старту робіт: «Активний продаж» і «Завтра гроші» (обидва сірі за рішенням Юрія 26.08.2026 — роботи ще нема, виділяти кольором нема за що), а також дрібні мітки «прихований», «без договору». */ .bt-badge.bt-badge--wait{background:#F2F4F6;color:var(--bt-gray-d);} /* «Здано, очікує оплати» І «Оплата підрядникам» — один синій клас (рішення Юрія 17.07 і 30.07): не заводимо четвертий акцент поза правилом трьох. 30.07 для «Оплати підрядникам» приміряли окремий фіолетовий (#9261E5/#EDE4FB) — того ж дня Юрій обрав синій: обидва статуси «грошові», хай і борг різних сторін. */ .bt-badge.bt-badge--delivered{background:var(--bt-blue-tint2);color:var(--bt-blue-ink);} /* ---------- Бейдж-пікер (.bt-badgepick) — бейдж, що МІНЯЄ статус ----------- Шеврон вниз праворуч = сигнал «статус можна змінити»; клік відкриває меню вибору іншого бейджа. Механіка формалізує наявний .proj-status. База .bt-badge лишається простою МІТКОЮ (read-only) — шеврон лише на --pick, тож звичайні бейджі на реальних сторінках не отримують стрілки. */ .bt-badge--pick{display:inline-flex;align-items:center;gap:5px;padding-right:9px;border:0;cursor:pointer;} .bt-badge--pick i,.bt-badge--pick svg{width:12px;height:12px;flex:none;opacity:.6;margin-right:-2px; transition:transform .18s ease;} .bt-badgepick{position:relative;display:inline-block;} .bt-badgepick.is-open .bt-badge--pick i,.bt-badgepick.is-open .bt-badge--pick svg{transform:rotate(180deg);} .bt-badgepick__menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:184px; background:var(--bt-card);border:1px solid var(--bt-line);border-radius:var(--bt-r-pop); box-shadow:var(--bt-sh-pop);padding:6px;display:none;flex-direction:column;gap:2px;} .bt-badgepick.is-open .bt-badgepick__menu{display:flex;} .bt-badgepick__opt{display:flex;align-items:center;background:none;border:0;text-align:left; padding:3px 6px;border-radius:var(--bt-r-9);cursor:pointer;} .bt-badgepick__opt:hover{background:var(--bt-row-active);} /* ═══════════════════ РЕЖИМ РЕДАГУВАННЯ КАРТКИ (.bt-editcard) ═══════════════ «Форма-тогл»: олівець перемикає ВСЮ картку перегляд↔форма. Ознака «поле редаговане» = поява рамкованого контролю кіту (.bt-input/.bt-select). НУЛЬ нових примітивів/токенів — layout + перемикання display + анімований морф іконки. Формалізує наявні патерни ЕРП (project #proj-edit-form + body.proj- editing; employees swap view↔edit; olівець↔галочка .bt-iconbtn.is-active). Опційний резидентний пунктир — атрибут data-cue="dashed" (вмикається свідомо). Конвенція: клас .is-editing на корені картки. ─────────────────────────────── */ .bt-editcard{background:var(--bt-card);border:1px solid var(--bt-line);border-radius:var(--bt-r-card); padding:16px 18px;box-shadow:var(--bt-sh-raise);transition:border-color .2s ease, box-shadow .2s ease;} .bt-editcard.is-editing{border-color:var(--bt-blue-border);box-shadow:none;} /* шапка: заголовок (статичний, БЕЗ підміни на «Редагування») + олівець-тумблер */ .bt-editcard__head{display:flex;align-items:center;gap:10px;margin-bottom:14px;} .bt-editcard__title{flex:1;display:flex;align-items:center;gap:8px;font:800 12.5px/1 var(--bt-font); text-transform:uppercase;letter-spacing:.04em;color:var(--bt-ink);} .bt-editcard__title i,.bt-editcard__title svg{width:16px;height:16px;color:var(--bt-gray);flex:none;} /* ── Тумблер «гліф ↔ галочка» (.bt-iconbtn--pencheck) ───────────────────── АНІМОВАНИЙ МОРФ: два глифи в одному центрі — резидентний .bt-ic-rest (олівець, шестерня, будь-що) і .bt-ic-check; крос-фейд + спін-масштаб із пружинним overshoot — плавно в обидва боки, без innerHTML-свопу (перехід не «смикається»). Стан — .is-active на самій кнопці; хто його ставить — байдуже: самостійні кнопки клікає делегат у JS, картку редагування — її власний тумблер (теж вішає .is-active). Промоушен у кіт — картка редагування · вкладки розділу · галерея іконкових кнопок. Розмір/колір глифів — від базової .bt-iconbtn (--sm = 17px). */ .bt-iconbtn--pencheck{position:relative;} /* зелений hover (натяк «редагувати»; активна галочка «Готово» теж на зеленому) */ .bt-iconbtn--pencheck:hover{background:var(--bt-green-tint);} .bt-iconbtn--pencheck.is-active:hover{background:var(--bt-green-tint2,#eaf5c6);} /* на hover темніє й сам гліф (олівець/шестерня) до --bt-ink — того ж кольору, що галочка */ .bt-iconbtn--pencheck:hover .bt-ic-rest,.bt-iconbtn--pencheck:hover .bt-ic-check{color:var(--bt-ink);} /* глифи морфа — ПАРНИЙ розмір 20px (= розмір іконок у галереї «Іконки», щоб шестерня тут дорівнювала галерейній). Центр (кнопка−гліф)/2 мусить бути ЦІЛИМ пікселем, інакше гліф сідає на пів-пікселя й симетрична шестерня антиаліаситься нерівно («крива»). 20/36=8 і 20/40=10 — ціле; непарний 19px знову дав би пів-піксель, тож рівняємо на 20. */ .bt-iconbtn--pencheck .bt-ic-rest,.bt-iconbtn--pencheck .bt-ic-check{position:absolute;top:50%;left:50%;margin:0;width:20px;height:20px; transition:opacity .2s ease, transform .34s cubic-bezier(.34,1.56,.64,1), color .12s ease;} .bt-iconbtn--pencheck .bt-ic-rest{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1;} .bt-iconbtn--pencheck .bt-ic-check{transform:translate(-50%,-50%) rotate(-120deg) scale(.2);opacity:0;} .bt-iconbtn--pencheck.is-active .bt-ic-rest{transform:translate(-50%,-50%) rotate(120deg) scale(.2);opacity:0;} .bt-iconbtn--pencheck.is-active .bt-ic-check{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1;} /* САМЕ олівець у морфі — трохи дрібніший за галочку (18 замість парних 20): акуратніше. Тільки pencil (клас .lucide-pencil від Lucide) — інші резидентні гліфи (шестерня тощо) лишаються 20px, галочка й «ареол» кнопки не міняються. 18 парне → центр (36−18)/2=9, (40−18)/2=11 — цілий піксель, гліф не сідає на пів-піксель. */ .bt-iconbtn--pencheck .bt-ic-rest.lucide-pencil{width:18px;height:18px;} /* олівець розділу: лише позиція в смузі вкладок (морф — від .bt-iconbtn--pencheck) */ .bt-subnav__edit{align-self:center;flex:none;} /* ── ★ ПОБЛОЧНЕ РЕДАГУВАННЯ СТОРІНКИ (.bt-pedit) ────────────────────────── Правило Юрія 01.08.2026 (канон — сторінка проєкту). Олівець сторінки більше НЕ розкриває всі форми одразу: він лише ВМИКАЄ режим. Далі кожен блок правиться окремо — навів мишку на блок, збоку виїхав ЙОГО олівець, натиснув — редагується САМЕ ЦЕЙ блок, решта сторінки лишається як була. .bt-pedit — обгортка блока (власного вигляду не має, лише опора) .bt-pedit__btn — олівець блока: ПОЗА карткою, справа зверху body.is-pediting — режим увімкнено (олівець сторінки) .bt-pedit.is-pedit — саме цей блок зараз редагується ⭐ 05.08.2026 (Юрій): олівці блоків видно ОДРАЗУ, щойно ввімкнено режим — напроти кожного блока свій. Людина бачить весь список того, що можна правити, і не мусить обмацувати сторінку мишкою. ⛔ Ховати їх під :hover більше не можна: олівець, якого не видно, для людини не існує. */ /* ⚠ Селектор із двох класів НАВМИСНЕ: кнопка носить ще й .bt-tip, а той нижче в цьому ж файлі ставить position:relative — з одноклясовим .bt-pedit__btn він перебивав нас, і олівець з'їжджав під низ блока замість правого верху. */ .bt-pedit{position:relative;} .bt-pedit > .bt-pedit__btn{position:absolute;top:6px;left:100%;margin-left:12px;z-index:6; opacity:0;pointer-events:none;transition:opacity .12s ease;} body.is-pediting .bt-pedit > .bt-pedit__btn{opacity:1;pointer-events:auto;} /* Місця праворуч не завжди вистачає (розгорнуте меню + вужче вікно). Тоді олівець переїжджає ВСЕРЕДИНУ блока, у правий верхній кут; клас ставить bt-pedit.js, бо жодна media query не знає, чи розгорнуте бічне меню. */ body.bt-pedit--inside .bt-pedit > .bt-pedit__btn{left:auto;right:8px;margin-left:0;} /* поле: пара перегляд/контроль в одному слоті (висота перегляду = висоті контролю → текст не «стрибає» при перемиканні) */ .bt-field{margin-bottom:13px;} .bt-field:last-child{margin-bottom:0;} .bt-field__label{display:block;margin-bottom:6px;} .bt-field__view{font:700 15px/1.35 var(--bt-font);color:var(--bt-ink);min-height:var(--bt-ctl-h); display:flex;align-items:center;} .bt-field__view--empty{color:var(--bt-gray);font-weight:500;} .bt-field__edit{display:none;} .bt-editcard.is-editing .bt-field__view{display:none;} .bt-editcard.is-editing .bt-field__edit{display:block;} .bt-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} @media (max-width:560px){.bt-field-grid{grid-template-columns:1fr;gap:0;}} /* факт під полем — до чого порівнювати те, що вписуєш (план ↔ факт). Той самий тон, що .eob-hint, але приліплений до низу поля. ПРАВОРУЧ (Юрій, 30.07): факт стоїть під сумою, а суми в полі вирівняні по правому краю (.bt-input--money) — підпис мусить бути під тим самим краєм, інакше око шукає, до чого він. Треба ліворуч — .bt-field__fact--left. */ .bt-field__fact{font:400 11px/1.35 var(--bt-font);color:var(--bt-gray);margin-top:6px;text-align:right;} .bt-field__fact--left{text-align:left;} .bt-field__fact b{font-weight:700;color:var(--bt-gray-d);} /* ⛔ Підписів секцій усередині картки (.bt-editcard__sec з лінією) тут НЕ БУЛО й НЕМА: зроблено 30.07.2026 і того ж дня ВІДКИНУТО Юрієм («хочу мінімалістичніше») разом із заголовками груп на картці проєкту. Групи розводить повітря, не підписи. Не пропонувати без нового його слова. */ /* ── Похідне значення (30.07.2026) ──────────────────────────────────── Не поле, а РЕЗУЛЬТАТ: те, що система порахувала з уведеного (плановий прибуток = бюджет − план витрат). Виглядає як плашка, а не як контрол, саме щоб не читалось «сюди вписувати». Дрібний ввід-довесок (маржа %) всередині — .bt-editcard__calc-in. */ .bt-editcard__calc{display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:var(--bt-row-active);border-radius:var(--bt-r-input);padding:11px 13px;} .bt-editcard__calc-l{font:700 10.5px/1 var(--bt-font);letter-spacing:.05em;text-transform:uppercase; color:var(--bt-gray-d);flex:none;} .bt-editcard__calc-v{font:800 16px/1 var(--bt-font);letter-spacing:-.01em;color:var(--bt-blue-ink); margin-right:auto;} .bt-editcard__calc-v.is-empty{color:var(--bt-gray);font-weight:700;font-size:14px;} .bt-editcard__calc-in{display:flex;align-items:center;gap:6px;font:600 12px/1 var(--bt-font);color:var(--bt-gray-d);} /* явно, а не успадкуванням: легасі app.css має власне правило на `label` (700 0.858rem + колір #d6d6d6, контраст ~1.5) і підпис усередині плашки вигорав до нечитабельного. Той самий регістр, що в .bt-editcard__calc-l. */ .bt-editcard__calc-in label{font:700 10.5px/1 var(--bt-font);letter-spacing:.05em;text-transform:uppercase; color:var(--bt-gray-d);margin:0;padding:0;} .bt-editcard__calc-in .bt-input{width:62px;text-align:right;padding-left:8px;padding-right:8px;} /* КАНОН (рішення Юрія 17.07): у режимі поле — ПУНКТИРНЕ (резидентний cue «сюди можна вписати»; сигналить формою рамки, тож працює й у градаціях сірого / для дальтоніків). На :focus РОЗВʼЯЗУЄТЬСЯ у штатний суцільний синій фокус кіту. Escape-hatch «чисте поле» (суцільна сіра рамка) — атрибут data-cue="clean" на .bt-editcard. Порядок правил критичний: [пунктир] → [clean] → [focus], щоб фокус перебивав обидва resting-стани. */ /* background-COLOR, не shorthand (01.08.2026): у .bt-select фоном лежить шеврон, і `background:` стирав би стрілку в режимі редагування картки. */ .bt-editcard.is-editing .bt-input, .bt-editcard.is-editing .bt-select{border-style:dashed;border-color:var(--bt-dashed);background-color:#FBFCFD;} .bt-editcard[data-cue="clean"].is-editing .bt-input, .bt-editcard[data-cue="clean"].is-editing .bt-select{border-style:solid;border-color:var(--bt-line-ctl);background-color:var(--bt-card);} .bt-editcard.is-editing .bt-input:focus, .bt-editcard.is-editing .bt-select:focus{border-style:solid;border-color:var(--bt-blue);background-color:var(--bt-card);box-shadow:var(--bt-focus);} /* канонічна випадайка .bt-dd у режимі — теж пунктирна; відкрита → синій (наявне .bt-dd.is-open) */ .bt-editcard.is-editing .bt-dd:not(.is-open) .bt-dd__ctl{border-style:dashed;border-color:var(--bt-dashed);background-color:#FBFCFD;} .bt-editcard[data-cue="clean"].is-editing .bt-dd:not(.is-open) .bt-dd__ctl{border-style:solid;border-color:var(--bt-line-ctl);background-color:var(--bt-card);} /* hover у режимі: пунктир темнішає до --bt-gray — так само, як реагує поле вводу вище (rest-правило вище має 0,5,0, тож hover мусить бути специфічнішим) */ .bt-editcard.is-editing .bt-dd:not(.is-open) .bt-dd__ctl:hover{border-color:var(--bt-gray);} /* футер дій — лише в режимі. Без лінії-відбивки над кнопками (рішення Юрія 30.07.2026, «мінімалістичніше»): кнопки й так відділені повітрям, а зайва горизонталь дробила картку на дві. */ .bt-editcard__actions{display:none;align-items:center;gap:10px;margin-top:18px;} .bt-editcard.is-editing .bt-editcard__actions{display:flex;} .bt-editcard__actions .bt-spacer{flex:1;} .bt-editcard__dirty{display:none;align-items:center;gap:7px;font:600 12px/1 var(--bt-font);color:var(--bt-gray-d);} .bt-editcard.is-dirty .bt-editcard__dirty{display:inline-flex;} .bt-editcard__dirty::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bt-blue);flex:none;} .bt-editcard:not(.is-dirty) .bt-editcard__save[disabled]{opacity:.55;cursor:not-allowed;} /* На вузькому кнопки в один рядок не влазять. Небезпечна дія йде ОКРЕМИМ рядком: ділити рядок зі «Скасувати» їй не можна — надто близькі цілі для пальця. */ @media (max-width:560px){.bt-editcard__actions{flex-wrap:wrap;}.bt-editcard__actions .bt-btn{flex:1;} .bt-editcard__actions .bt-btn--danger-soft{flex-basis:100%;order:9;}} /* ===================================================================== СПИСКИ (.bt-list) — ТРИ РІВНІ ЩІЛЬНОСТІ, одна анатомія --------------------------------------------------------------------- Канон для будь-якого переліку сутностей. Формалізує наявні патерни, що досі жили без спільного словника (тому й розходились): .obj-row/.obj-card (рівень 1), .proj-tx/.bf-row (рівень 2), .btdoc-row/.bt-tree (рівень 3). Рівень = скільки деталей на елемент, а не «інший компонент»: --cards РІВЕНЬ 1 · окремі картки, що РОЗКРИВАЮТЬСЯ — мало сутностей, багато деталей (Об'єкти, Замовники, Проекти) --table РІВЕНЬ 2 · суцільний список у рамці, рядки через лінію — багато сутностей, які треба сканувати (реєстри, транзакції) --dense РІВЕНЬ 3 · щільні рядки на білому, з вкладенням — компактно, з підпунктами (документи, дерево, розбивка) АНАТОМІЯ РЯДКА (спільна для всіх рівнів, зліва направо): tile (іконка/фото/аватар) → main (title + sub) → nums/meta → chev/act Правила: hover = --bt-list-hover; дільник = 1px --bt-line; іконка-плитка — заокруглений квадрат (заливка = тип) АБО фото 54×44 АБО круглий аватар. .bt-txico вставляється як плитка «з коробки» (типова іконка руху коштів). ===================================================================== */ .bt-list{display:flex;flex-direction:column;min-width:0;} .bt-list__item{min-width:0;} .bt-list__row{display:flex;align-items:center;gap:var(--bt-gap-stack);min-width:0; text-decoration:none;color:inherit;} .bt-list__row:hover{color:inherit;text-decoration:none;} /* --- плитка (лідируюча іконка) — три форми --- */ .bt-list__tile{flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden; width:38px;height:38px;border-radius:var(--bt-r-9);background:var(--bt-fill);} .bt-list__tile i,.bt-list__tile svg{width:18px;height:18px;color:var(--bt-gray-d);} .bt-list__tile--img{width:54px;height:44px;border-radius:var(--bt-r-input); background:var(--bt-fill) center/cover no-repeat;} /* прев'ю-фото об'єкта */ .bt-list__tile--avatar{border-radius:var(--bt-r-avatar);} /* кругла — люди */ .bt-list__tile--tx{width:30px;height:30px;} /* під .bt-txico всередині (30, як .proj-tx__dot) */ .bt-list__tile--date{flex-direction:column;background:var(--bt-zebra);} /* вісь = час: день + скор. дня тижня */ .bt-list__dnum{font:800 14px/1 var(--bt-font);color:var(--bt-ink);letter-spacing:-.02em;} .bt-list__dwd{font:700 8px/1 var(--bt-font);letter-spacing:.05em;text-transform:uppercase;color:var(--bt-gray);margin-top:2px;} /* --- середина: назва + підпис --- */ .bt-list__main{flex:1;min-width:0;} .bt-list__title{font:800 13.5px/1.2 var(--bt-font);letter-spacing:-.01em;color:var(--bt-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bt-list__sub{font:500 12px/1.3 var(--bt-font);color:var(--bt-gray-d);margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* --- права частина: числа / мета --- */ .bt-list__nums{display:flex;align-items:center;gap:36px;flex:none;} .bt-list__num{text-align:right;} .bt-list__val{font:800 15px/1 var(--bt-font);letter-spacing:-.01em;color:var(--bt-ink); font-variant-numeric:tabular-nums;} /* колір суми кодує тип руху коштів (ink-тон; заливковими текст писати НЕ можна). Стоять ПІСЛЯ .bt-list__val → та сама вага, перемагають (не потрібен інлайн-стиль). */ .bt-list__val--income{color:var(--bt-green-ink);} .bt-list__val--expense{color:var(--bt-coral-ink);} .bt-list__val--dividend{color:var(--bt-violet-ink);} .bt-list__val--transfer{color:var(--bt-ink);} /* обмін валют — нейтральний рух, але сума лишається героєм рядка (не сірий, як другорядний текст) */ .bt-list__cap{font:500 9.5px/1 var(--bt-font);letter-spacing:.06em;text-transform:uppercase; color:var(--bt-gray);margin-top:6px;} /* дрібні вторинні рядки мета-колонки — через УСПАДКУВАННЯ (0 специфічності), щоб класи-діти (.bt-list__val, .bt-list__val--income…) лишались зі своїм розміром/кольором, а не тонули під елементним .bt-list__meta div. */ .bt-list__meta{flex:none;text-align:right;font:400 11px/1.4 var(--bt-font);color:var(--bt-gray);} .bt-list__meta .bt-list__date{font-weight:700;color:var(--bt-gray-d);} /* --- шеврон розкриття --- */ .bt-list__chev{flex:none;display:flex;align-items:center;justify-content:flex-end;} .bt-list__chev i,.bt-list__chev svg{width:18px;height:18px;color:var(--bt-gray);transition:transform .18s ease;} .bt-list__item.is-open .bt-list__chev i,.bt-list__item.is-open .bt-list__chev svg{transform:rotate(180deg);} /* --- розкривні рядки (--exp): клік по рядку відкриває панель деталей. Поверхня — 2 лінії найголовнішого; те, що не влізло, живе в панелі. Придатне будь-якому рівню (частіше --table). Тогл — делеговано в JS. --- */ .bt-list--exp .bt-list__row{cursor:pointer;} /* розкривний список сам міняє висоту — скрол-якорем бути не може, інакше браузер докручує сторінку і панель «відкривається вгору» (08.08.2026) */ .bt-list--exp{overflow-anchor:none;} /* --- панель розкриття (рівні 1/2 з --exp). Межа з НАСТУПНИМ пунктом — тонка лінія знизу панелі (на всю ширину). Межа між заголовком і панеллю — поки просто біле поле, без лінії й без тіні (--bt-sh-panel-top прибрано 18.07 — Юрій готує інше рішення для цього стику). --- */ .bt-list__panel{border-bottom:1px solid var(--bt-line);padding:16px;background:var(--bt-list-open);} .bt-list__panel[hidden]{display:none;} /* деталі в панелі: сітка «мітка → значення» (.bt-dl). Мітка — дрібна uppercase, значення — 13px ink. Довге поле — на всю ширину (--wide). */ .bt-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px 28px;} .bt-dl__row{min-width:0;} .bt-dl__row--wide{grid-column:1/-1;} .bt-dl__k{font:600 9.5px/1.2 var(--bt-font);letter-spacing:.06em;text-transform:uppercase; color:var(--bt-gray);margin-bottom:5px;} .bt-dl__v{font:600 13px/1.4 var(--bt-font);color:var(--bt-ink);word-break:break-word;} .bt-dl__v--muted{font-weight:500;color:var(--bt-gray-d);} /* дії внизу панелі (Редагувати / Видалити тощо) */ .bt-list__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;} /* ── РІВЕНЬ 1 · КАРТКИ ────────────────────────────────────────────── Канон великих карток, що розкриваються, — це наявний .obj-card зі сторінки Об'єкти (baust-ui.css ~1521+): він уже несе точну геометрію, бейдж, суми, шеврон і всю мобільну поведінку. НЕ дублюємо його в .bt-list; вітрина показує саме .obj-card. Тут лишаються тільки рівні 2 і 3. */ /* ── РІВЕНЬ 2 · ТАБЛИЦЯ ────────────────────────────────────────────── */ .bt-list--table{background:var(--bt-card);border:1px solid var(--bt-line); border-radius:var(--bt-r-card);box-shadow:var(--bt-sh-raise);overflow:hidden;} .bt-list--table .bt-list__row{padding:13px 16px;border-bottom:1px solid var(--bt-line);} .bt-list--table .bt-list__item:last-child .bt-list__row{border-bottom:0;} .bt-list--table .bt-list__item.is-open .bt-list__row{border-bottom:0;} /* лінія переїжджає під панель, див. .bt-list__panel */ .bt-list--table .bt-list__item:last-child .bt-list__panel{border-bottom:0;} /* картку вже замикає її власна рамка */ .bt-list--table .bt-list__row:hover{background:var(--bt-list-hover);} .bt-list--table .bt-list__tile{width:34px;height:34px;} .bt-list--table .bt-list__tile--tx{width:30px;height:30px;} /* .bt-txico лишається канонічним (не роздувати до 34 — гліф 13px тоне) */ .bt-list--table .bt-list__tile--date{width:42px;} /* другий рядок плитки може нести місяць.рік ("07.26"), не лише день тижня — ширше 34, щоб не тиснуло */ /* хедер над списком — uppercase 10px, сірий, тонка нижня межа. Опційний перший рядок у рамці; колонки повторюють анатомію .bt-list__row: [плитка] головна → мета праворуч. */ .bt-list__head{display:flex;align-items:center;gap:var(--bt-gap-stack);padding:12px 16px; border-bottom:1px solid var(--bt-line); font:700 10px/1 var(--bt-font);letter-spacing:.05em;text-transform:uppercase;color:var(--bt-gray);} .bt-list__htile{flex:none;width:34px;} /* під плитку рядка (34px у --table) */ .bt-list__hmain{flex:1;min-width:0;} .bt-list__hend{flex:none;text-align:right;} /* ── РІВЕНЬ 2b · КАРТКИ-РЯДКИ (--cards) ────────────────────────────── Та сама анатомія, що й --table, але кожен пункт — ОКРЕМА картка з власною рамкою і повітрям між сусідами, замість спільної рамки з волосяними лініями. Беруть, коли пунктів небагато і кожен читається як самостійна річ, а не як рядок таблиці (платіж у графіку проєкту — рішення Юрія 30.07.2026: «зроби якусь таку форму, мені здається це простіше»). Модифікатор давно згадувався в адаптиві нижче, але описаний тільки тепер — до появи першого справжнього вжитку. */ .bt-list--cards{gap:10px;} .bt-list--cards .bt-list__item{background:var(--bt-card);border:1px solid var(--bt-line); border-radius:var(--bt-r-card);overflow:hidden;} .bt-list--cards .bt-list__row{padding:13px 16px;} .bt-list--cards .bt-list__row:hover{background:var(--bt-list-hover);} /* відкритий пункт — канон картки-акордеона (кільце + підйом) */ .bt-list--cards .bt-list__item.is-open{box-shadow:var(--bt-sh-open);} /* межа панелі всередині картки — ЗВЕРХУ (знизу її вже малює рамка картки) */ .bt-list--cards .bt-list__panel{border-bottom:0;border-top:1px solid var(--bt-line);} .bt-list--cards .bt-list__tile{width:34px;height:34px;} /* ── РІВЕНЬ 3 · ЩІЛЬНИЙ (з вкладенням) ─────────────────────────────── */ .bt-list--dense .bt-list__row{padding:10px 4px;gap:var(--bt-gap-stack); border-bottom:1px solid var(--bt-line);} .bt-list--dense .bt-list__item:last-child > .bt-list__row{border-bottom:0;} .bt-list--dense .bt-list__row:hover{background:var(--bt-list-hover);} .bt-list--dense .bt-list__title{font:600 13px/1.2 var(--bt-font);letter-spacing:0;} .bt-list--dense .bt-list__tile{width:30px;height:30px;border-radius:var(--bt-r-7);} /* вкладеність: рівень задається style="--lvl:1|2" на .bt-list__item */ .bt-list--dense .bt-list__item{--lvl:0;} .bt-list--dense .bt-list__row{padding-left:calc(4px + var(--lvl) * 22px);} .bt-list--dense .bt-list__item--child > .bt-list__row .bt-list__title{font-weight:500;color:var(--bt-gray-d);} /* --- порожній стан (спільний) --- */ .bt-list__empty{padding:24px;text-align:center;color:var(--bt-gray); font:500 13px/1.4 var(--bt-font);} /* ===================================================================== ВЕЛИКИЙ ПОРОЖНІЙ СТАН (.bt-empty) — «тут порожньо, і це нормально» --------------------------------------------------------------------- Для ЦІЛОЇ області, що лишилась без вмісту (стрічка фіду, коли все розібрано; список без записів). Рядкове «Нічого не знайдено» — це не сюди, для нього є `.bt-list__empty` / `.bt-dd__empty` вище. Складається з плитки з іконкою, заголовка й пояснення; за потреби — кнопка під ними (просто `.bt-btn` усередині). Розмітка: .bt-empty > .bt-empty__ic + .bt-empty__t + .bt-empty__d Чому плитка, а не гола іконка: без неї lucide малює `svg` у поточному розмірі шрифту й посеред білого поля лишається сірий значок 16px, який читається як недомальований елемент, а не як стан. Іконка тут — не декор, а те, що першим пояснює настрій (✓✓ = «все зроблено», а не «нема даних»), тож їй потрібна вага. ===================================================================== */ .bt-empty{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--bt-gap-hair);padding:56px 24px;text-align:center;} /* ⛔ 29.08.2026: display:flex перебивав атрибут hidden — фід показував «Усе розібрано» ПОВЕРХ непроведеного рядка. Порожній стан слухається hidden. */ .bt-empty[hidden]{display:none;} /* 29.08.2026 (UI): легасі label{text-transform:uppercase} бив по підпису кітового чекбокса («ОДРАЗУ ПІДТВЕРДИТИ») — той самий запобіжник, що вже стоїть на .bt-badge */ .bt-check__label{text-transform:none;} /* клавіатурний фокус на кнопках: токен --bt-focus уже є в киті, правила на .bt-btn не було. ⛔ --bt-focus — це вже ПОВНА тінь «0 0 0 2px var(--bt-ring)»: з префіксом «0 0 0 2px» виходило «0 0 0 2px 0 0 0 2px …» — невалідно, box-shadow:none, а outline уже знято, і клавіатурний фокус на всіх .bt-btn зникав (ревʼю 29.08.2026). Як у .bt-input:focus. */ .bt-btn:focus-visible{outline:none;box-shadow:var(--bt-focus);} .bt-empty__ic{display:flex;align-items:center;justify-content:center;width:52px;height:52px; margin-bottom:4px;border-radius:var(--bt-r-card);background:var(--bt-fill);color:var(--bt-gray-d);} .bt-empty__ic i,.bt-empty__ic svg{width:24px;height:24px;} /* успішний порожній стан («усе розібрано») — зелена плитка замість сірої: це не «нема даних», це «роботу закінчено» */ .bt-empty--done .bt-empty__ic{background:var(--bt-green-tint2);color:var(--bt-green-ink);} .bt-empty__t{font:700 15px/1.3 var(--bt-font);color:var(--bt-ink);} .bt-empty__d{max-width:44ch;font:500 13px/1.55 var(--bt-font);color:var(--bt-gray);} .bt-empty .bt-btn{margin-top:10px;} /* --- адаптив: числа під назву на вузькому --- */ @media (max-width:640px){ .bt-list__nums{gap:14px;} .bt-list--cards .bt-list__row,.bt-list--table .bt-list__row{flex-wrap:wrap;} .bt-list__main{flex:1 1 60%;} } /* ===================================================================== ВЕРХНЯ СМУГА (постійна на всіх сторінках) + ХОВАНЕ БІЧНЕ МЕНЮ ===================================================================== */ /* Смуга завжди зверху: ліворуч «пиріжок» (зʼявляється, коли меню сховане), далі — вкладки розділу (subnav). Липка, тож не їде при прокрутці. Усі значення ІДЕНТИЧНІ .bt-orgbar (шапка Оргсхеми) — щоб при переході між сторінками розділу (Оргсхема ↔ Співробітники) шапка, вкладки й пиріжок були однакові й не «стрибали». Розмір/вигляд пиріжка теж = .bt-orgbar__burger. */ /* Межі знизу НЕМАЄ (рішення Юрія 26.07.2026 — «спробуємо без неї»): смуга біла (--bt-card), контент під нею — --bt-bg, тож край шапки читається самим тоном, без лінії. Те саме прибрано в .bt-orgbar, щоб шапки лишались ідентичні. */ .bt-topbar{flex:none;display:flex;align-items:stretch;gap:16px;min-height:56px;padding:0 20px; background:var(--bt-card);position:sticky;top:0;z-index:30;} .bt-topbar__tabs{flex:1;display:flex;align-items:stretch;min-width:0;} /* Правий край шапки: місце для дій сторінки (олівець «режим редагування» — канонічний .bt-iconbtn--pencheck, власних стилів не потребує). */ .bt-topbar__actions{flex:none;display:flex;align-items:center;gap:8px;} .bt-topbar__burger{display:none;width:38px;height:38px;border-radius:10px;align-self:center; align-items:center;justify-content:center;cursor:pointer;background:none;border:none;flex:none;margin-left:-4px;margin-right:2px;} .bt-topbar__burger i,.bt-topbar__burger svg{width:20px;height:20px;color:var(--bt-ink);} .bt-topbar__burger:hover{background:var(--bt-row-active);} /* десктоп: пиріжок видно лише коли бічне меню сховане */ .bt-app.is-menu-hidden .bt-topbar__burger, .bt-app.is-menu-hidden .bt-orgbar__burger{display:flex;} /* сховане бічне меню (десктоп): панель зникає повністю, контент — на всю ширину */ .bt-app.is-menu-hidden .bt-sidebar{display:none;} @media (max-width:900px){ .bt-app{display:block;height:auto;overflow:visible;} /* 100vh на iOS Safari включає зону під адресну смугу — драуер стає вищим за видиму область, і футер з іменем користувача виїжджає за нижній край екрана. 100dvh — коректна висота з урахуванням адресної смуги (де підтримується); дублюємо властивість, бо старіші браузери 100dvh ігнорують і залишаються на робочому 100vh. */ /* box-shadow НЕ на базовому правилі: сайдбар зсунутий за translateX(-100%), але сама тінь (blur 60px) не зсувається разом з видимою межею й «протікає» на правий край, який після зсуву стоїть рівно на x=0 — звідси сіра смуга зліва екрана навіть коли меню закрите. Тінь вмикаємо лише в .is-menu-open, коли драуер справді виїхав і має плавати над контентом. */ .bt-sidebar{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);height:100vh;height:100dvh;} .bt-app.is-menu-open .bt-sidebar{transform:translateX(0);box-shadow:var(--bt-sh-modal);} .bt-app.is-menu-open::after{content:'';position:fixed;inset:0;background:rgba(20,30,50,.35);z-index:40;} /* мобільний: панель — оверлей, схована за замовчуванням (transform), тож desktop-правило display:none скасовуємо, а пиріжок показуємо завжди. */ .bt-app.is-menu-hidden .bt-sidebar{display:flex;} .bt-topbar__burger,.bt-orgbar__burger{display:flex;} .bt-main{height:auto;overflow:visible;} .bt-topbar{padding:0 12px;gap:8px;} .bt-content{padding:18px 16px 64px;} .bt-page-title{font-size:22px;} } /* згорнутий сайдбар (десктоп) — клік по логотипу */ .bt-app.is-collapsed .bt-sidebar{width:76px;} /* у згорнутому стані прибираємо асиметричні відступи шапки й центруємо значок, інакше він ширший за контентну зону й виглядає зміщеним. */ .bt-app.is-collapsed .bt-sidebar__head{padding:0;justify-content:center;} .bt-app.is-collapsed .bt-sidebar__logo{display:none;} .bt-app.is-collapsed .bt-sidebar__logo-mark{display:block;margin:0;} .bt-app.is-collapsed .bt-nav-row__soon, .bt-app.is-collapsed .bt-nav-group, .bt-app.is-collapsed .bt-profile__name, .bt-app.is-collapsed .bt-profile__role, .bt-app.is-collapsed .bt-profile__meta, .bt-app.is-collapsed .bt-profile > i, .bt-app.is-collapsed .bt-profile > svg{display:none;} /* текст пунктів навігації — не ховаємо різко (display:none), а плавно стискаємо до нуля й розчиняємо; тоді під час анімації ширини панелі немає «стрибка». */ .bt-app.is-collapsed .bt-nav-row span{max-width:0;opacity:0;} /* padding-left 17px → іконка стає рівно по центру 76px-рейки; перехід дає плавний зсув */ .bt-app.is-collapsed .bt-nav-row{padding:10px 17px;} .bt-app.is-collapsed .bt-profile{justify-content:center;} /* мікрозсув аватара на 1px вліво за бажанням (візуальне центрування) */ .bt-app.is-collapsed .bt-profile__ava{transform:translateX(-1px);} /* згорнутий стан: підказка з назвою кнопки праворуч при наведенні. overflow:visible на nav — щоб підказка не обрізалась краєм панелі. */ .bt-app.is-collapsed .bt-sidebar__nav{overflow:visible;} .bt-app.is-collapsed .bt-nav-row{position:relative;} .bt-app.is-collapsed .bt-nav-row:hover span{ display:block;position:absolute;left:100%;top:50%;transform:translateY(-50%); margin-left:10px;background:var(--bt-ink);color:#fff;padding:7px 11px;border-radius:9px; white-space:nowrap;font:600 12.5px/1 var(--bt-font);box-shadow:var(--bt-sh-pop); z-index:70;pointer-events:none;text-overflow:clip;overflow:visible; /* підказка має бути повністю видима, тож скидаємо «стискання» згорнутого стану. transition:none — щоб підказка з'являлась миттєво, а не «виростала» з нуля. */ max-width:none;opacity:1;transition:none;} /* ===================================================================== ОРГСХЕМА (вид усередині розділу «Компанія») Імерсивний екран: повноширинна смуга вкладок + полотно зі схемою. Власник → Департамент → Відділи → Функції (посади), у кожного ЦКП. Кольори департаменту специфічні (тінти-«папки»), тому задані локально. ===================================================================== */ /* смуга вкладок розділу (повноширинна, замість .bt-content). Це @section('topbar') сторінки Оргсхема — та сама висота/вигляд, що й постійна .bt-topbar. */ /* межі знизу немає — як і в .bt-topbar (26.07.2026) */ .bt-orgbar{flex:none;min-height:56px;display:flex;align-items:stretch;gap:16px;padding:0 20px; background:var(--bt-card);position:relative;z-index:30;} /* вкладки рендеряться класами .bt-subnav/.bt-subnav__item — тими самими, що й на інших сторінках розділу (Співробітники, Відпустки, Найм), щоб шапка була ідентичною і не «стрибала» при переході між вкладками. */ .bt-orgbar__tabs{flex:1;display:flex;align-items:stretch;border-bottom:none;margin:0;min-width:0;} .bt-orgbar__tools{flex:none;align-self:center;display:flex;align-items:center;gap:8px;} .bt-orgtoolbar{align-self:center;} .bt-orgtool{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;} .bt-orgtool i,.bt-orgtool svg{width:17px;height:17px;color:var(--bt-gray-d);} .bt-orgtool:hover{background:var(--bt-row-active);} .bt-orgtool.is-active{background:var(--bt-row-press);} .bt-orgtool.is-active i,.bt-orgtool.is-active svg{color:var(--bt-ink);} /* підказка з назвою кнопки — миттєва й оформлена так само, як у згорнутому меню зліва. Кнопки вгорі праворуч, тож показуємо підказку знизу, вирівняну по правому краю. */ .bt-orgtool[data-tip]{position:relative;} .bt-orgtool[data-tip]:hover::after{ content:attr(data-tip);position:absolute;top:100%;right:0;margin-top:8px; background:var(--bt-ink);color:#fff;padding:7px 11px;border-radius:9px; white-space:nowrap;font:600 12.5px/1 var(--bt-font);box-shadow:var(--bt-sh-pop); z-index:70;pointer-events:none;} /* «пиріжок» у смузі оргсхеми — прихований, поки бічне меню відкрите; зʼявляється, коли меню сховане (десктоп, правило .is-menu-hidden вище) або на вузьких екранах. */ .bt-orgbar__burger{display:none;width:38px;height:38px;border-radius:10px;align-self:center; align-items:center;justify-content:center;cursor:pointer;background:none;border:none; flex:none;margin-left:-4px;margin-right:2px;} .bt-orgbar__burger i,.bt-orgbar__burger svg{width:20px;height:20px;color:var(--bt-ink);} .bt-orgbar__burger:hover{background:var(--bt-row-active);} /* --- Оргсхема: вузькі екрани (планшет/мобільний, ≤900px) --- */ @media (max-width:900px){ .bt-orgbar{padding:0 12px;gap:8px;} .bt-orgbar__burger{display:flex;} /* пиріжок зліва відкриває меню */ /* вкладки можуть не вміститись — даємо горизонтальну прокрутку без смуги */ .bt-orgbar__tabs{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;} .bt-orgbar__tabs::-webkit-scrollbar{display:none;} } /* --- Оргсхема: мобільний (≤600px) --- Прибираємо кнопки «Перегляд»/«Коригування»: редагувати оргсхему з телефона не можна. На планшеті (iPad, >600px) кнопки лишаються. */ @media (max-width:600px){ .bt-orgbar__tools{display:none;} } /* полотно (біле, прокручуване) + центрована «дошка» */ .bt-orgcanvas{flex:1;min-height:0;overflow:auto;background:var(--bt-card);} /* ширину борда задає найширший рівень дерева (max-content); position:relative — база для SVG-з'єднувачів */ .bt-orgboard{position:relative;width:max-content;margin:0 auto;padding:48px 0 100px;display:flex;flex-direction:column;align-items:center;} /* картка власника */ .bt-org-owner{width:360px;background:var(--bt-card);border:1px solid var(--bt-org-line);border-radius:11px; padding:14px 18px;text-align:center;} .bt-org-owner__t{font:800 12px/1.2 var(--bt-font);text-transform:uppercase;letter-spacing:.01em;color:var(--bt-ink);} /* назва посади + людина у картці власника — по центру */ .bt-org-owner .bt-org-person, .bt-org-owner .bt-org-assign{justify-content:center;} /* людина на оргсхемі — лише фото + ім'я, без «таблетки» (фон = фон картки) */ .bt-org-person{display:inline-flex;align-items:center;gap:7px;margin-top:6px;} .bt-org-person__ava{width:22px;height:22px;border-radius:50%;background:var(--bt-avatar-bg);flex:none; display:flex;align-items:center;justify-content:center;font:800 8.5px/1 var(--bt-font);color:#5A6068; box-shadow:0 0 0 1.25px var(--bt-card);} .bt-org-person__name{font:700 10px/1 var(--bt-font);color:var(--bt-ink);} .bt-org-person{cursor:pointer;} /* кільце статусу: тонка біла лінія — у ВСІХ (відділяє фото одне від одного в стеку); якщо людина онлайн — довкола білої з'являється ще й зелена лінія. box-shadow (не border) — щоб не зсувати розмітку. */ .bt-org-person__ava.is-online{box-shadow:0 0 0 1.25px var(--bt-card),0 0 0 2.75px var(--bt-green);} /* КІЛЬКА людей на функції (різні команди): лише фото поряд із легким напливом, без імен — ім'я показує наведення (контактна картка) і бокова панель. Кільце статусу — те саме правило, що й скрізь (.bt-org-person__ava вище). */ .bt-org-people{display:inline-flex;align-items:center;margin-top:6px;} .bt-org-people__it{display:inline-flex;border-radius:50%;position:relative;cursor:pointer;} .bt-org-people__it + .bt-org-people__it{margin-left:-5px;} .bt-org-people__it:hover{z-index:2;} /* у центрованих картках (власник/CEO — на випадок майбутнього) — по центру */ .bt-org-owner .bt-org-people,.bt-org-exec .bt-org-people{justify-content:center;} /* контактна картка (hover у режимі перегляду) */ .bt-contact{position:fixed;z-index:80;width:270px;background:var(--bt-card);border:1px solid var(--bt-line); border-radius:14px;box-shadow:var(--bt-sh-pop);padding:14px;font-family:var(--bt-font);} .bt-contact__head{display:flex;align-items:center;gap:11px;margin-bottom:10px;} .bt-contact__ava{width:42px;height:42px;border-radius:50%;background:var(--bt-avatar-bg) center/cover;flex:none; display:flex;align-items:center;justify-content:center;font:800 14px/1 var(--bt-font);color:#5A6068;} .bt-contact__name{font:800 15px/1.2 var(--bt-font);color:var(--bt-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bt-contact__status{display:flex;align-items:center;gap:6px;margin-top:5px;font:500 12px/1.2 var(--bt-font);color:var(--bt-gray);} .bt-contact__status.is-online{color:var(--bt-green);} .bt-contact__dot{width:7px;height:7px;border-radius:50%;background:var(--bt-green);flex:none;} .bt-contact__row{display:flex;align-items:center;gap:10px;padding:8px 0;} .bt-contact__row + .bt-contact__row{border-top:1px solid var(--bt-line);} .bt-contact__row > i,.bt-contact__row > svg{width:17px;height:17px;color:var(--bt-gray);flex:none;} .bt-contact__val{flex:1;min-width:0;font:600 13px/1.2 var(--bt-font);color:var(--bt-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bt-contact__copy{width:28px;height:28px;border:none;background:none;border-radius:7px;cursor:pointer;flex:none; display:flex;align-items:center;justify-content:center;} .bt-contact__copy i,.bt-contact__copy svg{width:15px;height:15px;color:var(--bt-gray);} .bt-contact__copy:hover{background:var(--bt-row-active);} .bt-contact__copy.is-copied i,.bt-contact__copy.is-copied svg{color:var(--bt-green);} .bt-contact__actions{display:flex;gap:8px;margin-top:12px;} .bt-contact__btn{flex:1;display:flex;align-items:center;justify-content:center;height:40px;border-radius:10px; background:var(--bt-blue);color:#fff;font:700 13.5px/1 var(--bt-font);text-decoration:none;border:none;cursor:pointer;} .bt-contact__btn:hover{background:var(--bt-blue-press);} /* вертикальний з'єднувач */ .bt-org-link{width:1px;height:26px;background:var(--bt-org-line);} /* департамент-група: фактичну ширину задає JS (deptHtml) = рівно ряд відділів під ним; 604px (=3 відділи по 196 + 2 гепи по 8) — запасний фолбек, якщо inline-ширину не виставлено */ .bt-org-dept{width:604px;display:flex;flex-direction:column;} /* грід (не flex): номер+назва в 1-му рядку поряд, а ЦКП/бейдж доступу — прямі діти head, тож можуть зайняти 2-й рядок на всю ширину (grid-column:1/-1), не встромлені під номер, як у функцій (там номера немає, тож усе й так починається з краю картки). */ .bt-org-depthead{background:#D9E3F7;border:1px solid #C3D3EF;border-radius:10px;padding:16px 16px; display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:start;} .bt-org-depthead__num{font:900 28px/1 var(--bt-font);color:var(--bt-ink);} .bt-org-depthead__col{min-width:0;} .bt-org-depthead .bt-org-ckp,.bt-org-depthead .bt-org-prof{grid-column:1/-1;} .bt-org-name{font:800 15px/1.2 var(--bt-font);text-transform:uppercase;letter-spacing:.01em;color:#000;} .bt-org-role{font:700 9.5px/1.2 var(--bt-font);text-transform:uppercase;letter-spacing:.05em;color:var(--bt-gray-d);margin-top:4px;} .bt-org-ckp{font:400 11.5px/1.5 var(--bt-font);color:#5A6068;margin-top:7px;} .bt-org-ckp b{font-weight:500;color:var(--bt-ink);} /* бейдж профілю доступу (інструмент «Доступ» у режимі редагування) — клікабельний */ .bt-org-prof{display:inline-flex;align-items:center;gap:5px;margin-top:7px;cursor:pointer; padding:3px 8px;border-radius:7px;border:1px solid var(--bt-blue-border);background:var(--bt-blue-tint); font:700 10px/1.2 var(--bt-font);color:var(--bt-blue);white-space:nowrap;} .bt-org-prof i,.bt-org-prof svg{width:13px;height:13px;} .bt-org-prof:hover{background:var(--bt-blue-tint2);} .bt-org-prof.is-empty{border-color:var(--bt-dashed);background:var(--bt-bg);color:var(--bt-gray);border-style:dashed;} /* ряд відділів */ /* ряд відділів: flex:1 — заповнює всю висоту колонки (тіла відділів дотягуються вниз); align-items:stretch — усі відділи однакової висоти, до низу колонки. 196px + gap 8px — компактніша схема по ширині (розміри синхронні з UNIT_W/UNIT_GAP у JS). */ .bt-org-units{display:flex;gap:8px;align-items:stretch;margin-top:10px;flex:1 1 auto;} .bt-org-unit{width:196px;flex:none;background:#D9E3F7;border:1px solid #C3D3EF;border-radius:9px; padding:16px 11px 16px;} /* грід — та сама логіка, що й у .bt-org-depthead вище: ЦКП/бейдж на повну ширину, не під номером */ .bt-org-unit__head{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:start;min-height:118px;padding-bottom:14px;} .bt-org-unit__num{font:900 17px/1 var(--bt-font);color:var(--bt-ink);min-width:16px;text-align:center;} .bt-org-unit__col{min-width:0;} .bt-org-unit__head .bt-org-ckp,.bt-org-unit__head .bt-org-prof{grid-column:1/-1;} .bt-org-unit .bt-org-name{font-size:12px;} .bt-org-unit .bt-org-role{font-size:8.5px;} .bt-org-unit .bt-org-ckp{font-size:9.5px;line-height:1.42;margin-top:8px;} /* функція (посада) — тонка лінія-розділювач зверху; перша лінія на всю ширину картки */ .bt-org-pos{padding:16px 4px 16px;margin-top:0;border-top:1px solid var(--bt-org-line);position:relative;} .bt-org-unit__head + .bt-org-pos{margin:0 -11px;padding:16px 15px;} /* остання функція у відділі: прибираємо її нижній відступ, щоб простір до краю картки задавав сам відділ (18px) — без подвоєння 16+18. */ .bt-org-unit > .bt-org-pos:last-child{padding-bottom:0;} /* підфункції — другорядні щодо своєї функції: без фону/рамки-картки (інакше переважають увагу над батьком) і без горизонтальних ліній між ними. Замість цього — своя коротка вертикальна риска зліва в КОЖНОЇ підфункції (не одна суцільна на весь список): проміжок між рисками (=gap) сам показує межу між сусідніми підфункціями. Назва — приглушеним кольором (не таким контрастним, як у самої функції) і без великих літер. */ .bt-org-pos__subs{margin-top:10px;display:flex;flex-direction:column;gap:16px;} /* риска — псевдоелемент, що виступає за межі свого блоку В ПРОМІЖОК (gap), а не border-left самого блоку — так вона довша, а відстань між написами лишається рівно gap, не росте разом з нею. */ .bt-org-pos__subs .bt-org-pos{border:none;background:none;padding:0 0 0 11px;margin:0;} /* однаковий виступ з обох боків у КОЖНОЇ підфункції (перша й остання — не виняток), щоб усі риски були однакової довжини; не більш як половина gap (16px), інакше сусідні зіллються. */ .bt-org-pos__subs .bt-org-pos::before{content:'';position:absolute;left:0;top:-6px;bottom:-6px; width:1px;background:var(--bt-org-line);} .bt-org-pos__subs .bt-org-pos__name{color:var(--bt-gray-d);text-transform:none;font-weight:700;} /* кнопка «+Підфункція» — прямий нащадок .bt-org-pos (сестра .bt-org-pos__subs, не всередині неї) */ .bt-org-pos > .bt-org-adddash{font-size:9px;padding:6px;} /* ---- верхівка-дерево: CEO + заступники, ряди-слоти, з'єднувачі ---- */ /* SVG-шар з'єднувачів — позаду карток, масштабується разом з #org-zoom */ .bt-org-svg{position:absolute;top:0;left:0;z-index:0;pointer-events:none;overflow:visible;} /* З'єднувачі дерева малює org-chart.js через . Колір тримаємо ТУТ: presentation-атрибут stroke="..." у JS не вміє var(). Тон — --bt-org-line (темніший виняток Оргсхеми, див. :root), не загальний --bt-line. */ .bt-org-svg line{stroke:var(--bt-org-line);} /* усі вузли дерева — над лініями */ .bt-orgboard > .bt-org-owner, .bt-orgboard > .bt-org-execrow, .bt-orgboard > .bt-org-deprow, .bt-orgboard > .bt-org-ckp-company, .bt-orgboard > .bt-org-adddash{position:relative;z-index:1;} /* рівні CEO та заступників: слоти з фіксованою шириною = ширині групи департаментів унизу. Однакові верхні відступи обох рядів (30px) тримають заступників РІВНО посередині між гендиректором і департаментами. */ .bt-org-execrow{display:flex;gap:24px;align-items:flex-start;margin-top:30px;} /* ряд заступників: усі картки однакової висоти (тягнуться до найвищої) */ .bt-org-execrow--stretch{align-items:stretch;} .bt-org-slot{flex:none;display:flex;justify-content:center;} /* ряд УСІХ департаментів — горизонтально, з тим самим проміжком, що й слоти (DEPT_GAP=24 — трохи більше повітря між департаментами). align-items:stretch → усі колонки однакової висоти (дотягнуті до смуги ЦКП унизу). */ .bt-org-deprow{display:flex;gap:24px;align-items:stretch;margin-top:30px;} /* картка керівництва (CEO / заступник). Ширину задає JS інлайном (CEO — фікс, заступник — «покриває» групу). min-height + --stretch у ряду роблять заступників однакової висоти. */ .bt-org-exec{background:var(--bt-card);border:1px solid var(--bt-org-line);border-radius:10px;min-height:96px; padding:14px 16px;text-align:center;position:relative;} .bt-org-exec__t{font:800 12.5px/1.25 var(--bt-font);text-transform:uppercase;letter-spacing:.01em;color:var(--bt-ink);} .bt-org-exec .bt-org-ckp{margin-top:8px;text-align:center;} .bt-org-exec .bt-org-person,.bt-org-exec .bt-org-assign{justify-content:center;} /* ЦКП у картці власника (тепер показуємо) — компактніше, по центру */ .bt-org-owner .bt-org-ckp{margin-top:8px;text-align:center;} /* кнопка «додати департамент» під рядом — окремий відступ */ .bt-org-adddash--dept{margin-top:18px;} /* ЦКП КОМПАНІЇ — широка біла смуга внизу (висота як департамент, великі літери). align-self:stretch → на всю ширину дерева (= ряд департаментів). */ .bt-org-ckp-company{align-self:stretch;margin-top:10px;min-height:96px; display:flex;align-items:center;justify-content:center;gap:10px; background:#fff;border:1px solid var(--bt-org-line);border-radius:10px; padding:18px 36px;text-align:center; text-transform:uppercase;font:800 30px/1.3 var(--bt-font);color:var(--bt-ink);letter-spacing:.015em;} .bt-org-ckp-company b{color:var(--bt-blue);flex:none;} /* редагування ЦКП компанії (режим «Текст»): природний регістр (щоб не зберігся ВЕРХНІЙ через innerText), видима клікабельна зона навіть коли порожньо; клік у будь-яке місце смуги починає редагування (див. caretToPoint у JS) */ .bt-org-ckp-company span[contenteditable="true"]{text-transform:none; min-width:140px;text-align:left;} .bt-org-ckp-company--edit{cursor:text;} /* Режим «Текст» — за еталоном дизайну: поле під курсором отримує легкий сірий тінт, активне поле — суцільний сірий блок із синьою обводкою навколо ЦІЛОГО блоку (двохрядкова назва чи ЦКП виділяються одним прямокутником, не рядками). width:fit-content — рамка по тексту; блок лишається блочним, тож сусідні елементи (людина, роль) не злипаються з назвою в один рядок. */ .bt-orgcanvas--live [contenteditable="true"]{cursor:text;outline:none;border-radius:5px; display:block;width:fit-content;max-width:100%;padding:3px 6px;margin:-3px -6px;} .bt-orgcanvas--live [contenteditable="true"]:hover{background:rgba(20,30,50,.06);} .bt-orgcanvas--live [contenteditable="true"]:focus{background:#EDEFF2; box-shadow:0 0 0 2px var(--bt-blue);color:var(--bt-ink);} .bt-orgcanvas--live [contenteditable="true"]::selection{background:#C6D8FB;} .bt-orgcanvas--live [contenteditable="true"]::-moz-selection{background:#C6D8FB;} /* назви у центрованих картках (власник, CEO/заступники): тримаємо по центру (text-align:center на блок із fit-content не діє — центруємо авто-маргінами) */ .bt-orgcanvas--live .bt-org-owner__t[contenteditable="true"], .bt-orgcanvas--live .bt-org-exec__t[contenteditable="true"]{margin-left:auto;margin-right:auto;} /* ЦКП компанії: лейбл і текст в одному рядку, рамка по span цілим блоком */ .bt-orgcanvas--live .bt-org-ckp-company span[contenteditable="true"]{display:inline-block;vertical-align:top;} /* ЦКП у режимі «Текст»: рамка охоплює цілий блок разом із написом «ЦКП:». Сам span усередині — без власної рамки (інакше було б дві). */ .bt-org-ckp--edit{border-radius:6px;padding:3px 6px;margin-left:-6px;margin-right:-6px;cursor:text;} .bt-org-ckp--edit:hover{background:rgba(20,30,50,.06);} .bt-org-ckp--edit:focus-within{background:#EDEFF2;box-shadow:0 0 0 2px var(--bt-blue);} .bt-org-ckp--edit span[contenteditable="true"]{display:inline;padding:0;margin:0;border-radius:0;} .bt-org-ckp--edit span[contenteditable="true"]:hover, .bt-org-ckp--edit span[contenteditable="true"]:focus{background:none;box-shadow:none;} /* ===================================================================== ОРГСХЕМА — ЖИВИЙ ЕКРАН (зум/панорама, редагування, бокова панель) ===================================================================== */ .bt-main--fixed{overflow:hidden;height:100vh;scrollbar-gutter:auto;} /* на мобільному .bt-main стає height:auto — для оргсхеми тримаємо повну висоту, щоб полотно зі схемою мало куди розгорнутись. 100dvh — коректна висота з урахуванням адресної смуги мобільного браузера (де підтримується). */ @media (max-width:900px){ .bt-main--fixed{height:100vh;height:100dvh;overflow:hidden;} } /* полотно з масштабуванням: панорама-перетягуванням, зум колесом. user-select:none — щоб під час панорами текст НЕ виділявся; у полях редагування виділення повертаємо. touch-action:none — жести (пан пальцем, пінч-зум) дістаються схемі, а не нативному скролу/зуму сторінки (мобільний/планшет). */ .bt-orgcanvas--live{position:relative;overflow:hidden;cursor:grab;touch-action:none; user-select:none;-webkit-user-select:none;-moz-user-select:none;} .bt-orgcanvas--live [contenteditable="true"]{user-select:text;-webkit-user-select:text;-moz-user-select:text;} .bt-orgcanvas--live.is-panning{cursor:grabbing;} /* НЕ ставимо will-change:transform постійно — інакше браузер кешує растр на 1× і розмиває текст при збільшенні. Промоцію вмикаємо лише під час руху (у JS). */ .bt-orgzoom{position:absolute;top:0;left:0;transform-origin:0 0;} .bt-orgzoom .bt-orgboard{margin:0;padding:48px 0 120px;} /* рамка-індикатор режиму редагування */ .bt-orgcanvas--live.is-edit::after{content:'';position:absolute;inset:0;border:3px solid var(--bt-coral); pointer-events:none;z-index:15;border-radius:2px;} /* елементи керування зумом (правий нижній кут) */ .bt-zoomctl{position:absolute;right:18px;bottom:18px;z-index:18;display:flex;flex-direction:column;gap:6px; background:var(--bt-card);border:1px solid var(--bt-line);border-radius:12px;padding:6px;box-shadow:var(--bt-sh-card);} .bt-zoomctl button{width:34px;height:34px;border:none;background:none;border-radius:8px;cursor:pointer; display:flex;align-items:center;justify-content:center;color:var(--bt-gray-d);} .bt-zoomctl button:hover{background:var(--bt-bg);} .bt-zoomctl button i,.bt-zoomctl button svg{width:17px;height:17px;} .bt-zoomctl__val{font:700 10px/1 var(--bt-font);color:var(--bt-gray);text-align:center;padding:2px 0;} /* кнопки навігації полотна (правий нижній кут, за мобільним еталоном): зменшити / збільшити / вписати — горизонтальний білий блок із розділювачами */ .bt-orgzoomctl{position:absolute;right:16px;bottom:16px;z-index:18;display:flex; background:var(--bt-card);border:1px solid var(--bt-line);border-radius:12px; box-shadow:0 4px 16px rgba(20,30,50,.12);overflow:hidden;} .bt-orgzoomctl button{width:44px;height:44px;border:none;background:none;cursor:pointer; display:flex;align-items:center;justify-content:center;color:var(--bt-ink);padding:0;} .bt-orgzoomctl button + button{border-left:1px solid var(--bt-line);} .bt-orgzoomctl button:hover{background:var(--bt-row-active);} .bt-orgzoomctl button i,.bt-orgzoomctl button svg{width:19px;height:19px;} .bt-orgzoomctl button[data-zoom="fit"] i,.bt-orgzoomctl button[data-zoom="fit"] svg{width:18px;height:18px;color:var(--bt-gray-d);} /* підказка інструмента (унизу по центру) */ .bt-toolhint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:18; background:var(--bt-ink);color:#fff;font:600 11.5px/1.3 var(--bt-font);padding:7px 13px;border-radius:9px; box-shadow:0 4px 14px rgba(20,30,50,.2);white-space:nowrap;pointer-events:none;} /* панель інструментів редагування (у смузі вкладок) */ .bt-orgtoolbar{flex:1;display:flex;align-items:center;gap:3px;} .bt-orgtoolbar__btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:9px; border:none;background:none;cursor:pointer;font:600 12.5px/1 var(--bt-font);color:var(--bt-gray-d);white-space:nowrap;} .bt-orgtoolbar__btn i,.bt-orgtoolbar__btn svg{width:16px;height:16px;color:var(--bt-gray);} .bt-orgtoolbar__btn:hover{background:var(--bt-row-active);color:var(--bt-ink);} .bt-orgtoolbar__btn.is-active{background:var(--bt-green-tint);color:var(--bt-ink);} .bt-orgtoolbar__btn.is-active i,.bt-orgtoolbar__btn.is-active svg{color:#5C7A12;} .bt-orgtoolbar__sep{width:1px;height:22px;background:var(--bt-line);margin:0 5px;} /* у перегляді «клік» лише на назві (відкриває бокову панель); решта — панорама (grab) */ .bt-orgcanvas--live:not(.is-edit) .bt-org-name, .bt-orgcanvas--live:not(.is-edit) .bt-org-pos__name, .bt-orgcanvas--live:not(.is-edit) .bt-org-owner__t{cursor:pointer;} /* у режимі призначення вся картка клікабельна */ .bt-orgcanvas--live.is-assign .bt-org-depthead, .bt-orgcanvas--live.is-assign .bt-org-unit, .bt-orgcanvas--live.is-assign .bt-org-pos, .bt-orgcanvas--live.is-assign .bt-org-owner{cursor:pointer;} /* у режимі «Колір» клікабельна ціль — шапка департаменту */ .bt-orgcanvas--live.is-color .bt-org-depthead{cursor:pointer;} /* інлайн-кнопки додавання/видалення на картках */ .bt-org-act{position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:6px;background:var(--bt-card); border:1px solid var(--bt-line-ctl);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;} .bt-org-act i,.bt-org-act svg{width:13px;height:13px;color:var(--bt-gray);} .bt-org-act:hover{background:var(--bt-row-active);} .bt-org-act--add{border-color:var(--bt-green-border);} .bt-org-act--add i,.bt-org-act--add svg{color:#7A9A1C;} .bt-org-act--add:hover{background:var(--bt-green-tint);} .bt-org-depthead,.bt-org-unit,.bt-org-owner{position:relative;} /* кнопка-пунктир «додати» всередині */ .bt-org-adddash{margin-top:9px;border:1.5px dashed var(--bt-dashed);border-radius:9px;padding:10px; display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;color:var(--bt-gray); font:700 10px/1 var(--bt-font);text-transform:uppercase;letter-spacing:.03em;} .bt-org-adddash:hover{border-color:var(--bt-blue);color:var(--bt-blue);} .bt-org-adddash i,.bt-org-adddash svg{width:13px;height:13px;} /* лінія-вставка при перетягуванні */ .bt-drop-line{position:absolute;background:var(--bt-blue);border-radius:2px;z-index:8;} .bt-org-unit.is-dragging,.bt-org-pos.is-dragging{opacity:.45;} /* контейнер-ціль, коли блок кидають «усередину» (в інший відділ/департамент) */ .bt-org-unit.is-drop-target,.bt-org-depthead.is-drop-target{outline:2px dashed var(--bt-blue);outline-offset:3px;} /* призначена людина (чип) + кнопка «призначити» */ .bt-org-assign{display:inline-flex;align-items:center;gap:6px;margin-top:6px;border:1px dashed var(--bt-dashed); border-radius:8px;padding:4px 9px;cursor:pointer;font:700 9px/1 var(--bt-font);text-transform:uppercase; letter-spacing:.03em;color:var(--bt-gray-d);background:none;} .bt-org-assign:hover{border-color:var(--bt-blue);color:var(--bt-blue);} .bt-org-assign i,.bt-org-assign svg{width:12px;height:12px;} /* поповер вибору людини */ .bt-picker{position:fixed;z-index:80;width:268px;background:var(--bt-card);border:1px solid var(--bt-line); border-radius:12px;box-shadow:var(--bt-sh-pop);padding:6px;max-height:340px;overflow-y:auto;} .bt-picker__search{display:flex;align-items:center;gap:7px;background:var(--bt-bg);border-radius:8px;padding:7px 9px;margin-bottom:4px;} .bt-picker__search i,.bt-picker__search svg{width:14px;height:14px;color:var(--bt-gray);flex:none;} .bt-picker__search input{border:none;outline:none;background:none;font:500 12.5px/1 var(--bt-font);width:100%;color:var(--bt-ink);} .bt-picker__row{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;cursor:pointer;text-align:left;border:none;background:none;width:100%;} .bt-picker__row:hover{background:var(--bt-bg);} .bt-picker__ava{width:30px;height:30px;border-radius:50%;background:var(--bt-avatar-bg) center/cover;flex:none; display:flex;align-items:center;justify-content:center;font:800 10px/1 var(--bt-font);color:#5A6068;} .bt-picker__name{font:700 13px/1.1 var(--bt-font);color:var(--bt-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bt-picker__role{font:500 10.5px/1.2 var(--bt-font);color:var(--bt-gray);margin-top:2px;} .bt-picker__row--clear .bt-picker__ava{background:none;border:1px dashed var(--bt-dashed);} /* нотатка вгорі пікера у мульти-режимі («можна кілька людей») */ .bt-picker__note{padding:7px 11px 6px;font:600 10.5px/1.35 var(--bt-font);color:var(--bt-gray-d); background:var(--bt-bg);border-radius:8px;margin-bottom:4px;} /* поповер вибору кольору департаменту (інструмент «Колір») */ .bt-colorpop{width:236px;padding:12px;max-height:none;} .bt-colorpop__title{font:800 10.5px/1 var(--bt-font);letter-spacing:.05em;text-transform:uppercase;color:var(--bt-gray-d);margin:2px 2px 10px;} .bt-colorpop__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;} .bt-colorpop__sw{aspect-ratio:1;border-radius:9px;border:1.5px solid transparent;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0;transition:transform .1s ease;} .bt-colorpop__sw:hover{transform:scale(1.07);} .bt-colorpop__sw i,.bt-colorpop__sw svg{width:15px;height:15px;color:var(--bt-ink);} .bt-colorpop__custom{display:flex;align-items:center;gap:9px;margin-top:11px;padding:7px 8px;border-radius:9px; cursor:pointer;font:600 12.5px/1 var(--bt-font);color:var(--bt-gray-d);} .bt-colorpop__custom:hover{background:var(--bt-bg);color:var(--bt-ink);} .bt-colorpop__custom input{width:26px;height:26px;border:1px solid var(--bt-line-ctl);padding:1px;background:none;cursor:pointer;border-radius:7px;flex:none;} /* бокова панель (деталі блоку) */ @keyframes btSlideIn{from{transform:translateX(100%);}to{transform:translateX(0);}} @keyframes btFadeIn{from{opacity:0;}to{opacity:1;}} .bt-side-overlay{position:fixed;inset:0;background:rgba(20,28,44,.34);z-index:60;animation:btFadeIn .2s ease;} .bt-side{position:fixed;top:0;right:0;bottom:0;width:min(54%,760px);z-index:61;background:var(--bt-bg); box-shadow:-12px 0 50px rgba(20,30,50,.22);display:flex;flex-direction:column;animation:btSlideIn .26s cubic-bezier(.22,.61,.36,1);} .bt-side__head{flex:none;background:var(--bt-card);border-bottom:1px solid var(--bt-line);padding:18px 26px;display:flex;align-items:center;gap:12px;} .bt-side__swatch{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 1.5px #D0D4DA;} .bt-side__title{font:800 21px/1.15 var(--bt-font);letter-spacing:-.01em;} .bt-side__sub{font:500 12.5px/1 var(--bt-font);color:var(--bt-gray-d);margin-top:5px;} .bt-side__x{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;border:none;background:none;margin-left:auto;} .bt-side__x:hover{background:var(--bt-row-active);} .bt-side__body{flex:1;min-height:0;overflow-y:scroll;scrollbar-gutter:stable;padding:24px 26px 40px;} .bt-side__card{background:var(--bt-card);border:1px solid var(--bt-line);border-radius:14px;padding:18px 20px;} .bt-side__card + .bt-side__card{margin-top:16px;} .bt-side__label{font:800 11px/1 var(--bt-font);letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px;} .bt-side__ckp{font:500 14px/1.6 var(--bt-font);color:var(--bt-ink);} .bt-side__child{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--bt-line);} .bt-side__child:last-child{border-bottom:none;} .bt-side__dot{width:7px;height:7px;border-radius:50%;background:var(--bt-green);flex:none;margin-top:6px;} /* Модалка підтвердження — остання перепона перед дією, яку не відкотиш. ⚠️ z-index 1200 > .bt-modal (1000): підтвердження часто питають ПОВЕРХ уже відкритої модалки (напр. «замінити доступи всередині?» над повноекранною модалкою доступів). На 90 воно виринало ПІД нею — вікно видно, а кнопки не натиснути, бо кліки перехоплює модалка (спіймано браузерним прогоном 29.07.2026). Нижче лишається тільки тост (1400) — він нічого не перекриває. */ .bt-confirm{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:rgba(20,28,44,.4);animation:btFadeIn .15s ease;} .bt-confirm__box{background:var(--bt-card);border-radius:16px;box-shadow:var(--bt-sh-modal);padding:24px;width:380px;max-width:92vw;} .bt-confirm__t{font:800 17px/1.3 var(--bt-font);margin-bottom:8px;} .bt-confirm__d{font:500 13px/1.5 var(--bt-font);color:var(--bt-gray-d);margin-bottom:20px;} .bt-confirm__row{display:flex;gap:10px;justify-content:flex-end;} /* ===================================================================== МОДАЛКА (форма/вміст поверх сторінки) — загальний кітовий примітив. Скрим .bt-modal затемнює ВСЮ сторінку (разом із сайдбаром), картка .bt-modal__box = head (заголовок+✕) / body (скрол) / foot (дії). Керує bt-modal.js: [data-bt-modal-open="id"] відкриває #id; [data-bt-modal-close], клік по скриму або Esc — закривають. Серверне відкриття: лишити елемент без атрибута hidden. Демо на /uikit. */ .bt-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center; padding:40px 20px;background:var(--bt-scrim);overflow-y:auto;animation:btFadeIn .16s ease;} .bt-modal[hidden]{display:none;} .bt-modal__box{width:100%;max-width:600px;margin:auto;background:var(--bt-card);border-radius:18px; box-shadow:var(--bt-sh-modal);display:flex;flex-direction:column;max-height:calc(100vh - 80px);min-height:0; animation:btModalIn .22s cubic-bezier(.22,.61,.36,1);} @keyframes btModalIn{from{opacity:0;transform:translateY(10px) scale(.99);}to{opacity:1;transform:none;}} .bt-modal__head{flex:none;display:flex;align-items:center;gap:12px;padding:20px 24px 16px;border-bottom:1px solid var(--bt-line);} .bt-modal__ic{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center; background:var(--bt-green-tint2);} .bt-modal__ic i,.bt-modal__ic svg{width:20px;height:20px;color:var(--bt-green-ink);} .bt-modal__ttl{flex:1;min-width:0;font:800 18px/1.2 var(--bt-font);letter-spacing:-.01em;color:var(--bt-ink);} .bt-modal__x{width:38px;height:38px;border-radius:10px;flex:none;border:none;background:none;cursor:pointer; display:flex;align-items:center;justify-content:center;color:var(--bt-gray);} .bt-modal__x:hover{background:var(--bt-row-active);color:var(--bt-ink);} .bt-modal__x i,.bt-modal__x svg{width:20px;height:20px;} .bt-modal__body{flex:1;min-height:0;overflow-y:auto;padding:22px 24px;} .bt-modal__foot{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:10px; padding:15px 24px;border-top:1px solid var(--bt-line);border-radius:0 0 18px 18px;background:var(--bt-card);} body.bt-modal-lock{overflow:hidden;} @media (max-width:640px){ /* на телефоні модалка = повний екран (зручніше за крихітну картку) */ .bt-modal{padding:0;} .bt-modal__box{max-width:none;min-height:100vh;min-height:100dvh;max-height:none;border-radius:0;margin:0;} .bt-modal__foot{position:sticky;bottom:0;border-radius:0;} } /* --full — модалка МАЙЖЕ НА ВЕСЬ ЕКРАН. Для випадків, де вміст сам по собі великий і його не можна стиснути в 600px: перший такий — «Доступ до документа» в Базі знань (оргсхема компанії + колонка людей). Не робити --full типовою: звичайна форма в широкій модалці читається гірше. */ .bt-modal--full{align-items:stretch;padding:24px;} .bt-modal--full .bt-modal__box{max-width:1560px;height:100%;max-height:none;margin:0;} .bt-modal--full .bt-modal__body{padding:0;display:flex;min-height:0;} @media (max-width:640px){ .bt-modal--full{padding:0;} } /* ===================================================================== ДОКУМЕНТ БАЗИ ЗНАНЬ (.bt-kbdoc) — типографіка довгого тексту --------------------------------------------------------------------- Єдине місце в ЕРП, де читають суцільний текст, а не таблиці. Тому тут свій ритм заголовків і абзаців; той самий блок обслуговує і перегляд, і contenteditable-редагування (клас не змінюється, змінюється лише атрибут). Вміст санітизується на записі — App\Support\HtmlSanitizer::kbArticle. ===================================================================== */ /* ШКАЛА РОЗМІРІВ (перебрана 27.07 після скарги «текст зливається»). Було 15 / 17 / 21 / 26 — крок від тексту до h3 виходив лише 1.13, а h3 і жирний шматок абзацу мали ще й ОДНАКОВУ вагу 700: заголовок розділу читався як звичайний виділений рядок. Стало 16 / 19 / 24 / 30 — рівний крок ≈1.25 (класична «мала терція»), кожен наступний рівень видно без вимірювання. Вага теж розводить рівні: ЗАГОЛОВОК — завжди 800, жирне В ТЕКСТІ — 700. 1.55, а не 1.7 (рішення Юрія 27.07): стаття читається щільніше, менше скролу. Ширину колонки під цей кегль тримає .bt-kb__page (660px ≈ 80 знаків у рядку). */ .bt-kbdoc{font:500 16px/1.55 var(--bt-font);color:var(--bt-ink);text-wrap:pretty;} .bt-kbdoc:focus{outline:none;} /* ВІДСТУПИ = ієрархія. Простір НАД заголовком у ~2.5 раза більший за простір ПІД ним: так заголовок «прилипає» до свого тексту й відривається від попереднього розділу (правило близькості). Симетричні відступи, які тут були, робили рівно навпаки — заголовок висів окремо від усього. Нижнє поле підняте 28.07 (14/12/8 → 18/15/12, скарга Юрія на h3): під h3 часто йде НЕ звичайний абзац, а жирний рядок-підзаголовок («Блок 1 — …»), і на 8px два заголовки злипались в один. Перевага «над» лишається безумовною. */ .bt-kbdoc h1{font:800 30px/1.22 var(--bt-font);letter-spacing:-.02em;margin:48px 0 18px;} .bt-kbdoc h2{font:800 24px/1.28 var(--bt-font);letter-spacing:-.015em;margin:40px 0 15px;} .bt-kbdoc h3{font:800 19px/1.4 var(--bt-font);letter-spacing:-.01em;margin:30px 0 12px;} /* Перший блок статті свій верхній відступ не тягне — його задає #kb-body. */ .bt-kbdoc > :first-child{margin-top:0;} .bt-kbdoc p{margin:0 0 20px;} .bt-kbdoc ul,.bt-kbdoc ol{margin:0 0 20px;padding-left:24px;} /* 6px між пунктами (27.07): рівно нуль було добре для однорядкових пунктів, але тут пункти на два рядки — без зазору вони зливались в один сірий блок. Зазор МЕНШИЙ за міжабзацний (20px), тож список і далі читається як одне ціле. */ .bt-kbdoc li{margin:0;} .bt-kbdoc li + li{margin-top:6px;} /* Цитата в БЗ — це НЕ «чиїсь слова збоку», а головна теза статті (рішення Юрія 27.07): сірий текст читався як другорядний, тобто рівно навпаки. Тому вона найтемніше місце сторінки — чорний ink + вага 600, без заливки й без курсиву (нахил на довгому рядку капслоком тільки шкодить читанню). Смуга зліва навмисно НЕ --bt-line: це не розділювач, а акцент самої цитати — на тон лінії вона б зникла разом із рештою меж сторінки. */ .bt-kbdoc blockquote{margin:26px 0 26px;padding-left:18px;border-left:3px solid var(--bt-ink); color:var(--bt-ink);font-weight:600;} /* Абзаци всередині цитати зʼявляються, коли цитатою роблять уже написаний текст (кнопка «Цитата» загортає готові

). Свій нижній відступ останнього абзацу додався б до відступу самої цитати — виходила б зайва дірка під нею. */ .bt-kbdoc blockquote > p:last-child{margin-bottom:0;} /* Лінія — розрив між частинами статті, тож простір навколо неї найбільший у документі: інакше вона читається як межа таблиці, що стоїть поруч. */ .bt-kbdoc hr{border:none;border-top:1px solid var(--bt-line);margin:38px 0 34px;} /* ТАБЛИЦЯ СТАТТІ (.bt-kbt-*, 04.08.2026 — «хочу коригувати таблиці, як у Notion»). Розкладку й розміри тримає САМА РОЗМІТКА, а не стилі сторінки: ширина колонки живе в , висота рядка — в , обʼєднання — у colspan/rowspan. Так вигляд таблиці переживає збереження (App\Support\ HtmlSanitizer::KB_ATTRS пропускає рівно ці атрибути) і однаково читається в редагуванні, у перегляді, в історії версій і в друку. */ .bt-kbdoc table{border-collapse:collapse;width:100%;margin:6px 0 24px;} .bt-kbdoc td,.bt-kbdoc th{border:1px solid var(--bt-line);padding:10px 13px; font:500 15px/1.5 var(--bt-font);vertical-align:top;text-align:left; /* Колонку задає людина, а не вміст: без цього одне довге слово (посилання, артикул) розпирало б вузьку колонку й ламало розставлені ширини. */ overflow-wrap:break-word;} .bt-kbdoc th{font-weight:700;background:var(--bt-bg);} /* Ширини розставлені руками. `fixed` тут ОБОВʼЯЗКОВИЙ: у режимі auto браузер вважає лише побажанням і однаково перерозподіляє колонки під вміст — перетягнута межа поверталась би назад сама. */ .bt-kbdoc table.bt-kbt--fixed{table-layout:fixed;} /* Товщина ліній — три рівні плюс «без ліній». Колір той самий --bt-line: у системі одна лінія (правило Юрія 26.07.2026), змінюється лише її вага. */ .bt-kbdoc table.bt-kbt--lines0 td,.bt-kbdoc table.bt-kbt--lines0 th{border-color:transparent;} .bt-kbdoc table.bt-kbt--lines2 td,.bt-kbdoc table.bt-kbt--lines2 th{border-width:2px;} .bt-kbdoc table.bt-kbt--lines3 td,.bt-kbdoc table.bt-kbt--lines3 th{border-width:3px;} /* Без ліній шапка лишається єдиним орієнтиром — тримаємо під нею межу, інакше таблиця розсипається на незрозумілі стовпчики тексту. */ .bt-kbdoc table.bt-kbt--lines0 th{border-bottom-color:var(--bt-line);} .bt-kbdoc a{color:var(--bt-blue-ink);} .bt-kbdoc a:hover{color:var(--bt-ink);} /* Без заокруглення (рішення Юрія 27.07): у БЗ це майже завжди СКРІНШОТ, у якого свої прямі кути й контент до самого краю — радіус зрізав би його ріжки. */ .bt-kbdoc img{max-width:100%;display:block;margin:8px 0 22px;} /* картинка ще летить на сервер: показуємо локальне превʼю приглушеним, щоб було видно і КУДИ вона стала, і що робота ще триває (пульсація ловить око) */ .bt-kbdoc img.is-uploading{opacity:.45;animation:bt-kbup 1.2s ease-in-out infinite;} @keyframes bt-kbup{50%{opacity:.7;}} @media (prefers-reduced-motion:reduce){.bt-kbdoc img.is-uploading{animation:none;}} /* ВІДЕО. Плеєр YouTube/Vimeo живе прямо в тексті — на всю ширину колонки і в пропорції 16:9, тож ані висоту, ані розміри в розмітці задавати не треба (їх сервер із