/* ═══════════════════════════════════════════════════════════════
   Клієнтська панель — дизайн-система, версія 2 (копія в плагіні).
   Джерело правди макетів: prototypes/kp-design.css. Відмінності
   від прототипної версії — лише технічні, і кожна прокоментована:

   1. Стилі body перенесено на обгортку .kp-app: плагін живе на
      сторінці сайту й не має права перефарбовувати всю сторінку
      разом із шапкою та футером теми.
   2. Токени оголошено на .kp-app, а не на :root — щоб змінні
      плагіна не протікали в тему й навпаки.
   3. @import шрифту прибрано: Raleway підключається через
      wp_enqueue_style у class-kp-frontend.php (так браузер
      не блокує парсинг CSS на час завантаження шрифту).

   Кожне окреме правило прокоментоване.
   ═══════════════════════════════════════════════════════════════ */

/* ── Токени ──────────────────────────────────────────────────── */

/* Модальні вікна живуть у <body>, поза блоком .kp-app — інакше
   position:fixed зламався б, якби в предків теми був transform.
   Тому токени оголошуємо і для них: без цього var(--kp-surface)
   не резолвиться, і вікно виходить зовсім прозорим (правка 14.08). */
.kp-app,
.kp-modal-backdrop {
	--kp-bg-1: #fbfaff; /* верхній лівий край градієнта — майже білий з бузковим підтоном */
	--kp-bg-2: #f6f7ff; /* середина — трохи холодніша, ледь блакитна */
	--kp-bg-3: #fdfaff; /* нижній правий край — майже білий з рожевуватим підтоном */
	--kp-surface: #ffffff; /* картки й панелі — чисто білі */
	--kp-surface-soft: #f0eff9; /* підкладка блоків: помітний бузковий відтінок, а не ледь сірий */
	--kp-line: #e5e3f0; /* роздільники й рамки — трохи щільніші, щоб тримати межу на світлому тлі */
	--kp-ink: #16151c; /* основний текст, майже чорний */
	--kp-muted: #6f6b7d; /* підписи полів і службовий текст */
	--kp-faint: #a5a1b3; /* підказки, неактивне, плейсхолдери */
	--kp-dark: #17161f; /* темне меню й головні кнопки */
	--kp-dark-soft: #262433; /* наведення на темні елементи */
	--kp-accent: #6d5ae6; /* бузковий акцент: активний пункт, посилання */
	--kp-accent-soft: #efecff; /* світла заливка під бузковим акцентом */
	--kp-red: #c53434; /* прострочено, критичний пріоритет */
	--kp-red-soft: #ffe9e9; /* тло червоних бейджів і рядків */
	--kp-amber: #a86400; /* високий пріоритет, попередження */
	--kp-amber-soft: #fff2df; /* тло бурштинових бейджів і рядків */
	--kp-green: #1f7a52; /* готово, позитивний баланс */
	--kp-green-soft: #e6f6ee; /* тло зелених бейджів */
	--kp-radius-sm: 10px; /* поля вводу, дрібні плашки */
	--kp-radius: 16px; /* картки */
	--kp-radius-lg: 24px; /* зовнішня панель кабінету й ліве меню */
	--kp-radius-pill: 999px; /* капсульні кнопки, бейджі, аватарки */
	--kp-shadow: 0 2px 10px rgba(23, 22, 31, 0.05); /* м'яка тінь карток */
	--kp-shadow-lg: 0 10px 40px rgba(23, 22, 31, 0.08); /* тінь зовнішньої панелі */
	--kp-font: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Raleway з системним запасним варіантом */
}

/* ── Каркас кабінету ─────────────────────────────────────────── */

.kp-app,
.kp-app * {
	box-sizing: border-box; /* padding усередині кабінету не роздуває ширину; глобальний * не чіпаємо — це чужа сторінка */
}

/* Шрифт кабінету добиваємо селектором з id (правка 0.7.2): Elementor-кіт
   задає гарнітуру прямими селекторами (h1, p, span…), які перемагають
   успадкування від .kp-app — у реальній збірці кабінет рендерився
   шрифтом кіта, хоча прототип у тих самих браузерах показував Raleway.
   Id сильніший за будь-який клас кіта, тож перемагаємо без !important. */
#kp-dashboard-app,
#kp-dashboard-app * {
	font-family: var(--kp-font); /* Raleway на всьому вмісті кабінету, включно з заголовками й кнопками */
}

/* Іконкові шрифти НЕ чіпаємо (правка 0.7.3): примусовий Raleway з
   правила вище перетворював кнопки редактора TinyMCE на порожні
   квадратики — їхні «літери» існують лише у власних шрифтах іконок. */
#kp-dashboard-app .mce-ico {
	font-family: 'tinymce', Arial; /* іконковий шрифт панелі TinyMCE */
}

#kp-dashboard-app .dashicons,
#kp-dashboard-app .dashicons-before::before {
	font-family: 'dashicons'; /* системні іконки WordPress */
}

/* Кнопки панелі TinyMCE (правка 0.7.4, задача №111): кіт Elementor
   фарбував їхні іконки в білий (невидимі на білому тулбарі), а hover
   заливав малиновим. Повертаємо штатні кольори редактора. */
#kp-dashboard-app .mce-container button {
	background: transparent; /* без заливки кнопок кіта */
	border-color: transparent; /* без рамки кіта */
	box-shadow: none; /* без тіней кіта */
	color: #555d66; /* штатний колір іконок TinyMCE у WordPress */
}

#kp-dashboard-app .mce-container button:hover,
#kp-dashboard-app .mce-container .mce-btn:hover {
	background: rgba(0, 0, 0, 0.06); /* легке сіре підсвічування замість малинового кіта */
	color: #23282d; /* іконка трохи темніє */
}

/* Сама іконка — «бронежилет» (0.7.5): три ітерації показали, що кіт
   глушить гліф різними шляхами (шрифт → колір → ще щось), тому в цьому
   вузькому селекторі фіксуємо ВСІ властивості, здатні сховати гліф.
   !important тут безпечний: селектор стосується лише іконок редактора. */
#kp-dashboard-app .mce-ico {
	/* САМЕ dashicons, не tinymce (з'ясовано через DevTools Оксани,
	   0.7.6): WordPress перевизначає іконки TinyMCE кодами свого
	   шрифту dashicons — у гарнітурі tinymce цих гліфів немає,
	   тому попередній фікс давав порожнечу. */
	font-family: 'dashicons', 'tinymce' !important; /* штатний іконковий шрифт WP + запас */
	color: #555d66 !important; /* сірий гліф — кіт фарбував у білий */
	font-size: 20px !important; /* штатний розмір іконок dashicons у редакторі */
	line-height: 1 !important; /* гліф по центру кнопки */
	font-weight: 400 !important; /* dashicons існує лише в звичайній вазі */
	text-indent: 0 !important; /* деякі кити ховають текст кнопок відступом */
	opacity: 1 !important; /* і прозорістю */
	text-shadow: none !important; /* без тіней тексту кіта */
	display: inline-block !important; /* кіт міг сховати display:none для i/span у кнопках */
}

