/* CKEditor styled to match the tournament form fields */
.tournament-form .ck.ck-editor {
    /* Inherit your form palette */
    --tf-text: var(--text);
    --tf-border: rgba(255, 255, 255, 0.06);
    --tf-bg: rgba(255, 255, 255, 0.06);
    --tf-focus: var(--focus);
    --tf-muted: var(--muted);
    --tf-elev: var(--bg-elev);
    --tf-accent: var(--accent);

    /* CK variables mapped to form look & feel */
    --ck-border-radius: 8px;
    --ck-font-size-base: 16px;

    --ck-color-base-background: var(--tf-bg);
    --ck-color-base-foreground: var(--tf-text);
    --ck-color-text: var(--tf-text);
    --ck-color-base-border: var(--tf-border);
    --ck-color-focus-border: var(--tf-focus);
    --ck-color-shadow-drop: rgba(0, 0, 0, .35);
    --ck-color-shadow-inner: rgba(0, 0, 0, .2);

    /* Toolbar/panels tuned to your dark scheme */
    --ck-color-toolbar-background: color-mix(in srgb, var(--tf-bg) 70%, transparent);
    --ck-color-toolbar-border: var(--tf-border);
    --ck-color-toolbar-separator: rgba(255,255,255,0.10);

    --ck-color-button-default-background: transparent;
    --ck-color-button-default-hover-background: rgba(255,255,255,0.08);
    --ck-color-button-default-active-background: rgba(255,255,255,0.12);
    --ck-color-button-default-disabled-background: transparent;

    --ck-color-button-on-background: rgba(255,255,255,0.12);
    --ck-color-button-on-hover-background: rgba(255,255,255,0.16);
    --ck-color-button-on-active-background: rgba(255,255,255,0.18);

    --ck-color-dropdown-panel-background: var(--tf-elev);
    --ck-color-dropdown-panel-border: var(--tf-border);

    --ck-color-list-background: var(--tf-elev);
    --ck-color-list-button-hover-background: rgba(111, 177, 255, 0.18); /* matches multi-select hover */

    --ck-color-link-default: var(--tf-accent);

    font-family: inherit;
}

/* Rounded container (like your inputs) */
.tournament-form .ck.ck-editor,
.tournament-form .ck.ck-editor .ck-editor__top,
.tournament-form .ck.ck-editor .ck-editor__main {
    border-radius: 8px;
}

/* Toolbar styling */
.tournament-form .ck.ck-editor .ck-toolbar {
    border-radius: 8px 8px 0 0;
    border-color: var(--tf-border);
}

/* Editable area matches inputs */
.tournament-form .ck.ck-editor .ck-content {
    background: var(--tf-bg);
    color: var(--tf-text);
    border: 1px solid var(--tf-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-family: inherit;
}

/* Height and scroll */
.tournament-form .ck-editor__editable_inline {
    min-height: 200px;
    max-height: 420px;
    overflow-y: auto;
}

/* Focus glow consistent with other fields */
.tournament-form .ck.ck-editor:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tf-focus) 35%, transparent);
    border-radius: 8px;
}

/* Placeholder tone */
.tournament-form .ck-content .ck-placeholder {
    color: color-mix(in srgb, var(--tf-muted) 75%, transparent);
}

/* Content polish */
.tournament-form .ck-content h1,
.tournament-form .ck-content h2,
.tournament-form .ck-content h3,
.tournament-form .ck-content p,
.tournament-form .ck-content li {
    color: var(--tf-text);
}
.tournament-form .ck-content a {
    color: var(--tf-accent);
    text-decoration-color: color-mix(in srgb, var(--tf-accent) 50%, transparent);
}
.tournament-form .ck-content blockquote {
    border-left: 3px solid var(--tf-accent);
    background: color-mix(in srgb, var(--panel-2) 85%, transparent);
    color: var(--tf-text);
    padding: .6rem .9rem;
    margin: .6rem 0;
}
.tournament-form .ck-content hr {
    border: 0;
    border-top: 1px solid var(--tf-border);
}
.tournament-form .ck-content code {
    background: rgba(31, 36, 48, 0.9);
    color: #ffd27a;
    padding: .12rem .32rem;
    border-radius: 4px;
}

/* Dropdown/panel scrollbars (optional) */
.tournament-form .ck.ck-reset_all { scrollbar-color: #303846 var(--tf-elev); }
.tournament-form .ck.ck-reset_all *::-webkit-scrollbar { width: 10px; }
.tournament-form .ck.ck-reset_all *::-webkit-scrollbar-thumb { background: #303846; border-radius: 6px; }

/* Buttons: ensure icon/text contrast in dark mode */
.tournament-form .ck.ck-button .ck-button__label,
.tournament-form .ck.ck-button .ck-icon {
    color: var(--tf-text);
}