/* ═══════════════════════════════════════════════════════════════
   Клієнтська панель — стилі кабінету ПОВЕРХ дизайн-системи v2.
   База (токени, каркас, меню, картки, таблиця, кнопки, форми) —
   у kp-design.css. Тут лише те, чого в дизайн-системі немає:
   стани завантаження, екрани розділів, детальна картка задачі,
   специфіка форми, вкладка «Керування», видалення з модерацією,
   список проєктів і блоки дашборда техспеціаліста.
   Кожне окреме правило прокоментоване.
   ═══════════════════════════════════════════════════════════════ */

/* ── Стани: завантаження, помилка, збереження ────────────────── */

.kp-loading {
	padding: 26px; /* ті самі відступи, що в .kp-empty з дизайн-системи */
	color: var(--kp-muted); /* приглушений текст — це службовий стан */
	text-align: center; /* по центру блоку */
}

.kp-error {
	padding: 26px; /* однаково зі станом завантаження */
	color: var(--kp-red); /* червоний — щось пішло не так */
	text-align: center; /* по центру блоку */
}

.kp-save-msg {
	color: var(--kp-green); /* зелений — підтвердження успішного збереження */
	font-size: 13px; /* дрібний службовий розмір */
}

/* Правка 356: той самий підпис, але червоний, коли це помилка.
   Клас вішає setSaveMsg() у kp-frontend.js. Раніше помилка була
   зеленою і виглядала як підказка. */
.kp-save-msg-error {
	color: var(--kp-red) !important; /* !important: перебиває .kp-save-msg і .kp-legend, у яких колір заданий так само класом */
}

/* ── Топбар: неактивні кнопки-заглушки ───────────────────────── */

/* Пошук і сповіщення поки не реалізовані (зафіксовано в ТЗ, розділ 5):
   кнопки стоять за прототипом, але вимкнені й притлумлені. */
.kp-icon-btn-soon {
	opacity: 0.45; /* притлумлюємо — видно, що кнопка ще не працює */
	cursor: default; /* без курсора-руки — натискати нема на що */
}

/* ── Екрани розділів (панелі за пунктами меню) ───────────────── */

/* Контент кожного розділу меню — окрема панель; видима лише активна.
   Перемикання без перезавантаження робить kp-frontend.js. */
.kp-pane {
	display: none; /* неактивний розділ прихований */
}

.kp-pane-active {
	display: flex; /* активний розділ показуємо */
	flex-direction: column; /* блоки розділу один під одним, як у .kp-main */
	gap: 18px; /* той самий вертикальний ритм, що в .kp-main */
}

/* ── Детальна картка задачі (перегляд) ───────────────────────── */

.kp-back {
	align-self: flex-start; /* кнопка не розтягується на ширину колонки */
	margin-bottom: 2px; /* невеликий відступ до картки нижче */
	padding: 0; /* без відступів — це посилання, а не кнопка */
	border: none; /* без рамки */
	background: none; /* без заливки */
	color: var(--kp-accent); /* бузковий, як усі посилання системи */
	font-family: inherit; /* Raleway */
	font-size: 13.5px; /* дрібний розмір, як у .kp-btn-ghost */
	font-weight: 600; /* напівжирний */
	cursor: pointer; /* курсор-рука */
}

.kp-back:hover {
	background: none; /* тема заливала «← До списку» малиновим на hover (правка 0.7.1) */
	color: var(--kp-dark); /* реакція на наведення — потемніння, як у .kp-btn-ghost */
	text-decoration: none; /* без підкреслення від стилів посилань теми */
}

.kp-card-badges {
	display: flex; /* бейджі пріоритету й статусу в один ряд */
	flex-wrap: wrap; /* на вузькому екрані переносимо */
	gap: 8px; /* зазор між бейджами */
	margin-bottom: 16px; /* відступ до полів картки */
}

.kp-card-field {
	margin-bottom: 10px; /* вертикальний ритм між полями картки */
	font-size: 14px; /* базовий розмір тексту */
}

.kp-card-field strong {
	display: inline-block; /* щоб працювала мінімальна ширина */
	min-width: 170px; /* підписи полів вирівняні в колонку */
	color: var(--kp-muted); /* приглушений — це підпис, не значення */
	font-weight: 600; /* напівжирний */
}

.kp-card-description {
	margin: 16px 0; /* повітря навколо блоку опису */
	padding: 16px; /* внутрішні відступи */
	border-radius: var(--kp-radius-sm); /* невелике скруглення */
	background: var(--kp-surface-soft); /* бузкова підкладка відділяє опис від полів */
}

.kp-card-actions {
	display: flex; /* кнопки дій в один ряд */
	flex-wrap: wrap; /* на вузькому екрані переносимо */
	align-items: center; /* вирівнювання по центру */
	gap: 10px; /* однаковий зазор між діями */
	margin-top: 20px; /* відрив від полів картки */
}

/* ── Форма задачі (створення й редагування) ──────────────────── */

/* База полів — .kp-field / .kp-label / .kp-input / .kp-grid
   з дизайн-системи; тут лише каркас самої форми. */
/* Форми кабінету у дві колонки (правка 0.10.0.3). Раніше кожне поле
   тягнулось на всю ширину картки, і навіть коротка форма клієнта
   перетворювалась на нескінченне полотно. Тепер поля стають парами,
   а на всю ширину лишається тільки те, чому це справді потрібно:
   багаторядковий текст, заголовки розділів, підказки й кнопки. */
.kp-form {
	display: grid; /* сітка замість вертикального стека */
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* дві рівні колонки; minmax(0) не дає довгому значенню розпирати колонку */
	gap: 14px 18px; /* вертикальний ритм той самий, по горизонталі трохи більше */
	align-items: start; /* поля з підказками не розтягують сусіда по висоті */
	margin-top: 16px; /* відступ від заголовка картки */
}

/* Службові обгортки видимості (показати поля підтримки, абонемента,
   пакета) не мають бути коміркою сітки: інакше все, що всередині,
   тиснеться в половину ширини, і блок абонемента виходив вузьким
   стовпчиком поруч із порожнечею. display:contents пропускає обгортку,
   і поля всередині стають повноцінними комірками (правка 0.10.0.4). */
.kp-form > [data-support-only],
.kp-form > [data-abonement-only],
.kp-form > [data-package-only],
.kp-form > [data-parts-only] {
	display: contents; /* обгортка не малюється, її діти лягають у сітку */
}

/* Елементи, які завжди займають обидві колонки. Селектори без «>»:
   вони можуть лежати і всередині обгорток видимості. */
.kp-form h3,
.kp-form .kp-form-heading,
.kp-form .kp-actions,
.kp-form .kp-form-block,
.kp-form > .kp-form-grid2,
.kp-form > .kp-legend,
.kp-form > p {
	grid-column: 1 / -1; /* на всю ширину форми */
}

/* Багаторядкові поля теж на всю ширину: у половині картки писати текст
   незручно. Решта полів лишаються в парах. */
.kp-form > .kp-field:has( textarea ),
.kp-form > .kp-field-wide {
	grid-column: 1 / -1; /* на всю ширину форми */
}

/* На вузьких екранах форма складається в один стовпчик. */
@media (max-width: 720px) {
	.kp-form {
		grid-template-columns: 1fr; /* одна колонка */
	}
}

.kp-textarea {
	min-height: 140px; /* запас висоти, якщо TinyMCE не підвантажився */
	font-family: inherit; /* не системний monospace, а Raleway */
}

/* ── Вкладка «Керування» (розділ 5.4, макет 07) ──────────────── */

/* Рядок черги видалень: з правки 281 (06.09.2026) розмітка спільна з
   Головною (.kp-queue-row, стилі нижче в блоці «Правка 259 → 281»);
   .kp-approve-row лишився лише як гачок для обробників JS. */

.kp-manage-soon {
	margin: 0; /* прибираємо типовий відступ абзацу */
	padding: 12px 16px; /* відступи як у рядка черги */
	border: 1px dashed var(--kp-line); /* пунктир — ознака «ще не зроблено» */
	border-radius: var(--kp-radius-sm); /* однакове скруглення */
	background: none; /* без заливки — блок неактивний */
	color: var(--kp-faint); /* блідий текст */
	font-size: 13px; /* дрібний службовий розмір */
}

/* ── Видалення з модерацією (розділ 4.9) ─────────────────────── */

/* Позначка «На видалення» біля назви задачі в списку. */
.kp-badge-del {
	display: inline-block; /* щоб працювали padding і радіус */
	margin-left: 8px; /* відступ від назви задачі */
	padding: 2px 8px; /* компактні внутрішні відступи */
	border-radius: var(--kp-radius-pill); /* капсула */
	background: var(--kp-red-soft); /* світло-червоне тло */
	color: var(--kp-red); /* червоний текст */
	font-size: 11.5px; /* дрібний службовий розмір */
	font-weight: 600; /* напівжирний, щоб читалось на дрібному кеглі */
	vertical-align: middle; /* не з'їжджає відносно назви задачі */
}

/* Плашка в картці задачі: «чекає підтвердження адміна». */
.kp-notice-del {
	margin-bottom: 14px; /* відступ до заголовка картки */
	padding: 10px 14px; /* внутрішні відступи плашки */
	border: 1px solid #f6d5d5; /* приглушена червона рамка, як у .kp-btn-danger */
	border-left-width: 4px; /* акцентна смуга зліва */
	border-radius: var(--kp-radius-sm); /* скруглення як у решти плашок */
	background: var(--kp-red-soft); /* світло-червоне тло */
	color: #8f2626; /* темно-червоний текст, як у .kp-note-danger */
	font-size: 13.5px; /* трохи менше за основний текст */
}

/* ── Список проєктів (рядки-картки, розділ 5.2) ──────────────── */

.kp-project-list {
	display: flex; /* рядки проєктів вертикальним потоком */
	flex-direction: column; /* один під одним */
	gap: 8px; /* просвіт між рядками */
}

.kp-project-row {
	display: flex; /* назва ліворуч, підсумок праворуч */
	align-items: center; /* вирівнювання по центру */
	justify-content: space-between; /* розводимо по краях */
	padding: 14px 16px; /* внутрішні відступи рядка */
	border-radius: var(--kp-radius-sm); /* невелике скруглення */
	background: var(--kp-surface-soft); /* бузкова підкладка на білій картці */
	cursor: pointer; /* рядок веде в картку проєкту */
}

.kp-project-row:hover {
	background: var(--kp-accent-soft); /* світло-бузкова підсвітка при наведенні */
}

.kp-project-row-name {
	font-weight: 600; /* назва проєкту — головне в рядку */
}

.kp-project-row-url {
	color: var(--kp-muted); /* приглушена адреса сайту */
	font-weight: 400; /* звичайне накреслення */
}

.kp-project-row-right {
	color: var(--kp-muted); /* приглушений підсумок праворуч */
	font-size: 13.5px; /* трохи менше за основний текст */
	white-space: nowrap; /* лічильник задач не переносимо */
}

/* Блок «Задачі проєкту» в картці проєкту (розділ 5.2). */
.kp-project-tasks {
	margin-top: 26px; /* помітний відрив від полів картки проєкту */
	padding-top: 20px; /* повітря під роздільною лінією */
	border-top: 1px solid var(--kp-line); /* лінія-роздільник між карткою і задачами */
}

/* Шеврон-підказка, що рядок клікабельний. */
.kp-chevron {
	width: 24px; /* вузька службова колонка */
	color: var(--kp-faint); /* блідий — це підказка, не акцент */
	font-size: 18px; /* трохи більший, щоб стрілка читалась */
	text-align: right; /* притискаємо стрілку до правого краю */
}

/* ── Головна PM/адміна (прототипи dashboard-pm, dashboard-admina) ─ */

/* Дві короткі картки поруч: стосом вони лишали б порожнечу праворуч. */
.kp-two-cols {
	display: grid; /* сітка з двох колонок */
	grid-template-columns: 1fr 1fr; /* порівну */
	gap: 18px; /* той самий просвіт, що в .kp-main */
}

@media (max-width: 1100px) {
	.kp-two-cols {
		grid-template-columns: 1fr; /* на вузькому екрані картки стосом */
	}
}

/* Рядок задачі в блоці «Потребують уваги». */
.kp-attn-row {
	display: flex; /* бейдж, назва й проєкт в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 10px; /* зазор між частинами */
	padding: 10px 0; /* вертикальні відступи */
	border-bottom: 1px solid var(--kp-line); /* тонкий роздільник */
	font-size: 13px; /* дрібний розмір */
	cursor: pointer; /* рядок веде в картку задачі */
}

.kp-attn-row:last-child {
	border-bottom: none; /* під останнім лінія зайва */
}

/* Проєкт праворуч, як у рядках «Найближчих дедлайнів». */
.kp-attn-proj {
	margin-left: auto; /* притискаємо до правого краю */
	color: var(--kp-muted); /* приглушений */
	font-size: 12px; /* дрібний розмір */
	white-space: nowrap; /* назву проєкту не переносимо */
}

/* Черга підтверджень на Головній: стилі в блоці «Правка 259 → 281». */

/* ── Дашборд техспеціаліста (прототип dashboard-tehspecialista) ─ */

/* Компактний перемикач «у пакеті / поза пакетом» прямо в рядку
   таблиці: виконавець ставить його під час роботи, і заради цього
   не варто відкривати картку (розділ 6.5 ТЗ). */
.kp-pkg-in,
.kp-pkg-out {
	max-width: 150px; /* вужче за звичайний фільтр — колонка службова */
	height: 30px; /* нижчий за фільтри, щоб не роздувати рядок таблиці */
	padding: 4px 28px 4px 10px; /* праворуч місце під стрілку */
	font-size: 12px; /* дрібний розмір */
	background-position: right 9px center; /* стрілку підтягуємо ближче до краю */
}

/* Поза пакетом — бурштиновий, бо ця задача піде в рахунок клієнту. */
.kp-pkg-out {
	border-color: var(--kp-amber); /* бурштинова рамка як сигнал */
	color: var(--kp-amber); /* і текст у той самий колір */
}

/* Вільні задачі окремим блоком угорі: для техспеціаліста це головна
   точка входу в роботу. У списку вони теж є, але там губляться. */
.kp-free-box {
	padding: 16px 18px; /* внутрішні відступи блоку */
	border: 1px solid var(--kp-amber); /* бурштинова рамка — той самий сигнал, що й жовтий рядок */
	border-radius: var(--kp-radius); /* скруглення як у карток */
	background: var(--kp-amber-soft); /* світло-бурштинова заливка */
}

.kp-free-head {
	display: flex; /* заголовок ліворуч, лічильник праворуч */
	align-items: center; /* вирівнювання по центру */
	gap: 10px; /* зазор між частинами */
	margin-bottom: 12px; /* відступ до рядків задач */
	color: var(--kp-amber); /* бурштиновий заголовок */
	font-size: 13px; /* дрібний розмір */
	font-weight: 700; /* жирний */
}

.kp-free-row {
	display: flex; /* назва ліворуч, кнопка праворуч */
	align-items: center; /* вирівнювання по центру */
	justify-content: space-between; /* розводимо по краях */
	gap: 12px; /* зазор між частинами */
	padding: 10px 14px; /* внутрішні відступи рядка */
	margin-bottom: 8px; /* просвіт між задачами */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-surface); /* білий рядок на бурштиновій підкладці */
	cursor: pointer; /* рядок веде в картку задачі (правка 0.7.1) */
}

.kp-free-row:last-child {
	margin-bottom: 0; /* під останнім рядком відступ зайвий */
}

/* Найближчі дедлайни — коротка витримка з календаря. */
.kp-soon-row {
	display: flex; /* дата, назва й проєкт в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 12px; /* зазор між частинами */
	padding: 10px 0; /* вертикальні відступи */
	border-bottom: 1px solid var(--kp-line); /* тонкий роздільник */
	font-size: 13px; /* дрібний розмір */
	cursor: pointer; /* рядок веде в картку задачі */
}

.kp-soon-row:last-child {
	border-bottom: none; /* під останнім лінія зайва */
}

/* Дата зліва фіксованої ширини, щоб назви вирівнялись у стовпчик. */
.kp-soon-date {
	flex: 0 0 62px; /* фіксована ширина колонки дати */
	color: var(--kp-muted); /* приглушений колір */
	font-weight: 600; /* напівжирний */
}

.kp-soon-date-late {
	color: var(--kp-red); /* прострочено — червоним */
}

.kp-soon-proj {
	margin-left: auto; /* проєкт притискаємо до правого краю */
	color: var(--kp-muted); /* приглушений */
	font-size: 12px; /* дрібний розмір */
}

/* ═══════════════════════════════════════════════════════════════════
   КАРТКА ЗАДАЧІ ТА ПЕРЕПИСКА (реліз 0.8)
   Джерело правди: prototypes/kartka-zadachi.html і
   prototypes/kartka-zadachi-tehspecialist.html. Класи й значення
   перенесені 1:1 з прототипів.
   ═══════════════════════════════════════════════════════════════════ */

/* Дві колонки картки: ліворуч дані задачі, праворуч робота над нею. */
.kp-task-cols {
	display: grid; /* сітка з двох колонок */
	grid-template-columns: 300px 1fr; /* ліва фіксована, права забирає решту */
	gap: 18px; /* просвіт між колонками */
	align-items: start; /* колонки не тягнуться одна під одну по висоті */
}

/* Права колонка — вертикальний стос карток. */
.kp-task-work {
	display: flex; /* стос по вертикалі */
	flex-direction: column; /* один під одним */
	gap: 18px; /* просвіт між картками */
}

@media (max-width: 1024px) {
	.kp-task-cols {
		grid-template-columns: 1fr; /* на вузькому екрані одна колонка */
	}
}

/* ── Ліва колонка: рядки «підпис — значення» (розділ 4.2) ────────── */

.kp-meta {
	display: flex; /* підпис і значення в один рядок */
	justify-content: space-between; /* значення притиснуте вправо */
	align-items: center; /* по центру, бо в частині рядків контроли */
	gap: 12px; /* мінімальний зазор */
	padding: 10px 0; /* вертикальні відступи рядка */
	border-bottom: 1px solid var(--kp-line); /* тонкий роздільник */
	font-size: 13.5px; /* дрібніше за основний текст */
}

.kp-meta:last-of-type {
	border-bottom: none; /* під останнім рядком лінія зайва */
}

.kp-meta-key {
	flex: 0 0 auto; /* підпис не стискається */
	color: var(--kp-muted); /* приглушений колір підпису */
}

.kp-meta-val {
	min-width: 0; /* довге значення переноситься, а не розпирає рядок */
	text-align: right; /* значення до правого краю */
	font-weight: 600; /* напівжирне — це дані, на які дивишся */
}

/* Правка 337 (рішення Оксани 06.09.2026): галочка «Telegram підключено»
   на кнопці Telegram у топбарі (десктоп): зелене коло в правому
   верхньому куті, як індикатор дзвіночка, лише зелене і з галочкою. */
.kp-tg-ok {
	position: absolute;
	top: -3px;
	right: -3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 2px solid var(--kp-surface);
	border-radius: var(--kp-radius-pill);
	background: var(--kp-green);
	color: #fff;
}

.kp-tg-ok[hidden] {
	display: none; /* атрибут hidden програвав би inline-flex вище */
}

.kp-tg-ok .kp-ico {
	width: 10px;
	height: 10px;
	stroke-width: 2.5;
	color: #fff;
}

/* 337: блок Telegram у меню існує лише на мобайлі (див. мобільний блок). */
.kp-nav-tg {
	display: none;
}

/* Правка 316 (рішення Оксани 06.09.2026, третє нагадування): вікно
   «Мій профіль» без зайвих відступів. Рядок імені одразу під
   заголовком; чекбокси списком з кроком 8 (у .kp-check є min-height
   42px під висоту сусіднього поля, тут він ні до чого); кнопка
   «Підключити Telegram» з обводкою, іконкою і на всю ширину, 16 зверху.
   Усі ролі, обидві платформи. */
.kp-modal-backdrop .kp-profile-head {
	margin-bottom: 8px;
	padding-bottom: 0;
}

.kp-modal-backdrop .kp-profile-name {
	margin: 0;
}

.kp-modal-backdrop .kp-profile-check {
	min-height: 0;
	margin: 0;
}

.kp-modal-backdrop .kp-profile-check + .kp-profile-check {
	margin-top: 8px;
}

.kp-modal-backdrop .kp-profile-check + .kp-legend {
	margin-top: 12px;
}

.kp-modal-backdrop .kp-tg-connect {
	/* kp-btn-keep у розмітці: у вікнах .kp-btn стають посиланнями (239),
	   а тут потрібна саме кнопка з обводкою. */
	display: inline-flex;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
}

.kp-modal-backdrop .kp-tg-connect .kp-ico {
	width: 18px;
	height: 18px;
	color: #2aabee; /* літачок у колір Telegram, як у топбарі (169) */
}

/* Правка 324 (рішення Оксани 06.09.2026): форма проєкту. Обгортки
   полів тарифікації прозорі для сітки (display: contents), інакше
   кілька полів тиснулись в одну комірку, а поруч лишалась дірка.
   Три короткі поля підтримки (Пакет | Дата | Ціна) у три колонки на
   всю ширину форми; на вузькому екрані стосом. Між групами 24. */
.kp-form > .kp-form-contents,
.kp-form-grid3 > .kp-form-contents {
	display: contents;
}

.kp-form .kp-form-grid3 {
	grid-column: 1 / -1; /* без «>»: лежить усередині прозорої обгортки */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 18px;
	align-items: start;
}

@media (max-width: 720px) {
	.kp-form .kp-form-grid3 {
		grid-template-columns: 1fr;
	}
}

/* Правка 323 (рішення Оксани 06.09.2026): блок «Послуги проєкту» у
   формі редагування. Тіло блока на всю ширину (раніше було однією
   коміркою сітки і тиснулось у півширини), плитки послуг (.kp-psvc-card, бо .kp-svc-card уже зайнятий каталогом у «Керуванні») білі з
   контуром на бузковому фоні, між плитками 12, завершені окремим
   сірим рядком, форма додавання через 16 в один ряд. */
.kp-form-block > [data-services-cards-body] {
	grid-column: 1 / -1;
}

.kp-psvc-card {
	padding: 16px;
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius);
	background: var(--kp-surface); /* біла плитка на бузковому фоні блока */
}

.kp-psvc-card + .kp-psvc-card {
	margin-top: 12px;
}

.kp-psvc-card > .kp-legend {
	margin-top: 6px;
}

.kp-psvc-card .kp-psvc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 10px;
}

/* Дії плитки посиланнями, не кнопками. */
#kp-dashboard-app .kp-psvc-actions .kp-btn,
#kp-dashboard-app .kp-psvc-actions .kp-btn-ghost {
	min-height: 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--kp-accent);
	font-size: 13px;
	font-weight: 600;
	box-shadow: none;
}

#kp-dashboard-app .kp-psvc-actions .kp-btn:hover,
#kp-dashboard-app .kp-psvc-actions .kp-btn-ghost:hover {
	color: var(--kp-dark);
	background: none;
}

.kp-psvc-history {
	margin-top: 12px;
}

.kp-psvc-attach {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto; /* селект, дата (коли є), кнопка */
	gap: 12px;
	align-items: end; /* кнопка в рівень із полем, а не з підписом */
	margin-top: 16px;
}

#kp-dashboard-app .kp-psvc-attach .kp-btn-dark {
	white-space: nowrap;
}

@media (max-width: 720px) {
	.kp-psvc-attach {
		grid-template-columns: 1fr; /* стосом на вузькому екрані */
	}

	#kp-dashboard-app .kp-psvc-attach .kp-btn-dark {
		width: 100%;
		justify-content: center;
	}
}

/* Правка 321 (06.09.2026): у формі рахунка підсумок «Сума робіт /
   Знижка / Разом» праворуч, підпис впритул до цифри (в колонці «Сума»).
   Правило 262 ставить усе по лівому краю з !important, тому тут теж
   !important, лише для підвалу цієї таблиці. */
.kp-modal-backdrop .kp-invoice-edit tfoot td {
	text-align: right !important;
}

.kp-modal-backdrop .kp-invoice-edit tfoot td[colspan] {
	padding-right: 14px; /* невеликий зазор між підписом і цифрою */
}

.kp-modal-backdrop .kp-invoice-edit tfoot td:last-child {
	width: 30px; /* порожня клітинка під колонкою хрестика, щоб цифра стояла під «Сума» */
}

/* Правки 320, 332 (06.09.2026): шапка вбудованого списку документів:
   заголовок + дві кнопки в ряд («+ Новий документ» чорна, «+ Виставити
   рахунок» з обводкою). Короткі підписи кнопок показує лише мобайл. */
.kp-btn-short {
	display: none;
}

.kp-docs-head .kp-list-actions {
	flex-wrap: nowrap;
}

/* Правка 319 (06.09.2026): у вкладці «Фінанси» картки проєкту «Оплати»
   і «Витрати» окремими картками з рамкою, між ними 16. Шапка блока
   (заголовок + кнопка) без зайвого відступу зверху. */
.kp-fin-block {
	margin-top: 16px;
	padding: 16px;
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius);
	background: var(--kp-surface);
	min-width: 0; /* широка таблиця гортається всередині, а не розпирає картку */
	overflow: hidden;
}

.kp-fin-block .kp-table-wrap {
	overflow-x: auto;
}

.kp-fin-block > .kp-card-head {
	margin-bottom: 12px;
}

.kp-fin-block .kp-empty {
	padding: 14px; /* порожній стан усередині рамки компактніший */
}

/* Правка 317 (06.09.2026): довгий рядок реквізитів (договір, PM з
   аватаркою) стосом: підпис зверху, значення знизу по лівому краю на
   всю ширину. У колонці 300px значення поруч із підписом рвалось. */
.kp-meta.kp-meta-stack {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.kp-meta.kp-meta-stack .kp-meta-val {
	width: 100%;
	text-align: left;
}

.kp-meta.kp-meta-stack .kp-contract-line {
	white-space: normal; /* рветься лише по « · », бо «№ 3» нерозривне */
}

/* Правка 90 (31.08.2026): рядок договору в картці проєкту і в блоці
   «Договори» форми редагування. Договорів буває кілька, тому кожен
   окремим рядком, а не через кому. */
.kp-contract-line {
	display: block;
	line-height: 1.5;
}

.kp-contract-line + .kp-contract-line {
	margin-top: 2px; /* другий і наступні договори не злипаються з першим */
}

/* У формі редагування блок «Договори» вирівняний уліво, а не вправо,
   як у метарядку картки: там це список під заголовком, а не значення. */
.kp-form-block .kp-contract-line {
	text-align: left;
}

/* Прострочений дедлайн у картці. */
.kp-overdue-val {
	color: var(--kp-red); /* червоний */
	font-weight: 700; /* жирний, щоб не загубився */
}

/* Посилання на сторінку, де проблема. */
.kp-meta-link {
	color: var(--kp-accent); /* бузковий, як усі посилання системи */
}

/* ── Поля, які редагуються прямо в картці ─────────────────────────── */
/* Витрачений час і прапорець пакета міняються найчастіше, тому вони
   не текст, а контроли в самому рядку — без переходу у форму. */

.kp-inline-input {
	width: 92px; /* вузьке поле під «120» хвилин */
	min-height: 32px; /* нижче за звичайне поле, щоб не роздувати рядок */
	padding: 5px 10px; /* компактні відступи */
	text-align: right; /* цифри до правого краю */
	font-size: 13px; /* дрібний розмір */
}

.kp-inline-select {
	max-width: 150px; /* вужче за фільтр — рядок вузький */
	height: 32px; /* та сама висота, що й у поля часу */
	padding: 4px 28px 4px 10px; /* праворуч місце під стрілку */
	font-size: 12.5px; /* дрібний розмір */
	background-position: right 9px center; /* стрілку ближче до краю */
}

/* Пояснення під контролами: що саме ця роль може, а чого ні. */
.kp-role-note {
	margin-top: 14px; /* відступ від останнього рядка */
	padding: 10px 12px; /* внутрішні відступи плашки */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-surface-soft); /* світла підкладка */
	color: var(--kp-muted); /* приглушений текст */
	font-size: 11.5px; /* найдрібніший розмір */
	line-height: 1.5; /* компактний інтерліньяж */
}

/* ── Розрахунок вартості задачі (розділ 6.5) ──────────────────────── */
/* У релізі 0.8 блок прихований: немає розрахункових періодів (задача
   №92). Стилі лежать готові, щоб у 0.10 лишилось лише зняти прапорець. */

.kp-calc {
	margin-top: 14px; /* відступ від останнього рядка з даними */
	padding: 12px 14px; /* внутрішні відступи блоку */
	border: 1px solid var(--kp-line); /* межа блока на світлому тлі */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-surface-soft); /* підкладка відділяє розрахунок від полів */
}

.kp-calc-row {
	display: flex; /* підпис і значення в один рядок */
	justify-content: space-between; /* значення притиснуте вправо */
	gap: 10px; /* мінімальний зазор */
	padding: 3px 0; /* щільні вертикальні відступи */
	font-size: 13px; /* дрібніше за основні поля */
}

.kp-calc-row span:first-child {
	color: var(--kp-muted); /* підпис приглушений */
}

.kp-calc-row span:last-child {
	font-weight: 600; /* значення напівжирне */
}

/* Частина часу понад пакет — те, за що клієнт доплачує. */
.kp-calc-over {
	color: var(--kp-amber); /* бурштиновий: не помилка, але потребує уваги */
}

.kp-calc-note {
	margin-top: 8px; /* відступ від рядків розрахунку */
	padding-top: 8px; /* повітря під лінією */
	border-top: 1px solid var(--kp-line); /* тонка лінія над поясненням */
	color: var(--kp-faint); /* блідий — це пояснення, а не дані */
	font-size: 11.5px; /* найдрібніший розмір */
	line-height: 1.45; /* компактний інтерліньяж */
}

/* ── Блок опису задачі ────────────────────────────────────────────── */