/* Контроли кабінету добиваємо тим самим id-прийомом (правка 0.7.3):
   кіт Elementor прямими селекторами button/select перебивав радіуси
   й рамки однокласових компонентів — кнопки-іконки ставали
   квадратними з рожевою рамкою кіта. */
#kp-dashboard-app .kp-icon-btn {
	display: inline-flex; /* кіт міняє display кнопок — центрування ламалось */
	align-items: center; /* іконка по центру вертикалі */
	justify-content: center; /* і по центру горизонталі */
	width: 40px; /* фіксований діаметр — кіт розтягував кнопку своїми відступами */
	height: 40px; /* однакова висота */
	min-height: 0; /* кіт ставить кнопкам min-height — коло ставало овалом */
	border-radius: var(--kp-radius-pill); /* коло, а не прямокутник кіта */
	border: 1px solid var(--kp-line); /* тонка сіра рамка замість кольору кіта */
	background: var(--kp-surface); /* біла заливка */
	color: var(--kp-ink); /* темна іконка */
	padding: 0; /* кіт додає кнопкам власні відступи — коло пливе */
	line-height: 1; /* без роздутого рядка від кіта */
	box-shadow: none; /* без тіней кнопок кіта */
}

/* Контейнер дій топбара — теж явно: кіт інколи скидає flex і кнопки
   злипаються в один блок (скріншот Оксани 13.08). */
#kp-dashboard-app .kp-topbar-actions {
	display: flex; /* кнопки в ряд */
	align-items: center; /* по центру */
	gap: 10px; /* просвіт між кнопками — без злипання */
}

#kp-dashboard-app .kp-btn,
#kp-dashboard-app .kp-btn-dark,
#kp-dashboard-app .kp-btn-danger,
#kp-dashboard-app .kp-tab,
#kp-dashboard-app .kp-filter {
	border-radius: var(--kp-radius-pill); /* капсули не перебиваються радіусом кіта */
}

#kp-dashboard-app .kp-btn-ghost,
#kp-dashboard-app .kp-back {
	background: none; /* кнопки-посилання без заливки кіта */
	border: none; /* і без його рамки */
	border-radius: 0; /* радіус їм не потрібен */
	padding: 0; /* відступи кіта прибираємо */
	/* Колір тримаємо примусово: тема фарбує посилання й кнопки своїм
	   кольором правилами, які перебивають навіть id-скоуп (правка
	   0.10.0.4 — до неї кнопки були то вишневі, то сині). */
	color: var(--kp-accent) !important;
}

#kp-dashboard-app .kp-btn-ghost:hover,
#kp-dashboard-app .kp-back:hover {
	color: var(--kp-dark) !important; /* на наведення лише темніємо */
}

/* «Видалити» теж у фірмовому бузковому (рішення Оксани 17.08:
   без вишневого). Захист від випадкового кліку дає confirm-діалог. */
#kp-dashboard-app .kp-btn-ghost.kp-svc-del {
	color: var(--kp-accent) !important;
}

#kp-dashboard-app .kp-btn-ghost.kp-svc-del:hover {
	color: var(--kp-dark) !important;
}

/* Обгортка кабінету — те, чим у прототипі був body. */
.kp-app {
	margin: 0; /* не додаємо зовнішніх відступів — ними керує тема */
	padding: 28px; /* повітря навколо кабінету */
	border-radius: var(--kp-radius-lg); /* кабінет — скруглений блок на сторінці теми, а не вся сторінка */
	background: linear-gradient(135deg, var(--kp-bg-1) 0%, var(--kp-bg-2) 50%, var(--kp-bg-3) 100%); /* бузковий градієнт по діагоналі */
	/* background-attachment: fixed із прототипу прибрано: для окремого
	   блока (не body) він прив'язує градієнт до вікна, і фон «їде»
	   відносно кабінету при прокрутці. */
	font-family: var(--kp-font); /* Raleway на всьому інтерфейсі кабінету */
	font-size: 14px; /* базовий розмір тексту */
	font-weight: 500; /* не 400: звичайне накреслення Raleway надто тонке для інтерфейсу */
	line-height: 1.5; /* власна висота рядка — не успадковуємо від теми */
	color: var(--kp-ink); /* основний колір тексту */
	/* Свідомо НЕ ставимо -webkit-font-smoothing: antialiased — саме він
	   робив текст у Safari помітно тоншим, ніж у Chrome. Мало того:
	   Hello Elementor ставить antialiased на body, і кабінет його
	   успадковував — тому явно повертаємо системне згладжування
	   (правка 0.7.1, скарга на тонкий шрифт у Safari). */
	-webkit-font-smoothing: auto; /* перебиваємо antialiased від теми */
	-moz-osx-font-smoothing: auto; /* те саме для Firefox на macOS */
	font-synthesis: none; /* Safari не «домальовує» ваги, яких немає в підключеному шрифті, — якщо тема вантажить свій Raleway з неповним набором, накреслення не пливе */
}

/* Зовнішня оболонка: темне меню ліворуч, робоча область праворуч. */
.kp-shell {
	display: grid; /* дві колонки фіксованої структури */
	grid-template-columns: 236px 1fr; /* меню фіксоване, контент забирає решту */
	gap: 20px; /* просвіт між меню й контентом — фон градієнта видно */
	max-width: 1440px; /* не розтягуємо на надширокі монітори */
	margin: 0 auto; /* центруємо оболонку */
	min-height: 80vh; /* у прототипі calc(100vh - 56px); тут кабінет ділить екран із шапкою теми, тож беремо 80% висоти вікна */
}

@media (max-width: 900px) {
	.kp-shell {
		grid-template-columns: 1fr; /* на вузькому екрані меню лягає зверху */
	}
}

/* ── Іконки інтерфейсу (правка 0.7.3) ────────────────────────── */

/* Монохромні SVG-іконки замість емоджі: колір беруть із тексту
   елемента (stroke: currentColor у самій розмітці іконки). */
.kp-ico {
	width: 17px; /* розмір іконки під 14px текст меню */
	height: 17px; /* квадратна */
	flex: 0 0 auto; /* не стискається в рядку пункту меню */
}

/* ── Ліве меню ───────────────────────────────────────────────── */

.kp-nav {
	display: flex; /* вміст меню — вертикальний потік */
	flex-direction: column; /* лого зверху, профіль знизу */
	padding: 22px 16px; /* внутрішні відступи меню */
	background: var(--kp-dark); /* темна панель */
	border-radius: var(--kp-radius-lg); /* велике скруглення — меню як окрема картка */
	color: #fff; /* білий текст на темному */
}

.kp-nav-logo {
	display: flex; /* значок і назва в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 10px; /* зазор між значком і назвою */
	margin-bottom: 26px; /* відступ до списку пунктів */
	font-size: 16px; /* трохи більший за пункти меню */
	font-weight: 700; /* жирний — це назва системи */
}

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

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

