/*!
 * Оформление CKEditor 5 (BalloonEditor) под тему Metronic (Bootstrap 5).
 * Подключается вместе с плагином ckeditor (см. $_PAGE['plugins']).
 */

/* Панели редактора (балуны, блочный тулбар) живут в document.body и должны
   быть выше модальных окон (z-index модалки Bootstrap — 1055).
   Базовый ckeditor5.css подключается перед этим файлом, селекторы усилены
   на случай равной специфичности */
body .ck.ck-balloon-panel {
	z-index: 2005;
}

/* Кнопка блочной панели (слева от строки): в базовых стилях ее z-index ниже
   подложки модального окна, из-за чего кнопка была не видна в модалках */
body .ck.ck-block-toolbar-button {
	z-index: 2000;
}

/* Тултипы: базовые стили выводят их цвета из --ck-color-base-*, которые
   переопределяются темной темой (текст становился прозрачным на белом фоне).
   Задаем цвета явно для обеих тем */
body .ck.ck-balloon-panel.ck-tooltip {
	--ck-color-tooltip-background: #14141f;
	--ck-color-tooltip-text: #ffffff;
	--ck-color-panel-background: #14141f;
	--ck-color-panel-border: #14141f;
}

body .ck.ck-balloon-panel.ck-tooltip .ck-tooltip__text {
	color: #ffffff;
}

/* Страховка: блок "Powered by CKEditor" отключен патчем сборки,
   но на случай обновления файла прячем и стилями */
.ck.ck-balloon-panel.ck-powered-by-balloon,
.ck.ck-powered-by {
	display: none !important;
}

/* Область редактирования как обычное поле формы.
   Рамка резервируется прозрачной, чтобы фокус не сдвигал контент */
.hs-ckeditor.ck.ck-editor__editable {
	height: auto;
	padding: 0.775rem 1rem;
	overflow: auto;
	border: 2px solid transparent !important;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Фокус: видимая рамка в стиле полей Metronic.
   Именно border (не box-shadow): plugins.bundle.css Метроника принудительно
   ставит box-shadow: none !important на .ck-content.ck-focused */
.hs-ckeditor.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
	outline: 0;
	box-shadow: none;
	background-color: var(--bs-gray-100);
	border-color: var(--bs-primary) !important;
}

/* Убираем визуальную «пустую строку»: базовые стили добавляют внешние
   отступы первому и последнему элементу содержимого */
.hs-ckeditor.ck.ck-editor__editable_inline > :first-child {
	margin-top: 0;
}

.hs-ckeditor.ck.ck-editor__editable_inline > :last-child {
	margin-bottom: 0;
}

.hs-ckeditor.ck.ck-editor__editable .ck-placeholder::before {
	color: var(--bs-gray-500);
}

/* ================== СОДЕРЖИМОЕ: ОБЩИЕ СТИЛИ (ПАРИТЕТ) ==================
   Применяются и в области редактирования, и на страницах сайта: готовый
   HTML выводится в обертке <div class="ck-content hs-rich-content ...">
   (renderRichText + шаблоны вывода), поэтому контент на странице выглядит
   ровно так же, как в редакторе. Базовые контент-стили дает ckeditor5.css
   (классы .image, .image_resized, .image-style-*, .table и т.д.),
   здесь — приведение к оформлению Metronic */

.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6 {
	margin-top: 1.25rem;
	margin-bottom: 0.5rem;
}

.ck-content ul,
.ck-content ol {
	padding-left: 1.5rem;
}

.ck-content blockquote {
	border-left: 3px solid var(--bs-gray-300);
	padding-left: 1rem;
	margin-left: 0;
	font-style: italic;
}

/* Изображения: не растягиваются и уважают размеры/позиционирование,
   заданные в редакторе (ширина лежит в inline-стиле figure.image_resized,
   обтекание — в классах image-style-*) */
.ck-content img {
	max-width: 100%;
	height: auto;
	border-radius: 0.625rem;
}

.ck-content .image {
	margin: 1rem auto;
}

/* Подпись изображения: как подписи Metronic, а не серая плашка базовой темы */
.ck-content .image > figcaption {
	background: transparent;
	color: var(--bs-gray-500);
	font-size: 0.925rem;
	padding: 0.5rem 0.25rem 0;
	text-align: center;
}

