/**
 * Image Editor
 * Стилизация Kendo ImageEditor под дизайн-систему CMS.
 * Скроллы, кнопки действий и панель свойств — через переменные тем.
 */

/* === Корневой контейнер редактора === */

.k-imageeditor {
  margin-bottom: 0;
  background-color: var(--cms-surface-bg-color);
  color: var(--cms-text-primary);
  font-family: var(--cms-font-family);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.k-imageeditor,
.k-imageeditor-content {
  width: 100% !important;
}

.k-imageeditor-content {
  flex: 1 1 auto !important;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

/* Скрываем внутренний скролл canvas-контейнера — оставляем только внешний */
.k-imageeditor-canvas-container {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden !important;
}

.k-imageeditor-canvas canvas {
  max-width: 100%;
  height: auto;
}

/* === Панель свойств (crop / resize) === */

.k-imageeditor-action-pane {
  flex: 0 0 320px;
  min-width: 320px;
  max-width: 360px;
  width: 320px;
  background-color: var(--cms-surface-secondary-bg-color);
  border-left: var(--cms-border-default);
  color: var(--cms-text-primary);
  overflow-y: auto;
  overflow-x: hidden;
}

.k-imageeditor-pane-form {
  font-family: var(--cms-font-family);
  font-size: var(--cms-font-size-base);
  color: var(--cms-text-primary);
}

.k-imageeditor-pane-form .k-form-legend {
  color: var(--cms-text-bold);
  font-weight: var(--cms-font-weight-bold);
  font-size: var(--cms-font-size-base);
  padding-block: 0;
}

.k-imageeditor-pane-form .k-label,
.k-imageeditor-pane-form .k-form-label {
  color: var(--cms-text-primary);
  font-family: var(--cms-font-family);
  font-size: var(--cms-font-size-base);
  font-weight: var(--cms-font-weight-normal);
}

.k-imageeditor-pane-form .k-form-field {
  color: var(--cms-text-primary);
}

.k-imageeditor-pane-form .k-form-field .k-input-solid {
  min-width: auto;
}

/* Кнопки "Применить" / "Отмена" в панели — через стандартные токены */
.k-imageeditor-action-pane .k-button {
  font-family: var(--cms-font-family);
  font-size: var(--cms-font-size-base);
  border-radius: var(--cms-border-radius-sm);
}

.k-imageeditor-action-pane [data-action="confirm"] {
  background-color: var(--cms-btn-save-bg-color);
  color: var(--cms-btn-save-color);
  border: var(--cms-btn-save-border);
}

.k-imageeditor-action-pane [data-action="confirm"]:hover,
.k-imageeditor-action-pane [data-action="confirm"]:focus {
  background-color: var(--cms-btn-save-hover-bg-color);
  color: var(--cms-btn-save-hover-color);
  border: var(--cms-btn-save-hover-border);
}

.k-imageeditor-action-pane [data-action="cancel"] {
  background-color: var(--cms-btn-cancel-bg-color);
  color: var(--cms-btn-cancel-color);
  border: var(--cms-btn-cancel-border);
}

.k-imageeditor-action-pane [data-action="cancel"]:hover,
.k-imageeditor-action-pane [data-action="cancel"]:focus {
  background-color: var(--cms-btn-cancel-hover-bg-color);
  color: var(--cms-btn-cancel-hover-color);
  border: var(--cms-btn-cancel-hover-border);
}

/* === Тулбар === */

.k-imageeditor-header {
  background-color: var(--cms-surface-bg-color);
  border-bottom: var(--cms-border-default);
}

.k-imageeditor-toolbar {
  background-color: var(--cms-surface-bg-color);
}

/* Кнопки тулбара — наследуют стандартные стили .k-button */
.k-imageeditor-toolbar .k-button {
  color: var(--cms-text-primary);
}

.k-imageeditor-toolbar .k-button:hover:not(.k-disabled),
.k-imageeditor-toolbar .k-button:focus:not(.k-disabled) {
  background-color: var(--cms-hover-bg-color);
  color: var(--cms-hover-text-color);
}

.k-imageeditor-toolbar .k-button.k-disabled {
  color: var(--cms-text-muted);
}

/* === Кнопки-иконки ресайза рамки === */

.k-imageeditor-crop-overlay {
  border-color: var(--cms-color-primary);
}

.k-resize-handle {
  background-color: var(--cms-surface-bg-color);
  border-color: var(--cms-color-primary);
}

/* === Dropdown выбора aspect ratio / zoom === */

.k-imageeditor-pane-form .k-picker {
  background-color: var(--cms-input-bg-color);
  color: var(--cms-input-color);
  border: var(--cms-input-border);
  border-radius: var(--cms-input-border-radius);
  font-family: var(--cms-input-font-family);
  font-size: var(--cms-input-font-size);
}

.k-imageeditor-pane-form .k-picker:hover {
  border-color: var(--cms-input-hover-border);
}

.k-imageeditor-pane-form .k-picker.k-focus,
.k-imageeditor-pane-form .k-picker:focus-within {
  border-color: var(--cms-input-focus-border);
  box-shadow: var(--cms-input-focus-box-shadow);
}

.k-imageeditor-pane-form .k-picker.k-disabled,
.k-imageeditor-pane-form .k-picker.k-disabled:hover {
  background-color: var(--cms-input-disabled-bg-color);
  color: var(--cms-input-disabled-color);
  border-color: var(--cms-input-border);
}

/* === Numeric input (Width / Height) === */

.k-imageeditor-pane-form .k-numerictextbox {
  background-color: var(--cms-input-bg-color);
  color: var(--cms-input-color);
  border: var(--cms-input-border);
  border-radius: var(--cms-input-border-radius);
}

.k-imageeditor-pane-form .k-numerictextbox .k-input-inner {
  background-color: var(--cms-input-bg-color);
  color: var(--cms-input-color);
  font-family: var(--cms-input-font-family);
  font-size: var(--cms-input-font-size);
}

/* === Модальное окно Kendo Window с image editor === */

#imageEditorModal {
  background-color: var(--cms-modal-bg-color);
  border: var(--cms-modal-border);
  border-radius: var(--cms-modal-border-radius);
  box-shadow: var(--cms-modal-shadow);
}

#imageEditorModal .k-window-titlebar {
  background-color: var(--cms-modal-header-bg-color);
  color: var(--cms-modal-header-color);
  border-bottom: var(--cms-modal-border);
}

