/**
 * CKEditor 5 — scoped theme to match Magic Garden (website) + Metronic (dashboard).
 * Variables cascade to .ck descendants inside [data-ckeditor].
 */

[data-ckeditor] {
    --ck-border-radius: 0.25rem;
    --ck-font-size-base: 14px;
    --ck-color-base-background: #ffffff;
    --ck-color-base-foreground: #0f172a;
    --ck-color-base-border: #e2e8f0;
    --ck-color-focus-border: #005147;
    --ck-color-focus-outer-shadow: rgba(0, 81, 71, 0.2);
    --ck-color-text: #0f172a;
    --ck-color-shadow-drop: rgba(15, 23, 42, 0.08);
    --ck-color-shadow-inner: rgba(15, 23, 42, 0.06);
    --ck-color-toolbar-background: #f8fafc;
    --ck-color-toolbar-border: #e2e8f0;
    --ck-color-button-default-background: transparent;
    --ck-color-button-default-hover-background: #f1f5f9;
    --ck-color-button-on-background: #cce4e1;
    --ck-color-button-on-color: #005147;
    --ck-color-button-on-hover-background: #b8d9d4;
    --ck-color-dropdown-panel-background: #ffffff;
    --ck-color-dropdown-panel-border: #e2e8f0;
    --ck-color-input-background: #ffffff;
    --ck-color-input-border: #cbd5e1;
    --ck-color-input-text: #0f172a;
    --ck-color-link-default: #005147;
    --ck-color-list-background: #ffffff;
    --ck-color-list-button-hover-background: #f1f5f9;
    --ck-color-list-button-on-background: #cce4e1;
    --ck-color-list-button-on-text: #005147;
    --ck-color-panel-background: #ffffff;
    --ck-color-panel-border: #e2e8f0;
    --ck-color-split-button-hover-background: #f1f5f9;
    --ck-color-split-button-hover-border: transparent;
}

/* Website dark */
html[data-theme="dark"] [data-ckeditor] {
    --ck-color-base-background: #0d1321;
    --ck-color-base-foreground: #e2e8f0;
    --ck-color-base-border: #1e293b;
    --ck-color-focus-border: #2dd4bf;
    --ck-color-focus-outer-shadow: rgba(45, 212, 191, 0.25);
    --ck-color-text: #e2e8f0;
    --ck-color-shadow-drop: rgba(0, 0, 0, 0.45);
    --ck-color-shadow-inner: rgba(0, 0, 0, 0.35);
    --ck-color-toolbar-background: #0f172a;
    --ck-color-toolbar-border: #1e293b;
    --ck-color-button-default-hover-background: #1e293b;
    --ck-color-button-on-background: #134e4a;
    --ck-color-button-on-color: #5eead4;
    --ck-color-button-on-hover-background: #115e59;
    --ck-color-dropdown-panel-background: #0f172a;
    --ck-color-dropdown-panel-border: #1e293b;
    --ck-color-input-background: #0f172a;
    --ck-color-input-border: #334155;
    --ck-color-input-text: #e2e8f0;
    --ck-color-link-default: #5eead4;
    --ck-color-list-background: #0f172a;
    --ck-color-list-button-hover-background: #1e293b;
    --ck-color-list-button-on-background: #134e4a;
    --ck-color-list-button-on-text: #5eead4;
    --ck-color-panel-background: #0f172a;
    --ck-color-panel-border: #1e293b;
    --ck-color-split-button-hover-background: #1e293b;
}

/* Dashboard (Metronic) dark */
html[data-bs-theme="dark"] [data-ckeditor] {
    --ck-color-base-background: #1e1e2d;
    --ck-color-base-foreground: #f5f8fa;
    --ck-color-base-border: #2b2b40;
    --ck-color-focus-border: #009ef7;
    --ck-color-focus-outer-shadow: rgba(0, 158, 247, 0.25);
    --ck-color-text: #f5f8fa;
    --ck-color-shadow-drop: rgba(0, 0, 0, 0.4);
    --ck-color-shadow-inner: rgba(0, 0, 0, 0.25);
    --ck-color-toolbar-background: #151521;
    --ck-color-toolbar-border: #2b2b40;
    --ck-color-button-default-hover-background: #2b2b40;
    --ck-color-button-on-background: #212e48;
    --ck-color-button-on-color: #009ef7;
    --ck-color-button-on-hover-background: #1b1b29;
    --ck-color-dropdown-panel-background: #1e1e2d;
    --ck-color-dropdown-panel-border: #2b2b40;
    --ck-color-input-background: #1b1b29;
    --ck-color-input-border: #2b2b40;
    --ck-color-input-text: #f5f8fa;
    --ck-color-link-default: #009ef7;
    --ck-color-list-background: #1e1e2d;
    --ck-color-list-button-hover-background: #2b2b40;
    --ck-color-list-button-on-background: #212e48;
    --ck-color-list-button-on-text: #009ef7;
    --ck-color-panel-background: #1e1e2d;
    --ck-color-panel-border: #2b2b40;
    --ck-color-split-button-hover-background: #2b2b40;
}

[data-ckeditor] .ck-editor__editable,
[data-ckeditor] .ck-editor__editable_inline {
    min-height: 220px;
}

[data-ckeditor] .ck-content {
    color: var(--ck-color-text);
}

[data-ckeditor] .ck-content a {
    color: var(--ck-color-link-default);
}