/* Таблицы в стиле таблиц остальных разделов сайта */
.ck-content .table {
	margin: 1rem 0;
	width: 100%;
}

.ck-content .table table,
.ck-content table {
	border: 0;
	border-collapse: collapse;
	width: 100%;
}

.ck-content .table table td,
.ck-content .table table th,
.ck-content table td,
.ck-content table th {
	border: 1px solid var(--bs-border-color);
	padding: 0.55rem 0.75rem;
	vertical-align: top;
}

.ck-content .table table th,
.ck-content table th {
	background-color: var(--bs-gray-100);
	color: var(--bs-gray-800);
	font-weight: 600;
}

.ck-content .table > figcaption {
	background: transparent;
	color: var(--bs-gray-500);
	font-size: 0.925rem;
	padding: 0.35rem 0;
}

/* Metronic style.bundle.css распространяет свои табличные стили на обертку
   figure.table CKEditor (совпадение по классу .table): у последнего ряда
   срезаются нижние границы (border-bottom: 0 !important), у крайних ячеек —
   боковые отступы (padding: 0). Возвращаем сетку и отступы селекторами
   с большей специфичностью (тег figure + :not), т.к. style.bundle.css
   подключается ПОСЛЕ этого файла и при равной специфичности победил бы */
.ck-content figure.table:not(.table-bordered) tbody tr:last-child,
.ck-content figure.table:not(.table-bordered) tfoot tr:last-child,
.ck-content figure.table:not(.table-bordered) tbody tr:last-child th,
.ck-content figure.table:not(.table-bordered) tbody tr:last-child td,
.ck-content figure.table:not(.table-bordered) tfoot tr:last-child th,
.ck-content figure.table:not(.table-bordered) tfoot tr:last-child td {
	border-bottom: 1px solid var(--bs-border-color) !important;
}

.ck-content figure.table:not(.table-bordered) th:first-child,
.ck-content figure.table:not(.table-bordered) td:first-child {
	padding-left: 0.75rem;
}

.ck-content figure.table:not(.table-bordered) th:last-child,
.ck-content figure.table:not(.table-bordered) td:last-child {
	padding-right: 0.75rem;
}

.ck-content .media {
	margin: 1rem 0;
}

.ck-content hr {
	background: var(--bs-border-color);
}

/* Кликабельные изображения на страницах сайта */
.hs-rich-content figure > a,
.hs-rich-content a[data-fslightbox] {
	display: inline-block;
	max-width: 100%;
}

.hs-rich-content a[data-fslightbox] img {
	cursor: zoom-in;
}

/* Иконки KeenIcons внутри текста */
.hs-ck-keenicon {
	cursor: default;
	border-radius: 0.25rem;
	transition: box-shadow 0.15s ease;
}

.hs-ck-keenicon:hover {
	box-shadow: 0 0 0 2px var(--bs-info-light);
}

.ck-content i[class*="ki-"]:empty {
	display: inline-block;
	min-width: 1em;
}

/* Textarea в режиме исходного кода */
textarea.hs-ck-source {
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: 0.9rem;
	min-height: 220px;
	white-space: pre-wrap;
}

/* ======================= ТЕМНАЯ ТЕМА ======================= */