.kp-nav-group {
	margin: 18px 0 8px; /* відступи навколо підпису групи пунктів */
	padding-left: 12px; /* вирівнюємо з текстом пунктів */
	color: rgba(255, 255, 255, 0.35); /* дуже приглушений — це службовий підпис */
	font-size: 11px; /* найдрібніший розмір */
	font-weight: 600; /* напівжирний, щоб читався */
	letter-spacing: 0.04em; /* легкий розряд для дрібного тексту */
	text-transform: uppercase; /* назви груп капсом, як у референсах */
}

.kp-nav-item {
	display: flex; /* іконка, назва й лічильник в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 11px; /* зазор між іконкою й назвою */
	width: 100%; /* пункт на всю ширину меню */
	margin-bottom: 2px; /* щільний вертикальний ритм між пунктами */
	padding: 10px 12px; /* внутрішні відступи пункту */
	border: none; /* пункт меню — не кнопка з рамкою */
	border-radius: 11px; /* скруглення підсвітки пункту */
	background: none; /* без заливки, поки не активний */
	color: rgba(255, 255, 255, 0.66); /* неактивний пункт приглушений */
	font-family: inherit; /* Raleway, а не системний шрифт кнопки */
	font-size: 14px; /* базовий розмір */
	text-align: left; /* текст ліворуч */
	cursor: pointer; /* курсор-рука */
}

.kp-nav-item:hover {
	background: rgba(255, 255, 255, 0.06); /* ледь помітна підсвітка при наведенні */
	color: #fff; /* текст стає яскравішим */
}

.kp-nav-item-active {
	background: #fff; /* активний пункт — біла плашка, максимальний контраст */
	color: var(--kp-ink); /* темний текст на білому */
	font-weight: 600; /* напівжирний */
}

/* Розділ, якого ще немає в плагіні (план релізів): пункт видно,
   але він неактивний — видно дорожню карту, клік нічого не робить. */
.kp-nav-item-soon {
	color: rgba(255, 255, 255, 0.28); /* блідіший за звичайний неактивний пункт */
	cursor: default; /* без курсора-руки — натискати нема на що */
}

.kp-nav-item-soon:hover {
	background: none; /* підсвітку наведення вимикаємо — пункт не реагує */
	color: rgba(255, 255, 255, 0.28); /* колір не міняється при наведенні */
}

/* Підпис «(скоро)» біля недобудованого розділу. */
.kp-nav-soon-mark {
	margin-left: auto; /* притискаємо до правого краю пункту, як лічильник */
	font-size: 10.5px; /* найдрібніший службовий розмір */
	font-weight: 500; /* без напівжирного — це шепіт, не акцент */
}

.kp-nav-count {
	margin-left: auto; /* лічильник притиснутий до правого краю пункту */
	padding: 1px 8px; /* компактні відступи лічильника */
	border-radius: var(--kp-radius-pill); /* капсула */
	background: rgba(255, 255, 255, 0.12); /* ледь світліше за фон меню */
	font-size: 11.5px; /* дрібний розмір */
	font-weight: 600; /* напівжирний, щоб цифра читалась */
}

.kp-nav-item-active .kp-nav-count {
	background: var(--kp-accent-soft); /* на білій плашці лічильник бузковий */
	color: var(--kp-accent); /* бузковий текст */
}

.kp-nav-bottom {
	margin-top: auto; /* профіль притискаємо до низу меню */
	padding-top: 16px; /* відступ від останнього пункту */
	border-top: 1px solid rgba(255, 255, 255, 0.08); /* тонка лінія над профілем */
}

.kp-nav-user {
	display: flex; /* аватар і текст в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 10px; /* зазор між аватаром і текстом */
	padding: 8px 4px; /* невеликі відступи блоку профілю */
}

.kp-nav-user-name {
	font-size: 13.5px; /* трохи дрібніше за пункти меню */
	font-weight: 600; /* напівжирний — це ім'я */
}

.kp-nav-user-role {
	color: rgba(255, 255, 255, 0.45); /* приглушений підпис ролі */
	font-size: 11.5px; /* дрібний розмір */
}

/* Перемикач сайтів у темному меню кабінету клієнта (розділ 2 ТЗ).
   У клієнта може бути кілька сайтів, і фінанси в кожного свої,
   тож вибір сайту визначає весь екран. Стоїть одразу під лого,
   бо це контекст, а не ще один розділ. */
.kp-nav-switch {
	width: 100%; /* на всю ширину меню */
	height: 38px; /* під висоту пункту меню */
	margin-bottom: 6px; /* відступ до першої групи розділів */
	padding: 6px 30px 6px 12px; /* праворуч місце під стрілку */
	border: 1px solid rgba(255, 255, 255, 0.14); /* світла рамка на темному */
	border-radius: 11px; /* те саме скруглення, що й у пунктів меню */
	background-color: rgba(255, 255, 255, 0.07); /* ледь світліше за фон меню */
	color: #fff; /* білий текст */
	font-family: inherit; /* Raleway */
	font-size: 13.5px; /* як у пунктів меню */
	font-weight: 600; /* напівжирний — це важливий вибір */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* біла стрілка замість темної */
	background-repeat: no-repeat; /* одна стрілка */
	background-position: right 11px center; /* притискаємо до правого краю */
	background-size: 11px 7px; /* фіксований розмір стрілки */
	appearance: none; /* прибираємо системний вигляд */
	-webkit-appearance: none; /* те саме для Safari */
	cursor: pointer; /* курсор-рука */
}

/* ── Робоча область ──────────────────────────────────────────── */

.kp-main {
	display: flex; /* шапка й контент вертикальним потоком */
	flex-direction: column; /* один під одним */
	gap: 18px; /* просвіт між блоками робочої області */
	min-width: 0; /* дозволяє таблиці стискатись, а не розпирати сітку */
}

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

/* Коли шапка стоїть усередині панелі розділу, вертикальний зазор
   від .kp-main на неї не діє — блоки злипаються з підзаголовком.
   Тому тут відступ задаємо явно. */
.kp-pane > .kp-topbar {
	margin-bottom: 22px; /* повітря між шапкою й першим блоком розділу */
}

.kp-title {
	margin: 0; /* прибираємо типовий відступ заголовка */
	font-size: 26px; /* великий заголовок екрана, як у референсах */
	font-weight: 700; /* жирний */
	letter-spacing: -0.01em; /* легке стиснення — Raleway у великому кеглі дихає надто широко */
	color: inherit; /* тема може фарбувати h1 у свій колір — повертаємо чорнило кабінету */
	font-family: inherit; /* і шрифт заголовків теми теж перебиваємо на Raleway */
}

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

.kp-topbar-actions {
	display: flex; /* дії шапки в ряд */
	align-items: center; /* вирівнювання по центру */
	gap: 10px; /* зазор між діями */
	margin-left: auto; /* притискаємо дії до правого краю */
}