.kp-desc {
	padding: 16px 18px; /* внутрішні відступи */
	border: 1px solid var(--kp-line); /* межа блока на світлому тлі */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-surface-soft); /* підкладка відділяє опис від картки */
	font-size: 14px; /* базовий розмір */
	line-height: 1.6; /* просторий інтерліньяж для читання */
}

.kp-desc > :first-child {
	margin-top: 0; /* прибираємо зайвий відступ зверху */
}

.kp-desc > :last-child {
	margin-bottom: 0; /* і знизу */
}

/* Правка 151 (02.09.2026): файли, додані при створенні задачі, під описом.
   Плашки ті самі, що у вкладень повідомлення (.kp-attach). */
.kp-desc-files {
	margin-top: 4px; /* невеликий зазор від блока опису; решту дає margin плашки */
}

/* Правка 152 (02.09.2026): рядок «Посилання» під описом задачі. */
.kp-desc-link {
	margin-top: 12px; /* відступ від блока опису */
	font-size: 14px; /* як текст опису */
	word-break: break-all; /* довга адреса переноситься, а не розпирає колонку */
}

.kp-desc-link .kp-meta-key {
	margin-right: 6px; /* зазор між підписом і адресою */
}

/* Правка 150 (02.09.2026): рядок «Змінено: хто, дата, час» під полями. */
.kp-edited-note {
	margin: 12px 0 0; /* відступ від останнього метарядка */
}

/* 0.13.0: блок «Історія змін» у картці задачі. Стоїть під рядком
   «Змінено», згорнутий: у старій задачі рядків десятки, і розгорнутими
   вони відсунули б кнопки дій за межі екрана. */
.kp-hist {
	margin-top: 10px; /* тримаємо дистанцію від рядка «Змінено» */
	border-top: 1px solid var(--kp-line); /* тонка межа замість заголовка-розділювача */
	padding-top: 10px;
}

.kp-hist-sum {
	cursor: pointer; /* <summary> сам курсор не міняє */
	font-size: 13px;
	color: var(--kp-muted);
	list-style: none; /* прибираємо стандартний трикутник, малюємо свій нижче */
}

/* Свій маркер: у Safari стандартний ::marker не ховається list-style. */
.kp-hist-sum::-webkit-details-marker {
	display: none;
}

.kp-hist-sum::before {
	content: '▸ ';
	color: var(--kp-faint);
}

.kp-hist[open] .kp-hist-sum::before {
	content: '▾ ';
}

.kp-hist-list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	max-height: 260px; /* довга історія гортається всередині блока */
	overflow-y: auto;
}

.kp-hist-row {
	font-size: 13px;
	line-height: 1.5;
	padding: 5px 0;
	border-bottom: 1px solid var(--kp-line);
	word-break: break-word; /* довга назва не розпирає ліву колонку */
}

.kp-hist-row:last-child {
	border-bottom: 0; /* під останнім рядком межа зайва */
}

.kp-hist-when,
.kp-hist-who {
	color: var(--kp-faint); /* службові дані блідніші за суть зміни */
}

.kp-hist-field {
	color: var(--kp-muted);
}

.kp-hist-val {
	color: var(--kp-ink); /* саме значення читається найкраще */
}

.kp-hist-arrow {
	color: var(--kp-faint); /* стрілка «було → стало» не тягне на себе увагу */
}

/* 0.13.0: рядок переліку регулярних робіт у вікні «Керування». */
.kp-reg-row {
	display: flex; /* поле і хрестик в один рядок */
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}

.kp-reg-row .kp-input {
	flex: 1; /* поле забирає всю вільну ширину, хрестик лишається вузьким */
}

.kp-reg-pkg {
	margin-bottom: 18px; /* пакети відділені один від одного */
}

/* Правка 178 (04.09.2026): дві дії в рядку вільної задачі — «Взяти в
   роботу» і «Відхилити». Кнопки в один ряд, щоб рядок не ріс удвічі. */
.kp-free-acts {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0; /* назва задачі стискається, кнопки — ні */
}

/* Правка 179: рядок із кнопкою «Показати всі» під переліком вільних. */
.kp-free-more {
	text-align: center;
	padding: 6px 0 2px;
}

/* ── Переписка (розділ 4.7) ───────────────────────────────────────── */

/* Крапка непрочитаного на вкладці (розділ 4.10). */
.kp-tab-dot {
	display: inline-block; /* щоб задати розміри */
	width: 6px; /* діаметр крапки */
	height: 6px; /* діаметр крапки */
	margin-left: 6px; /* відступ від назви вкладки */
	border-radius: var(--kp-radius-pill); /* коло */
	background: var(--kp-red); /* червона — є нове повідомлення */
	vertical-align: middle; /* не з'їжджає відносно тексту */
}

.kp-msg {
	display: flex; /* аватарка ліворуч, текст праворуч */
	gap: 12px; /* зазор між аватаркою й текстом */
	padding: 16px 0; /* вертикальні відступи повідомлення */
	border-bottom: 1px solid var(--kp-line); /* роздільник між повідомленнями */
}

.kp-msg:last-of-type {
	border-bottom: none; /* під останнім повідомленням лінія зайва */
}

.kp-msg-body {
	min-width: 0; /* довгий текст переноситься, а не розпирає рядок */
	flex: 1; /* текст забирає всю ширину, що лишилась */
}

.kp-msg-head {
	display: flex; /* автор, роль і час в один рядок */
	align-items: baseline; /* по базовій лінії тексту */
	gap: 8px; /* зазор між частинами шапки */
	margin-bottom: 5px; /* відступ до тексту повідомлення */
}

.kp-msg-author {
	font-size: 13.5px; /* трохи дрібніше за текст повідомлення */
	font-weight: 700; /* ім'я автора виділяємо */
}

.kp-msg-time {
	margin-left: auto; /* час притискаємо вправо */
	color: var(--kp-faint); /* блідий — це другорядне */
	font-size: 12px; /* дрібний розмір */
}

.kp-msg-text {
	font-size: 14px; /* базовий розмір */
	line-height: 1.55; /* просторий інтерліньяж */
}

.kp-msg-text > :first-child {
	margin-top: 0; /* rich text не роздуває повідомлення зверху */
}

.kp-msg-text > :last-child {
	margin-bottom: 0; /* і знизу */
}

/* Правка 371: скріншот, вставлений Ctrl+V прямо в текст повідомлення.
   Стиль однаковий і в готовому повідомленні (.kp-msg-text), і в полі
   набору (.kp-reply-input), щоб картинка не «стрибала» після надсилання. */
.kp-msg-text .kp-msg-img,
.kp-reply-input .kp-msg-img,
.kp-msg-text img,
.kp-reply-input img {
	max-width: 100%; /* широкий скрін не рве картку задачі */
	height: auto; /* пропорції зберігаються */
	display: block; /* картинка окремим рядком, як у месенджерах */
	margin: 8px 0; /* повітря зверху й знизу */
	border-radius: 8px; /* той самий радіус, що й у карток */
	border: 1px solid var(--kp-line); /* межа, бо скріни часто білі */
}

/* Плейсхолдер на час завантаження вставленої картинки. */
.kp-paste-wait {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--kp-bg-soft, #f4f3f9); /* fallback, якщо змінної немає */
	color: var(--kp-faint);
	font-size: 13px;
}

/* Кнопка видалення власного повідомлення — з'являється на наведення. */
.kp-msg-del {
	opacity: 0; /* у спокої не видно */
	border: none; /* без рамки */
	background: none; /* без тла */
	color: var(--kp-faint); /* блідий */
	cursor: pointer; /* курсор-рука */
	font-size: 12px; /* дрібний розмір */
	transition: opacity 0.15s ease; /* м'яка поява */
}

.kp-msg:hover .kp-msg-del {
	opacity: 1; /* показуємо на наведення на повідомлення */
}

/* Згадка колеги у внутрішній переписці. */
.kp-mention {
	padding: 1px 6px; /* компактні відступи */
	border-radius: 6px; /* легке скруглення */
	background: var(--kp-accent-soft); /* світло-бузкове тло */
	color: var(--kp-accent); /* бузковий текст */
	font-weight: 600; /* напівжирний */
}

/* Вкладення при повідомленні. */
.kp-attach {
	display: inline-flex; /* іконка й назва в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 7px; /* зазор між іконкою й назвою */
	margin: 9px 6px 0 0; /* відступ від тексту й між плашками */
	padding: 6px 12px; /* відступи плашки */
	border: 1px solid var(--kp-line); /* тонка рамка */
	border-radius: var(--kp-radius-pill); /* капсула, як у кнопок */
	background: var(--kp-surface); /* біле тло */
	color: var(--kp-ink); /* звичайний темний текст */
	font-size: 12.5px; /* дрібний розмір */
	text-decoration: none; /* без підкреслення */
}

/* ── Форма нового повідомлення ────────────────────────────────────── */

.kp-reply {
	margin-top: 14px; /* відступ від останнього повідомлення */
	padding: 14px; /* внутрішні відступи форми */
	border: 1px solid var(--kp-line); /* межа блока на світлому тлі */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-surface-soft); /* підкладка відділяє форму від стрічки */
}

.kp-toolbar {
	display: flex; /* кнопки редактора в ряд */
	gap: 14px; /* зазор між кнопками */
	margin-bottom: 8px; /* відступ до поля вводу */
	color: var(--kp-muted); /* приглушені іконки */
	font-size: 13px; /* дрібний розмір */
}

/* Кнопки форматування — плоскі, без рамки: це не дії, а перемикачі. */
.kp-toolbar button {
	padding: 0 4px; /* мінімальні відступи */
	border: none; /* без рамки */
	background: none; /* без тла */
	color: inherit; /* колір від панелі */
	cursor: pointer; /* курсор-рука */
	font-size: 13px; /* однаковий розмір */
	line-height: 1.2; /* компактно */
}

.kp-toolbar button:hover {
	color: var(--kp-accent); /* підсвічуємо активну кнопку */
}

.kp-reply-input {
	min-height: 78px; /* висота під кілька рядків */
	background: var(--kp-surface); /* біле поле на світлій підкладці */
	resize: vertical; /* тягнути можна тільки по висоті */
}

.kp-reply-actions {
	display: flex; /* кнопки в ряд */
	align-items: center; /* вирівнювання по центру */
	flex-wrap: wrap; /* на вузькому екрані переносяться */
	gap: 10px; /* однаковий зазор */
	margin-top: 10px; /* відступ від поля вводу */
}

.kp-reply-hint {
	margin-left: auto; /* підказку притискаємо вправо */
	color: var(--kp-muted); /* приглушений текст */
	font-size: 12px; /* дрібний розмір */
}

/* Перелік файлів, доданих до повідомлення, яке ще не надіслане. */
.kp-reply-files {
	display: flex; /* плашки в ряд */
	flex-wrap: wrap; /* переносяться при потребі */
	gap: 6px; /* щільний зазор */
	margin-top: 8px; /* відступ від поля вводу */
}

/* Випадний список колег при введенні «@» (розділ 4.7). */
.kp-mention-box {
	position: absolute; /* над формою, не зсуває розмітку */
	z-index: 20; /* поверх сусідніх блоків */
	max-height: 190px; /* не більше кількох рядків */
	overflow-y: auto; /* решта прокручується */
	min-width: 210px; /* щоб імена не тиснулися */
	border: 1px solid var(--kp-line); /* тонка рамка */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-surface); /* біле тло */
	box-shadow: 0 10px 26px rgba(20, 14, 45, 0.14); /* м'яка тінь випадного списку */
}

.kp-mention-item {
	display: flex; /* аватарка й ім'я в ряд */
	align-items: center; /* по центру */
	gap: 9px; /* зазор */
	width: 100%; /* на всю ширину списку */
	padding: 8px 12px; /* відступи рядка */
	border: none; /* без рамки */
	background: none; /* без тла */
	cursor: pointer; /* курсор-рука */
	font-size: 13px; /* дрібний розмір */
	text-align: left; /* текст ліворуч */
}

.kp-mention-item:hover,
.kp-mention-item.kp-mention-active {
	background: var(--kp-surface-soft); /* підсвітка активного рядка */
}

.kp-mention-role {
	margin-left: auto; /* роль притискаємо вправо */
	color: var(--kp-faint); /* блідий підпис */
	font-size: 11.5px; /* найдрібніший розмір */
}

/* ── Вкладка «Файли» ──────────────────────────────────────────────── */

.kp-files {
	display: grid; /* сітка мініатюр */
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); /* стільки колонок, скільки влазить */
	gap: 12px; /* зазор між мініатюрами */
	padding-top: 4px; /* невеликий відступ від вкладок */
}

.kp-file {
	display: flex; /* прев'ю зверху, підпис під ним */
	flex-direction: column; /* строго в колонку — підпис ніколи не накладається */
	overflow: hidden; /* мініатюра не вилазить за скруглення */
	border: 1px solid var(--kp-line); /* тонка рамка картки файлу */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-surface); /* біле тло */
	color: inherit; /* текст не синій, як у посилання */
	text-decoration: none; /* без підкреслення */
}

.kp-file-thumb {
	display: flex; /* центруємо підпис усередині прев'ю */
	align-items: center; /* по вертикалі */
	justify-content: center; /* по горизонталі */
	overflow: hidden; /* зображення не вилазить за межі прев'ю */
	position: relative; /* система координат для мініатюри всередині */
	height: 92px; /* фіксована висота прев'ю */
	background: linear-gradient(135deg, #f3f1fb, #fbfaff); /* підкладка в тон системі */
	color: var(--kp-faint); /* блідий підпис розширення */
	font-size: 11.5px; /* дрібний розмір */
	flex: 0 0 auto; /* висота прев'ю не «пливе» від вмісту картки */
}

/* Для зображень — справжня мініатюра, а не назва файлу (розділ 4.7).
   Абсолютне позиціювання замість height:100% — інакше картинка
   переростала блок прев'ю й накривала підпис (правка 3 від 14.08). */
.kp-file-thumb img {
	position: absolute; /* у межах прев'ю, не в потоці картки */
	inset: 0; /* розтягуємо на весь блок прев'ю */
	width: 100%; /* на всю ширину */
	height: 100%; /* на всю висоту прев'ю */
	object-fit: cover; /* кадруємо по центру, без спотворень */
	display: block; /* без зайвого відступу під картинкою */
}

.kp-file-meta {
	padding: 9px 11px; /* відступи підпису файлу */
	font-size: 11.5px; /* дрібний розмір */
	line-height: 1.45; /* компактний інтерліньяж */
}

.kp-file-name {
	display: block; /* назва окремим рядком */
	overflow: hidden; /* довга назва не ламає сітку */
	text-overflow: ellipsis; /* обрізаємо трикрапкою */
	white-space: nowrap; /* назва в один рядок */
	font-weight: 600; /* напівжирна */
}

.kp-file-src {
	color: var(--kp-faint); /* блідий підпис: звідки файл */
}

/* Крапка непрочитаного в списку задач (розділ 4.10). */
.kp-row-dot {
	display: inline-block; /* щоб задати розміри */
	width: 6px; /* діаметр */
	height: 6px; /* діаметр */
	margin-right: 6px; /* відступ від назви задачі */
	border-radius: var(--kp-radius-pill); /* коло */
	background: var(--kp-red); /* червона */
	vertical-align: middle; /* по центру рядка */
}

/* Підказка в порожньому полі відповіді: contenteditable не має
   власного placeholder, тому малюємо його псевдоелементом. */
.kp-reply-input:empty::before {
	content: attr(data-placeholder); /* текст підказки з атрибута */
	color: var(--kp-faint); /* блідий, як у звичайного placeholder */
	pointer-events: none; /* не заважає клікнути в поле */
}

/* Поле відповіді — блок, а не однорядковий інпут. */
.kp-reply-input {
	overflow-y: auto; /* довгий текст прокручується всередині */
	line-height: 1.55; /* той самий інтерліньяж, що в повідомленнях */
	text-align: left; /* успадкування від .kp-meta-val не діє */
}

/* ═══════════════════════════════════════════════════════════════════
   ФОРМА ЗАДАЧІ (реліз 0.8)
   Джерело правди: prototypes/forma-zadachi.html.
   ═══════════════════════════════════════════════════════════════════ */

/* Дві колонки: ліворуч параметри, праворуч зміст задачі. */
.kp-form-cols {
	display: grid; /* сітка з двох колонок */
	grid-template-columns: 300px 1fr; /* ліва фіксована, як у картці задачі */
	gap: 18px; /* просвіт між колонками */
	align-items: start; /* колонки не тягнуться одна за одною по висоті */
}

@media (max-width: 1024px) {
	.kp-form-cols {
		grid-template-columns: 1fr; /* на вузькому екрані одна колонка */
	}
}

/* Параметри в лівій колонці — вертикальний стек полів. */
.kp-form-stack {
	display: flex; /* поля одне під одним */
	flex-direction: column; /* вертикальний потік */
	gap: 14px; /* однаковий вертикальний ритм */
}

/* Поле назви — більше за решту, бо це головне поле форми. */
.kp-input-title {
	padding: 14px 16px; /* просторіші відступи */
	font-size: 17px; /* помітно більший кегль */
	font-weight: 600; /* напівжирний */
}

/* Поле опису — під розгорнутий текст. */
.kp-editor {
	min-height: 220px; /* висота під розгорнутий опис */
	background: var(--kp-surface); /* біле поле вводу */
	line-height: 1.6; /* просторий інтерліньяж для читання */
	resize: vertical; /* тягнути можна тільки по висоті */
}

/* Ряд дій унизу форми: збереження ліворуч, підказка праворуч. */
.kp-form-footer {
	display: flex; /* кнопки й підказка в один рядок */
	align-items: center; /* вирівнювання по центру */
	flex-wrap: wrap; /* на вузькому екрані переносяться */
	gap: 10px; /* зазор між кнопками */
	margin-top: 18px; /* відступ від полів */
}

.kp-form-hint {
	margin-left: auto; /* підказку притискаємо вправо */
	color: var(--kp-muted); /* приглушений текст */
	font-size: 12.5px; /* дрібний розмір */
}

/* Зведена крапка непрочитаних біля пункту меню (розділ 4.10). */
.kp-nav-dot {
	width: 6px; /* діаметр */
	height: 6px; /* діаметр */
	margin-left: 6px; /* відступ від назви пункту */
	border-radius: var(--kp-radius-pill); /* коло */
	background: var(--kp-red); /* червона */
	flex: 0 0 auto; /* не стискається у флекс-рядку меню */
}

/* ═══════════════════════════════════════════════════════════════════
   ДООПРАЦЮВАННЯ 0.8.1 (правки з чату 14.08)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Шапка картки задачі (правка 14) ──────────────────────────────── */
/* Ліворуч — що це за задача і в якому вона стані, праворуч — що з нею
   зробити. Бейджі переїхали під підзаголовок, кнопки лишились справа. */

.kp-topbar-task {
	align-items: flex-start; /* дії вирівняні по верху, а не по центру блоку */
	justify-content: space-between; /* заголовок ліворуч, дії праворуч */
}

/* Ліва частина шапки може стискатися, права — ні. Без цього довгий
   заголовок задачі впирався в кнопки й вони налазили одне на одного
   (правка 0.10.0.4). */
.kp-topbar-task > div:first-child {
	min-width: 0; /* дозволяємо блоку стискатися й переносити текст */
}

.kp-topbar-task .kp-title {
	overflow-wrap: anywhere; /* довга назва переноситься, а не тисне кнопки */
}

.kp-title-badges {
	display: flex; /* бейджі в один ряд */
	flex-wrap: wrap; /* на вузькому екрані переносяться */
	gap: 8px; /* зазор між бейджами */
	margin-top: 10px; /* відступ від підзаголовка */
}

/* Дії праворуч: до трьох кнопок, тому дозволяємо перенос. */
.kp-topbar-task .kp-topbar-actions {
	flex: 0 0 auto; /* кнопки не стискаються під довгим заголовком */
	flex-wrap: wrap; /* не ламають шапку на вужчих екранах */
	justify-content: flex-end; /* тиснуться до правого краю */
	gap: 8px; /* однаковий зазор */
}

/* ── Кнопка зміни часу в рядку картки (правка 7) ──────────────────── */

.kp-meta-edit {
	display: inline-flex; /* іконка по центру кнопки */
	align-items: center; /* по вертикалі */
	justify-content: center; /* по горизонталі */
	width: 26px; /* компактний квадрат */
	height: 26px; /* компактний квадрат */
	margin-left: 8px; /* відступ від значення */
	padding: 0; /* іконка сама тримає розмір */
	border: 1px solid var(--kp-line); /* тонка рамка */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-surface); /* біле тло */
	color: var(--kp-muted); /* приглушена іконка */
	cursor: pointer; /* курсор-рука */
	vertical-align: middle; /* не з'їжджає відносно тексту */
}

.kp-meta-edit:hover {
	border-color: var(--kp-accent); /* підсвічуємо рамку */
	color: var(--kp-accent); /* і саму іконку */
}

.kp-meta-edit svg {
	width: 14px; /* дрібна іконка під розмір кнопки */
	height: 14px; /* дрібна іконка під розмір кнопки */
}

/* ── Модальне вікно (правка 7) ────────────────────────────────────── */

/* Вікно живе поза .kp-app (його додають у body), тому глобальний
   box-sizing кабінету на нього не поширюється: поле з width:100% плюс
   padding вилазило за праву межу вікна. Помітно стало на двоколонковій
   формі реквізитів (0.10.4), у вузьких діалогах поле просто торкалось краю. */
.kp-modal-backdrop,
.kp-modal-backdrop * {
	box-sizing: border-box;
}

.kp-modal-backdrop {
	/* Шрифт і колір теж задаємо явно: вікно поза .kp-app, тож інакше
	   успадкувало б шрифт теми замість Raleway (правка 14.08). */
	font-family: var(--kp-font); /* Raleway, як в усьому кабінеті */
	font-size: 14px; /* базовий розмір інтерфейсу */
	font-weight: 500; /* звичайне накреслення Raleway надто тонке */
	line-height: 1.5; /* власна висота рядка, не від теми */
	color: var(--kp-ink); /* основний колір тексту */
	position: fixed; /* поверх усієї сторінки */
	inset: 0; /* на весь екран */
	z-index: 100000; /* вище за адмін-бар і меню теми */
	display: flex; /* центруємо вікно */
	align-items: center; /* по вертикалі */
	justify-content: center; /* по горизонталі */
	padding: 20px; /* поля на малих екранах */
	background: rgba(20, 14, 45, 0.42); /* напівпрозора підкладка в тон системі */
}

.kp-modal {
	width: 100%; /* тягнеться до максимуму */
	max-width: 380px; /* але не ширше за зручний діалог */
	padding: 22px; /* внутрішні відступи */
	border-radius: var(--kp-radius); /* скруглення як у карток */
	background: var(--kp-surface); /* біле тло */
	box-shadow: 0 24px 60px rgba(20, 14, 45, 0.28); /* виражена тінь діалогу */
	/* 0.10.4: високі форми (реквізити виконавця, бланк документа) не
	   влазять в екран, а бекдроп центрує вміст і сам не прокручується —
	   без цих двох рядків нижня частина форми з кнопкою «Зберегти»
	   лишалась за межами вікна. 40px це padding бекдропа зверху й знизу. */
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	/* Правка 184: якір для хрестика закривання в куті вікна. */
	position: relative;
}

/* Правка 184 (04.09.2026): хрестик закривання, спільний для всіх вікон.
   Стоїть у куті поверх вмісту, а не в шапці — шапки є не в кожного
   вікна, а хрестик потрібен скрізь. */
.kp-modal-close-x {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1; /* над заголовком, якщо той дуже довгий */
}

/* Заголовок не має заповзати під хрестик. Правило б'є лише по вікнах
   зі СПІЛЬНИМ хрестиком: у вікон із власним (документ, оплата) шапка
   вже флексова і місце під кнопку в ній передбачене. */
.kp-modal:has(.kp-modal-close-x) > .kp-modal-title {
	padding-right: 34px;
}

.kp-modal-title {
	margin: 0 0 16px; /* відступ до полів */
	font-size: 17px; /* трохи більший за текст */
	font-weight: 700; /* заголовок */
}

.kp-modal-actions {
	display: flex; /* кнопки в ряд */
	align-items: center; /* по центру */
	flex-wrap: wrap; /* переносяться на вузькому екрані */
	gap: 10px; /* однаковий зазор */
	margin-top: 18px; /* відступ від полів */
}

.kp-modal-msg {
	color: var(--kp-red); /* повідомлення тут — лише про помилку */
	font-size: 12px; /* дрібний розмір */
}

/* ── Іконка непрочитаного в кінці рядка таблиці (правка 6) ────────── */
/* Форма й розмір — як у дзвіночка сповіщень у топбарі, щоб обидва
   сигнали читалися як одна система. */

.kp-th-bell,
.kp-td-bell {
	width: 48px; /* вузька службова колонка */
	text-align: center; /* іконка по центру */
}

.kp-unread-btn {
	position: relative; /* система координат для крапки */
	cursor: pointer; /* курсор-рука: це справжня дія */
}

/* ── Кіт теми: перебиваємо стилі кнопок усередині кабінету ────────── */
/* Тема малює власні кнопки прямими селекторами (button, .button),
   через що список @згадок ставав капсулами в рядок, а кнопки панелі
   форматування отримували вишневу заливку після кліку (правки 1 і 10).
   Лікуємо id-скоупом і повним набором станів — інакше в наступному
   релізі те саме вилізе на іншій кнопці. */

#kp-dashboard-app .kp-toolbar button,
#kp-dashboard-app .kp-mention-item,
#kp-dashboard-app .kp-meta-edit,
#kp-dashboard-app .kp-unread-btn,
#kp-dashboard-app .kp-msg-del {
	box-shadow: none !important; /* тема додає власну тінь-обводку */
	text-transform: none !important; /* і подекуди верхній регістр */
	letter-spacing: normal !important; /* та розрідження */
	text-decoration: none !important; /* без підкреслення */
	line-height: 1.3 !important; /* щоб кнопка не роздувалась */
	min-height: 0 !important; /* тема ставить власну мінімальну висоту */
	width: auto; /* і подекуди 100% ширини */
}

#kp-dashboard-app .kp-toolbar button,
#kp-dashboard-app .kp-toolbar button:hover,
#kp-dashboard-app .kp-toolbar button:focus,
#kp-dashboard-app .kp-toolbar button:active,
#kp-dashboard-app .kp-toolbar button:focus-visible {
	padding: 0 4px !important; /* мінімальні відступи */
	border: none !important; /* без рамки */
	border-radius: 4px !important; /* ледь скруглені кути */
	background: none !important; /* головне: жодної заливки від теми */
	outline: none !important; /* власного контуру браузера теж не треба */
}

#kp-dashboard-app .kp-toolbar button:hover,
#kp-dashboard-app .kp-toolbar button:focus-visible {
	color: var(--kp-accent) !important; /* активний стан — лише кольором */
}

/* ── Випадний список @згадок (правка 1) ───────────────────────────── */
/* Вертикальний список, по одному рядку на людину, без обводки. */

#kp-dashboard-app .kp-mention-box {
	display: flex; /* рядки один під одним */
	flex-direction: column; /* строго вертикально */
	padding: 6px 0; /* повітря зверху й знизу списку */
}

#kp-dashboard-app .kp-mention-item,
#kp-dashboard-app .kp-mention-item:hover,
#kp-dashboard-app .kp-mention-item:focus,
#kp-dashboard-app .kp-mention-item:active {
	display: flex; /* аватарка, ім'я і роль в один рядок */
	align-items: center; /* по центру */
	gap: 10px; /* зазор між частинами рядка */
	width: 100%; /* на всю ширину списку */
	margin: 0 !important; /* тема додає власні відступи */
	padding: 9px 14px !important; /* відступи рядка */
	border: none !important; /* без обводки — це список, а не кнопки */
	border-radius: 0 !important; /* і без капсул */
	background: none !important; /* тло лише на наведення, нижче */
	color: var(--kp-ink) !important; /* фірмовий темний, а не червоний з теми */
	font-size: 13px !important; /* дрібний розмір */
	font-weight: 500 !important; /* звичайна насиченість */
	text-align: left; /* текст ліворуч */
}

#kp-dashboard-app .kp-mention-item:hover,
#kp-dashboard-app .kp-mention-item.kp-mention-active {
	background: var(--kp-surface-soft) !important; /* м'яка підсвітка рядка */
}

/* Ім'я має забирати вільне місце, щоб роль відійшла до правого краю
   і вони не злипались («OksanaАдмін»). */
.kp-mention-name {
	flex: 1 1 auto; /* забирає всю вільну ширину */
	min-width: 0; /* довге ім'я переноситься, а не розпирає список */
}

.kp-mention-role {
	flex: 0 0 auto; /* роль не стискається */
	margin-left: 12px; /* гарантований зазор від імені */
	color: var(--kp-faint); /* блідий підпис */
	font-size: 11.5px; /* найдрібніший розмір */
}

/* ── Іконкові кнопки: заливка від теми (правка 14.08) ─────────────── */
/* Тема фарбує будь-який <button> своїм акцентом на наведення й фокус.
   Раніше це закривалося лише для панелі форматування, тому олівець
   зміни часу, хрестик видалення повідомлення та іконка непрочитаного
   ставали вишневими. Тепер правило спільне для всіх іконкових кнопок:
   кожна нова іконка автоматично отримує захист, і не доводиться
   виловлювати їх поштучно в кожному релізі. */

#kp-dashboard-app .kp-meta-edit,
#kp-dashboard-app .kp-meta-edit:hover,
#kp-dashboard-app .kp-meta-edit:focus,
#kp-dashboard-app .kp-meta-edit:focus-visible,
#kp-dashboard-app .kp-meta-edit:active,
#kp-dashboard-app .kp-msg-del,
#kp-dashboard-app .kp-msg-del:hover,
#kp-dashboard-app .kp-msg-del:focus,
#kp-dashboard-app .kp-msg-del:focus-visible,
#kp-dashboard-app .kp-msg-del:active,
#kp-dashboard-app .kp-unread-btn,
#kp-dashboard-app .kp-unread-btn:hover,
#kp-dashboard-app .kp-unread-btn:focus,
#kp-dashboard-app .kp-unread-btn:focus-visible,
#kp-dashboard-app .kp-unread-btn:active {
	background: var(--kp-surface) !important; /* біле тло замість акценту теми */
	outline: none !important; /* власний контур браузера тут зайвий */
}

