/*
 * CKEditor theme for the public website.
 *
 * Light mode keeps CKEditor's default (light) look. Dark mode
 * (`html.dark`, the class toggled by the theme switch) overrides CKEditor's
 * design tokens under `.ck-editor-shell` so the editor matches the navy
 * surfaces used across the site. This mirrors the App's dark setup but is
 * scoped to `.dark` so both themes work on the website.
 */

/* --- shape / spacing so the editor matches the other inputs --- */
.ck-editor-shell > .ck,
[data-ckeditor-shell] > .ck {
    border: 1px solid #cbd5e1;
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.ck-editor-shell > .ck.ck-focused,
[data-ckeditor-shell] > .ck.ck-focused {
    border-color: #1e3a5f;
    box-shadow: 0 0 0 4px rgba(30, 58, 95, .12);
}

/* ------------------------------------------------------------------ */
/* Dark mode                                                          */
/* ------------------------------------------------------------------ */

.dark .ck-editor-shell,
.dark [data-ckeditor-shell] {
    /* surfaces */
    --ck-color-base-background: #0d182f;
    --ck-color-base-text: #e2e8f0;
    --ck-color-base-foreground: #0f1e3a;
    --ck-color-base-active: #1e3a5f;
    --ck-color-base-active-hover: #1e3a5f;
    --ck-color-base-border: #334155;
    --ck-color-text: #e2e8f0;

    /* toolbar */
    --ck-color-toolbar-background: #0f1e3a;
    --ck-color-toolbar-border: #334155;
    --ck-color-toolbar-dropdown-active-background: #1e3a5f;
    --ck-color-toolbar-dropdown-active-border: #38bdf8;
    --ck-color-toolbar-dropdown-disabled-color: #64748b;

    /* buttons */
    --ck-color-button-default-hover-background: #1e3a5f;
    --ck-color-button-default-active-background: #1e3a5f;
    --ck-color-button-default-disabled-background: transparent;
    --ck-color-button-default-disabled-foreground: #475569;
    --ck-color-button-on-background: #0c4a6e;
    --ck-color-button-on-color: #7dd3fc;
    --ck-color-button-on-hover-background: #075985;
    --ck-color-button-active-background: #0c4a6e;
    --ck-color-button-active-border: #38bdf8;
    --ck-color-button-text: #cbd5e1;
    --ck-color-button-cke-hover-foreground: #ffffff;
    --ck-color-focus-border: #38bdf8;
    --ck-color-focus-outer-shadow: #0ea5e9;
    --ck-color-shadow-drop: 0 10px 30px rgba(2, 6, 23, .6);
    --ck-color-shadow-inner: rgba(0, 0, 0, .3);

    /* inputs */
    --ck-color-input-background: #0a1428;
    --ck-color-input-text: #e2e8f0;
    --ck-color-input-border: #334155;
    --ck-color-input-disabled-background: #0f172a;
    --ck-color-input-disabled-text: #64748b;
    --ck-color-input-focused-border: #38bdf8;
    --ck-color-input-error-border: #f43f5e;
    --ck-color-label-text: #cbd5e1;

    /* panels / dropdowns / listboxes / dialogs */
    --ck-color-panel-background: #0d182f;
    --ck-color-panel-border: #334155;
    --ck-color-dropdown-panel-background: #0d182f;
    --ck-color-dropdown-panel-border: #334155;
    --ck-color-dropdown-list-background: #0d182f;
    --ck-color-dropdown-list-hover-background: #1e3a5f;
    --ck-color-dropdown-list-hover-text: #ffffff;
    --ck-color-dropdown-list-active-background: #0c4a6e;
    --ck-color-dropdown-list-active-text: #ffffff;
    --ck-color-dropdown-list-disabled-text: #475569;
    --ck-color-list-background: #0f1e3a;
    --ck-color-list-button-hover-background: #1e3a5f;
    --ck-color-list-button-on-background: #0c4a6e;
    --ck-color-list-button-on-text: #7dd3fc;
    --ck-color-list-button-disabled-text: #475569;
    --ck-color-dialog-background: #0d182f;
    --ck-color-dialog-border: #334155;
    --ck-color-dialog-tab-background: #0f1e3a;
    --ck-color-dialog-tab-active-background: #0d182f;
    --ck-color-dialog-tab-active-border: #38bdf8;
    --ck-color-dialog-tab-text: #cbd5e1;
    --ck-color-dialog-tab-active-text: #ffffff;
    --ck-color-dialog-labeled-field-label-background: #0f1e3a;
    --ck-color-dialog-labeled-field-label-focus-background: #1e3a5f;
    --ck-color-balloon-panel-background: #0d182f;
    --ck-color-balloon-panel-border: #334155;
    --ck-color-balloon-panel-arrow-background: #0d182f;
    --ck-color-balloon-panel-arrow-border: #334155;
    --ck-color-balloon-panel-text: #e2e8f0;
    --ck-color-editor-mark-background: rgba(250, 204, 21, .25);
    --ck-color-editor-mark-text: #fde68a;
}

.dark .ck-editor-shell > .ck,
.dark [data-ckeditor-shell] > .ck {
    border-color: rgba(51, 65, 85, .7);
    background: #0d182f;
}

.dark .ck-editor-shell > .ck.ck-focused,
.dark [data-ckeditor-shell] > .ck.ck-focused {
    border-color: #38bdf8;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, .8);
}

.dark .ck-editor-shell .ck-toolbar,
.dark [data-ckeditor-shell] .ck-toolbar {
    border: 0;
    border-bottom: 1px solid rgba(51, 65, 85, .7);
    background: #0f1e3a;
}

.dark .ck-editor-shell .ck.ck-editor__editable,
.dark [data-ckeditor-shell] .ck.ck-editor__editable {
    background: #0d182f;
    color: #e2e8f0;
}

.dark .ck-editor-shell .ck.ck-editor__editable.ck-focused,
.dark [data-ckeditor-shell] .ck.ck-editor__editable.ck-focused {
    outline: none;
}

.dark .ck-editor-shell .ck.ck-editor__editable.ck-placeholder::before,
.dark [data-ckeditor-shell] .ck.ck-editor__editable.ck-placeholder::before {
    color: #64748b !important;
    opacity: 1 !important;
}

.dark .ck-editor-shell .ck-content,
.dark [data-ckeditor-shell] .ck-content {
    color: #e2e8f0;
}

.dark .ck-editor-shell .ck-content a,
.dark [data-ckeditor-shell] .ck-content a {
    color: #7dd3fc;
}

.dark .ck-editor-shell .ck-content blockquote,
.dark [data-ckeditor-shell] .ck-content blockquote {
    border-inline-start-color: #38bdf8;
    color: #cbd5e1;
}

/* the "ck" floating containers live outside the wrapper in the body */
.dark .ck-balloon-panel,
.dark .ck-poweredby-balloon {
    --ck-color-base-background: #0d182f;
    --ck-color-base-text: #e2e8f0;
    --ck-color-base-border: #334155;
    --ck-color-button-default-hover-background: #1e3a5f;
    --ck-color-button-on-background: #0c4a6e;
    --ck-color-button-on-color: #7dd3fc;
    --ck-color-button-text: #cbd5e1;
    --ck-color-input-background: #0a1428;
    --ck-color-input-text: #e2e8f0;
    --ck-color-input-border: #334155;
    --ck-color-input-focused-border: #38bdf8;
    --ck-color-label-text: #cbd5e1;
    --ck-color-list-background: #0f1e3a;
    --ck-color-list-button-hover-background: #1e3a5f;
    --ck-color-list-button-on-background: #0c4a6e;
    --ck-color-list-button-on-text: #7dd3fc;
    --ck-color-toolbar-background: #0f1e3a;
    --ck-color-toolbar-border: #334155;
    --ck-color-dropdown-panel-background: #0d182f;
    --ck-color-dropdown-list-background: #0d182f;
    --ck-color-dropdown-list-hover-background: #1e3a5f;
    --ck-color-dropdown-list-active-background: #0c4a6e;
    --ck-color-dropdown-list-hover-text: #ffffff;
    --ck-color-dropdown-list-active-text: #ffffff;
    --ck-color-focus-border: #38bdf8;
}