#imageEditorModal .k-window-title {
  color: var(--cms-modal-header-color);
  font-family: var(--cms-font-family);
  font-size: var(--cms-modal-header-font-size);
  font-weight: var(--cms-modal-header-font-weight);
}

#imageEditorModal .k-window-titlebar .k-button-close {
  color: var(--cms-modal-header-color);
}

#imageEditorModal .k-window-content {
  padding: 0;
  background-color: var(--cms-modal-bg-color);
  color: var(--cms-text-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Контейнер с editor + нижними кнопками — flex-колонка без двойного скролла */
#imageEditorModal .k-window-content > #image-editor {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#imageEditorModal .k-window-content > #image-editor .k-imageeditor {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* === Нижняя панель с кнопкой "Сохранить" === */

#imageEditorModal .buttons-group-bottom {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background-color: var(--cms-surface-secondary-bg-color);
  border-top: var(--cms-border-default);
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
}

/* Кнопка "Сохранить" в нижней панели */
#imageEditorModal .save-button {
  font-family: var(--cms-font-family);
  font-size: var(--cms-font-size-base);
  font-weight: var(--cms-font-weight-bold);
  border: var(--cms-btn-save-border);
  background-color: var(--cms-btn-save-bg-color);
  color: var(--cms-btn-save-color);
  border-radius: var(--cms-btn-default-border-radius);
  padding: 6px 16px;
  min-width: 80px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#imageEditorModal .save-button:hover,
#imageEditorModal .save-button:focus {
  border: var(--cms-btn-save-hover-border);
  background-color: var(--cms-btn-save-hover-bg-color);
  color: var(--cms-btn-save-hover-color);
}

#imageEditorModal .save-button.k-disabled,
#imageEditorModal .save-button[disabled] {
  background-color: var(--cms-input-disabled-bg-color);
  color: var(--cms-text-muted);
  border: var(--cms-border-default);
  cursor: not-allowed;
  opacity: 0.6;
}

/* === Force-crop режим: скрываем кнопки crop pane === */

#image-editor.force-crop .k-imageeditor-pane-button[data-action="cancel"],
#image-editor.force-crop [data-command="OpenPaneImageEditorCommand"] {
  display: none;
}