/* Хрестик видалення повідомлення — без тла взагалі, він живе на картці. */
#kp-dashboard-app .kp-msg-del,
#kp-dashboard-app .kp-msg-del:hover,
#kp-dashboard-app .kp-msg-del:focus,
#kp-dashboard-app .kp-msg-del:focus-visible,
#kp-dashboard-app .kp-msg-del:active {
	background: none !important; /* тло не потрібне — іконка поверх картки */
	border: none !important; /* і рамки теж */
}

/* Олівець і дзвіночок: колір міняється лише на наведення, тлом не граємо. */
#kp-dashboard-app .kp-meta-edit:hover,
#kp-dashboard-app .kp-meta-edit:focus-visible {
	border-color: var(--kp-accent) !important; /* підсвічуємо рамку */
	color: var(--kp-accent) !important; /* і саму іконку */
}

#kp-dashboard-app .kp-msg-del:hover,
#kp-dashboard-app .kp-msg-del:focus-visible {
	color: var(--kp-red) !important; /* видалення — червоним, як і має бути */
}

/* ── Заглушка для ролі, якій кабінету ще немає ────────────────────── */

.kp-role-stub {
	max-width: 520px; /* текст не розтягується на весь екран */
	margin: 60px auto; /* по центру блоку кабінету */
	padding: 32px; /* просторі внутрішні відступи */
	border: 1px solid var(--kp-line); /* тонка рамка картки */
	border-radius: var(--kp-radius); /* скруглення як у карток */
	background: var(--kp-surface); /* біле тло */
	text-align: center; /* заголовок і текст по центру */
}

.kp-role-stub h2 {
	margin: 0 0 10px; /* відступ до пояснення */
	font-size: 19px; /* помітний заголовок */
	font-weight: 700; /* жирний */
}

.kp-role-stub p {
	margin: 0; /* зайвих відступів не треба */
	color: var(--kp-muted); /* приглушений текст пояснення */
	line-height: 1.6; /* просторий інтерліньяж */
}

/* ─── ДООПРАЦЮВАННЯ 0.8.3 ───────────────────────────────────────────── */

/* Рядок кнопок повернення: «← Назад» і «До списку …».
   Кнопки-посилання мають padding: 0, тож без обгортки з flex-gap
   вони зліплювалися в суцільний текст («← НазадДо списку задач»). */
.kp-back-row {
	display: flex; /* кнопки в один ряд */
	flex-wrap: wrap; /* на вузькому екрані переносимо */
	align-items: center; /* по центру рядка */
	gap: 8px; /* зазор між кнопкою, крапкою і другою кнопкою */
}

/* Крапка-роздільник між двома кнопками повернення. */
.kp-back-sep {
	color: var(--kp-muted); /* приглушена, щоб не сперечалася з кнопками */
	font-size: 13.5px; /* один розмір із кнопками-посиланнями */
	line-height: 1; /* без зайвої висоти рядка */
	user-select: none; /* службовий символ не виділяємо */
}

/* ══════════════════════════════════════════════════════════════════
   Реліз 0.9: розділи «Проєкти» (редизайн) і «Клієнти», картки проєкту
   та клієнта. Стилі портовано з прототипів kabinet-proekty,
   kabinet-kliyenty, kartka-proektu, kartka-kliyenta — 1:1.
   ══════════════════════════════════════════════════════════════════ */

/* ── Шапка списку: фільтри ліворуч, кнопка додавання праворуч ────── */

.kp-list-head {
	display: flex; /* фільтри й кнопка в один рядок */
	align-items: center; /* вирівнювання по центру */
	justify-content: space-between; /* кнопка притиснута вправо */
	gap: 14px; /* зазор між зонами */
	margin-bottom: 14px; /* відступ до списку */
	flex-wrap: wrap; /* на вузькому екрані переносимо */
}

/* ── Список проєктів (прототип kabinet-proekty) ──────────────────── */

.kp-plist {
	display: flex; /* картки одна під одною */
	flex-direction: column; /* вертикальний потік */
	gap: 10px; /* просвіт між картками */
}

.kp-prow {
	display: grid; /* три зони: назва, показники, гроші */
	grid-template-columns: 1fr auto auto; /* назва тягнеться, решта за вмістом */
	align-items: center; /* вирівнювання по центру */
	gap: 18px; /* зазор між зонами */
	padding: 15px 18px; /* внутрішні відступи картки */
	border: 1px solid var(--kp-line); /* тонка рамка */
	border-radius: var(--kp-radius); /* скруглення як у карток */
	background: var(--kp-surface); /* білий фон */
	cursor: pointer; /* картка веде в проєкт */
}

.kp-prow:hover {
	border-color: var(--kp-accent); /* бузкова рамка під курсором */
	background: var(--kp-surface-soft); /* легка підсвітка */
}

@media (max-width: 900px) {
	.kp-prow {
		grid-template-columns: 1fr; /* на вузькому екрані все в стовпчик */
		gap: 10px; /* менший зазор у вертикальному розкладі */
	}
}

.kp-prow-name {
	display: flex; /* назва й індикатор в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 8px; /* зазор між ними */
	font-size: 15px; /* трохи більший за основний текст */
	font-weight: 700; /* назва проєкту — головне */
}

.kp-prow-sub {
	margin-top: 3px; /* відступ від назви */
	color: var(--kp-muted); /* приглушений другий рядок */
	font-size: 12.5px; /* дрібний розмір */
}

.kp-prow-stats {
	display: flex; /* два показники поруч */
	gap: 22px; /* зазор між ними */
	text-align: right; /* цифри до правого краю */
}

.kp-prow-stat-label {
	color: var(--kp-muted); /* приглушений підпис */
	font-size: 11px; /* найдрібніший розмір */
}

.kp-prow-stat-value {
	margin-top: 2px; /* відступ від підпису */
	font-size: 13px; /* дрібний розмір */
	font-weight: 600; /* напівжирний */
}

.kp-prow-money {
	min-width: 150px; /* однакова ширина, щоб суми вишикувались */
	text-align: right; /* до правого краю */
	font-size: 13px; /* дрібний розмір */
}

/* ── Список клієнтів (прототип kabinet-kliyenty) ─────────────────── */

.kp-client-row {
	display: grid; /* чотири зони фіксованої структури */
	grid-template-columns: 1fr auto auto auto; /* назва тягнеться, решта за вмістом */
	align-items: center; /* вирівнювання по центру рядка */
	gap: 18px; /* зазор між зонами */
	padding: 14px 16px; /* внутрішні відступи рядка */
	border-bottom: 1px solid var(--kp-line); /* тонкий роздільник */
	cursor: pointer; /* рядок веде в картку клієнта */
}

/* Урізаний рядок техспеціаліста — без колонки балансу (розділ 3). */
.kp-client-row-nofin {
	grid-template-columns: 1fr auto auto; /* три зони замість чотирьох */
}

.kp-client-row:last-of-type {
	border-bottom: none; /* під останнім лінія зайва */
}

.kp-client-row:hover {
	background: var(--kp-surface-soft); /* підсвітка під курсором */
}

@media (max-width: 860px) {
	.kp-client-row,
	.kp-client-row-nofin,
	.kp-client-row-nopm,
	.kp-client-row-nofin.kp-client-row-nopm {
		grid-template-columns: 1fr; /* на вузькому екрані все в стовпчик */
		gap: 8px; /* менший зазор у вертикальному розкладі */
	}
}

.kp-client-name {
	display: flex; /* аватарка й текст в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 11px; /* зазор між аватаркою й іменем */
	min-width: 0; /* довге ім'я не розпирає рядок */
}

.kp-client-title {
	font-size: 14px; /* базовий розмір */
	font-weight: 700; /* назва клієнта — головне в рядку */
}

.kp-client-contact {
	margin-top: 2px; /* відступ від назви */
	color: var(--kp-muted); /* приглушений другий рядок */
	font-size: 12px; /* дрібний розмір */
}

.kp-sites {
	display: flex; /* мітки в ряд */
	flex-wrap: wrap; /* переносимо, якщо сайтів багато */
	gap: 6px; /* щільний зазор */
	justify-content: flex-end; /* притискаємо до правого краю зони */
}

.kp-site {
	padding: 3px 10px; /* компактні відступи мітки */
	border-radius: var(--kp-radius-pill); /* капсула */
	background: var(--kp-surface-soft); /* нейтральна підкладка */
	color: var(--kp-muted); /* приглушений текст */
	font-size: 11.5px; /* дрібний розмір */
	font-weight: 600; /* напівжирний */
	white-space: nowrap; /* назва сайту в один рядок */
}

.kp-client-balance {
	min-width: 150px; /* однакова ширина в усіх рядках */
	text-align: right; /* суми до правого краю */
	font-size: 13px; /* дрібний розмір */
}

.kp-client-pm {
	min-width: 92px; /* однакова ширина колонки PM */
	text-align: right; /* до правого краю */
}

/* ── Шапка картки проєкту/клієнта ────────────────────────────────── */

.kp-proj-head {
	display: flex; /* назва ліворуч, дії праворуч */
	align-items: flex-start; /* дії від верхнього краю */
	justify-content: space-between; /* розводимо по краях */
	gap: 16px; /* зазор між зонами */
	margin-bottom: 16px; /* відступ до колонок */
	flex-wrap: wrap; /* на вузькому екрані переносимо */
}

.kp-proj-title {
	margin: 0; /* свій зовнішній відступ не потрібен */
	font-size: 22px; /* великий заголовок картки */
	font-weight: 700; /* жирний */
	letter-spacing: -0.01em; /* легке стиснення в Raleway */
}

.kp-proj-sub2 {
	margin-top: 3px; /* відступ від назви */
	color: var(--kp-muted); /* приглушений підзаголовок */
	font-size: 13px; /* дрібний розмір */
}

.kp-proj-actions {
	display: flex; /* кнопки в один рядок */
	gap: 8px; /* зазор між кнопками */
	flex-wrap: wrap; /* переносимо на вузькому екрані */
}

/* ── Дві колонки картки (прототипи kartka-proektu / kartka-kliyenta) */

.kp-proj-cols,
.kp-client-cols {
	display: grid; /* дві колонки: ключове й детальне */
	grid-template-columns: 300px minmax(0, 1fr); /* ліва фіксована; права не ширша за місце (0.22: таблиця оплат розпирала картку на 6px) */
	gap: 18px; /* просвіт між колонками */
	align-items: start; /* колонки не тягнуться по висоті одна за одною */
}

.kp-proj-cols > *,
.kp-client-cols > * {
	min-width: 0; /* вміст гортається всередині картки, а не розпирає сітку */
}

@media (max-width: 980px) {
	.kp-proj-cols,
	.kp-client-cols {
		grid-template-columns: 1fr; /* на вузькому екрані одна колонка */
	}
}

/* Ліва колонка картки клієнта — стос блоків із зазором. */
.kp-client-left {
	display: flex; /* блоки один під одним */
	flex-direction: column; /* вертикальний потік */
	gap: 18px; /* просвіт між блоками */
}

/* Рядок «підпис — значення», такий самий, як у картці задачі. */
.kp-meta {
	display: flex; /* підпис і значення в один рядок */
	justify-content: space-between; /* значення притиснуте вправо */
	gap: 12px; /* мінімальний зазор */
	padding: 10px 0; /* вертикальні відступи */
	border-bottom: 1px solid var(--kp-line); /* тонкий роздільник */
	font-size: 13.5px; /* дрібніше за основний текст */
}

.kp-meta:last-of-type {
	border-bottom: none; /* під останнім рядком лінія зайва */
}

.kp-meta-key {
	flex: 0 0 auto; /* підпис не стискається */
	color: var(--kp-muted); /* приглушений колір підпису */
}

.kp-meta-val {
	min-width: 0; /* довге значення переноситься */
	text-align: right; /* значення до правого краю */
	font-weight: 600; /* напівжирне */
}

/* Блок пакета/договору в лівій колонці і у вкладці «Фінанси».
   Правки 318, 325 (06.09.2026): табличка «підпис зліва, значення
   справа», рядки не рвуться; замість .kp-package-head/.kp-package-note. */
.kp-package {
	margin-top: 14px; /* відступ від рядків із даними */
	padding: 12px 14px; /* внутрішні відступи */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-surface-soft); /* світла підкладка */
	border: 1px solid var(--kp-line); /* межа блока на світлому тлі */
	font-size: 12.5px; /* дрібний розмір */
}

.kp-package-title {
	margin-bottom: 6px; /* відступ до рядків */
	font-weight: 700; /* заголовок блока */
}

.kp-package-row {
	display: flex; /* підпис зліва, значення справа */
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 4px 0; /* компактні рядки */
	border-top: 1px solid rgba(23, 22, 31, 0.06); /* ледь помітний роздільник на бузковому тлі */
}

.kp-package-key {
	color: var(--kp-muted); /* приглушений підпис */
	flex: 0 0 auto;
}

.kp-package-val {
	font-weight: 600; /* значення напівжирне */
	text-align: right;
	white-space: nowrap; /* значення не рветься (318) */
}

/* Кольори як у картці задачі (291). */
.kp-package-val.kp-pkg-ok  { color: var(--kp-green); }
.kp-package-val.kp-pkg-low { color: var(--kp-amber); }
.kp-package-val.kp-pkg-over { color: var(--kp-red); }

/* Задача №116 (0.18.0): плашка в картці задачі «ця задача виводить
   проєкт за пакет». Бурштинова, як усі попередження про пакет. */
.kp-over-package-note {
	margin: 10px 0 4px; /* окремим рядком під полями пакета */
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--kp-amber-soft); /* те саме тло, що в бурштинових бейджів */
	color: var(--kp-amber);
	font-size: 12.5px;
	font-weight: 600; /* напівжирний, це рішення, а не підказка */
	line-height: 1.4;
}

/* ── Вкладки всередині картки ────────────────────────────────────── */
/* Свій клас панелей (kp-ppane), бо kp-pane вже зайнятий панелями
   розділів оболонки кабінету — інакше вкладка картки ховала б розділ. */

.kp-ppane {
	display: none; /* усі панелі картки сховані */
}

.kp-ppane-active {
	display: block; /* показуємо лише активну */
}

/* ── Поточний період абонемента — темна плитка (заглушка до 0.10) ── */

.kp-period-now {
	padding: 16px 18px; /* просторі внутрішні відступи */
	margin-bottom: 14px; /* відступ до підсумків */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-dark); /* темна плитка — головний блок вкладки */
	color: #fff; /* білий текст на темному */
}

.kp-period-head {
	display: flex; /* назва періоду ліворуч, цифри праворуч */
	align-items: baseline; /* по базовій лінії тексту */
	justify-content: space-between; /* розводимо по краях */
	gap: 12px; /* зазор між частинами */
	margin-bottom: 6px; /* відступ до підпису */
}

.kp-period-title {
	font-size: 15px; /* трохи більший за основний текст */
	font-weight: 700; /* жирний */
}

.kp-period-sub {
	color: rgba(255, 255, 255, 0.55); /* приглушений підпис на темному */
	font-size: 12px; /* дрібний розмір */
}

/* ── Фінансові підсумки (структура-заглушка до 0.10) ─────────────── */

.kp-fin-summary {
	display: grid; /* три показники рівними колонками */
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* стільки колонок, скільки влазить; 140, щоб чотири плитки проєкту стали в ряд (0.22) */
	gap: 12px; /* зазор між показниками */
	margin-bottom: 14px; /* відступ до легенди */
}

.kp-fin-cell {
	padding: 14px 16px; /* внутрішні відступи показника */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-surface-soft); /* світла підкладка */
	border: 1px solid var(--kp-line); /* межа блока на світлому тлі */
}

.kp-fin-label {
	color: var(--kp-muted); /* приглушений підпис */
	font-size: 12px; /* дрібний розмір */
}

.kp-fin-value {
	margin-top: 4px; /* відступ від підпису */
	font-size: 20px; /* велика цифра */
	font-weight: 700; /* жирна */
	letter-spacing: -0.01em; /* легке стиснення цифр у Raleway */
}

/* ── Приховані доступи (розділ 13: шифрування) ───────────────────── */

.kp-secret {
	display: inline-flex; /* крапки й кнопка в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 8px; /* зазор між ними */
}

.kp-secret-mask {
	letter-spacing: 0.14em; /* крапки пароля йдуть із розрядкою */
	color: var(--kp-faint); /* блідий — це прихований вміст */
}

/* Значення «не заданий» біля порожнього доступу. */
.kp-faint-text {
	color: var(--kp-faint); /* блідий текст */
}

/* ── Консолідований баланс клієнта (прототип kartka-kliyenta) ────── */

.kp-balance {
	padding: 20px; /* просторі внутрішні відступи */
	border-radius: var(--kp-radius); /* скруглення як у карток */
	background: var(--kp-dark); /* темна плитка — головний акцент екрана */
	color: #fff; /* білий текст на темному */
}

.kp-balance-label {
	color: rgba(255, 255, 255, 0.55); /* приглушений підпис на темному */
	font-size: 12.5px; /* дрібний розмір */
}

.kp-balance-value {
	margin-top: 6px; /* відступ від підпису */
	font-size: 26px; /* велика підсумкова цифра */
	font-weight: 700; /* жирна */
	letter-spacing: -0.02em; /* легке стиснення цифр */
}

.kp-balance-note {
	margin-top: 10px; /* відступ від цифри */
	padding-top: 10px; /* повітря під лінією */
	border-top: 1px solid rgba(255, 255, 255, 0.1); /* тонка лінія-роздільник */
	color: rgba(255, 255, 255, 0.5); /* приглушене пояснення */
	font-size: 11.5px; /* найдрібніший розмір */
	line-height: 1.45; /* компактний інтерліньяж */
}

/* ── Внутрішній коментар команди (розділ 12) ─────────────────────── */

.kp-internal {
	padding: 14px; /* внутрішні відступи */
	border: 1px dashed var(--kp-line); /* пунктир — ознака внутрішнього блоку */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-surface-soft); /* світла підкладка */
	font-size: 13px; /* дрібніше за основний текст */
	line-height: 1.55; /* просторий інтерліньяж */
}

/* ── Проєкти в картці клієнта (прототип kartka-kliyenta) ─────────── */

.kp-proj-row {
	display: flex; /* назва ліворуч, показники праворуч */
	align-items: center; /* вирівнювання по центру */
	justify-content: space-between; /* розводимо по краях */
	gap: 14px; /* зазор між частинами */
	padding: 14px 16px; /* внутрішні відступи рядка */
	margin-bottom: 8px; /* просвіт між проєктами */
	border: 1px solid var(--kp-line); /* тонка рамка */
	border-radius: var(--kp-radius-sm); /* скруглення */
	cursor: pointer; /* рядок веде до картки проєкту */
}

.kp-proj-row:hover {
	background: var(--kp-surface-soft); /* підсвітка під курсором */
}

.kp-proj-name {
	font-weight: 700; /* назва проєкту — головне в рядку */
}

.kp-proj-sub {
	margin-top: 2px; /* відступ від назви */
	color: var(--kp-muted); /* приглушений другий рядок */
	font-size: 12px; /* дрібний розмір */
}

.kp-proj-right {
	flex: 0 0 auto; /* показники не стискаються */
	text-align: right; /* цифри до правого краю */
	font-size: 13px; /* дрібний розмір */
}

/* ── Прапорець «Доступ передано» в картці клієнта (розділ 2) ─────── */

.kp-access-toggle {
	display: flex; /* чекбокс і підпис в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 8px; /* зазор між чекбоксом і текстом */
	margin-top: 10px; /* відступ від рядка логіна */
	font-size: 13.5px; /* розмір як у kp-meta */
	font-weight: 600; /* напівжирний — це дія, не примітка */
	cursor: pointer; /* клікабельний увесь рядок */
}

/* ══════════════════════════════════════════════════════════════════
   Збірка 0.9.2: плашка протухлої сесії, екран для незалогінених,
   підказки під полями доступів.
   ══════════════════════════════════════════════════════════════════ */

/* ── Плашка «Сесія оновилась» (правка 5) ─────────────────────────── */

.kp-session-bar {
	position: fixed; /* висить над усім кабінетом */
	left: 50%; /* центр екрана по горизонталі */
	bottom: 24px; /* трохи над нижнім краєм */
	transform: translateX(-50%); /* точне центрування */
	z-index: 99999; /* поверх модалок і меню */
	display: flex; /* текст і кнопка в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 14px; /* зазор між текстом і кнопкою */
	padding: 14px 18px; /* внутрішні відступи плашки */
	border-radius: var(--kp-radius); /* фірмове скруглення */
	background: var(--kp-dark); /* темна плашка — помітна на світлому кабінеті */
	color: #fff; /* білий текст */
	font-family: var(--kp-font); /* Raleway навіть поза .kp-app */
	font-size: 13.5px; /* базовий дрібний розмір */
	box-shadow: 0 12px 34px rgba(26, 21, 35, 0.35); /* тінь відриває від фону */
}

/* ── Екран для незалогінених (правка 6) ──────────────────────────── */

.kp-guest {
	max-width: 420px; /* компактна картка */
	margin: 48px auto; /* по центру сторінки з повітрям */
	padding: 34px 32px; /* просторі внутрішні відступи */
	border: 1px solid var(--kp-line); /* тонка рамка як у карток */
	border-radius: var(--kp-radius); /* фірмове скруглення */
	background: var(--kp-surface); /* біла поверхня */
	text-align: center; /* усе по центру */
}

.kp-guest-logo {
	display: flex; /* ромбик і напис в один рядок */
	align-items: center; /* вирівнювання по центру */
	justify-content: center; /* лого по центру картки */
	gap: 10px; /* зазор між ромбиком і написом */
	margin-bottom: 12px; /* відступ до тексту */
	font-size: 19px; /* більший за основний текст */
	font-weight: 700; /* фірмова вага лого */
}

.kp-guest-mark {
	display: inline-flex; /* центруємо символ */
	align-items: center; /* по вертикалі */
	justify-content: center; /* по горизонталі */
	width: 34px; /* квадрат лого */
	height: 34px; /* квадрат лого */
	border-radius: 10px; /* скруглення знака */
	background: var(--kp-accent); /* бузковий акцент */
	color: #fff; /* білий ромбик */
	font-size: 15px; /* розмір символа */
}

/* Правка 106 (31.08.2026): свіже звернення від клієнта в блоці
   «Потребують уваги». Власний колір лівої смуги — бузковий акцент, а не
   червоний: це не аварія, а «подивись першим». Червоний лишається за
   протермінованими, щоб два різні сигнали не злились в один. */
.kp-attn-row-new {
	border-left: 3px solid var(--kp-accent); /* бузкова смуга замість типової */
	padding-left: 9px; /* компенсуємо товщину смуги, щоб текст не поїхав */
}

/* Правка 100 (31.08.2026): список файлів, доданих у форму задачі до
   збереження. Чіпи, а не таблиця: файлів тут одиниці, і головне —
   бачити назву й мати змогу прибрати помилковий. */
.kp-form-files {
	display: flex; /* чіпи в рядок */
	flex-wrap: wrap; /* переносимо, коли не влазять */
	gap: 6px; /* зазор між чіпами */
	margin-bottom: 8px; /* відступ до кнопки «Додати файл» */
}

.kp-file-chip {
	display: inline-flex; /* назва й хрестик в одному рядку */
	align-items: center; /* по центру */
	gap: 6px; /* зазор до хрестика */
	padding: 4px 8px; /* внутрішні відступи чіпа */
	border-radius: var(--kp-radius-pill); /* пігулка */
	background: var(--kp-surface-soft); /* приглушене тло */
	font-size: 12px; /* дрібніше за основний текст */
}

.kp-file-x {
	border: 0; /* кнопка без рамки */
	background: none; /* і без тла */
	cursor: pointer; /* курсор-палець */
	color: var(--kp-muted); /* приглушений, щоб не перетягував увагу */
	line-height: 1; /* без зайвої висоти рядка */
}

/* Правка 109 (31.08.2026): підпис «Збережено» поруч із галочкою
   «Доступ передано». Зелений і дрібний: це підтвердження дії, а не
   повідомлення, яке треба читати. Живе дві секунди. */
.kp-access-saved {
	margin-left: 8px; /* відступ від тексту галочки */
	color: var(--kp-green); /* зелений — успіх, як у статусі «Готово» */
	font-size: 12px; /* дрібніший за підпис галочки */
	font-weight: 600; /* напівжирний, щоб читався попри розмір */
}

/* Правка 110 (31.08.2026): попередження «без email акаунта не буде».
   Бурштиновий, бо це не помилка, а умова, якої ще не виконано. */
.kp-access-warn {
	margin: 10px 0 4px; /* на місці кнопки, яку воно заміняє */
	color: var(--kp-amber); /* бурштиновий — увага, не помилка */
}

/* Правка 18 (31.08.2026): у налаштуваннях лого панелі показуємо на
   темній підкладці — воно світле, і на білому тлі вікна виглядало б
   порожнім місцем. Колір той самий, що в бокового меню. */
.kp-panel-logo-dark {
	display: inline-flex; /* підкладка по розміру лого */
	align-items: center; /* центруємо лого по вертикалі */
	justify-content: center; /* і по горизонталі */
	padding: 8px; /* поле навколо лого, щоб воно не торкалось краю */
	border-radius: 10px; /* скруглення підкладки */
	background: var(--kp-dark); /* те саме темне тло, що в бокового меню */
}

/* Правка 18 (31.08.2026): лого панелі на екрані входу. Розміри як у
   .kp-guest-mark, щоб картка входу не змінювала висоту. */
.kp-guest-logo-img {
	width: 34px; /* той самий квадрат, що в ромбика */
	height: 34px; /* той самий квадрат */
	border-radius: 10px; /* те саме скруглення */
	object-fit: contain; /* вписуємо лого цілком, без обрізання */
	flex: 0 0 auto; /* напис поруч не стискає лого */
}

.kp-guest-text {
	margin: 0 0 18px; /* відступ до кнопки */
	color: var(--kp-muted); /* приглушене пояснення */
	font-size: 13.5px; /* дрібний розмір */
	line-height: 1.55; /* просторий інтерліньяж */
}

/* Кнопка «Увійти» — посилання у вигляді головної кнопки. */
.kp-guest-btn {
	display: inline-flex; /* капсула по вмісту */
	justify-content: center; /* підпис по центру */
	text-decoration: none; /* це посилання — прибираємо підкреслення */
}

/* ── Підказка під полем доступів у формі проєкту (правка 7) ──────── */

.kp-cred-hint {
	margin: 6px 0 0; /* притиснута до свого поля */
}

/* ═══ Правки 0.9.3 ═══════════════════════════════════════════════ */

/* Обгортки видимості полів форми проєкту ([data-support-only]).
   display: contents «розчиняє» обгортку: її діти стають прямими
   учасниками флекс-колонки .kp-form і отримують той самий gap —
   інакше поля всередині обгортки злипалися (правка 0.9.3). */
.kp-form [data-support-only] {
	display: contents; /* обгортка не ламає ритм полів форми */
}

/* Блок «Налаштування абонементу (пакету)» — візуально відділений
   контейнер усередині форми проєкту (правка 0.9.3). */
.kp-form-block {
	display: flex; /* поля одне під одним */
	flex-direction: column; /* вертикальний стек */
	gap: 14px; /* той самий ритм, що і в .kp-form */
	padding: 16px; /* повітря всередині блока */
	border: 1px solid var(--kp-line); /* тонка рамка відділяє блок */
	border-radius: var(--kp-radius); /* скруглення як у карток кабінету (правка 0.10.0.2: було дрібне radius-sm) */
	background: var(--kp-bg-2); /* ледь темніший фон за білу картку форми */
}

/* Заголовок блока абонемента (правка 0.9.3). */
.kp-form-block-title {
	font-size: 13px; /* компактний заголовок */
	font-weight: 700; /* виділений — це назва блока */
}

/* Заголовки розділів форми редагування проєкту (правка 0.9.3):
   «Основне», «Технічні дані», «Чати», «Доступи», «Нотатки». */
.kp-form-heading {
	margin: 12px 0 0; /* повітря над розділом */
	padding-top: 16px; /* відступ від попереднього розділу */
	border-top: 1px solid var(--kp-line); /* лінія-роздільник розділів */
	font-size: 14px; /* трохи більший за лейбли */
	font-weight: 700; /* виділений заголовок */
}

/* Перший розділ — без лінії і зайвого відступу зверху. */
.kp-form .kp-form-heading:first-child {
	margin-top: 0; /* форма і так має відступ від h2 */
	padding-top: 0; /* лінія не потрібна на самому початку */
	border-top: 0; /* прибираємо роздільник */
}

/* Короткі поля форми в дві колонки (правка 0.9.3): числа пакета,
   хостинг/домен/CMS, чати, FTP і база — щоб форма не була полотном. */
.kp-form-grid2 {
	display: grid; /* сітка */
	grid-template-columns: 1fr 1fr; /* дві рівні колонки */
	gap: 14px; /* той самий ритм, що і в .kp-form */
}

/* На вузьких екранах колонки складаються в стовпчик. */
@media (max-width: 640px) {
	.kp-form-grid2 {
		grid-template-columns: 1fr; /* одна колонка на мобільному */
	}
}

/* Гостьова картка на всю висоту екрана (правка 0.9.3): раніше
   картка «висіла» вгорі сторінки і виглядала обрізаною. */
.kp-guest-app {
	display: flex; /* центрування картки */
	align-items: center; /* по вертикалі */
	justify-content: center; /* по горизонталі */
	min-height: 100vh; /* картка посередині повного екрана */
	padding: 24px; /* повітря на малих екранах */
	background: linear-gradient(135deg, var(--kp-bg-1), var(--kp-bg-2) 55%, var(--kp-bg-3)); /* фірмовий градієнт на всю висоту */
}