/* Кругла кнопка-іконка: пошук, сповіщення. */
.kp-icon-btn {
	display: flex; /* центруємо іконку всередині */
	align-items: center; /* по вертикалі */
	justify-content: center; /* по горизонталі */
	position: relative; /* точка прив'язки для крапки сповіщення */
	width: 40px; /* діаметр кнопки */
	height: 40px; /* діаметр кнопки */
	border: 1px solid var(--kp-line); /* ледь помітна рамка */
	border-radius: var(--kp-radius-pill); /* коло */
	background: var(--kp-surface); /* біла заливка */
	cursor: pointer; /* курсор-рука */
	font-size: 15px; /* розмір іконки */
}

.kp-icon-btn:hover {
	background: var(--kp-surface-soft); /* легка підсвітка; явно, щоб hover теми не заливав кнопку своїм кольором (правка 0.7.1) */
	color: var(--kp-ink); /* іконка лишається темною */
}

.kp-icon-dot {
	position: absolute; /* крапка поверх кнопки */
	top: 9px; /* відступ від верху кнопки */
	right: 10px; /* відступ від правого краю */
	width: 7px; /* діаметр крапки */
	height: 7px; /* діаметр крапки */
	border: 2px solid var(--kp-surface); /* біла обвідка відділяє крапку від іконки */
	border-radius: var(--kp-radius-pill); /* коло */
	background: var(--kp-red); /* червона — є непрочитане */
}

/* ── Картки ──────────────────────────────────────────────────── */

.kp-card {
	padding: 22px; /* внутрішні відступи картки */
	background: var(--kp-surface); /* біла картка */
	border: 1px solid var(--kp-line); /* тонка рамка: на майже білому тлі сама лише тінь не тримає межу */
	border-radius: var(--kp-radius); /* скруглення картки */
	box-shadow: var(--kp-shadow); /* м'яка тінь додає глибини поверх рамки */
}

.kp-card-tight {
	padding: 16px 18px; /* щільніша картка — для списків і таблиць */
}

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

/* Правка 163 (02.09.2026): рядок над таблицею задач у картці проєкту —
   кнопка ліворуч, вкладки притиснуті до правого краю. */
.kp-card-head-spread {
	justify-content: space-between; /* крайні елементи по краях рядка */
}

.kp-card-title {
	margin: 0; /* прибираємо типовий відступ */
	font-size: 16px; /* заголовок картки */
	font-weight: 700; /* жирний */
	color: inherit; /* перебиваємо колір заголовків теми */
	font-family: inherit; /* перебиваємо шрифт заголовків теми */
}

/* Дрібний підпис секції всередині картки — коли карток не плодимо,
   а треба розділити вміст на смислові блоки. */
.kp-section-label {
	margin: 20px 0 10px; /* більший відступ зверху: це роздільник секцій */
	color: var(--kp-muted); /* приглушений сірий */
	font-size: 12px; /* дрібний службовий розмір */
	font-weight: 600; /* напівжирний, щоб читався на дрібному кеглі */
}

/* ── Плитки показників ───────────────────────────────────────── */

.kp-stats {
	display: grid; /* плитки рівними колонками */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); /* стільки колонок, скільки влазить */
	gap: 14px; /* зазор між плитками */
}

.kp-stat {
	padding: 18px 20px; /* внутрішні відступи плитки */
	border: 1px solid var(--kp-line); /* тонка рамка — з тієї ж причини, що й у картки */
	border-radius: var(--kp-radius); /* скруглення як у карток */
	background: var(--kp-surface); /* біла за замовчуванням */
	box-shadow: var(--kp-shadow); /* та сама м'яка тінь */
}

.kp-stat-label {
	color: var(--kp-muted); /* приглушений підпис показника */
	font-size: 12.5px; /* дрібний розмір */
	font-weight: 500; /* трохи щільніший за звичайний */
}

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

/* Кабінет клієнта (0.10.5): на плитці буває пояснення під цифрою
   («до сплати», «нових: 2») і список замість однієї цифри. */
.kp-stat-note {
	margin-top: 6px; /* відступ від цифри */
	color: var(--kp-muted); /* пояснення тихіше за цифру */
	font-size: 12.5px;
	line-height: 1.45;
}

/* Дрібне уточнення в рядку цифри: «у роботі», назва сайту. */
.kp-stat-unit {
	color: var(--kp-muted);
	font-size: 12.5px;
	font-weight: 500;
}

/* Плитка-список (активні послуги): замість однієї великої цифри
   кілька рядків, тому власний розмір шрифту. */
