/*
 * CKEditor 5 + django-unfold compatibility fix.
 *
 * Unfold поставляет Tailwind preflight, который сбрасывает бордеры, display у SVG,
 * маркеры списков и т.д. — это ломает UI CKEditor 5.
 * Правила ниже восстанавливают стили CKEditor внутри .ck* скоупов.
 *
 * ВАЖНО: только UI-хром (тулбар, бордеры, z-index, кнопки).
 * Типографика контентной области (.ck-content h1/p/ul/...) — в ckeditor5-content.css,
 * который загружается через CKEDITOR_5_CUSTOM_CSS только там, где нужен виджет.
 *
 * Правильные селекторы CKEditor 5 (BEM):
 *   - контентная область:  .ck-content  (семантический класс)
 *   - редактируемый div:   .ck-editor__editable  (двойное подчёркивание)
 *   - вложенный editable:  .ck-editor__nested-editable
 */

/* ── Бордеры (Tailwind сбрасывает border-style: none) ────────────── */
.ck.ck-editor,
.ck.ck-editor__main,
.ck.ck-editor__top,
.ck.ck-toolbar,
.ck.ck-toolbar-items,
.ck.ck-toolbar-grouped-dropdown,
.ck.ck-reset_all,
.ck.ck-reset_all *,
.ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable,
.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
    border-style: solid;
}

/* ── SVG иконки: Tailwind ставит img,svg { display:block } ───────── */
.ck svg {
    display: inline;
    vertical-align: middle;
}

.ck img {
    display: inline-block;
}

/* ── Размер и бордер редактируемой области ───────────────────────── */
.ck-editor__editable {
    min-height: 300px;
}

.ck.ck-editor__editable:not(.ck-editor__nested-editable) {
    border: 1px solid var(--ck-color-base-border, #c4c4c4) !important;
}

.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
    border-color: var(--ck-color-focus-border, #47a4f5) !important;
    box-shadow: var(--ck-focus-ring, 0 0 0 2px rgba(71, 164, 245, 0.3)) !important;
}

/* ── z-index: дропдауны, баллоны, диалоги выше Unfold UI ────────── */
.ck.ck-balloon-panel {
    z-index: 10060 !important;
}

.ck.ck-dropdown-panel {
    z-index: 10060 !important;
}

.ck.ck-dialog-overlay {
    z-index: 10070 !important;
}

/* ── Тулбар ───────────────────────────────────────────────────────── */
.ck.ck-toolbar {
    border: 1px solid var(--ck-color-base-border, #c4c4c4) !important;
}

/* ── Тулбар: разрешить перенос строк при широком наборе кнопок ───── */
.ck.ck-toolbar .ck-toolbar__items {
    flex-wrap: wrap !important;
}

/* ── Кнопки: Tailwind сбрасывает border-radius у button ─────────── */
.ck.ck-button,
.ck.ck-button:hover,
.ck.ck-button:focus,
.ck.ck-button:active {
    border-radius: var(--ck-border-radius, 2px);
}

/* ── Ширина: редактор не вылезает за контейнер ───────────────────── */
.ck.ck-editor {
    max-width: 100% !important;
    overflow: hidden;
}

.django-ckeditor-widget,
div[data-ckeditor-widget] {
    max-width: 100%;
}

/* ── Change-form: снять ограничение max-width у Tailwind .container */
.change-form #content.container {
    max-width: 100%;
}

/* ── Source editing textarea ──────────────────────────────────────── */
.ck-source-editing-area textarea {
    min-height: 300px;
    font-family: monospace;
    border: 1px solid var(--ck-color-base-border, #c4c4c4) !important;
}