html[data-bs-theme="dark"] {
	/* ВАЖНО: base-background НЕ должен быть transparent — этим цветом базовая
	   тема рисует иконки виджетов («вырезает» их из цветной подложки):
	   стрелки вставки параграфа (--ck-color-widget-type-around-button-icon)
	   и ручку перетаскивания таблицы (--ck-color-widget-drag-handler-icon-color).
	   С transparent иконки становились невидимыми — оставались голые кружки
	   и квадрат. Прозрачность самого поля задается отдельным правилом ниже */
	--ck-color-base-background: #1e1e2d;
	--ck-color-base-text: var(--bs-body-color);
	--ck-color-text: var(--bs-body-color);

	--ck-color-toolbar-background: #1e1e2d;
	--ck-color-toolbar-border: #2b2b40;
	--ck-color-panel-background: #1e1e2d;
	--ck-color-panel-border: #2b2b40;
	--ck-color-dropdown-panel-background: #1e1e2d;
	--ck-color-dropdown-panel-border: #2b2b40;

	--ck-color-button-default-background: transparent;
	--ck-color-button-default-hover-background: #2b2b40;
	--ck-color-button-default-active-background: #2b2b40;
	--ck-color-button-on-background: #2b2b40;
	--ck-color-button-on-hover-background: #323248;
	--ck-color-button-on-active-background: #323248;
	--ck-color-button-on-color: var(--bs-primary);

	--ck-color-input-background: #1b1b29;
	--ck-color-input-border: #2b2b40;
	--ck-color-input-text: var(--bs-body-color);
	--ck-color-input-disabled-background: #151521;
	--ck-color-input-disabled-border: #2b2b40;

	--ck-color-list-background: #1e1e2d;
	--ck-color-list-button-hover-background: #2b2b40;
	--ck-color-list-button-on-background: var(--bs-primary);
	--ck-color-list-button-on-background-focus: var(--bs-primary);

	--ck-color-labeled-field-label-background: #1e1e2d;
	--ck-color-widget-blurred-border: #2b2b40;
	/* Ховер НЕвыделенного элемента — желтый (штатный #ffc83d), выделенный —
	   синий (focus-border). Раньше ховер тоже был синим (--bs-primary), и
	   «наведен» было не отличить от «выделен» — не переопределять на синий! */
	--ck-color-widget-hover-border: #ffc83d;
	--ck-color-focus-border: var(--bs-primary);
	--ck-color-link-default: var(--bs-primary);

	/* Сплит-кнопки (списки, вставка изображения и т.п.): без этих переменных
	   открытая/наведенная часть кнопки заливалась светло-серым из базовой темы */
	--ck-color-split-button-hover-background: #2b2b40;
	--ck-color-split-button-hover-border: #3a3a55;
}

/* ======================= СЕЛЕКТОР ИКОНОК ======================= */

.hs-ckpicker {
	position: fixed;
	inset: 0;
	z-index: 2050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background-color: rgba(0, 0, 0, 0.4);
}

.hs-ckpicker-dialog {
	width: min(620px, 96vw);
	max-height: min(700px, 92vh);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.hs-ckpicker-viewport {
	background-color: var(--bs-light);
	border: 1px dashed var(--bs-border-color);
	padding: 0.75rem;
}

.hs-ckpicker-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	overflow-y: auto;
	max-height: 300px;
	padding: 6px 2px;
}

.hs-ckpicker-tile {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--bs-border-color);
	border-radius: 0.65rem;
	background-color: var(--bs-body-bg);
	color: var(--bs-gray-600);
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.hs-ckpicker-tile i {
	color: inherit;
	font-size: 1.6rem;
}

.hs-ckpicker-tile:hover {
	border-color: var(--bs-info);
	color: var(--bs-info);
	background-color: var(--bs-info-light);
}

.hs-ckpicker-tile.active {
	border-color: var(--bs-info);
	background-color: var(--bs-info-light);
	color: var(--bs-info);
	box-shadow: 0 0 0 1px var(--bs-info);
}

/* Превью выбранной иконки с примененным размером и цветом */
.hs-ckpicker-preview {
	width: 84px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--bs-light);
	border: 1px dashed var(--bs-border-color);
}

/* Образцы цвета */
.hs-ckpicker-swatch {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--bs-border-color);
	border-radius: 50%;
	background-color: var(--bs-body-bg);
	cursor: pointer;
	flex-shrink: 0;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hs-ckpicker-swatch:hover {
	transform: scale(1.12);
}

.hs-ckpicker-swatch.active {
	box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--bs-info);
}

/* «Как текст» — перечеркнутый образец */
.hs-ckpicker-swatch--none {
	background: linear-gradient(135deg, transparent 44%, var(--bs-danger) 46%, var(--bs-danger) 54%, transparent 56%);
}

/* Свой цвет: нативный input type=color в форме круглого образца */
.hs-ckpicker-swatch--custom {
	-webkit-appearance: none;
	appearance: none;
	overflow: hidden;
}

.hs-ckpicker-swatch--custom::-webkit-color-swatch-wrapper {
	padding: 2px;
}

.hs-ckpicker-swatch--custom::-webkit-color-swatch {
	border: none;
	border-radius: 50%;
}