.kp-stat-lines .kp-stat-line {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* На чорній плитці пояснення сірим не читається — освітлюємо.
   Правка Оксани 31.08: баланс клієнта завжди на чорній плитці. */
.kp-stat-dark .kp-stat-note,
.kp-stat-dark .kp-stat-unit {
	color: rgba(255, 255, 255, 0.65);
}

/* На червоній плитці пояснення теж не має бути сірим: на м'якому
   червоному тлі воно стає нечитабельним. */
.kp-stat-red .kp-stat-note {
	color: var(--kp-red, #c0392b);
}

/* Кольорові плитки — колір несе сенс, а не просто прикрашає. */
.kp-stat-violet { background: var(--kp-accent-soft); border-color: transparent; box-shadow: none; } /* бузкова: нейтральний показник */
.kp-stat-amber  { background: var(--kp-amber-soft); border-color: transparent; box-shadow: none; } /* бурштинова: потребує уваги */
.kp-stat-red    { background: var(--kp-red-soft); border-color: transparent; box-shadow: none; } /* червона: борг, прострочення */
.kp-stat-dark   { background: var(--kp-dark); border-color: transparent; color: #fff; box-shadow: none; } /* темна: головний показник екрана */
.kp-stat-dark .kp-stat-label { color: rgba(255, 255, 255, 0.55); } /* на темній плитці підпис світлий */

/* ── Кнопки ──────────────────────────────────────────────────── */

.kp-btn,
.kp-btn-dark,
.kp-btn-danger {
	display: inline-flex; /* іконка й підпис в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 7px; /* зазор між іконкою й підписом */
	padding: 10px 18px; /* внутрішні відступи кнопки */
	border: 1px solid var(--kp-line); /* ледь помітна рамка */
	border-radius: var(--kp-radius-pill); /* капсула — головна форма кнопок у референсах */
	background: var(--kp-surface); /* біла заливка за замовчуванням */
	color: var(--kp-ink); /* темний текст */
	font-family: inherit; /* Raleway замість системного шрифту кнопки */
	font-size: 13.5px; /* трохи дрібніше за основний текст */
	font-weight: 600; /* напівжирний — підписи кнопок мають бути щільними */
	line-height: 1.2; /* власна висота рядка — теми люблять розтягувати кнопки своєю */
	text-transform: none; /* деякі теми роблять кнопки капсом — вимикаємо */
	white-space: nowrap; /* підпис не переносимо */
	cursor: pointer; /* курсор-рука */
}

.kp-btn:hover {
	background: var(--kp-surface-soft); /* ледь помітна підсвітка при наведенні */
	color: var(--kp-ink); /* явно: тема/Elementor фарбує текст кнопок у білий на hover — виходив білий на білому (правка 0.7.1) */
	border-color: var(--kp-line); /* і рамку тримаємо свою, а не кольору теми */
}

.kp-btn-dark {
	background: var(--kp-dark); /* чорна капсула — головна дія екрана */
	border-color: var(--kp-dark); /* рамка в колір заливки */
	color: #fff; /* білий текст */
}

.kp-btn-dark:hover {
	background: var(--kp-dark-soft); /* трохи світліший чорний при наведенні */
	border-color: var(--kp-dark-soft); /* рамка разом із заливкою */
	color: #fff; /* тема може міняти колір тексту кнопки при наведенні — тримаємо білий */
}

.kp-btn-danger {
	color: var(--kp-red); /* червоний текст — незворотна дія */
	border-color: #f6d5d5; /* приглушена червона рамка */
}

.kp-btn-danger:hover {
	background: var(--kp-red-soft); /* світло-червона заливка при наведенні */
	color: var(--kp-red); /* явно тримаємо червоний текст — тема на hover фарбує кнопки у свій колір (правка 0.7.1) */
	border-color: #f6d5d5; /* рамка лишається приглушено-червоною */
}

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

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

/* 0.10.9 → правка 338 (рішення Оксани 06.09.2026): «Оплатити» в рядку
   таблиці рахунків клієнта тепер посилання під статусом, а не чорна
   капсула: кнопка в таблиці читалась не в тему. */
.kp-pay-link {
	display: block; /* окремим рядком під статусом */
	margin-top: 4px; /* невеликий відступ від статусу */
	color: var(--kp-accent); /* бузкове, як усі посилання системи */
	font-size: 12.5px; /* дрібніше, це дія в рядку */
	font-weight: 600; /* напівжирне, щоб було видно, що це дія */
	text-decoration: none; /* тема підкреслює посилання */
	white-space: nowrap; /* не рветься */
}

.kp-pay-link:hover {
	text-decoration: underline; /* реакція на наведення */
}

/* Правка 165: вікно з QR для оплати з компʼютера. QR по центру,
   підказка під ним. */
.kp-pay-qr {
	display: flex; /* центруємо SVG */
	justify-content: center; /* по горизонталі */
	padding: 8px 0 4px; /* повітря над і під QR */
}

.kp-pay-qr svg {
	width: 220px; /* фіксований розмір, щоб QR читався камерою */
	height: 220px; /* квадрат */
	border: 1px solid var(--kp-line); /* тонка рамка, як у картки */
	border-radius: var(--kp-radius); /* заокруглення дизайн-системи */
}

.kp-pay-qr-hint {
	text-align: center; /* під QR по центру */
	max-width: 420px; /* не розтягувати рядок на все вікно */
	margin: 0 auto 8px; /* центр і відступ до кнопок */
}

/* Ряд «Оплатити» над бланком у клієнта: відступ, як у дій команди. */
.kp-doc-acts-pay .kp-btn-dark,
.kp-doc-acts-pay .kp-btn {
	text-decoration: none; /* посилання без підкреслення; .kp-btn для «Оплатити карткою» (правка 366) */
}

/* Правка 366 (1.1.0): рядок «WayForPay: клієнт оплатив…» над бланком рахунка
   у команди. Бурштиновий, бо потребує дії: підтвердити оплату. */
.kp-wfp-paid {
	background: var(--kp-amber-soft); /* тло «потребує уваги» */
	color: var(--kp-amber); /* текст у тон тла */
	border-radius: 10px; /* як у бейджів дизайн-системи */
	padding: 10px 14px; /* дихання всередині плашки */
	margin: 0 0 12px; /* відступ до бланка */
	font-size: 14px;
}

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

/* ── Фільтри ─────────────────────────────────────────────────── */

.kp-filters {
	display: flex; /* фільтри однією горизонтальною лінією */
	flex-wrap: nowrap; /* без переносу — так просила Оксана */
	gap: 8px; /* щільний зазор між пігулками */
	overflow-x: auto; /* вузький екран — горизонтальний скрол */
	padding-bottom: 2px; /* місце під смужку скролу */
	scrollbar-width: thin; /* тонкий скрол у Firefox */
}

.kp-filter {
	flex: 0 0 auto; /* ширина за вмістом, без стискання */
	width: auto; /* перебиваємо тему сайту, яка ставить select{width:100%} */
	max-width: 200px; /* довга назва проєкту не з'їдає рядок */
	padding: 8px 32px 8px 14px; /* праворуч більше — там власна стрілка */
	border: 1px solid var(--kp-line); /* ледь помітна рамка */
	border-radius: var(--kp-radius-pill); /* капсула */
	background-color: var(--kp-surface); /* біла заливка; сама стрілка — у правилі select.kp-filter */
	color: var(--kp-ink); /* темний текст */
	font-family: inherit; /* Raleway */
	font-size: 13px; /* дрібний розмір */
	line-height: 1.2; /* фіксуємо висоту рядка, інакше Safari робить пігулку вищою */
	height: 36px; /* однакова висота всіх фільтрів у будь-якому браузері */
	cursor: pointer; /* курсор-рука */
}

.kp-filter-on {
	border-color: var(--kp-accent); /* активний фільтр обведено бузковим */
	background: var(--kp-accent-soft); /* і залито світлим бузковим */
	color: var(--kp-accent); /* текст у колір акценту */
	font-weight: 600; /* напівжирний */
}

/* Фокус фільтра — той самий м'який бузковий ореол, що в полів вводу.
   Без цього пробивалось товсте системне кільце outline (правка 0.7.1). */
select.kp-filter:focus {
	outline: none; /* прибираємо системний контур */
	border-color: var(--kp-accent); /* бузкова рамка як індикатор фокуса */
	box-shadow: 0 0 0 3px var(--kp-accent-soft); /* м'який ореол — фокус видно, але в кольорах системи */
}

/* ── Таблиця ─────────────────────────────────────────────────── */

.kp-table-wrap {
	overflow-x: auto; /* горизонтальний скрол замість зламаної таблиці */
}

.kp-table {
	width: 100%; /* на всю ширину картки */
	border-collapse: collapse; /* без подвійних рамок */
	border: none; /* тема малювала рамку навколо всієї таблиці (правка 0.7.1) */
	margin: 0; /* і додавала зовнішні відступи — прибираємо */
	font-size: 13.5px; /* щільніше за основний текст — це робочий список */
}

/* Захист від зебри теми: Hello/Elementor заливають парні рядки сірим,
   через що губились наші червоні/бурштинові смуги (правка 0.7.1). */
.kp-table tbody tr,
.kp-table tbody tr:nth-child(2n) {
	background: transparent; /* фон рядка завжди прозорий — колір несуть лише смуги й hover-підсвітка комірок */
	border: none; /* рамки рядків від теми */
}

.kp-table thead th {
	padding: 6px 12px 10px; /* компактна шапка таблиці */
	border: none; /* вертикальні рамки колонок від теми (правка 0.7.1) */
	border-bottom: 1px solid var(--kp-line); /* лінія під шапкою — єдина наша */
	background: none; /* теми люблять заливати th своїм кольором — прибираємо */
	color: var(--kp-muted); /* приглушений колір заголовків */
	font-size: 11.5px; /* дрібний службовий розмір */
	font-weight: 600; /* напівжирний */
	text-align: left; /* заголовки ліворуч */
	white-space: nowrap; /* назви колонок не переносимо */
}

/* Клікабельний заголовок для сортування (розділ 4.8). */
.kp-th-sort {
	cursor: pointer; /* курсор-рука — підказка, що можна клікнути */
	user-select: none; /* подвійний клік не виділяє текст */
}

/* Правка 292 (06.09.2026): перед стрілкою нерозривний пробіл (\00a0),
   інакше на мобайлі, де заголовки переносяться, стрілка падала на
   другий рядок і «Дедлайн» підіймався над рештою заголовків. */
.kp-th-sort::after {
	content: '\00a0↕'; /* стрілки як натяк на сортування */
	color: var(--kp-faint); /* блідий — не відволікає */
}

.kp-th-sort-on::after {
	content: '\00a0↓'; /* активний напрямок сортування */
	color: var(--kp-accent); /* бузковий — цією колонкою відсортовано */
}

/* Зворотний напрямок активного сортування (клік по тій самій колонці). */
.kp-th-sort-on-rev::after {
	content: '\00a0↑'; /* стрілка вгору — зворотний порядок сортування */
	color: var(--kp-accent); /* бузковий — цією колонкою відсортовано */
}

.kp-table tbody td {
	padding: 11px 12px; /* щільні рядки: більше задач без прокрутки */
	border: none; /* вертикальні рамки колонок від теми (правка 0.7.1) */
	border-bottom: 1px solid var(--kp-line); /* тонкий роздільник рядків — єдина наша лінія */
	background: transparent; /* фон комірки чистий — зебра теми фарбувала і td */
	vertical-align: middle; /* вміст по центру висоти рядка */
}

.kp-table tbody tr:last-child td {
	border-bottom: none; /* під останнім рядком лінія зайва */
}

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

.kp-row-clickable {
	cursor: pointer; /* весь рядок веде до картки задачі */
}

/* Правка 278 (рішення Оксани 06.09.2026): кольорові смуги зліва зняті.
   Дедлайн, що горить, позначає червоний кружечок біля назви (той самий,
   що в списку проєктів), критичний пріоритет — червона назва (правка 280).
   Вільна задача окремо не маркується: у рядку і так є напис «Вільна». */
.kp-title-dot {
	font-size: 13px; /* той самий кружечок, що в списку проєктів */
	line-height: 1;
	vertical-align: 1px;
	margin-left: 2px;
	white-space: nowrap; /* не відривати кружечок від останнього слова */
}
.kp-cell-title.kp-title-critical { color: var(--kp-red); } /* правка 280: критична задача */

.kp-cell-title {
	font-weight: 600; /* назва задачі — головне в рядку */
}

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

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

/* ── Бейджі, пігулки, аватарки ───────────────────────────────── */

.kp-badge {
	display: inline-flex; /* крапка й підпис в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 6px; /* зазор між крапкою й підписом */
	padding: 4px 11px; /* компактні відступи бейджа */
	border-radius: var(--kp-radius-pill); /* капсула */
	font-size: 12px; /* дрібний розмір */
	font-weight: 600; /* напівжирний */
	white-space: nowrap; /* не переносимо підпис */
}

.kp-badge::before {
	content: ''; /* крапка перед підписом, як у референсах */
	width: 6px; /* діаметр крапки */
	height: 6px; /* діаметр крапки */
	border-radius: var(--kp-radius-pill); /* коло */
	background: currentColor; /* колір крапки береться з кольору тексту бейджа */
}

.kp-badge-critical { background: var(--kp-red-soft); color: var(--kp-red); } /* критичний пріоритет */

/* Правка 279 (06.09.2026): емодзі з бейджа знято, крапка ::before
   повертається — критичний виглядає як решта бейджів, лише червоний.
   (Правило 0.16 «display:none» для ::before скасовано.) */
.kp-badge-high     { background: var(--kp-amber-soft); color: var(--kp-amber); } /* високий пріоритет */
.kp-badge-medium   { background: var(--kp-accent-soft); color: var(--kp-accent); } /* середній пріоритет */
.kp-badge-low      { background: var(--kp-surface-soft); color: var(--kp-muted); } /* низький пріоритет */
.kp-badge-new      { background: var(--kp-surface-soft); color: var(--kp-muted); } /* статус «Нова» */
.kp-badge-progress { background: var(--kp-accent-soft); color: var(--kp-accent); } /* статус «В роботі» */
.kp-badge-done     { background: var(--kp-green-soft); color: var(--kp-green); } /* статус «Готово» */
.kp-badge-rework   { background: var(--kp-amber-soft); color: var(--kp-amber); } /* статус «Доопрацювання» */
.kp-badge-closed   { background: var(--kp-green-soft); color: var(--kp-green); } /* статус «Закрита» */
/* Правка 97 (31.08.2026): статус «Скасовано». Свідомо НЕ зелений —
   зелений у нас означає «зроблено», а скасована задача це відмінена
   робота. Беремо нейтральну сіру пару, як у «Нової», але з
   перекресленням, щоб на око не плутати два сірі бейджі. */
.kp-badge-cancelled { background: var(--kp-surface-soft); color: var(--kp-muted); text-decoration: line-through; }

/* Кружечок з ініціалами замість фото — аватарки з референсів. */
.kp-avatar {
	display: inline-flex; /* центруємо ініціали */
	align-items: center; /* по вертикалі */
	justify-content: center; /* по горизонталі */
	width: 26px; /* діаметр аватарки */
	height: 26px; /* діаметр аватарки */
	border-radius: var(--kp-radius-pill); /* коло */
	background: var(--kp-accent-soft); /* світло-бузкова заливка */
	color: var(--kp-accent); /* бузкові ініціали */
	font-size: 11px; /* дрібні ініціали */
	font-weight: 700; /* жирні, щоб читались */
}

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

.kp-free {
	color: var(--kp-amber); /* вільна задача — бурштиновим, як і смуга рядка */
	font-weight: 600; /* напівжирний */
}

.kp-overdue {
	color: var(--kp-red); /* прострочено — червоним */
	font-weight: 700; /* жирний, щоб не загубилось у списку */
}

/* ── Поля форми ──────────────────────────────────────────────── */

.kp-field {
	display: flex; /* підпис над полем */
	flex-direction: column; /* вертикальний стек */
	gap: 6px; /* зазор між підписом і полем */
	min-width: 0; /* дозволяє полю стискатись у сітці */
}

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

.kp-input {
	width: 100%; /* поле на всю ширину комірки */
	padding: 11px 14px; /* просторі відступи — так поле приємніше на дотик */
	border: 1px solid var(--kp-line); /* ледь помітна рамка */
	border-radius: var(--kp-radius-sm); /* скруглення поля */
	background: var(--kp-surface); /* поле завжди біле: воно часто лежить на підкладці блока, і на однаковому кольорі зникало б */
	color: var(--kp-ink); /* основний текст */
	font-family: inherit; /* Raleway */
	font-size: 14px; /* базовий розмір */
	line-height: 1.2; /* фіксуємо, інакше Safari бере власну й поле стає вищим */
	min-height: 42px; /* однакова висота в усіх типів полів і в усіх браузерах */
}

/* Єдиний вигляд усіх полів під кітом Elementor (правка 0.10.0.3).
   Кіт стилізує input[type=text], select, textarea і date різними
   правилами, тому в одній формі рамки, радіуси й висоти розʼїжджались:
   у select радіус більший, у date своя висота, у text інша рамка.
   Скоуп по id перебиває кіт за специфічністю і тримає всі типи полів
   в одному вигляді. */
#kp-dashboard-app .kp-input,
#kp-dashboard-app input.kp-input,
#kp-dashboard-app select.kp-input,
#kp-dashboard-app textarea.kp-input,
#kp-guest-app .kp-input,
#kp-guest-app input.kp-input {
	box-sizing: border-box; /* рамка й відступи всередині заданої ширини */
	width: 100%; /* поле заповнює свою колонку, а не всю форму */
	/* !important тут навмисно: кіт Elementor задає input, select і
	   textarea різні рамки, радіуси й висоти правилами, які перебивають
	   навіть скоуп по id. Без цього поля в одній формі виглядали
	   по-різному (правка 0.10.0.4). */
	padding: 11px 14px !important; /* однакові відступи в усіх типів */
	border: 1px solid var(--kp-line) !important; /* та сама рамка скрізь */
	border-radius: var(--kp-radius-sm) !important; /* той самий радіус скрізь */
	background: var(--kp-surface) !important; /* біле поле */
	color: var(--kp-ink) !important; /* основний текст */
	font-family: var(--kp-font) !important; /* Raleway, а не шрифт кіта */
	font-size: 14px !important; /* базовий розмір */
	font-weight: 500 !important; /* як у решті інтерфейсу */
	line-height: 1.2 !important; /* фіксуємо: інакше Safari бере власну */
	min-height: 42px !important; /* однакова висота полів */
	box-shadow: none !important; /* кіт додає полям власну тінь */
	outline: none; /* свій стан фокуса нижче */
}

#kp-dashboard-app textarea.kp-input {
	min-height: 84px; /* багаторядкове поле вище за однорядкові */
	line-height: 1.5; /* текст у кілька рядків читається вільніше */
	resize: vertical; /* тягнути можна лише по висоті */
}

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

#kp-dashboard-app .kp-input::placeholder {
	color: var(--kp-muted); /* приглушена підказка */
	opacity: 1; /* Firefox інакше додатково висвітлює */
}