/* Усередині повноекранної обгортки зовнішні відступи не потрібні. */
.kp-guest-app .kp-guest {
	margin: 0; /* центрує флекс-обгортка, а не margin */
	width: 100%; /* картка тримає свою max-width */
}

/* Кнопка «Вийти» внизу темного меню кабінету (правка 0.9.3). */
.kp-nav-logout {
	display: block; /* окремий рядок під профілем */
	margin-top: 6px; /* невеликий відступ від профілю */
	padding: 8px 4px; /* клікабельна зона як у профілю */
	color: rgba(255, 255, 255, 0.55); /* приглушене посилання */
	font-size: 12.5px; /* дрібніше за пункти меню */
	font-weight: 600; /* напівжирний як службові підписи */
	text-decoration: none; /* без підкреслення */
	transition: color 0.15s ease; /* мʼяка реакція на наведення */
}

/* Наведення на «Вийти» — посилання світлішає. */
.kp-nav-logout:hover {
	color: #fff; /* повна білизна на ховері */
}

/* ═══ Правки 0.9.4 ═══════════════════════════════════════════════ */

/* Форма входу на головній (ТЗ 5.8, прототип storinka-vhodu.html).
   Сцену центрує вже наявна .kp-guest-app (100vh, градієнт). */

/* Обгортка картки і підпису під нею. */
.kp-login-wrap {
	width: 100%; /* тягнеться до ліміту картки */
	max-width: 400px; /* компактна форма, не розповзається */
}

/* Картка входу — біла поверхня з мʼякою тінню, «парить» над тлом. */
.kp-login {
	padding: 34px 32px 28px; /* просторі внутрішні відступи */
	border: 1px solid var(--kp-line); /* тонка рамка як у карток кабінету */
	border-radius: var(--kp-radius); /* фірмове скруглення */
	background: var(--kp-surface); /* біла поверхня */
	box-shadow: 0 18px 50px rgba(26, 21, 35, 0.08); /* мʼяка тінь картки */
	text-align: left; /* поля і підписи по лівому краю */
}

/* Лого в картці входу центруємо (kp-guest-logo лівий за замовчуванням). */
.kp-login .kp-guest-logo {
	margin-bottom: 6px; /* відступ до підзаголовка */
}

/* Підзаголовок під лого: що це і для кого. */
.kp-login-sub {
	margin: 0 0 20px; /* відступ до привітання */
	color: var(--kp-muted); /* приглушений другий рядок */
	font-size: 13px; /* дрібний розмір */
	text-align: center; /* по центру під лого */
}

/* Привітання над полем логіна. */
.kp-login-hello {
	margin-bottom: 14px; /* відступ до першого поля */
	font-size: 17px; /* помітніший за основний текст */
	font-weight: 700; /* жирне привітання */
	letter-spacing: -0.01em; /* легке стиснення в Raleway */
}

/* Поля форми входу йдуть одне під одним із рівним ритмом. */
.kp-login .kp-field {
	margin-bottom: 12px; /* відступ між полями */
}

/* Рядок між паролем і кнопкою: чекбокс ліворуч, посилання праворуч. */
.kp-login-row {
	display: flex; /* чекбокс і посилання в один рядок */
	align-items: center; /* вирівнювання по центру */
	justify-content: space-between; /* розводимо по краях */
	gap: 12px; /* зазор, коли тісно */
	margin: 4px 0 18px; /* повітря навколо рядка */
	font-size: 13px; /* дрібний службовий текст */
}

/* «Запамʼятати мене» — чекбокс із клікабельним підписом. */
.kp-login-remember {
	display: flex; /* чекбокс і текст в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 8px; /* зазор між чекбоксом і підписом */
	color: var(--kp-text); /* основний колір тексту */
	cursor: pointer; /* клікабельний увесь підпис */
	user-select: none; /* підпис не виділяється випадково */
}

/* «Забули пароль?» — тихе посилання, не сперечається з кнопкою. */
.kp-login-forgot {
	color: var(--kp-accent); /* бузковий акцент посилань */
	font-weight: 600; /* напівжирне — видно ціль кліку */
	text-decoration: none; /* без підкреслення за замовчуванням */
}

/* Підкреслення лише під курсором. */
.kp-login-forgot:hover {
	text-decoration: underline; /* реакція на наведення */
}

/* Кнопка «Увійти» — головна дія, на всю ширину картки. */
.kp-login-submit {
	width: 100%; /* на всю ширину форми */
	justify-content: center; /* підпис по центру кнопки */
}

/* Кнопка під час запиту: заблокована, «Входимо…». */
.kp-login-submit:disabled {
	opacity: 0.65; /* видно, що натиснута і чекає */
	cursor: default; /* без руки на заблокованій */
}

/* Плашка помилки входу: прихована, поки помилки немає. */
.kp-login-error {
	display: none; /* показується лише з модифікатором нижче */
	margin-bottom: 16px; /* відступ до полів форми */
	padding: 11px 14px; /* внутрішні відступи плашки */
	border-radius: var(--kp-radius-sm); /* мʼяке скруглення */
	background: var(--kp-red-soft); /* мʼяка червона підкладка */
	color: var(--kp-red); /* червоний текст помилки */
	font-size: 13px; /* дрібний розмір */
	line-height: 1.5; /* читабельний інтерліньяж */
}

/* Модифікатор увімкненої помилки — ставить скрипт форми. */
.kp-login-error-on {
	display: block; /* плашка видима */
}

/* Дрібний підпис під карткою: чий це сервіс. */
.kp-login-foot {
	margin: 18px 0 0; /* відступ від картки */
	color: var(--kp-faint); /* найблідіший текст */
	font-size: 12px; /* найдрібніший розмір */
	text-align: center; /* по центру під карткою */
}

/* ── Правка 0.9.5: форма входу проти кіта Elementor ───────────────
   Гостьова сторінка не має #kp-dashboard-app, тому захист 0.9.2 її
   не покривав: кіт фарбував кнопку «Увійти» у вишневий, а полям
   давав свої рамки, кути і шрифт (скріншот Оксани 16.08). Дублюємо
   ключові властивості під id-скоупом — специфічність id перебиває
   будь-який селектор кіта. */

/* Шрифт дизайн-системи на всій гостьовій сцені, а не шрифт теми. */
#kp-guest-app,
#kp-guest-app * {
	font-family: var(--kp-font); /* Raleway всюди, включно з полями */
}

/* Поля форми входу — фірмові: скруглення, тонка рамка, свій фокус. */
#kp-guest-app .kp-input {
	padding: 11px 14px; /* просторі відступи як у кабінеті */
	border: 1px solid var(--kp-line); /* тонка сіра рамка замість темної */
	border-radius: var(--kp-radius-sm); /* мʼяке скруглення замість гострих кутів */
	background: var(--kp-surface); /* біла заливка */
	color: var(--kp-ink); /* темний текст */
	font-size: 14px; /* розмір як у полях кабінету */
	box-shadow: none; /* без тіней теми */
	outline: none; /* фокус малюємо самі нижче */
}

/* Фокус поля — бузкова рамка дизайн-системи. */
#kp-guest-app .kp-input:focus {
	border-color: var(--kp-accent); /* бузковий акцент */
	box-shadow: 0 0 0 3px var(--kp-accent-soft); /* мʼяке кільце фокуса */
}

/* Кнопка «Увійти» — чорна капсула, і на hover теж (не вишнева). */
#kp-guest-app .kp-btn-dark,
#kp-guest-app .kp-btn-dark:hover {
	padding: 12px 18px; /* власні відступи замість відступів кіта */
	border: 1px solid var(--kp-dark); /* рамка в колір заливки */
	border-radius: 999px; /* фірмова капсула */
	background: var(--kp-dark); /* чорна заливка */
	color: #fff; /* білий підпис */
	font-weight: 600; /* напівжирний підпис */
	text-transform: none; /* без капса теми */
	box-shadow: none; /* без тіней кнопок кіта */
	cursor: pointer; /* рука над кнопкою */
}


/* ── Довідник послуг (реліз 0.10.0.2, ТЗ 18) ──────────────────────
   Сітка карток замість суцільного списку: у кожної послуги своя
   картка з назвою, способом тарифікації, ціною і діями. Раніше цей
   екран використовував класи з прототипу (.kp-team-row), яких у
   плагіні немає, тому рядки злипались в одну купу. */

.kp-svc-grid {
	display: grid; /* картки сіткою */
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* стільки колонок, скільки влазить */
	gap: 12px; /* зазор між картками */
	margin-top: 14px; /* відступ від підзаголовка розділу */
}

.kp-svc-card {
	display: flex; /* вміст у стовпчик, дії притиснуті донизу */
	flex-direction: column; /* вертикальний потік */
	padding: 16px 18px; /* внутрішні відступи картки */
	border: 1px solid var(--kp-line); /* тонка рамка */
	border-radius: var(--kp-radius); /* скруглення як у решти карток */
	background: var(--kp-surface); /* біла підкладка */
}

.kp-svc-card:hover {
	border-color: var(--kp-accent); /* бузкова рамка під курсором */
}

.kp-svc-name {
	font-size: 14.5px; /* трохи більший за основний текст */
	font-weight: 700; /* назва — головне в картці */
	line-height: 1.3; /* компактний інтерліньяж для двох рядків */
}

.kp-svc-billing {
	margin-top: 4px; /* відступ від назви */
	color: var(--kp-muted); /* приглушений службовий рядок */
	font-size: 12.5px; /* дрібний розмір */
}

.kp-svc-price {
	margin-top: 12px; /* відступ від способу тарифікації */
	font-size: 20px; /* ціна — друга за важливістю після назви */
	font-weight: 700; /* жирна цифра */
	letter-spacing: -0.01em; /* трохи щільніше, щоб велика цифра не розпадалась */
}

.kp-svc-extra {
	margin-top: 2px; /* відступ від ціни */
	margin-bottom: 14px; /* повітря перед лінією дій */
	min-height: 18px; /* порожній рядок тримає висоту: цифри сусідніх карток на одній лінії */
	color: var(--kp-muted); /* приглушений рядок */
	font-size: 12.5px; /* дрібний розмір */
}

.kp-svc-actions {
	display: flex; /* дії в ряд */
	gap: 14px; /* зазор між посиланнями */
	margin-top: auto; /* дії притиснуті до низу: лінія дій на одному рівні в усіх картках ряду (правка 0.10.0.4) */
	padding-top: 12px; /* повітря над роздільником */
	border-top: 1px solid var(--kp-line); /* тонка лінія відділяє дії від даних */
}

/* «Видалити» у фірмовому бузковому, як решта дій (рішення Оксани
   17.08: без вишневого). Незворотність страхує confirm-діалог. */
.kp-svc-actions .kp-svc-del {
	margin-left: auto; /* притискаємо до правого краю картки */
}


/* ── Системні налаштування в «Керуванні» (правка 0.10.0.4) ────────
   Сітка карток-переходів за прототипом 07-dashboard-admina-keruvannya.
   Працює поки лише каталог послуг, решта карток неактивні. */

.kp-settings {
	display: grid; /* картки сіткою */
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* стільки колонок, скільки влазить */
	gap: 12px; /* зазор між картками */
	margin-top: 14px; /* відступ від заголовка блока */
}

.kp-setting {
	display: flex; /* іконка ліворуч, текст праворуч */
	align-items: flex-start; /* по верху: текст у два рядки */
	gap: 12px; /* зазор між іконкою й текстом */
	padding: 15px 16px; /* внутрішні відступи картки */
	border: 1px solid var(--kp-line); /* тонка рамка */
	border-radius: var(--kp-radius); /* скруглення як у карток */
	background: var(--kp-surface); /* біла картка */
	cursor: pointer; /* веде в окремий екран */
	text-align: left; /* це кнопка, але вміст вирівняно як у картки */
	font-family: var(--kp-font); /* Raleway */
}

.kp-setting:hover {
	border-color: var(--kp-accent); /* бузкова рамка під курсором */
	background: var(--kp-surface-soft); /* легка підсвітка */
}

/* Недороблені розділи: видно, але клікнути не можна. */
.kp-setting-soon {
	opacity: 0.55; /* приглушена картка */
	cursor: default; /* курсор не обіцяє переходу */
}

.kp-setting-soon:hover {
	border-color: var(--kp-line); /* без реакції на наведення */
	background: var(--kp-surface); /* фон не міняється */
}

.kp-setting-icon {
	display: flex; /* центруємо символ у квадратику */
	align-items: center; /* по вертикалі */
	justify-content: center; /* по горизонталі */
	flex: 0 0 auto; /* іконка не стискається */
	width: 34px; /* розмір квадратика */
	height: 34px; /* квадратний */
	border-radius: 10px; /* скруглення */
	background: var(--kp-accent-soft); /* світло-бузкова заливка */
	font-size: 16px; /* розмір символу */
}

.kp-setting-body {
	min-width: 0; /* довгий опис не розпирає картку */
}

.kp-setting-name {
	display: block; /* назва окремим рядком */
	font-size: 13.5px; /* дрібніше за основний текст */
	font-weight: 700; /* назва — головне в картці */
	color: var(--kp-ink); /* основний текст, а не колір посилань теми */
}

/* Позначка «скоро» біля назви недоробленого розділу. */
.kp-setting-mark {
	margin-left: 6px; /* відступ від назви */
	color: var(--kp-muted); /* приглушена */
	font-size: 11.5px; /* дрібна */
	font-weight: 600; /* трохи виділена */
}

.kp-setting-sub {
	display: block; /* опис під назвою */
	margin-top: 3px; /* відступ від назви */
	color: var(--kp-muted); /* приглушений опис */
	font-size: 12px; /* дрібний розмір */
	line-height: 1.4; /* компактний інтерліньяж */
}

/* Кіт Elementor стилізує <button> сильніше за наші класи: центрує текст,
   забороняє перенос рядків (white-space: nowrap — текст вилазив за межі
   картки), фарбує hover у малиновий. Перебиваємо все примусово
   (правка 0.10.0.5, скріншот «Верстка» від Оксани). */
#kp-dashboard-app .kp-setting {
	display: flex !important; /* іконка ліворуч, текст праворуч */
	align-items: flex-start !important; /* текст у два рядки — по верху */
	gap: 12px !important; /* зазор між іконкою й текстом */
	padding: 15px 16px !important; /* відступи картки, не кнопки кіта */
	border: 1px solid var(--kp-line) !important; /* тонка рамка */
	border-radius: var(--kp-radius) !important; /* скруглення картки */
	background: var(--kp-surface) !important; /* біла картка */
	color: var(--kp-ink) !important; /* основний текст */
	text-align: left !important; /* кіт центрував текст кнопки */
	white-space: normal !important; /* кіт забороняв перенос — текст вилазив за картку */
	font-family: var(--kp-font) !important; /* Raleway */
	font-size: 13.5px !important; /* не кегль кнопок кіта */
	font-weight: 500 !important; /* базове накреслення */
	line-height: 1.4 !important; /* нормальний інтерліньяж для двох рядків */
	min-height: 0 !important; /* без навʼязаної висоти кнопок */
	box-shadow: none !important; /* без тіні кнопок кіта */
}

#kp-dashboard-app .kp-setting:hover {
	background: var(--kp-surface-soft) !important; /* легка підсвітка, а не малиновий кіта */
	border-color: var(--kp-accent) !important; /* бузкова рамка */
	color: var(--kp-ink) !important; /* текст не перефарбовується */
}

#kp-dashboard-app .kp-setting-soon,
#kp-dashboard-app .kp-setting-soon:hover {
	background: var(--kp-surface) !important; /* неактивна картка без реакцій */
	border-color: var(--kp-line) !important; /* рамка не підсвічується */
}

#kp-dashboard-app .kp-setting-body {
	display: block; /* текстова колонка */
	min-width: 0; /* довгий опис переноситься, а не розпирає картку */
}

#kp-dashboard-app .kp-setting-name {
	color: var(--kp-ink) !important;
}

#kp-dashboard-app .kp-setting-sub,
#kp-dashboard-app .kp-setting-mark {
	color: var(--kp-muted) !important;
}


/* ── Блок «Послуги проєкту» всередині форми (правка 0.10.0.4) ─────
   Порожній стан у формі не центруємо: у широкому блоці фраза посеред
   порожнечі виглядала загубленою. Дії відділяємо від полів відступом. */

.kp-form-block .kp-empty {
	margin: 0; /* без зайвих полів навколо */
	padding: 10px 0; /* тонка смуга тексту, а не блок на пів екрана */
	text-align: left; /* ліворуч, як решта вмісту блока */
	color: var(--kp-muted); /* приглушений службовий текст */
}

.kp-form-block .kp-actions {
	margin-top: 4px; /* невеликий відступ від полів над кнопкою */
}


/* ── Підказки під полями (правка 0.10.0.4) ───────────────────────
   Раніше підказка жила всередині комірки сітки й подовжувала свою
   колонку — поруч зʼявлялася порожня діра, а вертикальний ритм
   рядків розʼїжджався. Тепер це окремий рядок на всю ширину форми
   одразу під полем, до якого він належить. */

.kp-form-hint,
.kp-form-block .kp-form-hint {
	grid-column: 1 / -1; /* на всю ширину форми чи блока */
	margin: -8px 0 0; /* підтягуємо під поле, до якого належить */
	color: var(--kp-muted); /* приглушений службовий текст */
	font-size: 12.5px; /* дрібний розмір */
	line-height: 1.45; /* компактний інтерліньяж */
}

/* Блок-підкладка теж сітка у дві колонки: інакше поля всередині
   лягали одне під одним на всю ширину блока. */
.kp-form-block {
	display: grid; /* замість flex column */
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* дві рівні колонки */
	gap: 14px 18px; /* той самий ритм, що у формі */
	align-items: start; /* поля не розтягуються по висоті сусіда */
}

.kp-form-block > .kp-form-block-title,
.kp-form-block > .kp-empty,
.kp-form-block > .kp-actions,
.kp-form-block > .kp-legend,
.kp-form-block > .kp-form-grid2,
.kp-form-block > [data-services-body] {
	grid-column: 1 / -1; /* службові рядки на всю ширину блока */
}

@media (max-width: 720px) {
	.kp-form-block {
		grid-template-columns: 1fr; /* одна колонка на вузькому екрані */
	}
}

/* Вміст блока послуг теж сітка: поля парами, службові рядки на всю ширину. */
[data-services-body] {
	display: grid; /* сітка всередині блока */
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* дві колонки */
	gap: 14px 18px; /* однаковий ритм */
	align-items: start; /* без розтягування по висоті */
}

[data-services-body] > .kp-empty,
[data-services-body] > .kp-actions,
[data-services-body] > .kp-form-grid2,
[data-services-body] > .kp-form-block,
[data-services-body] > .kp-form-hint {
	grid-column: 1 / -1; /* службові рядки на всю ширину */
}

@media (max-width: 720px) {
	[data-services-body] {
		grid-template-columns: 1fr; /* одна колонка на вузькому екрані */
	}
}

/* ── Фінанси 0.10.2: широка модалка, бланк рахунка, друк ─────────── */

.kp-modal-wide {
	max-width: 820px; /* бланк рахунка і редактор рядків ширші за діалог */
}

.kp-fin-cell-debt .kp-fin-value {
	color: var(--kp-red); /* борг червоним, як «Борг» у списках */
}

