/* CRM TEDI-R — Eco-Minimalism admin styles */
/* Мінімальний CSS: основна стилізація йде через Tailwind-класи в PHP-шаблонах. */

.kdc-app, .kdc-app * {
	box-sizing: border-box;
}

.kdc-app table.kdc-grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.kdc-app table.kdc-grid th,
.kdc-app table.kdc-grid td {
	padding: 10px 14px;
	border-bottom: 1px solid #e6ede1;
	text-align: left;
}

.kdc-app table.kdc-grid th {
	background: #f4f7f2;
	color: #446038;
	font-weight: 500;
}

.kdc-app .kdc-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
}

.kdc-app .kdc-pill.present {
	background: #e6ede1;
	color: #446038;
}

.kdc-app .kdc-pill.absent {
	background: #f6e5de;
	color: #b0492f;
}

.kdc-app button.kdc-toggle {
	cursor: pointer;
	border: none;
	border-radius: 12px;
}

/* ------------------------------------------------------------------ */
/* Темна тема — вмикається додаванням класу .kdc-dark на #kdc-dash     */
/* ------------------------------------------------------------------ */

.kdc-dark {
	background-color: #1f2420 !important;
	color: #e8e6df;
}

.kdc-dark .bg-cream-50,
.kdc-dark .bg-cream-100,
.kdc-dark .bg-cream-200,
.kdc-dark .bg-white,
.kdc-dark .bg-sage-50 {
	background-color: #2a322c !important;
}

.kdc-dark .bg-sage-100 {
	background-color: #3a4a3c !important;
}

.kdc-dark .bg-sand-100,
.kdc-dark .bg-blush-100 {
	background-color: #3a362a !important;
}

.kdc-dark .text-sage-900,
.kdc-dark .text-sage-800,
.kdc-dark .text-sage-700 {
	color: #e8e6df !important;
}

.kdc-dark .text-sage-600,
.kdc-dark .text-sage-500,
.kdc-dark .text-sage-400,
.kdc-dark .text-sage-300 {
	color: #9fb08c !important;
}

.kdc-dark .border-sage-100,
.kdc-dark .border-sage-200 {
	border-color: #3a443c !important;
}

.kdc-dark input,
.kdc-dark select,
.kdc-dark textarea {
	background-color: #2a322c !important;
	color: #e8e6df !important;
	border-color: #3a443c !important;
}

.kdc-dark .bg-sage-600 {
	background-color: #557943 !important;
	color: #ffffff !important;
}

.kdc-dark #kdc-modal-panel {
	background-color: #2a322c !important;
	color: #e8e6df;
}

.kdc-dark #kdc-theme-toggle {
	border-color: #3a443c;
	color: #e8e6df;
}

/* ------------------------------------------------------------------ */
/* Друк розкладу — ховаємо все зайве, лишаємо лише активний розклад    */
/* ------------------------------------------------------------------ */