/* Винятки, які свідомо відрізняються від базового поля. Скоуп по id
   перебиває їхні класи за специфічністю, тому повторюємо їх тут. */
#kp-dashboard-app .kp-input-title {
	padding: 14px 16px !important; /* просторіші відступи в назви задачі */
	font-size: 17px !important; /* помітно більший кегль */
	font-weight: 600 !important; /* напівжирний */
	min-height: 52px !important; /* вища за звичайне поле */
}

#kp-dashboard-app .kp-editor,
#kp-dashboard-app .kp-textarea,
#kp-dashboard-app textarea.kp-input {
	min-height: 140px !important; /* поле опису під розгорнутий текст */
	line-height: 1.5 !important; /* вільніший інтерліньяж */
}

/* Вимикаємо системний вигляд у select і полях дати.
   Без цього Safari малює власну рамку, стрілку й висоту — і поля
   виглядають інакше, ніж у Chrome (перевірено на скріншотах). */
select.kp-input,
select.kp-filter,
input[type="date"].kp-input,
input[type="number"].kp-input {
	appearance: none; /* прибираємо системний вигляд у сучасних браузерах */
	-webkit-appearance: none; /* те саме для Safari та старих WebKit */
	-moz-appearance: none; /* те саме для Firefox */
}

/* Власна стрілка для select — однакова скрізь.
   Малюємо фоновим SVG, бо системну стрілку ми щойно прибрали. */