.kp-invoice-head {
	display: flex; /* заголовок і статус в один рядок */
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

.kp-invoice-parties {
	display: grid; /* платник і проєкт поруч */
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 14px;
}

.kp-invoice-edit .kp-input {
	padding: 6px 8px; /* компактніші поля в таблиці рядків */
	font-size: 13px;
}

/* Друк бланка засобами браузера (звірка п. 7): на папір іде лише рахунок. */
@media print {
	body.kp-printing-invoice > *:not(.kp-modal-backdrop) {
		display: none !important;
	}
	body.kp-printing-invoice .kp-modal-backdrop {
		position: static;
		background: none;
		padding: 0;
	}
	body.kp-printing-invoice .kp-modal {
		max-width: none;
		box-shadow: none;
		padding: 0;
	}
	body.kp-printing-invoice .kp-no-print {
		display: none !important;
	}
}

/* ── Пагінація списків (правка 52) ───────────────────────────────── */

.kp-pager {
	display: flex; /* кнопки сторінок в один рядок */
	align-items: center;
	gap: 6px;
	padding: 12px 16px; /* як рядок списку */
	flex-wrap: wrap;
}

.kp-page {
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius-sm);
	background: var(--kp-surface);
	color: var(--kp-ink);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.kp-page:disabled {
	opacity: 0.4; /* край списку */
	cursor: default;
}

.kp-page-active {
	background: var(--kp-ink); /* поточна сторінка як активна вкладка */
	color: #fff;
	border-color: var(--kp-ink);
}

.kp-page-dots {
	color: var(--kp-faint);
	padding: 0 2px;
}

.kp-pager-info {
	margin-left: auto; /* підпис «21 до 40 з 87» праворуч */
	color: var(--kp-faint);
	font-size: 12.5px;
}

/* ── Шапка списку клієнтів (правка 51) ───────────────────────────── */

.kp-client-row {
	grid-template-columns: 2fr 1.6fr 170px 190px; /* фіксовані частки, щоб шапка сходилась із рядками */
}

.kp-client-row-nofin {
	grid-template-columns: 2fr 1.6fr 190px;
}

/* 0.14.0: у режимі «Фрілансер» немає колонки «PM». Порядок правил
   важливий: -nopm іде після -nofin, щоб їхнє поєднання (техспеціаліст
   у фрілансера) дало саме дві зони, а не три. */
.kp-client-row-nopm {
	grid-template-columns: 2fr 1.6fr 170px; /* без зони PM */
}

.kp-client-row-nofin.kp-client-row-nopm {
	grid-template-columns: 2fr 1.6fr; /* без балансу і без PM */
}

.kp-client-head {
	cursor: default; /* шапка не клікабельна */
	padding-top: 10px;
	padding-bottom: 10px;
	color: var(--kp-faint);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.kp-client-head:hover {
	background: transparent;
}

/* Правка 56: підказка «немає пакета» без чекбокса, звичайним текстом. */
.kp-check.kp-check-static {
	cursor: default; /* не виглядає як клікабельне */
	color: var(--kp-muted); /* приглушений колір підказки */
	font-size: 13px; /* дрібніше, як інші підказки під полями */
}

/* Правка 67: дрібний підпис «· на балансі …» поруч із боргом клієнта. */
.kp-money-sub {
	font-size: 0.72em; /* дрібніше за основну суму */
	font-weight: 500; /* не жирний */
	color: var(--kp-muted); /* приглушений */
	white-space: nowrap; /* не ламається посеред суми */
}

/* Правка 60: кружечки PM і виконавця без імен, імʼя у підказці. */
.kp-people {
	display: inline-flex; /* кружечки в ряд */
	gap: 6px; /* зазор між ними */
	align-items: center; /* по центру з «Вільна задача» */
}

.kp-avatar-only {
	cursor: default; /* підказка при наведенні, не клік */
}

/* Правки 59, 60: план → факт у колонці часу. */
.kp-time-arrow {
	color: var(--kp-muted); /* стрілка приглушена */
	font-weight: 400; /* не жирна */
}

.kp-time-plan {
	color: var(--kp-muted); /* план приглушений, факт головний */
	font-weight: 500; /* трохи легше за факт */
}

/* Правка 68: розгортання розшифровки нарахувань. */
.kp-accrued > summary {
	cursor: pointer; /* клік розгортає */
	list-style: none; /* без стандартного трикутника, свій нижче */
	display: flex; /* заголовок і стрілка в ряд */
	align-items: center; /* по центру */
	gap: 8px; /* зазор до стрілки */
	margin-bottom: 10px; /* відступ до таблиці */
}

.kp-accrued > summary::-webkit-details-marker {
	display: none; /* Safari: прибрати стандартний маркер */
}

.kp-accrued > summary::after {
	content: '›'; /* своя стрілка */
	color: var(--kp-muted); /* приглушена */
	transform: rotate(90deg); /* вниз, коли згорнуто */
	transition: transform 0.15s; /* плавний поворот */
}

.kp-accrued[open] > summary::after {
	transform: rotate(-90deg); /* вгору, коли розгорнуто */
}

/* Блок «Лого для документів» у вікні реквізитів виконавця (0.10.4, крок 1).
   Мінімально: рядок із превʼю, кнопками і підказкою. Причесати у
   фінальному проході верстки разом із бланками. */
.kp-org-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 8px;
}

/* Превʼю лого: обмежуємо висотою, бо файл може бути будь-якого розміру,
   а бланк усе одно масштабує його до шапки. */
.kp-org-logo-img {
	max-height: 48px;
	max-width: 200px;
	object-fit: contain;
	/* Лого темне, на білий бланк — тому на світлій підкладці, а не на
	   картці кабінету, інакше темне на темному не видно. */
	background: #fff;
	border: 1px solid var(--kp-border, #e6e4ee);
	border-radius: 8px;
	padding: 4px 8px;
}

/* Підказка й повідомлення про завантаження займають окремий рядок,
   щоб кнопки не стрибали при зміні тексту. */
.kp-org-logo .kp-legend {
	flex-basis: 100%;
	margin: 0;
}

/* Розділ «Документи» (0.10.4, крок 5). Мінімальні стилі: таблиця,
   фільтри й картка вже є в дизайн-системі, тут лише те, чого немає.
   Причесати у фінальному проході верстки. */

/* Попередження над списком, поки реквізити виконавця порожні: документ
   сформується без постачальника, і про це треба сказати до, а не після. */
.kp-warning {
	margin: 0 0 12px;
	padding: 10px 14px;
	border: 1px solid var(--kp-red, #c62828);
	border-radius: var(--kp-radius-sm, 10px);
	color: var(--kp-red, #c62828);
	font-size: 13px;
}

/* Бланк документа показуємо в iframe: сторінка документа має власні
   стилі для body й table без класів, і в кабінеті вони поїхали б по
   всьому інтерфейсу. */
/* Правка 85 (рішення 28.08.2026): шапка вікна документа — заголовок
   плюс хрестик. Липка, бо бланк довгий і модалка прокручується разом
   із заголовком: без sticky хрестик їхав би вгору за межі екрана. */
.kp-doc-head {
	position: sticky;
	/* -22px компенсує padding самої .kp-modal: шапка липне до її краю,
	   а не до місця, де закінчується внутрішній відступ. */
	top: -22px;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	/* Від'ємні поля розтягують шапку на всю ширину модалки, щоб під час
	   прокрутки бланк не проглядав з боків білої смуги. */
	margin: -22px -22px 16px;
	padding: 22px 22px 12px;
	background: var(--kp-surface, #fff);
}

.kp-doc-head .kp-modal-title {
	margin: 0; /* відступ уже заданий у самої шапки */
}

/* Правка 85: сам хрестик. Кнопка без рамки, щоб не сперечатись за увагу
   з «Скачати PDF»; збільшена зона натискання для пальця. */
.kp-modal-x {
	flex: none; /* не стискається, коли заголовок довгий */
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--kp-radius-sm, 10px);
	background: none;
	color: var(--kp-muted, #6f6a85);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.kp-modal-x:hover,
.kp-modal-x:focus-visible {
	background: var(--kp-surface-soft, #f4f2fb);
	color: var(--kp-ink, #140e2d);
}

/* Правка 76 (рішення 28.08.2026): позначка статусу поруч із номером
   документа. Дрібна капсула, щоб не сперечалась із заголовком. */
.kp-doc-status {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--kp-surface-soft, #f0eff9);
	color: var(--kp-muted, #6f6b7d);
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
}

/* Підписаний документ виділяємо зеленим: це кінцевий стан. */
.kp-doc-status.is-signed {
	background: var(--kp-green-soft, #e6f5ec);
	color: var(--kp-green, #1f9d55);
}

/* Правка 95 (31.08.2026): у бланку рахунка той самий значок показує
   статус ОПЛАТИ. Оплачений — зелений, як підписаний документ;
   скасований — приглушений, щоб не сплутати з очікуванням. */
.kp-doc-status.is-paid {
	background: var(--kp-green-soft, #e6f5ec);
	color: var(--kp-green, #1f9d55);
}

.kp-doc-status.is-cancelled {
	background: var(--kp-surface-soft, #f0eff9);
	color: var(--kp-muted, #6f6b7d);
	text-decoration: line-through; /* видно, що рахунок знято */
}

/* Уточнення правки 77 (рішення 30.08.2026): рядок посилань статусу
   стоїть НАД бланком і притиснутий ліворуч. Знизу лишились лише дії
   з самим документом, а закривається вікно хрестиком угорі. */
.kp-doc-acts {
	display: flex;
	flex-wrap: wrap; /* на вузькому екрані переносяться */
	gap: 14px;
	margin: 0 0 10px; /* відступ до рамки бланка */
}

/* Правка 77 (рішення 28.08.2026): дії зі статусом — посилання, а не
   кнопки. Пряме побажання: великі кнопки тут перебивають «Скачати PDF». */
.kp-doc-act {
	padding: 0;
	border: 0;
	background: none;
	color: var(--kp-muted, #6f6b7d);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.kp-doc-act:hover:not(:disabled) {
	color: var(--kp-ink, #16151c);
}

.kp-doc-act:disabled {
	opacity: 0.5; /* поки запит у дорозі */
	cursor: default;
}

/* Правка 71 (рішення 28.08.2026): рядок стану перевірки ключа
   UptimeRobot. Окремий від .kp-modal-msg: той завжди червоний, а тут
   результат буває і позитивним. Порожній рядок не займає місця. */
.kp-up-check {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--kp-muted, #6f6a85); /* нейтральний стан «перевіряємо…» */
}

.kp-up-check:empty {
	display: none;
}

.kp-up-check.is-ok {
	color: var(--kp-green, #1f9d55);
}

.kp-up-check.is-bad {
	color: var(--kp-red, #d64545);
}

.kp-doc-frame {
	display: block;
	width: 100%;
	/* 70vh: бланк A4 вищий за екран, а модалка вже вміє прокручуватись,
	   тому фрейму лишаємо фіксовану висоту з власною прокруткою. */
	height: 70vh;
	border: 1px solid var(--kp-line, #e6e4ee);
	border-radius: var(--kp-radius-sm, 10px);
	background: #fff; /* бланк білий незалежно від тла кабінету */
}

/* Числова колонка в списку документів. Навмисно НЕ .kp-sum-in: там
   зелений колір означає надходження грошей, а сума документа це просто
   число, а не оплата. */
.kp-cell-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Вибір задач у звіт (0.10.4, крок 6). Список може бути довгим, тому
   в нього своя прокрутка: інакше форма стає вища за екран і кнопка
   «Сформувати» їде вниз. */
.kp-doc-tasks {
	max-height: 240px;
	overflow-y: auto;
	border: 1px solid var(--kp-line, #e6e4ee);
	border-radius: var(--kp-radius-sm, 10px);
	padding: 8px 10px;
}

.kp-doc-task {
	display: block;
	margin-bottom: 6px;
	line-height: 1.4;
}

/* Дата моноширинно, щоб перелік читався колонкою. */
.kp-doc-task-date {
	font-variant-numeric: tabular-nums;
	color: var(--kp-muted, #6f6c7a);
}

.kp-doc-tasks-head {
	display: flex;
	gap: 8px;
	margin-bottom: 6px;
}

/* Нотатки по проєкту в лівій колонці картки (правка 145, 01.09.2026).
   Переїхали з вкладки «Технічні дані»: це загальний коментар, а не
   технічна деталь. Відбиваємо від блоку «Пакет за період» рамкою
   зверху, щоб не зливалися в один шматок тексту. */
.kp-card-note {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--kp-line);
}

/* Правка 161 (02.09.2026): блок одного проєкту у вкладці «Нарахування»
   розділу «Фінанси» клієнта. Кілька проєктів ідуть один під одним. */
.kp-accrual-project + .kp-accrual-project {
	margin-top: 24px; /* зазор між проєктами */
	padding-top: 18px; /* повітря над лінією */
	border-top: 1px solid var(--kp-line); /* лінія-розділювач */
}

/* ══════════════════════════════════════════════════════════════════
   Календар (0.10.10, рішення Оксани 03.09.2026, прототип kalendar.html,
   ТЗ 5.3). Місячна сітка з дедлайнами задач і панель дня під нею.
   Кнопки (стрілки, чипи задач) захищені id-скоупом #kp-dashboard-app,
   бо кіт Elementor перебиває однокласові button прямими селекторами.
   ══════════════════════════════════════════════════════════════════ */

/* Шапка календаря: стрілки, назва місяця, «Сьогодні» в один рядок. */
.kp-cal-head {
	display: flex; /* стрілки, місяць і дії в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 12px; /* зазор між елементами */
	margin-bottom: 14px; /* відступ до сітки */
}

.kp-cal-month {
	font-size: 17px; /* трохи більший за основний текст */
	font-weight: 700; /* жирний, це поточний місяць */
	min-width: 170px; /* фіксуємо ширину, щоб стрілки не стрибали при зміні місяця */
}

.kp-cal-nav {
	display: flex; /* дві круглі стрілки поруч */
	gap: 6px; /* щільний зазор */
}

/* Кругла стрілка місяця, під id-скоупом від кота Elementor. */
#kp-dashboard-app .kp-cal-arrow {
	display: inline-flex; /* центруємо символ усередині */
	align-items: center; /* по вертикалі */
	justify-content: center; /* по горизонталі */
	width: 34px; /* діаметр кнопки */
	height: 34px; /* діаметр кнопки */
	min-height: 0; /* кіт ставить кнопкам min-height, коло ставало овалом */
	padding: 0; /* кіт додає кнопкам відступи */
	border: 1px solid var(--kp-line); /* тонка рамка */
	border-radius: var(--kp-radius-pill); /* коло */
	background: var(--kp-surface); /* біла заливка */
	color: var(--kp-ink); /* темний символ */
	box-shadow: none; /* без тіней кнопок кота */
	font-family: inherit; /* Raleway */
	font-size: 15px; /* розмір символу */
	line-height: 1; /* без роздутого рядка */
	cursor: pointer; /* курсор-рука */
}

#kp-dashboard-app .kp-cal-arrow:hover {
	background: var(--kp-surface-soft); /* підсвітка при наведенні */
	color: var(--kp-ink); /* кіт фарбує текст кнопки при наведенні */
}

/* Сітка місяця: 7 колонок, зазор в 1px малює лінії кольором тла. */
.kp-cal-grid {
	display: grid; /* сім колонок, днів тижня */
	grid-template-columns: repeat(7, 1fr); /* рівні колонки */
	gap: 1px; /* зазор в 1px малює сітку кольором тла під нею */
	background: var(--kp-line); /* цей колір видно в зазорах як лінії сітки */
	border: 1px solid var(--kp-line); /* зовнішня рамка сітки */
	border-radius: var(--kp-radius-sm); /* скруглення сітки */
	overflow: hidden; /* кути клітинок не вилазять за скруглення */
}

.kp-cal-dow {
	padding: 9px 10px; /* відступи назви дня тижня */
	background: var(--kp-surface-soft); /* підкладка шапки сітки */
	color: var(--kp-muted); /* приглушений колір */
	font-size: 11.5px; /* дрібний службовий розмір */
	font-weight: 600; /* напівжирний */
	text-align: center; /* по центру колонки */
}

/* Клітинка дня. Фон навмисно однаковий у всіх днів: за ТЗ 5.3
   кольором позначена лише сама задача, а не день. */
.kp-cal-day {
	min-height: 116px; /* висота під 2-3 задачі без прокрутки */
	min-width: 0; /* дозволяє клітинці стискатись, довгі назви обрізаються */
	padding: 8px; /* внутрішні відступи клітинки */
	background: var(--kp-surface); /* білий фон, однаковий для всіх днів */
	cursor: pointer; /* клік по вільній зоні відкриває панель дня */
}

.kp-cal-day:hover {
	background: var(--kp-surface-soft); /* легка підсвітка, підказка що клікабельно */
}

/* День із сусіднього місяця: блідий номер, але клікабельний. */
.kp-cal-day-out .kp-cal-num {
	color: var(--kp-faint); /* блідий номер */
}

.kp-cal-num {
	margin-bottom: 6px; /* відступ до чипів задач */
	font-size: 12.5px; /* дрібний розмір */
	font-weight: 600; /* напівжирний */
	text-align: right; /* номер дня у правому куті, як на макеті */
}

/* Сьогоднішній день: номер у бузковому кружечку. */
.kp-cal-today-mark {
	display: inline-flex; /* центруємо цифру в кружечку */
	align-items: center; /* по вертикалі */
	justify-content: center; /* по горизонталі */
	width: 22px; /* діаметр кружечка */
	height: 22px; /* діаметр кружечка */
	border-radius: var(--kp-radius-pill); /* коло */
	background: var(--kp-accent); /* бузковий, акцент системи */
	color: #fff; /* білий номер */
}

/* Обрана клітинка, та, для якої відкрита панель дня. */
.kp-cal-day-selected {
	box-shadow: inset 0 0 0 2px var(--kp-accent); /* бузкова обвідка всередині клітинки */
}

/* Задача-чип у клітинці: кольорова крапка пріоритету плюс назва.
   Без підкладки й без смужки зліва: у сітці з 35 клітинок заливка
   кожної задачі перетворює місяць на строкату мозаїку, а крапка дає
   той самий сигнал і лишає календар спокійним. Скоуп від кота. */
#kp-dashboard-app .kp-chip {
	display: flex; /* крапка й назва в один рядок */
	align-items: center; /* вирівнювання по центру рядка */
	gap: 6px; /* зазор між крапкою й назвою */
	width: 100%; /* чип на всю ширину клітинки */
	min-height: 0; /* кіт ставить кнопкам min-height */
	margin: 0 0 3px; /* просвіт між задачами */
	padding: 3px 4px; /* мінімальні відступи, площа клітинки цінна */
	border: none; /* без рамки */
	border-radius: 5px; /* легке скруглення під підсвітку при наведенні */
	background: none; /* без заливки */
	box-shadow: none; /* без тіней кнопок кота */
	color: var(--kp-ink); /* звичайний темний текст */
	font-family: inherit; /* Raleway */
	font-size: 11.5px; /* дрібний розмір, у клітинку має влізти кілька задач */
	font-weight: 500; /* звичайна вага, кіт робить кнопки жирними */
	line-height: 1.3; /* компактний інтерліньяж */
	text-align: left; /* текст ліворуч */
	text-transform: none; /* кіт інколи ставить кнопкам капс */
	cursor: pointer; /* клік веде в картку задачі */
}

/* Сама крапка пріоритету. */
#kp-dashboard-app .kp-chip::before {
	content: ''; /* крапка перед назвою задачі */
	flex: 0 0 auto; /* не стискається поруч із довгою назвою */
	width: 7px; /* діаметр крапки */
	height: 7px; /* діаметр крапки */
	border-radius: var(--kp-radius-pill); /* коло */
	background: var(--kp-chip-dot, var(--kp-faint)); /* колір задає модифікатор нижче */
}

/* Назва задачі окремим елементом, щоб обрізалася саме вона,
   а крапка лишалася на місці. */
#kp-dashboard-app .kp-chip span {
	min-width: 0; /* дозволяє тексту стискатись усередині flex */
	overflow: hidden; /* довга назва не ламає клітинку */
	text-overflow: ellipsis; /* обрізаємо трикрапкою */
	white-space: nowrap; /* назва в один рядок */
}

#kp-dashboard-app .kp-chip:hover {
	background: var(--kp-accent-soft); /* підсвітка при наведенні */
	color: var(--kp-ink); /* кіт фарбує текст кнопки при наведенні */
}

/* Кольори крапки за пріоритетом, як бейджі в списку задач. */
.kp-chip-critical { --kp-chip-dot: var(--kp-red); } /* критичний пріоритет */
.kp-chip-high     { --kp-chip-dot: var(--kp-amber); } /* високий */
.kp-chip-medium   { --kp-chip-dot: var(--kp-accent); } /* середній */
.kp-chip-low      { --kp-chip-dot: var(--kp-faint); } /* низький */

/* Прострочена задача: назва червоним. */
#kp-dashboard-app .kp-chip-overdue {
	color: var(--kp-red); /* червоний текст */
	font-weight: 600; /* напівжирний */
}

.kp-cal-more {
	display: block; /* окремим рядком під чипами */
	margin-top: 2px; /* мінімальний відступ */
	color: var(--kp-muted); /* приглушений */
	font-size: 11px; /* найдрібніший розмір */
}

/* Панель дня під календарем (ТЗ 5.3). */
.kp-daypanel {
	margin-top: 18px; /* відступ від сітки */
}

.kp-daypanel-head {
	display: flex; /* заголовок ліворуч, закриття праворуч */
	align-items: center; /* вирівнювання по центру */
	gap: 12px; /* зазор між ними */
	margin-bottom: 14px; /* відступ до переліку задач */
}

/* Рядок задачі в переліку дня. Шеврон праворуч підказує,
   що рядок клікабельний і веде в картку задачі. */
.kp-dayrow {
	display: flex; /* назва ліворуч, шеврон праворуч */
	align-items: center; /* вирівнювання по центру */
	justify-content: space-between; /* розводимо по краях */
	gap: 12px; /* зазор між частинами */
	padding: 12px 14px; /* внутрішні відступи рядка */
	margin-bottom: 8px; /* просвіт між задачами */
	border: 1px solid var(--kp-line); /* тонка рамка */
	border-radius: var(--kp-radius-sm); /* скруглення */
	cursor: pointer; /* рядок веде в картку задачі */
}

.kp-dayrow:hover {
	background: var(--kp-surface-soft); /* підсвітка під курсором */
}

.kp-dayrow-chevron {
	flex: 0 0 auto; /* шеврон не стискається */
	color: var(--kp-faint); /* блідий, це підказка, не акцент */
	font-size: 18px; /* трохи більший, щоб стрілка читалась */
}

/* Форма створення задачі окремим блоком під переліком,
   з роздільником, щоб вони не зливались (вимога ТЗ 5.3). */
.kp-dayform {
	margin-top: 18px; /* відступ від переліку задач */
	padding-top: 18px; /* повітря під роздільною лінією */
	border-top: 1px solid var(--kp-line); /* роздільник між переліком і формою */
}

/* Панель відкрита з «+ Задача» без дати: переліку немає, лінія зайва. */
.kp-dayform-alone {
	margin-top: 0; /* без відступу від переліку, бо його немає */
	padding-top: 0; /* без повітря під лінією */
	border-top: none; /* без роздільника */
}

.kp-dayform-label {
	margin-top: 0; /* підпис секції одразу під роздільником */
}

.kp-dayform-grid {
	display: grid; /* поля форми сіткою */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); /* стільки колонок, скільки влазить */
	gap: 12px; /* зазор між полями */
	margin-bottom: 12px; /* відступ до кнопки */
}

.kp-dayform-note {
	margin: 0; /* підказка поруч із кнопкою, без відступів легенди */
}

.kp-dayform-msg {
	min-height: 18px; /* місце під повідомлення, щоб форма не стрибала */
	margin: 8px 0 0; /* невеликий відступ від кнопки */
}

/* Помилка форми червоним, підтвердження зеленим (клас .kp-save-msg). */
.kp-dayform-msg.kp-dayform-msg-error {
	color: var(--kp-red); /* червоний текст помилки */
}

/* Вузькі екрани: у клітинку не влазить жодна назва, тому чип
   стискається до самої крапки пріоритету, а назви читаються в панелі
   дня після кліку по клітинці. */
@media (max-width: 720px) {
	.kp-cal-day {
		min-height: 64px; /* компактніша клітинка на телефоні */
		padding: 4px; /* менші відступи */
	}
	.kp-cal-month {
		min-width: 0; /* на вузькому екрані фіксована ширина заважає */
	}
	#kp-dashboard-app .kp-chip {
		display: inline-flex; /* крапки в ряд, а не стовпчиком */
		width: auto; /* ширина під саму крапку */
		margin: 0 2px 2px 0; /* дрібний зазор між крапками */
		padding: 3px; /* мінімальна площа для тапу */
	}
	#kp-dashboard-app .kp-chip::before {
		width: 9px; /* крапка трохи більша, бо вона тепер єдиний сигнал */
		height: 9px; /* те саме по висоті */
	}
	#kp-dashboard-app .kp-chip span {
		display: none; /* назву ховаємо, вона в панелі дня */
	}
}

/* ── Правка 168 (рішення Оксани 03.09.2026): панель дня це шухляда ──
   праворуч поверх сітки, а не блок під нею. Сітка лишається видимою,
   клік по іншому дню перемикає вміст, гортати вниз не треба. Шухляда
   живе всередині панелі розділу (position absolute від .kp-pane), а
   не fixed: так вона не накриває топбар із «+ Задача», пошуком і
   дзвіночком, і не лізе під адмін-бар WordPress. Висота дорівнює
   висоті сітки, довгий перелік прокручується всередині. */
.kp-cal-has-drawer {
	position: relative; /* точка відліку для шухляди */
}

.kp-cal-drawer {
	position: absolute; /* поверх сітки в межах розділу */
	top: 0; /* від верху сітки */
	right: 0; /* притиснута до правого краю розділу */
	bottom: 0; /* до низу сітки */
	width: min(440px, 92%); /* ширина шухляди, на вузькому екрані майже вся */
	margin: 0; /* без відступу картки */
	overflow-y: auto; /* власна прокрутка довгого переліку */
	box-shadow: -12px 0 40px rgba(23, 22, 31, 0.14); /* тінь у бік сітки, щоб панель читалась поверх */
	z-index: 20; /* над сіткою, під модалками кабінету */
	padding: 22px 24px 28px; /* внутрішні відступи панелі */
}

/* Виїзд праворуч при відкритті (лише перший рендер, далі без анімації). */
@keyframes kp-cal-drawer-in {
	from { transform: translateX(24px); opacity: 0; } /* трохи правіше й прозора */
	to   { transform: none; opacity: 1; } /* на місці */
}

.kp-cal-drawer-enter {
	animation: kp-cal-drawer-in 0.18s ease-out; /* коротка, щоб не заважала */
}

/* Заголовок панелі липкий: ✕ і дата видно навіть у довгому переліку. */
.kp-cal-drawer .kp-daypanel-head {
	position: sticky; /* тримається зверху при прокрутці панелі */
	top: -22px; /* компенсує верхній padding панелі */
	margin: -22px -24px 14px; /* на всю ширину панелі */
	padding: 22px 24px 12px; /* власні відступи замість відступів панелі */
	background: var(--kp-surface); /* непрозоре тло, щоб рядки не просвічували */
	z-index: 1; /* над рядками переліку */
}

/* Рядки переліку в шухляді компактніші, ширина обмежена. */
.kp-cal-drawer .kp-dayrow {
	padding: 10px 12px; /* менші відступи, ніж у широкому блоці */
}

/* Форма в шухляді завжди в одну колонку: ширини на дві немає. */
.kp-cal-drawer .kp-dayform-grid {
	grid-template-columns: 1fr; /* одна колонка */
}

/* Кнопка і підказка одна під одною, а не в ряд. */
.kp-cal-drawer .kp-actions {
	flex-direction: column; /* стовпчиком */
	align-items: flex-start; /* до лівого краю */
	gap: 8px; /* зазор між кнопкою і підказкою */
}

/* Широкий екран: поки шухляда відкрита, картка сітки звільняє їй місце
   праворуч, щоб «Сьогодні» і суботу з неділею не накривало. Плавно,
   щоб сітка не стрибала. Нижче 1200px місця на обидва немає, шухляда
   накриває праву частину сітки, як і задумано. */
.kp-cal-has-drawer > .kp-card-tight {
	transition: margin-right 0.18s ease-out; /* у такт виїзду шухляди */
}

@media (min-width: 1200px) {
	.kp-cal-has-drawer > .kp-card-tight {
		margin-right: 456px; /* ширина шухляди 440 плюс зазор 16 */
	}
}

/* Телефон: шухляда на весь екран поверх усього, бо збоку місця немає. */
@media (max-width: 720px) {
	.kp-cal-drawer {
		position: fixed; /* поверх сторінки */
		inset: 0; /* на весь екран */
		width: auto; /* ширина від країв */
		border-radius: 0; /* на весь екран скруглення зайве */
		box-shadow: none; /* тіні нема куди падати */
		z-index: 100000; /* як модалки; адмін-бар WordPress (99999) нижче */
	}
	@keyframes kp-cal-drawer-in {
		from { transform: translateY(32px); opacity: 0; } /* знизу */
		to   { transform: none; opacity: 1; }
	}
}

/* ══════════════════════════════════════════════════════════════════
   Шаблони документів і нумерація (0.11, правки 126, 81, 82;
   рішення Оксани 03.09.2026). Список карток по типах, редактор із
   панеллю підстановок праворуч, таблиця нумерації.
   ══════════════════════════════════════════════════════════════════ */

/* Група шаблонів одного типу всередині картки розділу */
.kp-tpl-group {
	margin-top: 18px; /* відступ від підзаголовка і між групами */
}

.kp-tpl-group .kp-card-head {
	margin-bottom: 0; /* сітка карток сама дає відступ зверху */
}

/* Редактор: текст ліворуч, підстановки праворуч; на вузьких екранах у стовпчик */
.kp-tpl-editor {
	display: grid; /* дві колонки */
	grid-template-columns: minmax(0, 1fr) 260px; /* редактор тягнеться, панель фіксована */
	gap: 20px; /* зазор між колонками */
	margin-top: 8px; /* відступ від поля назви */
}

@media (max-width: 900px) {
	.kp-tpl-editor {
		grid-template-columns: minmax(0, 1fr); /* панель під редактором */
	}
}

/* Картка редактора ширша за звичайну форму: бланк А4 у редакторі вузько */
#kp-dashboard-app .kp-tpl-editor-card {
	max-width: none; /* перебиваємо обмеження ширини kp-form-card */
}

/* Панель підстановок: власна прокрутка, щоб не тягнути сторінку */
.kp-tpl-editor-side {
	max-height: 640px; /* приблизно висота редактора з тулбаром */
	overflow: auto; /* прокрутка всередині панелі */
	padding: 12px 14px; /* внутрішні відступи */
	border: 1px solid var(--kp-line); /* тонка рамка як у карток */
	border-radius: var(--kp-radius); /* скруглення дизайн-системи */
	background: var(--kp-surface-soft, #f7f6fb); /* світла підкладка, щоб панель читалась окремо */
}

.kp-tpl-ph-group {
	margin-top: 10px; /* відступ між групами підстановок */
}

/* Кнопка-підстановка: на всю ширину панелі, вирівняна ліворуч */
.kp-tpl-ph {
	display: block; /* по одній у рядок */
	width: 100%; /* на всю ширину панелі */
	margin: 4px 0; /* дрібний зазор між кнопками */
	padding: 6px 10px; /* компактна кнопка */
	border: 1px solid var(--kp-line); /* тонка рамка */
	border-radius: var(--kp-radius-sm, 10px); /* менше скруглення, ніж у карток */
	background: var(--kp-surface); /* біла на світлій панелі */
	color: inherit; /* колір тексту як у кабінеті */
	font: inherit; /* шрифт кабінету, не системний кнопковий */
	font-size: 12.5px; /* дрібний, бо підписів багато */
	text-align: left; /* підпис від лівого краю */
	cursor: pointer; /* клікабельно */
}

.kp-tpl-ph:hover {
	border-color: var(--kp-accent); /* бузкова рамка під курсором, як у карток */
}

/* Таблиця нумерації: короткі поля, щоб рядок влазив в одну лінію */
.kp-num-table .kp-input-short {
	width: 120px; /* префікс, знаки і старт короткі */
	min-width: 0; /* дозволяємо стискатись у вузькій таблиці */
}

/* TinyMCE в редакторі шаблона: рамка як у полів кабінету */
.kp-tpl-editor-main .wp-editor-container {
	border: 1px solid var(--kp-line); /* та сама лінія, що в kp-input */
	border-radius: var(--kp-radius-sm, 10px); /* скруглення поля */
	overflow: hidden; /* тулбар не вилазить за скруглення */
}

/* ══════════════════════════════════════════════════════════════════
   Сповіщення (0.12, правка 78): дзвіночок з лічильником, випадна
   панель у топбарі, клікабельний блок профілю в меню.
   ══════════════════════════════════════════════════════════════════ */

/* Топбар стає точкою відліку для випадної панелі */
.kp-topbar-actions {
	position: relative; /* панель дзвіночка позиціонується від правого краю дій */
}

/* Лічильник на дзвіночку: замість крапки, коли є число */
.kp-bell-count {
	position: absolute; /* поверх кнопки, як крапка */
	top: -4px; /* трохи вище краю кола */
	right: -4px; /* трохи правіше краю кола */
	min-width: 18px; /* коло під одну цифру, капсула під дві */
	height: 18px; /* висота бейджа */
	padding: 0 5px; /* бокові відступи для двозначних */
	border: none; /* Правка 295 (06.09.2026): без обвідки на обох платформах */
	border-radius: var(--kp-radius-pill); /* капсула */
	background: var(--kp-red); /* червоний, є непрочитане */
	color: #fff; /* біла цифра */
	font-size: 10.5px; /* дрібна цифра */
	font-weight: 700; /* жирна, щоб читалась на червоному */
	line-height: 18px; /* центрування по вертикалі (295: рамки більше немає) */
	text-align: center; /* цифра по центру */
}

/* Панель зі списком під дзвіночком */
.kp-bell-panel {
	position: absolute; /* під топбаром, поверх контенту */
	top: calc(100% + 8px); /* під рядком дій */
	right: 0; /* притиснута до правого краю */
	z-index: 30; /* поверх карток розділу */
	width: 380px; /* ширина панелі */
	max-width: calc(100vw - 32px); /* на телефоні не вилазить за екран */
	padding: 12px 0; /* вертикальні відступи, рядки на всю ширину */
	border: 1px solid var(--kp-line); /* рамка як у карток */
	border-radius: var(--kp-radius); /* скруглення карток */
	background: var(--kp-surface); /* біла підкладка */
	box-shadow: var(--kp-shadow-lg); /* помітна тінь, панель «висить» */
	text-align: left; /* текст від лівого краю, топбар міг вирівняти інакше */
}

.kp-bell-head {
	display: flex; /* заголовок і «Прочитати все» в один рядок */
	align-items: center; /* по центру вертикалі */
	justify-content: space-between; /* заголовок ліворуч, кнопка праворуч */
	padding: 0 16px 8px; /* відступи заголовка */
}

.kp-bell-title {
	font-size: 14px; /* заголовок панелі */
	font-weight: 700; /* жирний */
}

.kp-bell-readall {
	padding: 4px 8px; /* компактна кнопка-посилання */
	font-size: 12.5px; /* дрібніше за заголовок */
}

.kp-bell-list {
	max-height: 60vh; /* довгий список прокручується всередині */
	overflow: auto; /* прокрутка панелі */
}

/* Рядок сповіщення: кнопка на всю ширину */
.kp-bell-row {
	display: block; /* по одному в рядок */
	width: 100%; /* на всю ширину панелі */
	padding: 10px 16px 10px 28px; /* місце ліворуч під крапку непрочитаного */
	position: relative; /* крапка позиціонується абсолютно */
	border: 0; /* без рамки кнопки */
	border-top: 1px solid var(--kp-line); /* роздільник між рядками */
	background: none; /* без заливки */
	color: inherit; /* колір тексту кабінету */
	font: inherit; /* шрифт кабінету */
	text-align: left; /* текст від лівого краю */
	cursor: pointer; /* клікабельно */
}

.kp-bell-row:hover {
	background: var(--kp-surface-soft); /* підсвітка під курсором */
}

/* Крапка непрочитаного ліворуч від тексту */
.kp-bell-row.is-unread::before {
	content: ''; /* порожній псевдоелемент */
	position: absolute; /* у лівому полі рядка */
	left: 12px; /* відступ від краю панелі */
	top: 16px; /* на рівні першого рядка тексту */
	width: 7px; /* діаметр крапки */
	height: 7px; /* діаметр крапки */
	border-radius: var(--kp-radius-pill); /* коло */
	background: var(--kp-accent); /* бузкова, як активний пункт меню */
}

.kp-bell-row.is-unread .kp-bell-row-text {
	font-weight: 600; /* непрочитане виділене */
}

.kp-bell-row-text {
	display: block; /* текст окремим рядком */
	font-size: 13.5px; /* трохи менший за основний */
	line-height: 1.35; /* компактний інтерліньяж на два рядки */
}

.kp-bell-row-time {
	display: block; /* час під текстом */
	margin-top: 2px; /* дрібний відступ */
	color: var(--kp-muted); /* приглушений */
	font-size: 11.5px; /* дрібний */
}

.kp-bell-empty {
	padding: 8px 16px; /* відступи як у рядків */
}

/* Блок користувача в меню тепер кнопка: скидаємо вигляд кнопки */
.kp-nav-user-btn {
	width: 100%; /* на всю ширину меню */
	border: 0; /* без рамки */
	border-radius: var(--kp-radius-sm); /* легке скруглення під hover */
	background: none; /* без заливки */
	color: inherit; /* колір тексту меню */
	font: inherit; /* шрифт меню */
	text-align: left; /* імʼя від лівого краю */
	cursor: pointer; /* клікабельно, відкриває профіль */
}

.kp-nav-user-btn:hover {
	background: var(--kp-dark-soft); /* підсвітка на темному меню */
}

/* Профіль: канали кожен у своєму рядку, не в один */
.kp-profile-check {
	display: block; /* по одному чекбоксу в рядок */
	margin: 6px 0; /* невеликий зазор між рядками */
}

/* Правка 169: кнопка Telegram/профіль у топбарі. Та сама кругла кнопка,
   що й дзвіночок; літачок у фірмовий синій Telegram, щоб читався як тг. */
.kp-tg-btn svg {
	color: #2aabee; /* колір Telegram, а не колір тексту, щоб кнопку було видно */
}

/* Правка 170: шапка вікна профілю з хрестиком. Липкість бланка тут не
   потрібна, вікно коротке, тож лишаємо звичайний потік. */
.kp-profile-head {
	position: static;
}

/* ── 0.14.0: вибір режиму роботи у вікні «Режим роботи» ───────────── */

/* Контейнер двох варіантів: колонка, бо підпис під назвою довгий
   і в рядок вони не читаються навіть на широкому екрані. */
.kp-mode-opts {
	display: flex;
	flex-direction: column;
	gap: 10px; /* зазор між картками варіантів */
	margin: 14px 0 4px; /* відступ від підказки згори */
}

/* Сам варіант — клікабельна картка, а не голе радіо: у неї великий
   таргет і на телефоні, і мишею. */
.kp-mode-opt {
	display: flex;
	align-items: flex-start; /* радіо тримається біля першого рядка назви */
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius); /* як інші картки в модалках */
	cursor: pointer;
}

/* Обраний варіант підсвічуємо рамкою, а не заливкою: заливка в модалці
   конфліктує з підкладкою самого вікна. :has() підтримують усі
   браузери, у яких працює решта кабінету. */
.kp-mode-opt:has(input:checked) {
	border-color: var(--kp-dark);
}

.kp-mode-body {
	display: flex;
	flex-direction: column;
	gap: 3px; /* назва і пояснення майже впритул */
}

.kp-mode-name {
	font-weight: 600;
}

.kp-mode-sub {
	font-size: 13px;
	color: var(--kp-muted); /* пояснення тихіше за назву */
	line-height: 1.45;
}

/* ── 0.15.0: шаблони стадій розробки у вікні «Керування» ──────────── */

/* Один шаблон — картка з рамкою, щоб три рівні вкладеності читались
   без відступів у порожнечу. */
.kp-st-tpl {
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius);
	padding: 14px;
	margin-top: 12px;
}

/* Назва шаблону і хрестик в один рядок; поле тягнеться. */
.kp-st-tpl-head,
.kp-st-stage-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.kp-st-tpl-head .kp-input,
.kp-st-stage-head .kp-input {
	flex: 1; /* поле забирає весь вільний рядок, хрестик тримається краю */
}

/* Стадія — вкладений блок зі зсувом ліворуч і лінією-напрямною:
   без неї на четвертій стадії губиться, що до чого належить. */
.kp-st-stage {
	margin: 10px 0 10px 14px;
	padding-left: 12px;
	border-left: 2px solid var(--kp-line);
}

/* Назва стадії жирна: без цього вона на око не відрізнялась від назв
   задач під нею, і три рівні вкладеності читались як один список. */
.kp-st-stage-head .kp-input {
	font-weight: 600;
}

.kp-st-tasks {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 8px;
	padding-left: 14px; /* задачі помітно вкладені в свою стадію */
}

/* Задача — найглибший рівень, той самий рядок «поле плюс хрестик». */
.kp-st-task {
	display: flex;
	align-items: center;
	gap: 8px;
}

.kp-st-task .kp-input {
	flex: 1;
}

/* ── Правка 186: перетягування стадій і задач у вікні шаблонів ──── */

/* Ручка перетягування: тягнемо саме за неї, тому їй свій курсор і
   заборона виділяти текст — інакше при русі пальцем сторінка
   виділяла б підписи навколо. */
.kp-st-drag {
	flex: 0 0 auto;
	width: 26px;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--kp-muted); /* ручка тихіша за назву, це не дія */
	font-size: 15px;
	line-height: 1;
	cursor: grab;
	touch-action: none; /* інакше на планшеті рух ловить прокрутка сторінки */
	user-select: none;
}

.kp-st-drag:active {
	cursor: grabbing;
}

/* Рядок, який зараз тягнуть: підсвічуємо прозорістю, а не тінню —
   рядок стоїть на місці, рухається лише вказівник. */
.kp-st-dragging {
	opacity: 0.5;
}

/* «+ Задача» вирівняна з полями задач, а не з назвою стадії. */
.kp-st-stage > [data-st-task-add] {
	margin-left: 14px;
}

@media (max-width: 560px) {
	/* На телефоні зсув стадії з'їдає ширину полів — лишаємо лише лінію. */
	.kp-st-stage {
		margin-left: 0;
		padding-left: 10px;
	}

	.kp-st-tasks,
	.kp-st-stage > [data-st-task-add] {
		padding-left: 0;
		margin-left: 0;
	}
}

/* ── 0.15.0: лінійка стадій розробки в картці проєкта ─────────────── */

/* Блок стоїть між шапкою і колонками, тому знизу відступ, а не зверху. */
.kp-stages {
	margin-bottom: 16px;
}

/* Правка 188 → 327 (рішення Оксани 06.09.2026): «Повернути назад»
   посиланням до ЛІВОГО краю, «Далі» чорна до правого, повідомлення
   між ними по центру. Порядок у розмітці: msg, назад, далі; порядок
   на екрані задає order. */
.kp-stage-acts {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: space-between;
}

.kp-stage-acts [data-stage-msg] {
	order: 1;
	margin: 0 auto; /* по центру між кнопками */
	text-align: center;
}

.kp-stage-acts .kp-btn-ghost {
	order: 0; /* «Повернути назад» першим, зліва */
	padding-left: 0;
}

.kp-stage-acts .kp-btn-dark,
.kp-stage-acts > .kp-legend:last-child {
	order: 2; /* «Далі» (або «Останній етап») справа */
}

/* 327: «Стадія 3 з 6» в один рядок і на одній лінії з заголовком. */
.kp-stages > .kp-card-head {
	align-items: baseline;
}

/* Сама лінійка: горизонтальний ряд кроків, що на вузькому екрані
   прокручується вбік, а не ламає картку. */
.kp-stage-line {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
	gap: 0;
	overflow-x: auto; /* шість стадій не влазять на телефон */
}

/* Крок. Лінія між кроками — це ::before, а не окремий елемент:
   так її не треба рахувати й ховати в останнього. */
.kp-stage {
	position: relative;
	flex: 1 1 0;
	min-width: 96px; /* нижче назви стадій злипаються в кашу */
	padding: 0 6px;
	text-align: center;
	font-size: 13px;
}

.kp-stage::before {
	content: '';
	position: absolute;
	top: 6px; /* по центру крапки */
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--kp-line);
}

/* У першого кроку лінії ліворуч немає — їй нема звідки йти. */
.kp-stage:first-child::before {
	display: none;
}

/* Правка 327 (06.09.2026): шкала на всю ширину картки. Перша стадія
   притиснута до лівого краю, остання до правого (крапка й підпис), а
   їхні комірки вдвічі вужчі, щоб середні стояли рівномірно. Лінія
   останньої стадії тягнеться від центру попередньої до її крапки біля
   правого краю. */
.kp-stage:first-child {
	flex: 0.5 1 0;
	min-width: 48px;
	padding-left: 0;
	text-align: left;
}

.kp-stage:first-child .kp-stage-dot {
	margin-left: 0;
}

.kp-stage:last-child {
	flex: 0.5 1 0;
	min-width: 48px;
	padding-right: 0;
	text-align: right;
}

.kp-stage:last-child .kp-stage-dot {
	margin-right: 0;
}

.kp-stage:last-child::before {
	left: -100%; /* від центру попередньої (пів її ширини = 100 % цієї) */
	width: 200%; /* до крапки біля правого краю (+100 %) */
}

/* Єдина стадія: без лінії, по лівому краю. */
.kp-stage:first-child:last-child {
	flex: 1 1 0;
}

.kp-stage-dot {
	position: relative; /* над лінією */
	/* Лінія наступного кроку належить сусідньому елементу, тому
	   малюється пізніше й заповзала на крапку збоку. z-index прибирає
	   виїмку в поточної стадії, у якої рамка найтовща. */
	z-index: 1;
	display: block;
	width: 14px;
	height: 14px;
	margin: 0 auto 8px;
	border-radius: 50%;
	background: var(--kp-surface);
	border: 2px solid var(--kp-line);
}

.kp-stage-name {
	display: block;
	line-height: 1.3;
}

/* Дата першого входу в стадію — дрібним, під назвою. */
.kp-stage-at {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	color: var(--kp-faint);
}

/* Пройдена: крапка й лінія залиті, назва звичайна. */
.kp-stage-done .kp-stage-dot {
	background: var(--kp-dark);
	border-color: var(--kp-dark);
}

.kp-stage-done::before {
	background: var(--kp-dark); /* шлях, який уже пройшли */
}

/* Поточна: крапка обведена жирніше, назва жирна — головна точка блока. */
.kp-stage-current .kp-stage-dot {
	background: var(--kp-surface);
	border-color: var(--kp-dark);
	border-width: 4px;
}

.kp-stage-current .kp-stage-name {
	font-weight: 700;
}

/* Попереду: усе тихіше, щоб око не чіплялось. */
.kp-stage-upcoming .kp-stage-name {
	color: var(--kp-muted);
}

/* ── 0.16, блок Е: мітка «орієнтовно» біля суми ──────────────────── */

/* Сума з оцінки, а не з факту. Мітка приглушена й дрібна: вона не
   попередження, а уточнення, і не має перетягувати на себе увагу
   з самої суми. */
.kp-time-est {
	font-size: 11px;
	color: var(--kp-muted);
	white-space: nowrap;
}

/* ── 0.16, блок В: знижка у формі виставлення рахунка ────────────── */

/* Число і одиниця («%» чи «₴») в один рядок: це одне поле, розбите
   надвоє, і в колонку воно читалось би як два різні налаштування. */
.kp-inv-disc-row {
	display: flex;
	gap: 8px;
	align-items: center;
	max-width: 260px; /* поле для знижки коротке, тягнути його на всю ширину нема сенсу */
}

.kp-inv-disc-row [data-inv-disc-type] {
	width: 72px; /* під «%» і «₴» більше не треба */
	flex: 0 0 auto;
}

/* ── 0.16, блок Г: панель масових дій над списком задач ──────────── */

/* Панель зʼявляється тільки коли щось вибрано (атрибут hidden знімає
   JS), тому вона не з'їдає місце над таблицею в звичайній роботі. */
/* Правка 194 (05.09.2026): панель стала одним рядком — лічильник і дві
   кнопки; поля переїхали в модальне вікно. Тому паддінги менші, а
   селектів тут більше немає. */
.kp-bulk-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap; /* на телефоні кнопки йдуть у другий рядок */
	margin-bottom: 10px;
	padding: 6px 12px;
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius);
	background: var(--kp-bg-soft, #f6f6f9); /* легка підкладка: це смуга дії, а не частина таблиці */
}

.kp-bulk-count {
	font-weight: 600;
	white-space: nowrap;
}

/* Компактні кнопки в рядку масових дій: висота під текст, не під форму. */
/* Атрибут hidden програє display:flex за специфічністю: без цього
   рядка панель «Вибрано: 0» видно завжди (помічено на рендері 0.19). */
.kp-bulk-bar[hidden] {
	display: none;
}

.kp-bulk-bar .kp-btn-sm {
	padding: 6px 14px;
	font-size: 14px;
}

/* Селекти у вікні масових дій — на всю ширину, як у решті форм. */
.kp-modal [data-bulk-assignee],
.kp-modal [data-bulk-status] {
	width: 100%;
}

/* Колонка галочок вузька: ширші клітинки тягли б назву задачі вправо. */
.kp-th-check,
.kp-td-check {
	width: 32px;
	text-align: center;
}

/* 0.17: «відхилили: Тарас» під «Вільна задача» у списку й картці —
   дрібним сірим, щоб не сперечалось із самим статусом вільної задачі. */
.kp-declined-by {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--kp-muted);
	margin-top: 2px;
}

/* ── 0.17: графіки «Динаміка» у розділі «Фінанси» ─────────────────── */

/* SVG тягнеться на всю ширину картки; висота від viewBox. На телефоні
   графік не стискаємо до нечитабельного: тримаємо мінімум 640px і
   даємо горизонтальний скрол обгортці (рендер 420px це показав). */
.kp-chart-wrap {
	margin-top: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kp-chart {
	display: block;
	width: 100%;
	min-width: 640px;
	height: auto;
}

.kp-chart-grid {
	stroke: var(--kp-line);
	stroke-width: 1;
}

.kp-chart-zero {
	stroke: var(--kp-muted);
	stroke-width: 1;
}

.kp-chart-axis {
	fill: var(--kp-muted);
	font-size: 11px;
	font-family: var(--kp-font);
}

/* Кольори серій: нараховано бузковий акцент, сплачено зелений, витрати
   червоний — ті самі, що в кп-money-ok / kp-money-debt по всьому кабінету. */
.kp-chart-bar-accrued { fill: var(--kp-accent); }
.kp-chart-bar-paid    { fill: var(--kp-green); }
.kp-chart-bar-expenses { fill: var(--kp-red); opacity: 0.8; }

.kp-chart-line {
	fill: none;
	stroke: var(--kp-dark);
	stroke-width: 2;
	stroke-linejoin: round;
}

.kp-chart-dot {
	fill: var(--kp-surface);
	stroke: var(--kp-dark);
	stroke-width: 2;
}

/* Легенда під графіком: квадратик кольору і підпис. */
.kp-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 10px;
	font-size: 13px;
	color: var(--kp-muted);
}

.kp-chart-key {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	margin-right: 6px;
	vertical-align: -2px;
}

.kp-chart-key.kp-chart-bar-accrued  { background: var(--kp-accent); }
.kp-chart-key.kp-chart-bar-paid     { background: var(--kp-green); }
.kp-chart-key.kp-chart-bar-expenses { background: var(--kp-red); opacity: 0.8; }
.kp-chart-key-line {
	height: 2px;
	border-radius: 1px;
	background: var(--kp-dark);
	vertical-align: 3px;
}

/* Місяці без руху грошей — приглушені, щоб не читались як дані. */
.kp-chart-row-empty td {
	color: var(--kp-faint);
}

/* ── 0.17: вікно «Журнал дій» (аудит-лог, ТЗ 6) ────────────────────── */

/* Дата не переноситься: «05.09.26 14:32» в один рядок, інакше колонка
   ламається на два рядки й таблиця стає рваною. */
.kp-audit-table .kp-audit-date {
	white-space: nowrap;
	color: var(--kp-muted);
	font-size: 13px;
}

.kp-audit-table td {
	vertical-align: top;
}

/* ── Перемикач валют у «Фінансах» (правка 198, 0.18.0) ───────────────
   «Окремі гаманці»: UAH / EUR / USD над плитками. Той самий вигляд, що
   в капсули вкладок, лише дрібніший і темна активна кнопка, щоб не
   плутався з вкладками розділу нижче. Показується лише при 2+ валютах. */
.kp-currency-switch {
	display: flex; /* блок, але... */
	width: max-content; /* ...по ширині кнопок, не на весь рядок (inline-flex тут розтягувала обгортка) */
	max-width: 100%;
	gap: 4px;
	padding: 4px;
	margin-bottom: 10px; /* відступ до плиток */
	border-radius: var(--kp-radius-pill);
	background: var(--kp-surface-soft); /* світла підкладка, як у .kp-tabs */
}

.kp-currency-btn {
	padding: 6px 14px;
	border: none;
	border-radius: var(--kp-radius-pill);
	background: none;
	color: var(--kp-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.kp-currency-btn:hover {
	color: var(--kp-ink); /* легка реакція, без заливки (як у вкладок) */
	background: none;
}

.kp-currency-active,
.kp-currency-active:hover {
	background: var(--kp-ink); /* активна валюта темна: це фільтр даних, а не вкладка */
	color: #fff;
}

.kp-currency-note {
	margin: 0 0 14px; /* підказка під перемикачем, перед плитками */
}

/* ── Пошук у топбарі (правка 201, 0.19.0) ───────────────────────────
   Панель під рядком дій, як у дзвіночка: та сама геометрія й тінь,
   лише ширша, бо рядки результатів довші. Поле зверху, під ним
   три групи: задачі, проєкти, клієнти. */
.kp-search-panel {
	position: absolute; /* під топбаром, поверх контенту */
	top: calc(100% + 8px);
	right: 0;
	z-index: 30; /* поверх карток розділу, на рівні панелі дзвіночка */
	width: 460px;
	max-width: calc(100vw - 32px); /* на телефоні не вилазить за екран */
	padding: 10px 0 6px;
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius);
	background: var(--kp-surface);
	box-shadow: var(--kp-shadow-lg);
	text-align: left;
}

.kp-search-field {
	display: flex; /* лупа + поле в один рядок */
	align-items: center;
	gap: 8px;
	margin: 0 12px 6px;
	padding: 0 12px;
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius-pill); /* капсула, як фільтри списків */
	background: var(--kp-surface-soft);
	color: var(--kp-muted); /* колір лупи */
}

.kp-search-field svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.kp-search-input {
	flex: 1;
	min-width: 0;
	height: 40px;
	border: 0; /* рамка на обгортці-капсулі */
	background: none;
	color: var(--kp-ink);
	font: inherit;
	font-size: 14px;
	outline: none; /* фокус видно по обгортці нижче */
}

.kp-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none; /* системний хрестик ламає капсулу */
}

.kp-search-field:focus-within {
	border-color: var(--kp-accent); /* бузкова рамка у фокусі, як у .kp-input */
	background: var(--kp-surface);
}

.kp-search-results {
	max-height: 60vh; /* довгий список прокручується всередині */
	overflow: auto;
}

.kp-search-group {
	padding: 8px 16px 4px;
	color: var(--kp-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase; /* підпис групи, як заголовки груп у меню */
}

.kp-search-row {
	display: block;
	width: 100%;
	padding: 8px 16px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.kp-search-row:hover {
	background: var(--kp-surface-soft); /* підсвітка під курсором, як у дзвіночка */
}

.kp-search-row-title {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
}

.kp-search-row-title .kp-badge {
	margin-left: 6px; /* статус задачі поруч із назвою */
	vertical-align: middle;
}

.kp-search-row-sub {
	display: block;
	margin-top: 2px;
	color: var(--kp-muted);
	font-size: 12px;
}

.kp-search-empty {
	margin: 0;
	padding: 10px 16px 12px;
	color: var(--kp-muted);
	font-size: 13px;
}

@media (max-width: 720px) {
	.kp-search-panel {
		width: calc(100vw - 32px); /* на телефоні на всю ширину, як дзвіночок */
	}
}

/* ══════════════════════════════════════════════════════════════════
   Фінальний прохід верстки 0.20.0 (рішення Оксани 05.09.2026, правки
   202–249, 252, 253). Порядок: спершу глобальні правила (кнопки як
   посилання, іконки без рамок, пейджер, форми), потім десктопні
   правки екранами, наприкінці мобільна оболонка й мобільні правки.
   Кожне правило підписане номером правки.
   ══════════════════════════════════════════════════════════════════ */

/* ── Правка 202: ліва панель по одній лінії ───────────────────────── */

/* Лого стояло на 16px від краю меню, іконки пунктів на 28px (padding
   пункту 12px). Даємо лого і блоку користувача той самий відступ 12px,
   щоб лого, іконки, заголовки груп і аватар стояли на одній вертикалі. */
.kp-nav-logo {
	padding: 0 12px; /* як padding пункту меню */
}

.kp-nav-user {
	padding: 8px 12px; /* аватар на тій самій лінії, що іконки */
}

.kp-nav-logout {
	padding: 8px 12px; /* «Вийти» теж по лінії */
}

/* ── Правка 226 (глобально): іконки-дії без рамки й фону ──────────── */

/* Олівець у картці задачі, олівець і хрестик у рядках фінансів,
   хрестики у вікні стадій, дзвіночок у рядку задач (214). Лишається
   лише іконка; реакція на наведення — колір. */
#kp-dashboard-app .kp-meta-edit,
.kp-modal-backdrop .kp-meta-edit,
#kp-dashboard-app .kp-unread-btn {
	border: none !important; /* без рамки; !important перебиває бронежилет 14.08 */
	background: none !important; /* без білого тла */
	box-shadow: none !important;
	width: 24px; /* компактніша зона, іконка та сама */
	height: 24px;
	color: var(--kp-muted);
}

#kp-dashboard-app .kp-meta-edit:hover,
.kp-modal-backdrop .kp-meta-edit:hover,
#kp-dashboard-app .kp-unread-btn:hover {
	color: var(--kp-accent) !important; /* наведення лише кольором */
	background: none !important;
}

/* Хрестики видалення (✕) у вікнах і рядках — приглушені, червоніють на наведення. */
.kp-modal-backdrop .kp-meta-edit:hover {
	color: var(--kp-red) !important;
}

/* Дзвіночок у рядку задачі (правка 214): голa іконка з індикатором. */
#kp-dashboard-app .kp-unread-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	min-height: 0;
	border-radius: var(--kp-radius-pill);
}

/* ── Правки 239, 240 (глобально): у формах одна кнопка, решта посилання */

/* Усередині вікон і в підвалах форм лише головна дія лишається чорною
   капсулою. Другорядні («Скасувати», «Закрити», «+ Додати …»,
   «Перевірити з'єднання», «Завантажити лого») стають текстовими
   посиланнями. Небезпечні («Прибрати бота») — червоним посиланням.
   Виняток — .kp-btn-keep і «Видалити» в картці задачі (рішення 05.09:
   у неї суттєва окрема роль). Специфічність: у вікнах кіт Elementor
   і власний скоуп #kp-dashboard-app перебивають прості класи, тому
   тут !important навмисно. */
.kp-modal-backdrop .kp-modal .kp-btn:not(.kp-btn-dark):not(.kp-btn-keep),
#kp-dashboard-app .kp-form-footer .kp-btn:not(.kp-btn-dark):not(.kp-btn-keep),
#kp-dashboard-app .kp-form .kp-actions .kp-btn:not(.kp-btn-dark):not(.kp-btn-keep),
#kp-dashboard-app .kp-modal-actions .kp-btn:not(.kp-btn-dark):not(.kp-btn-keep),
#kp-dashboard-app .kp-topbar-actions .kp-btn-ghost,
.kp-modal-backdrop .kp-modal .kp-btn-danger:not(.kp-btn-keep) {
	padding: 0 !important; /* посилання, не капсула */
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
	height: auto !important;
	color: var(--kp-accent) !important; /* бузковий, як усі посилання системи */
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.kp-modal-backdrop .kp-modal .kp-btn:not(.kp-btn-dark):not(.kp-btn-keep):hover,
#kp-dashboard-app .kp-form-footer .kp-btn:not(.kp-btn-dark):not(.kp-btn-keep):hover,
#kp-dashboard-app .kp-form .kp-actions .kp-btn:not(.kp-btn-dark):not(.kp-btn-keep):hover,
#kp-dashboard-app .kp-modal-actions .kp-btn:not(.kp-btn-dark):not(.kp-btn-keep):hover {
	color: var(--kp-dark) !important; /* реакція на наведення, як у .kp-btn-ghost */
	background: none !important;
}

/* Небезпечна дія у вікні — червоне посилання. */
.kp-modal-backdrop .kp-modal .kp-btn-danger:not(.kp-btn-keep),
.kp-modal-backdrop .kp-modal .kp-btn-danger:not(.kp-btn-keep):hover {
	color: var(--kp-red) !important;
}

/* Посилання в ряду дій стоять з тим самим зазором, що й кнопки, і
   вирівняні по центру кнопки. Вбудовані style="margin-top" у старих
   кнопках-посиланнях прибираємо. */
.kp-modal-backdrop .kp-modal-actions,
#kp-dashboard-app .kp-form-footer,
#kp-dashboard-app .kp-form .kp-actions {
	gap: 10px 18px; /* між кнопкою і посиланнями трохи більше повітря */
}

.kp-modal-backdrop .kp-modal [data-pm-add],
.kp-modal-backdrop .kp-modal [data-st-tpl-add],
.kp-modal-backdrop .kp-modal [data-st-reset],
.kp-modal-backdrop .kp-modal [data-st-stage-add] {
	margin-top: 10px !important; /* «+ Додати …» відбите від списку, а не злипається з ним */
	margin-right: 14px;
}

/* Правка 244: дії вікна «Журнал дій» у правому нижньому куті. */
.kp-modal-actions-right {
	justify-content: flex-end;
}

/* Правка 203: у профілі рядки каналів щільніше, «Від'єднати Telegram»
   відбите від тексту про підключення. */
.kp-modal-backdrop .kp-profile-check {
	margin: 2px 0; /* було 6px — чекбокси надто далеко один від одного */
}

.kp-modal-backdrop .kp-modal [data-tg-unlink] {
	display: inline-block;
	margin-top: 10px; /* повітря після «Підключено: …» */
}

/* Правка 241 (у всіх вікнах): заголовок групи полів помітніший за
   підписи полів, підказки дрібніші й ближче до поля. */
.kp-modal-backdrop .kp-section-label,
.kp-form-section-title {
	margin: 22px 0 10px;
	padding-top: 0;
	color: var(--kp-ink); /* не сірий: це заголовок, а не підпис */
	font-size: 14.5px;
	font-weight: 700;
}

/* Групи реквізитів — окремі блоки з лінією зверху.
   Правка 254 (05.09.2026): однаковий відступ над і під лінією. */
.kp-form-section {
	margin-top: 20px; /* від останнього поля попереднього блоку до лінії */
	padding-top: 20px; /* від лінії до заголовка блоку */
	border-top: 1px solid var(--kp-line); /* видима межа між блоками */
}

.kp-form-section:first-of-type {
	border-top: none; /* перший блок одразу під описом, лінія зайва */
	padding-top: 0;
}

.kp-form-section .kp-form-section-title {
	margin-top: 0; /* відступ дає сам блок */
}

.kp-modal-backdrop .kp-field > .kp-legend,
#kp-dashboard-app .kp-field > .kp-form-hint,
.kp-modal-backdrop .kp-field > .kp-form-hint {
	margin: 0; /* підказка одразу під полем: gap поля 6px і так є */
	font-size: 11.5px; /* дрібніша за підпис поля */
	line-height: 1.4;
}

/* Textarea у вікнах без ручки розтягування: висота рядка не гуляє. */
.kp-modal-backdrop textarea.kp-input {
	resize: none;
	min-height: 84px;
}

/* ── Правка 238 (глобально): сітка форм без дірок ─────────────────── */

/* Останнє непарне поле групи розтягує балансувальник (kpBalanceForm)
   класом kp-field-wide; тут лише сама сітка для всіх контейнерів. */
.kp-form-grid2 > .kp-field-wide,
.kp-form-block > .kp-field-wide,
[data-services-body] > .kp-field-wide,
.kp-form .kp-field-wide {
	grid-column: 1 / -1; /* на всю ширину */
}

/* У рядку сітки поля однакової висоти: підказка всередині поля не
   тягне сусіда, а поле в парі не вище за сусіднє. Textarea в
   двоколонкових блоках вікон — та сама висота в обох. */
.kp-form-grid2 {
	align-items: start;
}

.kp-form-grid2 > .kp-field > textarea.kp-input {
	min-height: 84px !important; /* два textarea в ряду однакові */
}

/* Правка 246: підказка в підвалі форми задачі по центру кнопки й
   притиснута вправо (правило .kp-form-hint 0.10.0.4 ставило їй
   margin: -8px 0 0 і вона падала ліворуч). */
#kp-dashboard-app .kp-form-footer .kp-form-hint {
	margin: 0 0 0 auto;
	align-self: center;
}

