/*
  Shared CKEditor theme and content spacing.

  The file is connected through CKEDITOR_5_CUSTOM_CSS, so it is loaded after
  CKEditor's vendor stylesheet for every widget. Norm CRM tokens are the main
  source; Django admin tokens keep the same editor adaptive outside base.html.
*/
:root {
  --rich-text-editor-bg: var(--color-surface, var(--body-bg, #ffffff));
  --rich-text-editor-muted-bg: var(--color-surface-muted, var(--darkened-bg, #f4f6f8));
  --rich-text-editor-hover-bg: var(--color-surface-hover, var(--darkened-bg, #eef2f6));
  --rich-text-editor-active-bg: var(--color-primary-soft, var(--selected-bg, #e8f0ff));
  --rich-text-editor-active-hover-bg: var(--color-primary-soft-hover, var(--selected-bg, #dbe8ff));
  --rich-text-editor-text: var(--color-text, var(--body-fg, #111827));
  --rich-text-editor-muted-text: var(--color-text-muted, var(--body-quiet-color, #6b7280));
  --rich-text-editor-inverse-text: var(--color-text-inverse, var(--primary-fg, #ffffff));
  --rich-text-editor-border: var(--color-border-control, var(--border-color, #c6ccd5));
  --rich-text-editor-focus: var(--color-focus, var(--primary, #2563eb));
  --rich-text-editor-link: var(--color-link, var(--link-fg, #2563eb));
  --rich-text-editor-success: var(--color-success, var(--button-bg, #198754));
  --rich-text-editor-danger: var(--color-danger, var(--delete-button-bg, #b94a55));
  --rich-text-editor-warning: var(--color-warning, #f59e0b);

  /* CKEditor derives toolbars, panels and editable surfaces from these vars. */
  --ck-color-base-background: var(--rich-text-editor-bg);
  --ck-color-base-foreground: var(--rich-text-editor-muted-bg);
  --ck-color-base-border: var(--rich-text-editor-border);
  --ck-color-base-text: var(--rich-text-editor-text);
  --ck-color-base-active: var(--rich-text-editor-focus);
  --ck-color-base-active-focus: var(--rich-text-editor-focus);
  --ck-color-base-focus: var(--rich-text-editor-focus);
  --ck-color-base-action: var(--rich-text-editor-success);
  --ck-color-base-error: var(--rich-text-editor-danger);
  --ck-color-focus-border: var(--rich-text-editor-focus);
  --ck-color-focus-outer-shadow: color-mix(in srgb, var(--rich-text-editor-focus), transparent 72%);

  --ck-color-toolbar-background: var(--rich-text-editor-bg);
  --ck-color-toolbar-border: var(--rich-text-editor-border);
  --ck-color-button-default-hover-background: var(--rich-text-editor-hover-bg);
  --ck-color-button-default-active-background: var(--rich-text-editor-active-bg);
  --ck-color-button-on-background: var(--rich-text-editor-active-bg);
  --ck-color-button-on-hover-background: var(--rich-text-editor-active-hover-bg);
  --ck-color-button-on-active-background: var(--rich-text-editor-active-hover-bg);
  --ck-color-button-on-disabled-background: var(--rich-text-editor-muted-bg);
  --ck-color-button-on-color: var(--rich-text-editor-focus);
  --ck-color-button-action-background: var(--rich-text-editor-success);
  --ck-color-button-action-hover-background: var(--rich-text-editor-success);
  --ck-color-button-action-active-background: var(--rich-text-editor-success);
  --ck-color-button-action-text: var(--rich-text-editor-inverse-text);
  --ck-color-button-save: var(--rich-text-editor-success);
  --ck-color-button-cancel: var(--rich-text-editor-danger);

  --ck-color-dropdown-panel-background: var(--rich-text-editor-bg);
  --ck-color-dropdown-panel-border: var(--rich-text-editor-border);
  --ck-color-panel-background: var(--rich-text-editor-bg);
  --ck-color-panel-border: var(--rich-text-editor-border);
  --ck-color-list-background: var(--rich-text-editor-bg);
  --ck-color-list-button-hover-background: var(--rich-text-editor-hover-bg);
  --ck-color-list-button-on-background: var(--rich-text-editor-focus);
  --ck-color-list-button-on-background-focus: var(--rich-text-editor-focus);
  --ck-color-list-button-on-text: var(--rich-text-editor-inverse-text);
  --ck-color-dialog-background: var(--rich-text-editor-bg);
  --ck-color-dialog-form-header-border: var(--rich-text-editor-border);

  --ck-color-input-background: var(--rich-text-editor-bg);
  --ck-color-input-border: var(--rich-text-editor-border);
  --ck-color-input-text: var(--rich-text-editor-text);
  --ck-color-input-disabled-background: var(--rich-text-editor-muted-bg);
  --ck-color-input-disabled-border: var(--rich-text-editor-border);
  --ck-color-input-disabled-text: var(--rich-text-editor-muted-text);
  --ck-color-labeled-field-label-background: var(--rich-text-editor-bg);
  --ck-color-engine-placeholder-text: var(--rich-text-editor-muted-text);
  --ck-color-media-embed-placeholder-url-text: var(--rich-text-editor-muted-text);
  --ck-color-link-default: var(--rich-text-editor-link);
  --ck-color-editable-blur-selection: var(--rich-text-editor-active-bg);

  --ck-color-image-caption-background: var(--rich-text-editor-muted-bg);
  --ck-color-image-caption-highlighted-background: var(--rich-text-editor-active-bg);
  --ck-color-image-caption-text: var(--rich-text-editor-text);
  --ck-color-selector-caption-background: var(--rich-text-editor-muted-bg);
  --ck-color-selector-caption-highlighted-background: var(--rich-text-editor-active-bg);
  --ck-color-selector-caption-text: var(--rich-text-editor-text);
  --ck-color-widget-blurred-border: var(--rich-text-editor-border);
  --ck-color-widget-editable-focus-background: var(--rich-text-editor-bg);
  --ck-color-widget-hover-border: var(--rich-text-editor-warning);
  --ck-color-split-button-hover-background: var(--rich-text-editor-hover-bg);
  --ck-color-split-button-hover-border: var(--rich-text-editor-border);
  --ck-color-tooltip-background: var(--rich-text-editor-text);
  --ck-color-tooltip-text: var(--rich-text-editor-bg);
}

/* The first paragraph/heading has no margin: keep the toolbar gap in the
   editable surface so every form and read-only editor uses the same inset. */
.ck.ck-editor__editable_inline {
  padding-top: 12px;
}

/* Source mode does not set its own foreground in the vendor theme. */
.ck.ck-content,
.ck-source-editing-area textarea {
  color: var(--rich-text-editor-text);
  background-color: var(--rich-text-editor-bg);
  caret-color: var(--rich-text-editor-text);
}

/* Content primitives used by current configurations follow the same palette. */
.ck.ck-content blockquote {
  color: var(--rich-text-editor-text);
  border-color: var(--rich-text-editor-border);
}

/* Headings must group with the section they introduce, including in editors. */
.ck.ck-content h2,
.ck.ck-content h3,
.ck.ck-content h4 {
  margin-block-start: 2em;
  margin-block-end: 0.55em;
  line-height: 1.25;
}

.ck.ck-content > :first-child {
  margin-block-start: 0;
}

.ck.ck-content code,
.ck.ck-content pre {
  color: var(--rich-text-editor-text);
  background: var(--rich-text-editor-muted-bg);
}

.ck.ck-content .table table,
.ck.ck-content .table td,
.ck.ck-content .table th {
  border-color: var(--rich-text-editor-border);
}