select.kp-input,
select.kp-filter {
	padding-right: 34px; /* місце під стрілку, щоб текст під неї не заїжджав */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236f6b7d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* шеврон униз кольором --kp-muted */
	background-repeat: no-repeat; /* одна стрілка, не плитка */
	background-position: right 13px center; /* притискаємо до правого краю по центру висоти */
	background-size: 12px 8px; /* фіксований розмір, щоб не масштабувалась */
	text-overflow: ellipsis; /* довга назва проєкту обрізається трикрапкою, а не лізе під стрілку */
}

/* Safari до 16.4 не вміє accent-color, але висоту вирівняти можна. */
input[type="date"].kp-input {
	padding-top: 10px; /* Safari додає власний внутрішній відступ зверху */
	padding-bottom: 10px; /* вирівнюємо низ, щоб текст стояв по центру */
}

/* Приховуємо системний спінер у числових полях: стрілки вгору-вниз
   у Safari й Chrome виглядають по-різному і з'їдають місце. */
input[type="number"].kp-input::-webkit-outer-spin-button,
input[type="number"].kp-input::-webkit-inner-spin-button {
	appearance: none; /* прибираємо спінер */
	-webkit-appearance: none; /* те саме для WebKit */
	margin: 0; /* прибираємо відступ, який лишається після спінера */
}

input[type="number"].kp-input {
	-moz-appearance: textfield; /* Firefox: поле поводиться як звичайне текстове */
}

.kp-input::placeholder {
	color: var(--kp-faint); /* блідий плейсхолдер */
}

.kp-input:focus {
	outline: none; /* прибираємо системний контур */
	border-color: var(--kp-accent); /* бузкова рамка як індикатор фокуса */
	box-shadow: 0 0 0 3px var(--kp-accent-soft); /* м'який бузковий ореол — видно, де саме курсор */
}

.kp-grid {
	display: grid; /* короткі поля сіткою, а не стовпчиком */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* стільки колонок, скільки влазить */
	gap: 14px; /* однаковий зазор по обох осях */
}

.kp-check {
	display: inline-flex; /* галочка й підпис в один рядок */
	align-items: center; /* вирівнювання по центру */
	gap: 9px; /* зазор між ними */
	min-height: 42px; /* висота сусіднього поля — щоб не висіла посередині */
	font-size: 14px; /* базовий розмір */
}

/* ── Вкладки всередині картки ────────────────────────────────── */

.kp-tabs {
	display: flex; /* вкладки в ряд */
	gap: 4px; /* щільний зазор */
	padding: 4px; /* внутрішня рамка контейнера-перемикача */
	border-radius: var(--kp-radius-pill); /* капсула навколо всього перемикача */
	background: var(--kp-surface-soft); /* світла підкладка */
}