/* Правка 218 «пейджер по центру» знята правкою 265: центрування лише
   на мобайлі (мобільний блок нижче), десктоп як був. */

/* ── Правка 220: шапка списків по одній лінії ─────────────────────── */

/* Кнопка в ряду фільтрів тієї самої висоти (36px), що й селекти. */
.kp-list-head > .kp-btn,
.kp-list-head > .kp-btn-dark,
.kp-list-actions .kp-btn,
.kp-list-actions .kp-btn-dark {
	height: 36px;
	padding-top: 0;
	padding-bottom: 0;
}

.kp-list-actions {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

/* Ряд фільтрів у шапці списку стискається й гортається, а кнопки
   лишаються в тому самому ряду праворуч (правка 233). */
.kp-list-head > .kp-filters {
	flex: 1 1 0;
	min-width: 0;
}

/* Правки 233, 244: опис над фільтрами з відступом до них. */
.kp-list-intro {
	margin: 0 0 14px;
}

.kp-list-head > .kp-list-intro {
	margin: 0; /* у ряду з кнопкою відступ дає сама шапка */
	flex: 1 1 auto;
}

/* Топбар: заголовок і кнопки дій на одній осі. */
.kp-topbar .kp-title {
	line-height: 1.2;
}

/* ── Правка 212 → 279 (06.09.2026): бейдж «Критичний» без емодзі ──── */
/* У бейджі емодзі більше нема (JS priorityBadge), крапку дає ::before
   як у решти. Клас лишився для рядків дзвіночка (правка 216), де текст
   Telegram-сповіщення починається з 🔴. */
.kp-bell-row-text .kp-crit-mark {
	font-size: 9px; /* емодзі зменшене до крапки */
	line-height: 1;
	margin-right: 2px;
}

/* ── Правка 213: «Взяти в роботу» у списку компактна ──────────────── */

#kp-dashboard-app .kp-take-inline {
	padding: 4px 12px; /* висота під бейдж статусу */
	font-size: 12px;
	white-space: nowrap;
}

/* ── Правки 215, 223: легенда кольорів під списком і календарем ───── */

.kp-legend-rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.kp-legend-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	align-items: center;
}

.kp-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

/* Правка 278 (06.09.2026): смужок у легенді більше нема — зразок
   «червона назва» критичної задачі (правка 280). */
.kp-legend-crit {
	color: var(--kp-red);
	font-weight: 600;
}
.kp-legend-item .kp-title-dot { margin-left: 0; } /* у легенді кружечок без відступу зліва */

.kp-legend-dot {
	display: inline-block;
	width: 7px; /* та сама крапка, що в чипі календаря */
	height: 7px;
	border-radius: var(--kp-radius-pill);
	background: var(--kp-chip-dot, var(--kp-faint));
}

/* ── Правка 224: колонки списку клієнтів по лівому краю ───────────── */

.kp-sites {
	justify-content: flex-start; /* чіпи проєктів рівно під заголовком колонки */
}

.kp-client-balance,
.kp-client-pm {
	text-align: left; /* баланс і PM під своїми заголовками */
}

/* ── Правка 230 (глобально): суми й дати не рвуться ───────────────── */

.kp-table td.kp-sum-in,
.kp-table td.kp-sum-out,
.kp-table td.kp-cell-num,
.kp-table .kp-money-ok,
.kp-table .kp-money-debt,
.kp-audit-date {
	white-space: nowrap;
}

/* ── Правка 231: око замість «Показати записи» ────────────────────── */

#kp-dashboard-app .kp-eye-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

#kp-dashboard-app .kp-eye-btn .kp-ico {
	width: 16px;
	height: 16px;
}

/* Правка 351 (07.09.2026): око, по якому відкрита деталізація у «Команді»,
   підсвічуємо, щоб було видно, чий список стоїть під зведеною. */
#kp-dashboard-app .kp-eye-btn.kp-eye-on {
	/* Око й так бузкове, тому підсвітка — світла бузкова плашка під ним. */
	background: rgba(109, 90, 230, 0.12);
	border-radius: 999px;
	padding: 2px 8px;
}

/* ── Правка 232: рік «Динаміки» праворуч у шапці картки ───────────── */

.kp-fin-head-right {
	margin-left: auto;
}

.kp-fin-head-right:empty {
	display: none;
}

/* ── Правка 229: список вкладок лише на мобайлі ───────────────────── */

.kp-tabs-select {
	display: none; /* на десктопі капсула вкладок */
}

/* ── Правка 236: картки «Керування» з відступом знизу ─────────────── */

#kp-dashboard-app .kp-setting {
	padding: 15px 16px 16px !important; /* опис не впирається в нижній край */
	height: auto !important;
}

#kp-dashboard-app .kp-setting-sub {
	display: block;
	padding-bottom: 1px;
}