@media print {
	/* Ховаємо все, крім позначеної для друку області. */
	body * {
		visibility: hidden;
	}
	.kdc-print-area,
	.kdc-print-area * {
		visibility: visible;
	}
	.kdc-print-area {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	/* Елементи керування друкувати не потрібно. */
	.kdc-print-btn,
	.kdc-dash-nav-btn,
	.kdc-status-select,
	#kdc-dash-nav,
	input[type="date"],
	input[type="month"],
	input[type="search"],
	select {
		display: none !important;
	}

	/* Сітка тижня/місяця має вміститись на аркуш. */
	.kdc-print-area .grid {
		display: grid !important;
		grid-template-columns: repeat(5, 1fr) !important;
		gap: 8px !important;
	}

	.kdc-print-area .rounded-2xl {
		border: 1px solid #ccc !important;
		box-shadow: none !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Чорний текст на білому — економія тонера й краща читабельність. */
	.kdc-print-area * {
		color: #000 !important;
		background: transparent !important;
	}
}

/* ------------------------------------------------------------------ */
/* Мобільна адаптація CRM                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	/* Таблиці розкладу й списків прокручуються, а не ламають верстку. */
	.kdc-app table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	/* Картки статистики — по одній у ряд, щоб числа не тиснулись. */
	.kdc-app #kdc-dash-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Тиждень і місяць на телефоні — вертикальним списком днів. */
	.kdc-app #kdc-dash-week-grid,
	.kdc-app #kdc-dash-month-grid {
		grid-template-columns: 1fr !important;
	}

	/* Рядки розкладу переносяться, а не вилазять за екран. */
	.kdc-app .kdc-week-day-rows button,
	.kdc-app .kdc-week-day-rows span {
		max-width: 100%;
		white-space: normal;
		word-break: break-word;
	}

	/* Модальні вікна — майже на весь екран. */
	#kdc-modal-panel {
		max-width: 100% !important;
		max-height: 92vh !important;
		padding: 16px !important;
	}

	/* Форми в попапах — одна колонка. */
	#kdc-modal-body form.grid {
		grid-template-columns: 1fr !important;
	}

	/* Кнопки швидких дій переносяться на новий рядок. */
	.kdc-app .flex.items-center.justify-end.gap-2 {
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {
	.kdc-app #kdc-dash-stats {
		grid-template-columns: 1fr !important;
	}

	/* Пальцю потрібна більша ціль, ніж мишці. */
	.kdc-app .kdc-dash-nav-btn,
	.kdc-app .kdc-stage-filter {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* Дати й селекти на всю ширину — інакше зрізаються. */
	.kdc-app input[type="date"],
	.kdc-app input[type="month"],
	.kdc-app input[type="search"],
	.kdc-app select {
		width: 100%;
	}
}


/* ------------------------------------------------------------------ */
/* Ширина контейнера CRM                                               */
/* Свідомо тут, а не через wp_head: цей файл підключає сам WordPress    */
/* з версією в URL, тож кеш скидається разом з оновленням плагіна.      */
/* ------------------------------------------------------------------ */

.kdc-app {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
	overflow-x: hidden;
}

/* Кабінет спеціаліста і швидка панель — інший клас, ті самі потреби. */
.kdc-portal {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}

.kdc-portal * {
	max-width: 100%;
	box-sizing: border-box;
}

/* Нічого всередині CRM не повинно вилазити за екран. */
.kdc-app * {
	max-width: 100%;
}

/* На широких екранах виходимо за вузький контейнер теми. */
@media (min-width: 1024px) {
	.kdc-app {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
}


/* ------------------------------------------------------------------ */
/* Мобільний: нічого не повинно робити сторінку ширшою за екран        */
/* ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	/* Класична причина горизонтального скролу: елементи flex/grid за
	   замовчуванням мають min-width:auto і відмовляються стискатись
	   вужче за свій вміст. Дозволяємо їм стискатись. */
	.kdc-app,
	.kdc-app > *,
	.kdc-app aside,
	.kdc-app main,
	.kdc-app section,
	.kdc-app .flex > *,
	.kdc-app .grid > * {
		min-width: 0 !important;
	}

	/* Довгі слова й посилання переносяться, а не розсувають блок. */
	.kdc-app,
	.kdc-app p,
	.kdc-app span,
	.kdc-app button,
	.kdc-app a {
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* Обмеження ширини з десктопної верстки на телефоні зайві. */
	.kdc-app main {
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Ряди розкладу: переносимо, а не витягуємо в один довгий рядок. */
	.kdc-app .flex.flex-wrap {
		max-width: 100%;
	}

	/* Графік завантаженості може бути широким — хай прокручується сам. */
	#kdc-dash-workload {
		overflow-x: auto;
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Логотип у шапці CRM                                                 */
/* ------------------------------------------------------------------ */

.kdc-logo {
	/* Логотип широкий і низький: обмежувати лише висоту замало —
	   він розтягувався на всю доступну ширину. Тому обмежуємо і те,
	   і те, а object-fit зберігає пропорції. */
	height: 40px;
	max-height: 40px;
	width: auto;
	max-width: 100px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

@media (max-width: 640px) {
	.kdc-logo {
		height: 32px;
		max-height: 32px;
		max-width: 80px;
	}
}

/* ------------------------------------------------------------------ */
/* Годинник під логотипом                                             */
/* ------------------------------------------------------------------ */

.kdc-clock {
	text-align: center;
}

.kdc-clock-time {
	display: block;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: #31402a;
}

.kdc-clock-date {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	margin-top: 2px;
}

/* У темній темі час має лишатись світлим. */
.kdc-dark .kdc-clock-time {
	color: #e8e6df !important;
}