.kp-tab {
	padding: 8px 16px; /* відступи вкладки */
	border: none; /* без рамки */
	border-radius: var(--kp-radius-pill); /* капсула */
	background: none; /* неактивна вкладка без заливки */
	color: var(--kp-muted); /* приглушений текст */
	font-family: inherit; /* Raleway */
	font-size: 13.5px; /* дрібний розмір */
	font-weight: 600; /* напівжирний */
	cursor: pointer; /* курсор-рука */
}

.kp-tab-active {
	background: var(--kp-surface); /* активна вкладка — біла капсула */
	color: var(--kp-ink); /* темний текст */
	box-shadow: var(--kp-shadow); /* легка тінь піднімає активну вкладку */
}

/* Явний hover вкладок — щоб кнопковий hover теми не заливав їх своїм
   кольором (правка 0.7.1, серія «білий на білому»). */
.kp-tab:hover {
	color: var(--kp-ink); /* текст темніє — легка реакція на наведення */
}

.kp-tab:not(.kp-tab-active):hover {
	background: none; /* неактивна вкладка без заливки навіть на hover */
}

.kp-tab-active:hover {
	background: var(--kp-surface); /* активна лишається білою капсулою */
}

/* ── Гроші ───────────────────────────────────────────────────── */

/* Баланс ніколи не показуємо числом зі знаком (розділ 7.2 ТЗ) —
   лише явним формулюванням «На балансі» або «Борг клієнта». */
.kp-money-ok {
	color: var(--kp-green); /* зелений: у клієнта передоплата */
	font-weight: 700; /* жирний — це сума */
}

.kp-money-debt {
	color: var(--kp-red); /* червоний: клієнт винен */
	font-weight: 700; /* жирний — це сума */
}

/* Суми в таблицях: надходження зеленим, витрати червоним. */
.kp-sum-in {
	color: var(--kp-green); /* зелений: гроші прийшли або мають прийти */
	font-weight: 700; /* жирний — це сума */
	text-align: right; /* цифри вирівнюємо до правого краю колонки */
}

.kp-sum-out {
	color: var(--kp-red); /* червоний: гроші пішли */
	font-weight: 700; /* жирний — це сума */
	text-align: right; /* цифри до правого краю */
}

/* Смужка вичерпання місячного пакета годин. */
.kp-progress {
	height: 6px; /* тонка смужка */
	margin-top: 8px; /* відступ від підпису */
	border-radius: var(--kp-radius-pill); /* заокруглені кінці */
	background: var(--kp-line); /* сірий жолоб */
	overflow: hidden; /* заповнення не вилазить за скруглення */
}

.kp-progress-fill {
	height: 100%; /* заповнення на всю висоту жолоба */
	border-radius: var(--kp-radius-pill); /* заокруглені кінці заповнення */
	background: var(--kp-accent); /* бузкове, поки пакет не вичерпано */
}

.kp-progress-over .kp-progress-fill {
	background: var(--kp-amber); /* бурштинове, коли ліміт перевищено */
}

/* ── Службові блоки ──────────────────────────────────────────── */

.kp-note {
	padding: 12px 16px; /* відступи плашки */
	border-radius: var(--kp-radius-sm); /* скруглення */
	background: var(--kp-surface-soft); /* світле тло */
	color: var(--kp-muted); /* приглушений текст */
	font-size: 13px; /* дрібний розмір */
}

.kp-note-danger {
	background: var(--kp-red-soft); /* світло-червоне тло */
	color: #8f2626; /* темно-червоний текст для контрасту */
}

/* Правка 372: попередження про вичерпаний пакет у формі нової задачі.
   Бурштинове, а не червоне: це не помилка, а умова оплати. */
.kp-note-warn {
	background: var(--kp-amber-soft); /* тло «потребує уваги» */
	color: var(--kp-amber); /* текст у тон тла */
	margin: 0 0 14px; /* відступ до кнопок форми */
}

.kp-note-warn p {
	margin: 6px 0 10px; /* текст між заголовком і галочкою */
}

.kp-note-warn .kp-check {
	font-weight: 600; /* згода помітніша за пояснення */
}

.kp-legend {
	margin: 12px 0 0; /* відступ від таблиці */
	color: var(--kp-faint); /* найблідіший — це підказка */
	font-size: 12px; /* дрібний розмір */
}

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

/* ── Правка 0.9.2: кнопки всередині форм кабінету ─────────────────
   Кіт Elementor селекторами form button / button[type=submit] фарбує
   кнопки форм у вишневий колір теми (скріншоти Оксани 15.08: форми
   клієнта і проєкту). Дублюємо ключові властивості кнопок під
   id-скоупом — специфічність id перебиває будь-який селектор кіта. */
#kp-dashboard-app .kp-btn,
#kp-dashboard-app .kp-btn-dark,
#kp-dashboard-app .kp-btn-danger {
	padding: 10px 18px; /* власні відступи замість відступів кіта */
	border: 1px solid var(--kp-line); /* тонка сіра рамка замість вишневої */
	background: var(--kp-surface); /* біла заливка за замовчуванням */
	color: var(--kp-ink); /* темний текст замість кольору кіта */
	font-family: inherit; /* Raleway, а не шрифт кнопок теми */
	font-weight: 600; /* напівжирний підпис */
	text-transform: none; /* без капса теми */
	box-shadow: none; /* без тіней кнопок кіта */
}

/* Головна дія — чорна капсула, кольори тримаємо явно і на hover. */
#kp-dashboard-app .kp-btn-dark,
#kp-dashboard-app .kp-btn-dark:hover {
	border-color: var(--kp-dark); /* рамка в колір заливки */
	background: var(--kp-dark); /* чорна заливка */
	color: #fff; /* білий підпис */
}

/* Другорядна кнопка на hover — своя підсвітка, не вишнева. */
#kp-dashboard-app .kp-btn:hover {
	background: var(--kp-surface-soft); /* легка сіра підсвітка */
	border-color: var(--kp-line); /* рамка лишається сірою */
	color: var(--kp-ink); /* текст лишається темним */
}

/* Небезпечна дія — червоні акценти свої, не темні. */
#kp-dashboard-app .kp-btn-danger,
#kp-dashboard-app .kp-btn-danger:hover {
	border-color: #f6d5d5; /* приглушена червона рамка */
	color: var(--kp-red); /* червоний підпис */
}

/* Дата зміни статусу поруч із бейджем у картці задачі
   (правка 133, 01.09.2026): «Готово з 29.08». Приглушена, бо це
   уточнення до бейджа, а не окрема характеристика задачі. */
.kp-status-since {
	margin-left: 8px;
	color: var(--kp-muted);
	font-size: 13px;
	white-space: nowrap;
}

/* Примітка клієнту під діями готової задачі (правка 133). Стоїть
   під рядком кнопок, тому відбиваємо її зверху. */
.kp-done-note {
	margin: 8px 0 0;
}