/* ── Правка 242: ієрархія заголовків у «Шаблонах документів» ──────── */

.kp-tpl-kind {
	margin: 0;
	font-size: 15px; /* більший за назву шаблону (14.5), менший за заголовок сторінки */
	font-weight: 700;
}

.kp-tpl-group .kp-card-head {
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--kp-line); /* лінія відділяє розділ типу */
}

/* Картки шаблонів по одній на рядок, дії в один ряд. */
.kp-tpl-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kp-tpl-list .kp-svc-card {
	flex-direction: row; /* назва ліворуч, дії праворуч в один рядок */
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.kp-tpl-list .kp-svc-card > .kp-svc-name {
	flex: 1 1 260px;
	min-width: 0;
}

.kp-tpl-list .kp-svc-card > .kp-svc-billing {
	flex: 1 1 200px;
	margin: 0;
}

.kp-tpl-list .kp-svc-actions {
	margin-top: 0;
	padding-top: 0;
	border-top: none; /* лінія дій зайва в рядку */
}

/* ── Правка 227/220: картка проєкту, кнопки в шапці однакової висоти */

.kp-proj-actions .kp-btn,
.kp-proj-actions .kp-btn-dark {
	height: 36px;
	padding-top: 0;
	padding-bottom: 0;
}

/* ── Правка 252: назва задачі не переноситься по літерах ──────────── */

/* overflow-wrap: anywhere рвав назву посеред слова, коли поруч стояли
   три кнопки. Рвемо лише по словах, а кнопки не стискаємо. */
.kp-topbar-task .kp-title {
	overflow-wrap: break-word;
	word-break: normal;
}

.kp-topbar-task > div:first-child {
	flex: 1 1 320px; /* заголовок забирає вільне місце, кнопки за вмістом */
}

/* ── Правка 245 → 291 (06.09.2026): рядки пакета в картці задачі ──── */
/* «Використано» без кольору (звичайне значення), «Залишилось» зелений
   або бурштиновий (менше 20 % пакета), «Перевищено на» і «Понад пакет
   до оплати» червоні. Вага як у решти значень, різниться лише колір. */
.kp-meta-val.kp-pkg-ok  { color: var(--kp-green); font-weight: 600; }
.kp-meta-val.kp-pkg-low { color: var(--kp-amber); font-weight: 600; }
.kp-meta-val.kp-pkg-over { color: var(--kp-red); font-weight: 600; }
.kp-meta-val.kp-pkg-over strong { font-weight: 700; }

.kp-meta-val.kp-money-ok {
	font-weight: 600; /* як решта значень, лише зелений (інші екрани) */
}

/* ── Правка 248: шапка повідомлення в один рядок ──────────────────── */

.kp-msg-head {
	align-items: center;
	flex-wrap: nowrap; /* ім'я, бейдж, час в один рядок */
}

.kp-msg-author {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis; /* довге ім'я обрізається, а не ламає рядок */
	white-space: nowrap;
}

.kp-msg-head .kp-badge {
	flex: 0 0 auto;
}

.kp-msg-time {
	flex: 0 0 auto;
	white-space: nowrap; /* дата не рветься */
}

/* ── Правка 221: показники в картці проєкту (десктоп теж) ─────────── */

.kp-prow-stats > div + div {
	padding-left: 22px;
	border-left: 1px solid var(--kp-line); /* тонка лінія між показниками */
}

/* Правка 237 (текст черги не тиснеться) поглинута правкою 281. */

/* ══════════════════════════════════════════════════════════════════
   Фінальний прохід верстки 0.20.2 (05.09.2026), десктоп: правки 259–266.
   ══════════════════════════════════════════════════════════════════ */

/* ── Правка 259 → 281 (06.09.2026): черга підтверджень компактна ──── */

/* Один рядок: текст ліворуч (бейдж + назва, під ними проєкт і хто
   запросив), дві круглі іконки праворуч (кошик = підтвердити, стрілка =
   відхилити). Спільна розмітка для Головної і «Керування» (JS
   queueRowHtml). Причини запиту тут немає — вона в картці запису. */
.kp-queue-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	margin: 0;
	border: none;
	border-bottom: 1px solid var(--kp-line);
	border-radius: 0;
	background: transparent; /* у «Керуванні» була бузкова підкладка — тепер як на Головній */
	font-size: 14px;
	cursor: pointer; /* клік по тексту відкриває картку запису */
}

.kp-queue-row:last-child {
	border-bottom: none;
}

/* Перший підпис секції в картці без верхнього відступу (276): його дає картка. */
.kp-card > .kp-section-label:first-child {
	margin-top: 0;
}

.kp-queue-text {
	flex: 1 1 auto;
	min-width: 0; /* довга назва переноситься, а не виштовхує іконки */
}

.kp-queue-row .kp-cell-title {
	white-space: normal;
	line-height: 1.45;
}

.kp-queue-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

/* Іконки дій: 36px, як кнопки-іконки топбара, але трохи дрібніші.
   Кошик червоний на hover — це незворотна дія. */
#kp-dashboard-app .kp-queue-actions .kp-icon-btn {
	width: 36px;
	height: 36px;
}

#kp-dashboard-app .kp-queue-approve:hover {
	color: var(--kp-red);
	border-color: var(--kp-red);
	background: var(--kp-red-soft);
}

#kp-dashboard-app .kp-queue-reject:hover {
	color: var(--kp-accent);
	border-color: var(--kp-accent);
	background: var(--kp-accent-soft);
}

/* ── Правка 260: індикатор дзвіночка у правому верхньому куті ──────── */

#kp-dashboard-app .kp-unread-btn .kp-icon-dot {
	top: 0;
	right: 0;
}

/* ── Правка 261: «поза пакетом · сума» не рветься ───────────────────── */

.kp-table .kp-cell-sub.kp-over {
	white-space: nowrap;
}

/* ── Правка 262: у всіх таблицях вміст усіх колонок по лівому краю ── */

/* !important перебиває інлайнові text-align:right у розмітці сум. */
#kp-dashboard-app .kp-table th,
#kp-dashboard-app .kp-table td,
.kp-modal-backdrop .kp-table th,
.kp-modal-backdrop .kp-table td {
	text-align: left !important;
}

/* ── Правка 263: підказка над таблицею в лінію з колонкою ───────────── */

.kp-table-intro {
	margin: 4px 0 14px;
	padding: 0 12px; /* як у комірок таблиці */
}

/* ── Правка 264: «Скинути фільтри» в один рядок ─────────────────────── */

.kp-filters .kp-btn-ghost {
	white-space: nowrap;
	padding: 0 6px;
}

/* ── Правка 265: пейджер на десктопі як до 218 (по центру лише мобайл) ─ */

/* Десктопний вигляд повернуто зняттям блоку 218 (див. вище). */

/* ── Правка 266: чекбокси у формі компактним списком ────────────────── */

.kp-form-grid2 > .kp-check {
	align-self: center;
}

/* ── Правка 270: інлайновий дзвіночок у назві є лише на мобайлі ──────── */

.kp-unread-m {
	display: none;
}

/* ══════════════════════════════════════════════════════════════════
   0.21.0 (06.09.2026): десктопні правки 302, 307, 313 і спільна
   розмітка картки задачі / вільних задач / переписки.
   ══════════════════════════════════════════════════════════════════ */

/* ── Правки 299/302/303: права колонка шапки картки задачі ─────────── */
/* .kp-topbar-right = ряд дій + примітка клієнту про автозакриття.
   На десктопі колонка притиснута до правого краю; в кабінеті клієнта
   (kp-topbar-right-client) чорна кнопка стає крайньою справа, примітка
   під кнопками по правому краю. Кнопки в один рівень із заголовком,
   примітка в рівень із рядком «проєкт · задача №». */
.kp-topbar-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	flex: 0 0 auto; /* кнопки не стискаються під довгим заголовком */
	max-width: 60%;
	padding-top: 30px; /* рівень заголовку: висота «← До списку» (24) + його відступ (6) */
}

.kp-topbar-task .kp-topbar-actions {
	flex: 0 0 auto;
	margin-left: 0;
	justify-content: flex-end;
}

.kp-topbar-right-client .kp-topbar-actions .kp-btn-dark {
	order: 2; /* «Закрити як виконану» крайня справа, «Повернути» перед нею */
}

.kp-topbar-right .kp-done-note {
	margin: 0;
	text-align: right;
}

/* ── Правки 309/313: вільні задачі техспеціаліста, дії іконками ────── */
/* Галочка в чорному кружечку (головна дія), хрестик у білому. Ті самі
   .kp-icon-btn, що в черзі підтверджень (281), 36px. */
#kp-dashboard-app .kp-free-acts .kp-icon-btn {
	width: 36px;
	height: 36px;
}

#kp-dashboard-app .kp-free-acts .kp-free-take {
	border-color: var(--kp-dark);
	background: var(--kp-dark);
	color: #fff;
}

#kp-dashboard-app .kp-free-acts .kp-free-take:hover {
	background: var(--kp-ink);
	color: #fff;
}

#kp-dashboard-app .kp-free-acts .kp-free-decline:hover {
	color: var(--kp-red);
	border-color: var(--kp-red);
	background: var(--kp-red-soft);
}

/* ── Правка 312: Головна техспеціаліста, вільні + критичні двома колонками ── */

.kp-tech-top {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.kp-tech-top > :only-child {
	grid-column: 1 / -1; /* один блок займає всю ширину */
}

/* Блок критичних: той самий каркас, що у вільних, але червоний. */
.kp-crit-box {
	padding: 16px 18px;
	border: 1px solid var(--kp-red);
	border-radius: var(--kp-radius);
	background: var(--kp-red-soft);
}

.kp-crit-head {
	margin-bottom: 12px;
	color: var(--kp-red);
	font-size: 13px;
	font-weight: 700;
}

.kp-crit-row {
	padding: 10px 14px;
	margin-bottom: 8px;
	border-radius: var(--kp-radius-sm);
	background: var(--kp-surface);
	cursor: pointer;
}

.kp-crit-row:last-of-type {
	margin-bottom: 0;
}

.kp-crit-row .kp-cell-title {
	white-space: normal;
}

/* ── Правка 296: «Показати попередні» над стрічкою ─────────────────── */

.kp-talk-more {
	text-align: center;
	padding: 4px 0 8px;
}

/* ── Правка 298: відповідь на конкретне повідомлення ───────────────── */

/* Дії повідомлення (відповісти, видалити): на десктопі в правому
   верхньому куті тіла повідомлення, шапка лишає під них місце. */
.kp-msg-body {
	position: relative;
}

.kp-msg-head {
	padding-right: 52px;
}

.kp-msg-actions {
	position: absolute;
	top: -2px;
	right: 0;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.kp-msg-actions .kp-msg-del {
	width: 22px;
	height: 22px;
	padding: 0;
}

/* Стрілка «Відповісти» у шапці повідомлення: як хрестик видалення,
   з'являється при наведенні (на мобайлі завжди, приглушено). */
.kp-msg-reply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: none;
	color: var(--kp-faint);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.kp-msg-reply .kp-ico {
	width: 16px;
	height: 16px;
}

.kp-msg:hover .kp-msg-reply,
.kp-msg-reply:focus-visible {
	opacity: 1;
}

.kp-msg-reply:hover {
	color: var(--kp-accent);
}

/* Цитата батьківського повідомлення над текстом відповіді. Це кнопка:
   клік веде до оригіналу. */
.kp-msg-quote {
	display: block;
	width: 100%;
	max-width: 520px;
	margin: 0 0 8px;
	padding: 6px 10px 6px 12px;
	border: none;
	border-left: 3px solid var(--kp-accent);
	border-radius: 0 var(--kp-radius-sm) var(--kp-radius-sm) 0;
	background: var(--kp-accent-soft);
	color: var(--kp-ink);
	font: inherit;
	font-size: 12.5px;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.kp-msg-quote-author {
	display: block;
	color: var(--kp-accent);
	font-weight: 700;
}

.kp-msg-quote-text {
	display: block;
	color: var(--kp-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Оригінал, до якого перейшли по цитаті, на мить підсвічується. */
.kp-msg-flash {
	animation: kp-msg-flash 1.6s ease-out;
}

@keyframes kp-msg-flash {
	0%   { background: var(--kp-accent-soft); }
	100% { background: transparent; }
}

/* Плашка «У відповідь …» над полем форми, з хрестиком праворуч. */
.kp-reply-quote[hidden] {
	display: none; /* display:flex нижче перебив би атрибут hidden */
}

.kp-reply-quote {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding: 6px 8px 6px 12px;
	border-left: 3px solid var(--kp-accent);
	border-radius: 0 var(--kp-radius-sm) var(--kp-radius-sm) 0;
	background: var(--kp-surface);
	font-size: 12.5px;
	line-height: 1.4;
}

.kp-reply-quote-label {
	flex: 0 0 auto;
	color: var(--kp-accent);
	font-weight: 700;
	white-space: nowrap;
}

.kp-reply-quote-text {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--kp-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#kp-dashboard-app .kp-reply-quote-cancel {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	min-height: 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--kp-faint);
	font-size: 13px;
	cursor: pointer;
}

#kp-dashboard-app .kp-reply-quote-cancel:hover {
	color: var(--kp-red);
}

/* ── Правка 307 → 314 (06.09.2026): ряд фільтрів в один рядок ────────── */
/* 307 дозволяла ряду переноситись, і на 1280 «Скинути фільтри» падало на
   другий рядок, а кнопки дій опинялись нижче за селекти. Тепер ряд не
   переноситься: селекти стискаються пропорційно (flex: 1 1 0, min-width
   0, стеля 200px як була), «Скинути фільтри» nowrap, кнопки справа в
   рівень із фільтрами. Лише десктоп: у мобільному блоці .kp-filters
   сітка 2 в рядок, і це правило там перебивається. */
.kp-list-head > .kp-filters {
	flex-wrap: nowrap;
	overflow: visible;
	align-items: center;
}

@media (min-width: 901px) {
	/* Лише десктоп: селектор із трьох класів інакше перебив би
	   мобільну сітку фільтрів (width: 100%, правка 274). */
	.kp-list-head:has(> .kp-list-actions) > .kp-filters > .kp-filter {
		/* Лише ряд із кнопками дій (Документи): у Проєктах/Клієнтах
		   селекти лишаються за вмістом, як були. */
		flex: 1 1 0; /* усі селекти діляться шириною порівну */
		min-width: 108px; /* щоб «Усі клієнти» читалось повністю на 1280 з бічним меню */
		max-width: 200px; /* стеля, як у .kp-filter */
		padding-left: 12px; /* на 2 менше, ніж у .kp-filter: економимо ширину в тісному ряду */
		padding-right: 26px; /* і під стрілку 26 замість 32 */
		background-position: right 8px center; /* стрілка ближче до краю під менший відступ */
	}

	.kp-list-head:has(> .kp-list-actions) > .kp-filters {
		gap: 6px; /* між селектами щільніше, ніж 8 */
	}

	/* У тісному ряду Документів (4 селекти + посилання + 2 кнопки) кнопки
	   дій компактніші по горизонталі, щоб селекти не обрізались. */
	#kp-dashboard-app .kp-list-head > .kp-list-actions > .kp-btn,
	#kp-dashboard-app .kp-list-head > .kp-list-actions > .kp-btn-dark {
		padding-left: 12px; /* id у селекторі, бо базовий padding кнопок теж під id (0.7.3) */
		padding-right: 12px;
		white-space: nowrap;
	}

	.kp-list-head > .kp-list-actions {
		gap: 6px;
	}

	.kp-list-head:has(> .kp-list-actions) {
		gap: 10px; /* між фільтрами і кнопками дій 10 замість 14 */
	}
}

.kp-filters > .kp-btn-ghost {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   МОБІЛЬНА ВЕРСТКА (до 900px). Правка 274 (05.09.2026): переписано
   системно за шпаргалкою мобільної верстки, а не латками екранами.
   Правила: один крок 16px; шапка розділу на кожному екрані (крім
   картки задачі); ряд керування (перемикач/фільтри/кнопка); плитки
   плоскі; картки списку одного стилю без підложки; таблиця з першою
   колонкою-назвою; форми в одну колонку; панелька-пігулка.
   Точка переходу 900px — та сама, де .kp-shell стає одноколонковою.
   ══════════════════════════════════════════════════════════════════ */

/* Плаваюча панелька й офканвас не існують на десктопі. */
.kp-mbar,
.kp-nav-backdrop,
.kp-nav-close {
	display: none;
}

@media (max-width: 900px) {
	/* ── 0. Оболонка: поля, офканвас, панелька, плаваючий «+» ──────── */

	.kp-app {
		padding: 10px;
		border-radius: 0;
	}

	.kp-shell {
		gap: 0;
		min-height: 0;
	}

	/* Меню стає офканвасом: фіксоване ліворуч, за екраном, поки закрите. */
	.kp-nav {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 100001; /* над підкладкою й адмін-баром WordPress */
		width: min(300px, 86vw);
		border-radius: 0 var(--kp-radius-lg) var(--kp-radius-lg) 0;
		overflow-y: auto;
		transform: translateX(-104%); /* сховане ліворуч */
		transition: transform 0.2s ease-out;
		box-shadow: 12px 0 40px rgba(23, 22, 31, 0.25);
	}

	.kp-shell.kp-nav-open .kp-nav {
		transform: none; /* виїхало */
	}

	/* Хрестик закриття у правому верхньому куті меню. */
	.kp-nav-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 12px;
		right: 12px;
		width: 36px;
		height: 36px;
		border: none;
		border-radius: var(--kp-radius-pill);
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
		cursor: pointer;
	}

	.kp-nav-close .kp-ico {
		width: 18px;
		height: 18px;
	}

	.kp-nav-logo {
		padding-right: 52px; /* місце під хрестик */
	}

	/* Правка 337 (рішення Оксани 06.09.2026): у мобільному меню над
	   профілем кнопка «Підключити Telegram» з іконкою (світла з обводкою
	   на темному, на всю ширину), а коли підключено — рядок з галочкою. */
	.kp-nav-tg {
		display: block;
		margin-top: auto; /* притискається до низу разом із профілем */
		padding: 0 4px 12px;
	}

	.kp-nav-tg + .kp-nav-bottom {
		margin-top: 0; /* низ уже підтягнув блок Telegram */
	}

	#kp-dashboard-app .kp-nav-tg-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		min-height: 44px;
		border: 1px solid rgba(255, 255, 255, 0.35);
		background: transparent;
		color: #fff;
	}

	#kp-dashboard-app .kp-nav-tg-btn:hover {
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
	}

	.kp-nav-tg-btn .kp-ico {
		width: 18px;
		height: 18px;
		color: #2aabee; /* літачок у колір Telegram */
	}

	.kp-nav-tg-ok {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 8px 8px;
		color: rgba(255, 255, 255, 0.7);
		font-size: 13px;
	}

	.kp-nav-tg-ok .kp-ico {
		width: 16px;
		height: 16px;
		color: #4ade80; /* зелена галочка на темному */
	}

	/* Підкладка під меню: тап повз закриває. */
	.kp-nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: rgba(20, 14, 45, 0.42);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease-out;
	}

	.kp-shell.kp-nav-open .kp-nav-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* Плаваюча чорна панелька-пігулка (258): бургер ліворуч, пошук і дзвіночок праворуч. */
	.kp-mbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 10px;
		left: 10px;
		right: 10px;
		z-index: 9999; /* над контентом, під вікнами */
		height: 52px;
		padding: 0 8px 0 6px;
		border-radius: var(--kp-radius-pill);
		background: var(--kp-dark);
		color: #fff;
		box-shadow: var(--kp-shadow-lg);
	}

	/* Правка 257: під адмін-баром WordPress (32px на планшеті). */
	body.admin-bar .kp-mbar {
		top: 42px;
	}

	/* Кнопки в панельці: іконка на темному, без рамки. */
	#kp-dashboard-app .kp-mbar-btn,
	#kp-dashboard-app .kp-mbar .kp-icon-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		min-height: 0;
		padding: 0;
		border: none;
		border-radius: var(--kp-radius-pill);
		background: transparent;
		color: #fff; /* біла іконка на чорному */
		cursor: pointer;
		box-shadow: none;
	}

	#kp-dashboard-app .kp-mbar .kp-icon-btn:hover,
	#kp-dashboard-app .kp-mbar-btn:hover {
		background: rgba(255, 255, 255, 0.1);
		color: #fff;
	}

	#kp-dashboard-app .kp-mbar .kp-ico {
		width: 20px;
		height: 20px;
	}

	/* Індикатор-крапка на дзвіночку в панельці — біла обвідка стає темною
	   (бульбашка з числом без обвідки взагалі, правка 295). */
	.kp-mbar .kp-icon-dot {
		border-color: var(--kp-dark);
	}

	.kp-mbar-acts {
		display: flex;
		align-items: center;
		gap: 2px;
		position: relative; /* панелі пошуку й дзвіночка чіпляються сюди */
	}

	/* Панелі пошуку й дзвіночка під панелькою на всю ширину екрана. */
	.kp-mbar .kp-bell-panel,
	.kp-mbar .kp-search-panel {
		position: fixed;
		top: 70px;
		left: 10px;
		right: 10px;
		width: auto;
		max-width: none;
		color: var(--kp-ink); /* панель біла, текст не успадковує білий колір панельки */
	}

	body.admin-bar .kp-mbar .kp-bell-panel,
	body.admin-bar .kp-mbar .kp-search-panel {
		top: 102px; /* під зсунутою панелькою */
	}

	.kp-mbar .kp-bell-panel .kp-btn-ghost,
	.kp-mbar .kp-search-panel .kp-btn-ghost {
		color: var(--kp-accent);
	}

	/* «+ Задача» — плаваюча кругла кнопка внизу праворуч (206, 256). */
	#kp-dashboard-app .kp-mbar #kp-topbar-add,
	#kp-dashboard-app .kp-mbar [data-client-add-task] {
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 9999;
		width: 56px;
		height: 56px;
		padding: 0;
		border-radius: var(--kp-radius-pill);
		font-size: 0; /* підпис «+ Задача» ховаємо, лишається плюс */
		gap: 0; /* зазор між плюсом і схованим підписом зсував плюс ліворуч */
		justify-content: center;
		align-items: center;
		box-shadow: 0 10px 30px rgba(23, 22, 31, 0.3);
	}

	#kp-dashboard-app .kp-mbar #kp-topbar-add::before,
	#kp-dashboard-app .kp-mbar [data-client-add-task]::before {
		content: '+';
		font-size: 30px;
		font-weight: 500;
		line-height: 1;
	}

	/* ── 1. Вертикальна шкала: крок 16 ──────────────────────────────── */

	/* Контент починається під панелькою: 10 (зазор) + 52 (панелька) + 32. */
	.kp-main {
		padding-top: 94px;
		padding-bottom: 84px; /* щоб плаваючий «+» не закривав останній рядок */
		gap: 16px;
	}

	.kp-pane-active {
		gap: 16px;
	}

	/* Усі відступи дає gap контейнера. Власні margin блоків обнуляємо,
	   інакше на різних екранах виходять різні дірки (274). */
	.kp-main > *,
	.kp-pane-active > * {
		margin: 0;
		min-width: 0; /* діти не розпирають екран своїм вмістом */
		max-width: 100%;
	}

	.kp-two-cols {
		gap: 16px;
	}

	/* ── 2. Шапка розділу ────────────────────────────────────────────── */

	.kp-topbar {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.kp-topbar > div:first-child {
		min-width: 0;
	}

	.kp-topbar .kp-title {
		font-size: 22px;
		white-space: normal;
	}

	/* Дії шапки переїхали в панельку й FAB, ряд ховаємо (id перебиває скоуп 0.7.3). */
	#kp-dashboard-app .kp-main > .kp-topbar > .kp-topbar-actions {
		display: none;
	}

	/* Telegram-кнопка на мобайлі живе в офканвасі. */
	#kp-dashboard-app .kp-tg-btn {
		display: none;
	}

	/* Шапки розділу немає лише в картці задачі (247): там «← До списку». */
	.kp-main:has(.kp-pane-active .kp-topbar-task) > .kp-topbar {
		display: none;
	}

	/* Правка 290 (06.09.2026): у формі нової задачі шапки розділу теж
	   немає, і «← До списку» прибрано — лишається лише «Нова задача»
	   з підказкою і форма. Вихід через «Скасувати». */
	.kp-main:has(.kp-pane-active .kp-topbar-form-new) > .kp-topbar {
		display: none;
	}

	.kp-topbar-form-new .kp-back {
		display: none;
	}

	.kp-topbar-form-new .kp-title {
		margin-top: 0 !important; /* без стрілки заголовку не треба відступу зверху */
	}

	/* ── 3. Ряд керування: перемикач, фільтри, кнопка ────────────────── */

	/* Фільтри сіткою по 2 в рядок, непарний останній на всю ширину;
	   головна кнопка окремим рядком на 100%. */
	.kp-list-head {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		align-items: center;
	}

	/* Будь-який ряд фільтрів (у шапці списку чи в картці задач): сітка 2 в рядок. */
	.kp-filters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		min-width: 0;
		max-width: 100%;
		overflow: visible;
		padding-bottom: 0;
		margin-bottom: 0 !important; /* інлайновий margin-bottom:14px у списку задач; відступ дає сітка */
	}

	.kp-list-head > .kp-filters {
		grid-column: 1 / -1;
	}

	/* Фільтри в картці задач: 16 до таблиці за шкалою. */
	.kp-card > .kp-filters {
		margin-bottom: 16px !important;
	}

	.kp-filters > .kp-filter,
	.kp-filters > .kp-btn-ghost {
		width: 100%;
		max-width: none;
		min-width: 0;
		height: 40px;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Непарний останній фільтр тягнеться на всю ширину (правило «без дірок»). */
	/* «Скинути фільтри» стоїть у ряду останнім (часто схованим), тому
	   рахуємо і випадок «непарний перед ним». Правки 285, 287
	   (06.09.2026): «перед ним» лише коли далі справді кнопка скидання —
	   без цієї умови у Проєктах і Фінансах передостанній селект
	   розтягувався на 100%, а останній лишався сам у півряду. */
	.kp-filters > .kp-filter:nth-child(odd):last-child,
	.kp-filters > .kp-filter:nth-child(odd):nth-last-child(2):has(+ .kp-btn-ghost) {
		grid-column: 1 / -1;
	}

	/* Правка 282 (06.09.2026): виняток для списку задач — фільтрів
	   дев'ять, тож один рядок з горизонтальною прокруткою, як на
	   десктопі. Шпаргалка п. 3 для решти екранів лишається. */
	.kp-filters.kp-filters-scroll {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* смужка прокрутки не потрібна, край видно по обрізаній пігулці */
		/* Правка 294 (06.09.2026): контейнер прокрутки різав рамку й
		   ореол фокуса активної пігулки; даємо 3px запасу з усіх боків і
		   на стільки ж зменшуємо зовнішній відступ, щоб шкала не поїхала. */
		padding: 3px;
		margin: -3px -3px 13px !important; /* 16 до таблиці за шкалою (13 + 3 padding) */
		width: calc(100% + 6px);
		max-width: none;
	}

	/* Правка 294: активна пігулка показує значення повністю, обмеження
	   150px лишається тільки для неактивних. */
	.kp-filters.kp-filters-scroll > .kp-filter.kp-filter-on {
		max-width: none;
	}

	.kp-filters.kp-filters-scroll::-webkit-scrollbar {
		display: none;
	}

	.kp-filters.kp-filters-scroll > .kp-filter {
		width: auto;
		flex: 0 0 auto;
		max-width: 150px; /* щоб третя пігулка визирала з-за краю і було видно, що ряд гортається */
		grid-column: auto;
	}

	.kp-filters.kp-filters-scroll > .kp-btn-ghost {
		flex: 0 0 auto;
		width: auto;
		height: 40px;
		white-space: nowrap;
	}

	/* «Скинути фільтри» посиланням по центру на всю ширину. */
	.kp-filters > .kp-btn-ghost {
		grid-column: 1 / -1;
		height: auto;
		text-align: center;
	}

	.kp-list-head > .kp-btn-dark,
	.kp-list-head > .kp-btn,
	.kp-list-head > .kp-list-actions,
	.kp-list-head > .kp-list-intro {
		grid-column: 1 / -1;
		width: 100%;
		justify-content: center;
	}

	/* Правка 286 (рішення Оксани 06.09.2026, нове правило шпаргалки):
	   розмір кнопок стандартизований — жодна кнопка не нижча за фільтр.
	   Головні кнопки і кнопки списків 40px, як селекти; висоту задає
	   min-height, тож кнопки з довгим текстом у два рядки не ріжуться. */
	#kp-dashboard-app .kp-btn-dark,
	#kp-dashboard-app .kp-btn:not(.kp-take-inline):not(.kp-btn-sm),
	#kp-dashboard-app .kp-btn-danger,
	#kp-dashboard-app .kp-list-actions > button {
		min-height: 40px;
		box-sizing: border-box;
	}
	/* Виняток: «Взяти в роботу» в рядку таблиці і дрібні кнопки пачки
	   (kp-btn-sm) свідомо компактні під висоту бейджа (правка 213). */

	/* Один фільтр і кнопка (Клієнти, 272): в один рядок. */
	.kp-list-head:has(> .kp-filters > .kp-filter:only-child) {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.kp-list-head:has(> .kp-filters > .kp-filter:only-child) > .kp-filters {
		grid-column: auto;
	}

	.kp-list-head:has(> .kp-filters > .kp-filter:only-child) > .kp-btn-dark {
		grid-column: auto;
		width: auto;
		height: 40px;
		white-space: nowrap;
	}

	/* Дві кнопки дій (Документи) по половині. */
	.kp-list-actions {
		display: flex;
		gap: 10px;
	}

	/* Правка 332 (06.09.2026): у картці проєкту заголовок «Документи»
	   окремим рядком, під ним дві кнопки по половині з короткими
	   підписами «+ Документ» і «+ Рахунок». */
	.kp-docs-head {
		flex-wrap: wrap;
		gap: 12px;
	}

	.kp-docs-head .kp-list-actions {
		flex-basis: 100%;
		width: 100%;
	}

	.kp-docs-head .kp-btn-full {
		display: none;
	}

	.kp-docs-head .kp-btn-short {
		display: inline;
	}

	.kp-list-actions .kp-btn,
	.kp-list-actions .kp-btn-dark {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		padding-left: 8px;
		padding-right: 8px;
		font-size: 12.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Перемикач валют на всю ширину, сегменти рівні (228). */
	.kp-currency-switch {
		width: 100%;
	}

	.kp-currency-btn {
		flex: 1 1 0;
		text-align: center;
	}

	/* Перемикач вкладок вищий за фільтри по ієрархії (269): 44px, 14px. */
	.kp-card-head {
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 16px;
	}

	.kp-card-head > .kp-topbar-actions:has(.kp-tabs) {
		flex-basis: 100%; /* ряд вкладок окремим рядком; посилання «Усі задачі →» лишається праворуч */
		margin-left: 0;
	}

	.kp-card-head .kp-tabs {
		width: 100%;
		gap: 2px;
		padding: 3px;
	}

	.kp-card-head .kp-tab {
		flex: 1 1 auto; /* ширина за текстом, щоб «Очікують підтвердження» не обрізалось */
		min-width: 0;
		height: 38px;
		padding: 0 6px;
		font-size: 13px;
		text-align: center;
		white-space: nowrap;
	}

	/* Вкладки «Фінансів» — список замість капсули (229). */
	.kp-card-head:has(.kp-tabs-select) .kp-tabs {
		display: none;
	}

	.kp-card-head .kp-tabs-select {
		display: block;
		width: 100%;
		max-width: none;
		flex-basis: 100%;
		height: 44px;
	}

	/* Рік «Динаміки» під списком вкладок на всю ширину (232). */
	.kp-fin-head-right {
		flex-basis: 100%;
		margin-left: 0;
	}

	.kp-fin-head-right .kp-filter {
		width: 100%;
		max-width: none;
	}

	/* ── 4. Плитки-лічильники: 2 колонки, непарна перша на 100%, плоскі ── */

	.kp-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.kp-stats > .kp-stat:first-child:nth-last-child(odd) {
		grid-column: 1 / -1;
	}

	.kp-stat {
		padding: 14px;
		box-shadow: none; /* 268: плоска, як кольорові сусідки */
	}

	/* Біла плитка дістає світлу підкладку, щоб не зливатись із карткою нижче (268). */
	.kp-stats > .kp-stat:not(.kp-stat-dark):not(.kp-stat-amber):not(.kp-stat-red):not(.kp-stat-violet) {
		background: var(--kp-surface-soft);
		border-color: transparent;
	}

	.kp-stat-value {
		font-size: 22px;
	}

	/* У клієнта навпаки (209): «Баланс» і «Задачі» парою, «Активні послуги» на 100%. */
	.kp-client-tiles > .kp-stat:first-child:nth-last-child(odd) {
		grid-column: auto;
	}

	.kp-client-tiles > .kp-stat-lines {
		grid-column: 1 / -1;
	}

	.kp-fin-summary {
		grid-template-columns: 1fr 1fr;
	}

	/* ── 5. Картки: один стиль, без тіней, без «картки в картці» ─────── */

	.kp-card {
		padding: 16px;
		box-shadow: none;
		overflow-x: hidden; /* ряд вкладок чи довгий підпис не розтягують картку */
	}

	.kp-card-tight {
		padding: 12px;
	}

	.kp-card .kp-tabs {
		overflow-x: auto; /* багато вкладок гортаються всередині капсули */
		max-width: 100%;
	}

	/* Заголовки блоків одного розміру: 16px, як .kp-card-title. */
	.kp-card .kp-section-label:first-child {
		margin-top: 0;
		margin-bottom: 12px;
		color: var(--kp-ink);
		font-size: 16px;
		font-weight: 700;
	}

	/* Картки списку проєктів і клієнтів: 16 всередині, 12 між ними. */
	.kp-plist,
	.kp-clist {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.kp-prow {
		gap: 12px;
		margin: 0; /* відступ між картками дає gap списку */
		padding: 16px;
		box-shadow: none;
	}

	.kp-prow-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		text-align: left;
	}

	.kp-prow-stats > div + div {
		padding-left: 14px;
	}

	.kp-prow-money {
		min-width: 0;
		text-align: right;
	}

	/* Клієнти (225, 275): без білої підложки, картки як у проєктів. */
	.kp-client-list-card {
		padding: 0;
		border: none;
		background: transparent;
		border-radius: 0;
	}

	.kp-client-head {
		display: none; /* шапка колонок у картках зайва */
	}

	.kp-client-row,
	.kp-client-row-nofin,
	.kp-client-row-nopm,
	.kp-client-row-nofin.kp-client-row-nopm {
		grid-template-columns: 1fr 1fr; /* баланс і PM двома комірками внизу */
		gap: 10px 14px;
		margin-bottom: 12px;
		padding: 16px;
		border: 1px solid var(--kp-line);
		border-radius: var(--kp-radius);
		background: var(--kp-surface);
	}

	.kp-client-row .kp-client-name,
	.kp-client-row .kp-sites {
		grid-column: 1 / -1; /* назва і чіпи на всю ширину */
	}

	.kp-client-balance,
	.kp-client-pm {
		min-width: 0;
	}

	.kp-client-pm {
		text-align: right;
	}

	/* Порожні значення (273): чип «—» і PM «—» не показуємо. */
	.kp-client-row .kp-empty-val {
		display: none;
	}

	.kp-client-row .kp-sites:has(> .kp-empty-val:only-child) {
		display: none;
	}

	/* Пейджер у списку клієнтів без картки: відступ дає сам пейджер. */
	.kp-client-list-card .kp-pager {
		margin-top: 4px;
	}

	/* Списки на Головній (208, 211): бейдж менший, назва до кінця рядка,
	   проєкт окремим рядком під назвою. */
	.kp-attn-row,
	.kp-soon-row {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 3px 10px;
		align-items: center;
	}

	.kp-attn-row .kp-badge {
		padding: 2px 8px;
		font-size: 11px;
	}

	.kp-attn-proj,
	.kp-soon-proj {
		grid-column: 2; /* під назвою */
		margin-left: 0;
		white-space: normal;
		font-size: 11.5px;
	}

	/* Правка 312: на мобайлі колонки стосом, критичні першими. */
	.kp-tech-top {
		grid-template-columns: minmax(0, 1fr);
	}

	.kp-tech-top > .kp-crit-box {
		order: -1;
	}

	/* Вільні задачі техспеціаліста (210): назва на 100%, дії круглими
	   іконками. Правки 309/313 (06.09.2026): іконки тепер спільні з
	   десктопом (.kp-icon-btn з галочкою і хрестиком у розмітці), тому
	   тут лише розкладка рядка; «+» через ::before знято. */
	.kp-free-row {
		align-items: center;
	}

	.kp-free-row > div:first-child {
		flex: 1 1 0;
		min-width: 0;
	}

	.kp-free-row .kp-cell-sub {
		white-space: normal;
	}

	/* Черга підтверджень (259, 276 → 281, 06.09.2026): на мобайлі той
	   самий компактний рядок з іконками, що на десктопі. Шпаргалка п. 9. */
	.kp-queue-row {
		padding: 12px 0;
		align-items: center;
	}

	.kp-queue-row:last-child {
		padding-bottom: 0;
	}

	/* Картки налаштувань у «Керуванні» стосом на 100%. */
	.kp-settings {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		margin-top: 12px;
	}

	.kp-setting {
		box-shadow: none;
	}

	/* ── 6. Таблиці: назва в першій колонці, решта гортається ───────── */

	.kp-table {
		font-size: 13px;
	}

	.kp-table thead th,
	.kp-table tbody td {
		padding: 8px 6px;
		white-space: nowrap;
	}

	.kp-table thead th {
		white-space: normal; /* «PM · Виконавець» у два рядки, колонка вужча */
		font-size: 10.5px;
		line-height: 1.25;
		vertical-align: bottom;
	}

	/* Правка 293 (рішення Оксани 06.09.2026): вміст комірок по верху
	   рядка, а не по центру: довга назва більше не тягне сусідні колонки
	   в середину. Лише мобайл, десктоп по центру як був. */
	.kp-table tbody td {
		vertical-align: top;
	}

	.kp-table td.kp-cell-wrap {
		white-space: normal; /* проєкт переноситься */
		min-width: 70px;
	}

	/* Колонка людей (255): кружечки й «Вільна»; хто відхилив — у картці. */
	.kp-table .kp-free {
		display: inline-block;
		font-size: 0;
		line-height: 1.25;
		vertical-align: middle;
		white-space: nowrap;
	}

	.kp-table .kp-free::before {
		content: 'Вільна';
		font-size: 11px;
		font-weight: 600;
	}

	.kp-table .kp-declined-by {
		display: none;
	}

	/* Бейдж «На видалення» окремим рядком під назвою. */
	.kp-table .kp-badge-del {
		display: block;
		width: max-content;
		margin: 4px 0 0;
	}

	.kp-table .kp-people {
		gap: 4px;
	}

	.kp-table td.kp-cell-title,
	.kp-table td:has(> .kp-cell-title) {
		white-space: normal;
		width: 132px; /* назва в кілька рядків, а не одна довга колонка */
		min-width: 120px;
	}

	.kp-table td:has(> .kp-cell-title) .kp-cell-title {
		display: block;
		width: 132px; /* блок усередині тримає ширину, бо width комірки в авторозкладці лише порада */
		overflow-wrap: break-word;
	}

	.kp-table .kp-cell-sub {
		white-space: normal;
	}

	.kp-table .kp-th-check,
	.kp-table .kp-td-check {
		width: 26px;
		padding: 8px 4px;
	}

	/* Дзвіночок непрочитаного (270): на першому екрані поруч із назвою,
	   остання колонка схована. */
	.kp-table .kp-td-bell,
	.kp-table .kp-th-bell {
		display: none;
	}

	/* Правка 283 (рішення Оксани 06.09.2026): колонка «PM · Виконавець»
	   у списку задач на мобайлі схована разом із написом «Вільна». */
	.kp-table .kp-th-people,
	.kp-table .kp-td-people {
		display: none;
	}

	/* Правка 284 (06.09.2026): у дедлайні лише дата червоним, без
	   «Протерміновано з». */
	.kp-overdue-word {
		display: none;
	}

	.kp-table .kp-unread-m {
		display: inline-flex;
		vertical-align: middle;
		margin-left: 6px;
	}

	#kp-dashboard-app .kp-table .kp-unread-m .kp-unread-btn {
		width: 22px;
		height: 22px;
		min-height: 0;
		padding: 0;
	}

	#kp-dashboard-app .kp-table .kp-unread-m .kp-ico {
		width: 16px;
		height: 16px;
	}

	/* Панель масових дій (219): лічильник окремим рядком. */
	.kp-bulk-count {
		flex-basis: 100%;
	}

	/* Пейджер по центру, лічильник під кнопками (218, 265). */
	.kp-pager {
		justify-content: center;
		flex-wrap: wrap;
		padding: 12px 4px;
	}

	.kp-pager-info {
		flex-basis: 100%;
		margin-left: 0;
		margin-top: 6px;
		text-align: center;
	}

	/* ── 7. Календар ─────────────────────────────────────────────────── */

	.kp-cal-month {
		font-size: 14px;
		font-weight: 600;
		white-space: nowrap;
		flex: 1 1 auto;
		text-align: center;
	}

	.kp-cal-head {
		gap: 8px;
	}

	/* ── 8. Картка задачі (247, 277) ─────────────────────────────────── */

	/* Порядок: «← До списку», назва, підпис, бейджі, дії; далі опис,
	   переписка, реквізити. Дії: головна чорна на 100%, решта посиланнями. */
	.kp-topbar-task {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.kp-topbar-task > div:first-child {
		flex: 1 1 auto;
	}

	.kp-topbar-task .kp-title {
		font-size: 22px;
		margin-top: 8px !important;
	}

	/* Правки 299 і 303 (рішення Оксани 06.09.2026): права колонка шапки
	   (.kp-topbar-right = дії + примітка клієнту) стає стосом по центру
	   з кроком 16: чорна кнопка на 100%, під нею примітка про
	   автозакриття (лише в клієнта на «Готово»), далі решта дій
	   посиланнями по центру. .kp-topbar-actions розчиняється
	   (display: contents), щоб примітка стала між кнопкою і посиланнями. */
	.kp-topbar-right {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		width: 100%;
		max-width: none; /* десктопне обмеження 60% тут не потрібне */
		margin: 8px 0 0;
		padding: 0;
	}

	#kp-dashboard-app .kp-topbar-task .kp-topbar-actions {
		display: contents; /* id перебиває #kp-dashboard-app .kp-topbar-actions з kp-design */
	}

	#kp-dashboard-app .kp-topbar-task .kp-topbar-actions .kp-btn-dark {
		order: 0;
		width: 100%;
		justify-content: center;
	}

	.kp-topbar-right .kp-done-note {
		order: 1;
		width: 100%;
		margin: 0;
		text-align: center;
	}

	#kp-dashboard-app .kp-topbar-task .kp-topbar-actions .kp-btn,
	#kp-dashboard-app .kp-topbar-task .kp-topbar-actions .kp-btn-danger {
		order: 2;
		min-height: 0; /* посилання, а не кнопка: правило 286 тут не діє */
		padding: 0;
		border: none;
		background: none;
		color: var(--kp-accent);
		font-size: 13.5px;
		box-shadow: none;
	}

	.kp-task-cols {
		display: flex;
		flex-direction: column;
		align-items: stretch; /* реквізити на всю ширину, а не вузькою колонкою */
		gap: 16px;
	}

	.kp-task-cols > * {
		min-width: 0;
		max-width: 100%;
		width: 100%;
	}

	.kp-task-cols > .kp-card:first-child {
		order: 2; /* реквізити під описом і перепискою */
	}

	.kp-task-work {
		order: 1;
		gap: 16px;
	}

	/* Опис без вкладеної рамки: текст прямо в картці. */
	.kp-desc {
		padding: 0;
		border: none;
		background: transparent;
	}

	/* Переписка. Правка 297 (рішення Оксани 06.09.2026): дата в першому
	   рядку справа, як на десктопі (раніше 248 переносила її на другий
	   рядок, а хрестик видалення падав на третій і лишав порожню дірку
	   між шапкою і текстом). Ім'я обрізається трикрапкою, якщо тісно. */
	.kp-msg-head {
		flex-wrap: nowrap;
		gap: 6px;
		margin-bottom: 6px;
	}

	.kp-msg-time {
		margin-left: auto;
		flex: 0 0 auto;
	}

	/* На телефоні наведення немає, тому дії повідомлення видно завжди,
	   але приглушено; стоять під текстом (298), шапка без запасу справа. */
	.kp-msg-head {
		padding-right: 0;
	}

	.kp-msg-actions {
		position: static;
		display: flex;
		gap: 10px;
		margin-top: 6px;
	}

	.kp-msg-del,
	.kp-msg-reply {
		opacity: 0.6;
	}

	/* «Файл» під полем відповіді посиланням (239). */
	#kp-dashboard-app .kp-reply-actions .kp-btn:not(.kp-btn-dark) {
		padding: 0;
		border: none;
		background: none;
		color: var(--kp-accent);
		box-shadow: none;
	}

	/* Правка 311 (рішення Оксани 06.09.2026): підказка під кнопками
	   вирівнюється так само, як кнопки — тут вони зліва, тож і підказка
	   по лівому краю окремим рядком. */
	.kp-reply-actions .kp-reply-hint {
		flex-basis: 100%;
		margin-left: 0;
		text-align: left;
	}

	/* ── 9. Картки проєкту і клієнта (253) ───────────────────────────── */

	.kp-proj-cols,
	.kp-client-cols {
		grid-template-columns: minmax(0, 1fr); /* колонка не ширша за екран */
		gap: 16px;
	}

	.kp-proj-cols > *,
	.kp-client-cols > *,
	.kp-two-cols > *,
	.kp-pane > .kp-card {
		min-width: 0;
		max-width: 100%;
	}

	.kp-proj-head {
		flex-direction: column;
		align-items: stretch;
	}

	.kp-proj-actions .kp-btn,
	.kp-proj-actions .kp-btn-dark {
		flex: 1 1 0;
		justify-content: center;
	}

	/* Правка 322 (рішення Оксани 06.09.2026): шапка розділу («Усі
	   проєкти», «Клієнти») ховається і в картці проєкту, картці клієнта
	   та формах проєкту/клієнта, як у картці задачі: лишається лише
	   «← Назад» / «← До списку». Ознака: рядок .kp-back-row із .kp-back
	   першим у панелі (у «Керуванні» стрілка інша, data-back-manage). */
	.kp-main:has(.kp-pane-active > .kp-back-row > .kp-back) > .kp-topbar {
		display: none;
	}

	/* 322: шкала шапки картки: стрілка → 8 → назва → 4 → підпис → 8 →
	   бейджі → 16 → перший блок. Gap панелі 16, тому стрілці даємо -8. */
	.kp-pane-active > .kp-back-row {
		margin-bottom: -8px;
	}

	.kp-proj-head {
		gap: 16px; /* між текстовим блоком і кнопками дій */
	}

	.kp-proj-sub2 {
		margin-top: 4px;
	}

	.kp-proj-head .kp-card-badges {
		margin: 8px 0 0;
	}

	/* Правка 328 (06.09.2026): віджет стадій на мобайлі. «Стадія 3 з 6»
	   до правого краю рядка заголовка; шкала від лівого краю, гортається;
	   «Повернути назад» зліва, «Далі» справа в один ряд (десктопні order
	   з 327 діють). */
	.kp-stages > .kp-card-head > .kp-legend {
		margin-left: auto;
		white-space: nowrap;
	}

	.kp-stage:first-child,
	.kp-stage:last-child {
		flex: 0 0 auto; /* на телефоні шкала гортається, крайні комірки за вмістом */
		min-width: 72px;
	}

	#kp-dashboard-app .kp-stage-acts .kp-btn-dark {
		width: auto; /* «Далі» не на 100 %: у ряду зі стрілкою назад */
		min-height: 40px;
	}

	.kp-stage-acts [data-stage-msg]:empty {
		display: none; /* порожнє повідомлення не розпихає кнопки */
	}

	/* Правка 329 (рішення Оксани 06.09.2026): у картці проєкту спершу
	   картка з вкладками, реквізити під нею (як у задачі, 247). Правка
	   333: те саме в картці клієнта: вкладки одразу після контактів. */
	.kp-proj-cols > .kp-card:first-child {
		order: 2;
	}

	.kp-client-cols > .kp-client-left {
		display: contents; /* блоки лівої колонки стають сусідами картки з вкладками */
	}

	.kp-client-left > * {
		order: 3; /* нотатки, доступ, «Видалити» під картку з вкладками */
		min-width: 0;
		max-width: 100%;
	}

	.kp-client-left > .kp-balance {
		order: 0;
	}

	.kp-client-left > .kp-client-contacts {
		order: 1;
	}

	.kp-client-cols > .kp-card {
		order: 2; /* картка з вкладками одразу після контактів */
	}

	/* Правки 330, 333 (06.09.2026): «+ Задача в цей проєкт» і «+ Додати
	   проєкт клієнту» на мобайлі чорні і на 100 % (десктоп з обводкою). */
	#kp-dashboard-app [data-add-task-here],
	#kp-dashboard-app [data-add-project-here] {
		width: 100%;
		justify-content: center;
		border-color: var(--kp-dark);
		background: var(--kp-dark);
		color: #fff;
	}

	.kp-ppane > .kp-actions:has(> [data-add-project-here]) {
		display: block;
		margin-top: 16px !important; /* інлайновий margin-top:12px у розмітці; крок шкали 16 */
	}

	/* Правка 334 (06.09.2026): плитки фінансів (.kp-fin-summary) під
	   правило шпаргалки п. 5: 2 колонки, непарна перша на 100 %. */
	.kp-fin-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.kp-fin-summary > .kp-fin-cell:first-child:nth-last-child(odd) {
		grid-column: 1 / -1;
	}

	/* Правка 335 (рішення Оксани 06.09.2026): у кабінеті клієнта,
	   Фінанси → Нарахування, кожен проєкт окремою білою карткою з
	   контуром, щоб блоки не зливались із фоном. Лінія-розділювач 161
	   на мобайлі не потрібна. */
	.kp-accrual-project {
		padding: 16px;
		border: 1px solid var(--kp-line);
		border-radius: var(--kp-radius);
		background: var(--kp-surface);
	}

	.kp-accrual-project + .kp-accrual-project {
		margin-top: 12px;
		padding-top: 16px;
		border-top: 1px solid var(--kp-line);
	}

	.kp-accrual-project > .kp-card-title {
		margin-bottom: 6px;
	}

	.kp-accrual-project > .kp-legend {
		margin-top: 0;
	}

	.kp-accrual-project .kp-package {
		margin-top: 12px;
	}

	/* Правка 339 (06.09.2026): у вкладці «Документи» картки проєкту/
	   клієнта між «Скинути фільтри» і таблицею 16, як у решти фільтрів. */
	[data-project-docs] > .kp-filters,
	[data-client-docs] > .kp-filters {
		margin-bottom: 16px !important;
	}

	/* ── 10. Форми і вікна ───────────────────────────────────────────── */

	.kp-modal-backdrop {
		padding: 10px;
		align-items: flex-start;
	}

	.kp-modal {
		max-height: calc(100vh - 20px);
		padding: 18px 16px;
	}

	.kp-form-grid2 {
		grid-template-columns: 1fr; /* у вузькому вікні поля стовпчиком */
	}

	/* Чекбокси списком з кроком 8 (266). */
	.kp-form-grid2 > .kp-check + .kp-check {
		margin-top: -8px;
	}

	/* Правка 288 (06.09.2026): підвал форми задачі стосом — «Зберегти»
	   чорною на 100%, «Скасувати» посиланням по центру, підказка про
	   аудит-лог під ними по лівому краю в межах картки (раніше
	   margin-left:auto виштовхував її за край). Шпаргалка п. 7. */
	.kp-form-footer {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	#kp-dashboard-app .kp-form-footer .kp-btn-dark {
		width: 100%;
		justify-content: center;
	}

	#kp-dashboard-app .kp-form-footer .kp-form-cancel {
		align-self: center;
	}

	/* Правка 301 (рішення Оксани 06.09.2026): підказка по центру, як і
	   кнопки над нею (правило 311: підказка повторює вирівнювання кнопок). */
	#kp-dashboard-app .kp-form-footer .kp-form-hint {
		margin: 0;
		align-self: center;
		text-align: center;
		max-width: 100%;
	}

	/* Правка 300 (рішення Оксани 06.09.2026): у формі редагування
	   задачі шапки розділу теж немає (як у формі нової, 290); стрілка
	   «← Назад» лишається і веде в картку, з якої відкрили форму. */
	.kp-main:has(.kp-pane-active .kp-topbar-form) > .kp-topbar {
		display: none;
	}

	/* Правка 331 (рішення Оксани 06.09.2026): форми проєкту й клієнта
	   (.kp-form у картці форми): між полями 16, підказка під полем через
	   6 і не наїжджає на нього; підвал стосом: чорна на 100 %,
	   «Скасувати» посиланням по центру (шпаргалка п. 8). */
	.kp-form {
		gap: 16px;
	}

	.kp-form .kp-form-grid3,
	.kp-form-block {
		gap: 16px;
	}

	#kp-dashboard-app .kp-form > .kp-form-hint {
		margin: -8px 0 0; /* gap 16 мінус 8 = підказка через 8 під полем */
	}

	.kp-form > .kp-actions {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		margin-top: 8px;
	}

	#kp-dashboard-app .kp-form > .kp-actions .kp-btn-dark {
		width: 100%;
		justify-content: center;
	}

	#kp-dashboard-app .kp-form > .kp-actions .kp-btn:not(.kp-btn-dark) {
		min-height: 0;
		padding: 0;
		border: none;
		background: none;
		color: var(--kp-accent);
		font-size: 13.5px;
		box-shadow: none;
	}
}

/* Правка 257: адмін-бар WordPress на телефоні 46px. */
@media (max-width: 782px) {
	body.admin-bar .kp-mbar {
		top: 56px;
	}

	body.admin-bar .kp-mbar .kp-bell-panel,
	body.admin-bar .kp-mbar .kp-search-panel {
		top: 116px;
	}
}

/* Малі телефони: ще щільніше. */
@media (max-width: 480px) {
	.kp-app {
		padding: 8px;
	}

	.kp-table td.kp-cell-title,
	.kp-table td:has(> .kp-cell-title),
	.kp-table td:has(> .kp-cell-title) .kp-cell-title {
		width: 120px;
	}

	.kp-stat-value {
		font-size: 20px;
	}
}

/* ═══ Правка 347 (1.0.0, 07.09.2026): майстер першого запуску ═══ */

/* Сцена майстра: одна картка по центру кабінету, як екран входу. */
.kp-setup {
	display: flex; /* центрування картки */
	align-items: flex-start; /* по верху: картка може бути високою (реквізити) */
	justify-content: center; /* по горизонталі */
	min-height: 70vh; /* сцена займає екран, а не висить угорі */
	padding: 24px 0; /* повітря зверху і знизу */
}

/* Картка майстра: ширша за вхід, бо всередині сітка реквізитів. */
.kp-setup-card {
	width: 100%; /* тягнеться до ліміту */
	max-width: 640px; /* зручна ширина форми */
	padding: 30px 32px 26px; /* просторі відступи */
	box-shadow: 0 18px 50px rgba(26, 21, 35, 0.08); /* «парить» над градієнтом, як картка входу */
}

/* Заголовок кроку. */
.kp-setup-title {
	margin: 0 0 8px; /* щільно до тексту під ним */
	font-size: 22px; /* помітний, але не як h1 теми */
	font-weight: 700; /* жирний заголовок */
	letter-spacing: -0.01em; /* легке стиснення Raleway */
}

/* Пояснення під заголовком. */
.kp-setup-text {
	margin: 0 0 18px; /* відступ до полів */
	color: var(--kp-muted); /* другорядний текст */
	font-size: 13.5px; /* трохи дрібніше за основний */
}

/* Рядок прогресу: «Крок 1 з 4» і смужка. */
.kp-setup-progress {
	display: flex; /* підпис і смужка в один рядок */
	align-items: center; /* по центру */
	gap: 12px; /* зазор між підписом і смужкою */
	margin-bottom: 18px; /* відступ до заголовка */
}

.kp-setup-step {
	flex: 0 0 auto; /* підпис не стискається */
	color: var(--kp-muted); /* приглушений підпис */
	font-size: 12.5px; /* дрібний */
	font-weight: 600; /* напівжирний як службові підписи */
}

/* Смужка прогресу: сіра доріжка і бузкова заливка. */
.kp-setup-bar {
	flex: 1 1 auto; /* тягнеться на решту ширини */
	height: 6px; /* тонка смужка */
	border-radius: 999px; /* округлі краї */
	background: var(--kp-line); /* доріжка */
	overflow: hidden; /* заливка не вилазить за скруглення */
}

.kp-setup-bar-fill {
	display: block; /* span як блок, щоб мати ширину */
	height: 100%; /* на всю висоту доріжки */
	border-radius: 999px; /* округлі краї заливки */
	background: var(--kp-accent); /* фірмовий бузковий */
	transition: width 0.25s ease; /* плавний рух між кроками */
}

/* Кнопки внизу кроку: «Назад», «Пропустити», «Далі» і повідомлення. */
.kp-setup-actions {
	display: flex; /* кнопки в ряд */
	flex-wrap: wrap; /* на вузькому переносяться */
	align-items: center; /* по центру */
	gap: 10px; /* зазор між кнопками */
	margin-top: 20px; /* відступ від полів */
}

/* «Далі» стоїть останньою праворуч; повідомлення після неї переноситься. */
.kp-setup-actions [data-setup-next] {
	margin-left: auto; /* притискаємо до правого краю */
}

/* Дві великі кнопки фінішу: ті самі картки, що в «Керуванні». */
.kp-setup-finish {
	display: grid; /* дві картки поруч */
	grid-template-columns: 1fr 1fr; /* порівну */
	gap: 12px; /* зазор */
}

/* Поля кроку одне під одним із рівним ритмом (поза сіткою реквізитів). */
.kp-setup-card > .kp-field {
	margin-bottom: 14px; /* відступ між полями кроку 1 і 2 */
}

/* Логотип панелі в майстрі: та сама темна підкладка, що в «Керуванні». */
.kp-setup .kp-panel-logo {
	margin-top: 4px; /* невеликий відступ від підпису поля */
}

/* Правка 348: стан демо у вікні «Демо-дані». */
.kp-demo-state {
	margin: 0 0 8px; /* щільно до кнопок */
	font-weight: 600; /* помітний рядок стану */
}

/* Таблиця демо-користувачів: компактна, без зайвих відступів. */
.kp-demo-users td,
.kp-demo-users th {
	padding: 7px 10px; /* щільніше за робочі таблиці */
	font-size: 13px; /* дрібніше */
}

/* Телефон: картка майстра на всю ширину, кнопки фінішу одна під одною. */
@media (max-width: 900px) {
	.kp-setup {
		padding: 8px 0; /* без зайвого повітря */
		min-height: 0; /* висоту задає вміст */
	}

	.kp-setup-card {
		padding: 20px 16px 18px; /* компактні відступи */
	}

	.kp-setup-title {
		font-size: 19px; /* трохи менший заголовок */
	}

	.kp-setup-finish {
		grid-template-columns: 1fr; /* картки одна під одною */
	}

	/* Кнопки кроку на всю ширину, «Далі» першою (order), щоб була під пальцем. */
	.kp-setup-actions {
		flex-direction: column; /* стовпчиком */
		align-items: stretch; /* кнопки на всю ширину */
	}

	.kp-setup-actions [data-setup-next] {
		margin-left: 0; /* без притискання праворуч у стовпчику */
		order: -1; /* головна кнопка зверху */
	}
}