/* Neon skin for the Syncfusion rich text editor (Components/Blog/RichTextEditor.razor).

   Syncfusion ships one light theme file (bootstrap5.css, linked just before this one) with its
   colors baked in, and the site flips light/dark at runtime with [data-theme] on <html>, so no
   single Syncfusion theme can follow it. Instead this file repaints the editor with the --nx-*
   tokens, which already switch with [data-theme]. It only overrides Syncfusion; site components
   live in neon-kit.css.

   Selectors mirror the theme's own where it is very specific (this file loads later, so equal
   specificity wins). Syncfusion renders the format/alignment lists into <body>, and its dialogs and
   quick toolbars inside the editor; every one of them carries .e-rte-elements, which is what scopes
   the popup rules here so other Syncfusion components keep their look. */

.e-richtexteditor,
.e-rte-elements {
    --rte-bar: color-mix(in srgb, var(--nx-surface-solid) 82%, var(--nx-bg));
    --rte-field: color-mix(in srgb, var(--nx-bg) 55%, transparent);
    --rte-pop: var(--nx-surface-solid);
    --rte-hover: color-mix(in srgb, var(--nx-accent) 12%, transparent);
    --rte-pressed: color-mix(in srgb, var(--nx-accent) 20%, transparent);
    --rte-ring: 0 0 0 3px color-mix(in srgb, var(--nx-accent) 18%, transparent);
    --rte-radius: 10px;
}

/* ---------- Frame, border and focus ring ---------- */

.e-richtexteditor {
    background: transparent;
    color: var(--nx-text);
    font-family: var(--nx-font-sans);
}

.e-richtexteditor .e-rte-container {
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--rte-radius);
    background: var(--rte-field);
}

.e-richtexteditor:focus-within .e-rte-container {
    border-color: var(--nx-accent);
    box-shadow: var(--rte-ring), var(--nx-glow-soft);
}

.e-richtexteditor.e-disabled .e-rte-container {
    opacity: 0.6;
}

.e-richtexteditor.e-rte-full-screen {
    background: var(--nx-bg);
}

/* ---------- Toolbar ---------- */

.e-richtexteditor .e-toolbar-wrapper,
.e-richtexteditor .e-toolbar-container,
.e-richtexteditor .e-rte-toolbar,
.e-richtexteditor .e-rte-toolbar .e-toolbar-items,
.e-richtexteditor .e-rte-toolbar .e-hscroll-bar,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-overlay,
.e-richtexteditor .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) {
    background: var(--rte-bar);
}

.e-richtexteditor .e-toolbar-wrapper,
.e-richtexteditor .e-toolbar-container {
    border-bottom-color: var(--nx-border);
    border-radius: var(--rte-radius) var(--rte-radius) 0 0;
}

.e-richtexteditor .e-rte-toolbar {
    border: 0;
    border-radius: var(--rte-radius) var(--rte-radius) 0 0;
    box-shadow: none;
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-items {
    border-radius: inherit;
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-separator {
    border-color: var(--nx-border-strong);
}

/* Buttons: quiet by default, accent on hover, tinted when their format is on (pressed). */
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-tbar-btn,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--nx-text-dim);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item:not(.e-overlay) .e-tbar-btn .e-icons {
    color: var(--nx-text-dim);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-tbar-btn:focus,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item:not(.e-overlay) .e-tbar-btn:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--nx-text-dim);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item:not(.e-overlay) .e-tbar-btn:focus .e-icons {
    color: var(--nx-text-dim);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-tbar-btn:hover,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item:not(.e-overlay) .e-tbar-btn:hover {
    border-color: transparent;
    background: var(--rte-hover);
    color: var(--nx-accent);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item:not(.e-overlay) .e-tbar-btn:hover .e-icons {
    color: var(--nx-accent);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-tbar-btn:active,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item:not(.e-overlay) .e-tbar-btn:active {
    border-color: transparent;
    background: var(--rte-pressed);
    color: var(--nx-accent);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item:not(.e-overlay) .e-tbar-btn:active .e-icons {
    color: var(--nx-accent);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active:not(.e-overlay) .e-tbar-btn {
    border: 1px solid color-mix(in srgb, var(--nx-accent) 45%, transparent);
    background: var(--rte-pressed);
    color: var(--nx-accent);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active:not(.e-overlay) .e-tbar-btn .e-icons {
    color: var(--nx-accent);
}

/* Keyboard focus gets the site's ring; a mouse click doesn't. */
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-tbar-btn:focus-visible,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu:focus-visible,
.e-richtexteditor .e-rte-toolbar .e-hscroll .e-scroll-nav:focus-visible {
    outline: 2px solid var(--nx-accent);
    outline-offset: -2px;
    box-shadow: none;
}

/* Disabled (Undo/Redo with nothing to undo, everything while the source view is open). */
.e-rte-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons,
.e-rte-toolbar .e-toolbar-item.e-overlay .e-rte-dropdown-menu,
.e-rte-toolbar .e-toolbar-item.e-overlay .e-rte-dropdown-menu .e-icons,
.e-rte-toolbar .e-toolbar-item.e-overlay .e-rte-dropdown .e-icons {
    color: var(--nx-text-faint);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.7;
}

/* The two custom items (gallery, code block) are plain buttons; give the code glyph the site's mono. */
.e-richtexteditor .rte-code-glyph {
    font-family: var(--nx-font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Format and alignment dropdown buttons */
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown {
    border-radius: 6px;
    box-shadow: none;
    color: var(--nx-text-dim);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
    border: 1px solid transparent;
    background: transparent;
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--nx-text-dim);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu:hover,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu:active,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu.e-active {
    border: 1px solid transparent;
    background: var(--rte-hover);
    box-shadow: none;
    color: var(--nx-accent);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu .e-icons,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu .e-rte-dropdown-btn-text {
    color: inherit;
}

/* Scrollable-toolbar arrows (and the edge fades Syncfusion draws next to them) */
.e-richtexteditor .e-rte-toolbar .e-hscroll .e-scroll-nav,
.e-richtexteditor .e-rte-toolbar .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
    border-color: var(--nx-border);
    background: var(--rte-bar);
    box-shadow: none;
}

.e-richtexteditor .e-rte-toolbar .e-hscroll .e-scroll-nav.e-scroll-left-nav {
    border-right: 1px solid var(--nx-border);
}

.e-richtexteditor .e-rte-toolbar .e-hscroll .e-scroll-nav.e-scroll-right-nav {
    border-left: 1px solid var(--nx-border);
}

.e-richtexteditor .e-rte-toolbar .e-hscroll .e-scroll-nav .e-icons,
.e-richtexteditor .e-rte-toolbar .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
    color: var(--nx-text-dim);
}

.e-richtexteditor .e-rte-toolbar .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover,
.e-richtexteditor .e-rte-toolbar .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus,
.e-richtexteditor .e-rte-toolbar .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
    background: color-mix(in srgb, var(--nx-accent) 10%, var(--rte-bar));
    box-shadow: none;
    color: var(--nx-accent);
}

.e-richtexteditor .e-rte-toolbar .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons,
.e-richtexteditor .e-rte-toolbar .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons,
.e-richtexteditor .e-rte-toolbar .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
    color: var(--nx-accent);
}

.e-richtexteditor .e-rte-toolbar .e-hscroll .e-scroll-nav.e-overlay .e-icons {
    color: var(--nx-text-faint);
}

.e-richtexteditor .e-rte-toolbar .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
    background-image: linear-gradient(-270deg, var(--rte-bar) 0%, transparent 100%);
}

.e-richtexteditor .e-rte-toolbar .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
    background-image: linear-gradient(-270deg, transparent 0%, var(--rte-bar) 100%);
}

/* ---------- Content area ---------- */

.e-richtexteditor .e-rte-content,
.e-richtexteditor .e-source-content {
    border-radius: 0 0 var(--rte-radius) var(--rte-radius);
    background: transparent;
    color: var(--nx-text);
}

.e-richtexteditor .e-rte-content .e-content,
.e-richtexteditor .e-source-content .e-content {
    color: var(--nx-text);
    caret-color: var(--nx-accent);
    font-family: var(--nx-font-sans);
    font-size: 1rem;
    line-height: 1.7;
    scrollbar-width: thin;
    scrollbar-color: var(--nx-border-strong) transparent;
}

.e-richtexteditor .e-rte-content .e-content ::selection {
    background: color-mix(in srgb, var(--nx-accent) 28%, transparent);
}

.e-richtexteditor .e-rte-placeholder {
    color: var(--nx-text-faint);
    font-family: var(--nx-font-sans);
    opacity: 1;
}

/* Post typography, kept close to how BlogPost.razor.css renders the published article. */
.e-richtexteditor .e-rte-content .e-content :is(h1, h2, h3, h4, h5, h6) {
    color: var(--nx-text);
    line-height: 1.25;
}

.e-richtexteditor .e-rte-content .e-content h2 {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--nx-border);
}

.e-richtexteditor .e-rte-content .e-content a {
    color: var(--nx-accent);
    text-underline-offset: 3px;
}

.e-richtexteditor .e-rte-content .e-content li::marker {
    color: var(--nx-accent);
}

.e-richtexteditor .e-rte-content .e-content blockquote {
    margin: 1rem 0;
    padding: 0.8rem 1.1rem;
    border-left: 3px solid var(--nx-accent);
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--nx-accent) 7%, transparent);
    color: var(--nx-text-dim);
    font-style: italic;
}

.e-richtexteditor.e-rtl .e-rte-content .e-content blockquote {
    border-left: 0;
    border-right: 3px solid var(--nx-accent);
    border-radius: 10px 0 0 10px;
}

.e-richtexteditor .e-rte-content .e-content hr {
    height: 1px;
    border: 0;
    background: var(--nx-border-strong);
}

.e-richtexteditor .e-rte-content hr.e-rte-hr-focus {
    outline: 2px solid var(--nx-accent);
}

.e-richtexteditor .e-rte-content .e-content code {
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    background: color-mix(in srgb, var(--nx-accent) 10%, transparent);
    color: var(--nx-accent);
    font-family: var(--nx-font-mono);
    font-size: 0.9em;
}

/* Code blocks use the Prism theme's tokens (css/prism.css), so they match the published post. */
.e-richtexteditor .e-rte-content .e-content pre,
.e-richtexteditor .e-rte-content .e-content pre[data-language] {
    margin: 1rem 0;
    padding: 1rem 1.2rem;
    overflow-x: auto;
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-code-bg);
    color: var(--nx-code-text);
    font-family: var(--nx-font-mono);
    font-size: 0.86rem;
    line-height: 1.6;
    white-space: pre;
    tab-size: 4;
    scrollbar-width: thin;
    scrollbar-color: var(--nx-border-strong) transparent;
}

.e-richtexteditor .e-rte-content .e-content pre[data-language]::before {
    background-color: var(--nx-code-bar);
    color: var(--nx-text-dim);
}

.e-richtexteditor .e-rte-content .e-content pre code,
.e-richtexteditor .e-rte-content .e-content pre[data-language] code {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

.e-richtexteditor .e-rte-content .e-content pre p {
    margin: 0;
}

/* Tables (.e-rte-table is what Syncfusion inserts; plain tables come from pasted or AI HTML) */
.e-richtexteditor .e-rte-content .e-content table th,
.e-richtexteditor .e-rte-content .e-content table td {
    border: 1px solid var(--nx-border);
}

.e-richtexteditor .e-rte-content .e-content table th,
.e-richtexteditor .e-rte-content .e-content .e-rte-table.e-alternate-border > tbody > tr:nth-child(2n) > :is(td, th) {
    background: color-mix(in srgb, var(--nx-accent) 8%, transparent);
}

.e-richtexteditor .e-rte-content .e-content table.e-cell-select::after,
.e-richtexteditor .e-rte-content .e-content table td.e-cell-select,
.e-richtexteditor .e-rte-content .e-content table th.e-cell-select {
    border-color: var(--nx-accent);
}

.e-richtexteditor .e-rte-content .e-content table td.e-cell-select.e-multi-cells-select::after,
.e-richtexteditor .e-rte-content .e-content table th.e-cell-select.e-multi-cells-select::after {
    background-color: color-mix(in srgb, var(--nx-accent) 12%, transparent);
}

.e-rte-table-resize.e-tb-col-insert,
.e-rte-table-resize.e-tb-row-insert {
    color: var(--nx-accent);
}

.e-rte-table-resize .e-circle::before,
.e-rte-table-resize .e-circle-add::before {
    background-color: var(--rte-pop, var(--nx-surface-solid));
}

.e-richtexteditor .e-rte-content .e-row-wrapper .e-icons.e-drag-and-drop:hover,
.e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-drag-and-drop:hover,
.e-richtexteditor .e-rte-content .e-table-wrapper .e-icons.e-drag-and-drop:hover,
.e-richtexteditor .e-rte-content .e-row-wrapper .e-icons.e-move:hover,
.e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-move:hover,
.e-richtexteditor .e-rte-content .e-table-wrapper .e-icons.e-move:hover {
    background: var(--rte-hover);
}

.e-richtexteditor .e-rte-content .e-row-wrapper .e-icons.e-drag-and-drop.e-active,
.e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-drag-and-drop.e-active,
.e-richtexteditor .e-rte-content .e-table-wrapper .e-icons.e-drag-and-drop.e-active,
.e-richtexteditor .e-rte-content .e-row-wrapper .e-icons.e-move.e-active,
.e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-move.e-active,
.e-richtexteditor .e-rte-content .e-table-wrapper .e-icons.e-move.e-active {
    background-color: var(--nx-accent);
    color: var(--nx-on-accent);
}

/* Images: selection outline and the resize handles */
.e-richtexteditor .e-rte-content .e-content img {
    border-radius: 8px;
}

.e-richtexteditor .e-rte-content .e-content .e-img-focus:not(.e-resize),
.e-richtexteditor .e-rte-content .e-content .e-video-focus:not(.e-resize) {
    border-color: var(--nx-accent);
}

span.e-rte-imageboxmark,
span.e-rte-videoboxmark,
.e-mob-rte.e-mob-span span.e-rte-imageboxmark,
.e-mob-rte.e-mob-span span.e-rte-videoboxmark {
    border: 1px solid var(--nx-surface-solid);
    background: var(--nx-accent);
}

.e-mob-rte span.e-rte-imageboxmark,
.e-mob-rte span.e-rte-videoboxmark {
    border: 1px solid var(--nx-accent);
    background: var(--nx-surface-solid);
}

/* The editor's own resize grip, if EnableResize is ever turned on */
.e-richtexteditor .e-resize-handle {
    color: var(--nx-text-faint);
}

.e-richtexteditor .e-rte-character-count {
    color: var(--nx-text-faint);
    font-family: var(--nx-font-mono);
}

.e-richtexteditor .e-rte-character-count.e-warning { color: var(--nx-amber); }
.e-richtexteditor .e-rte-character-count.e-error { color: var(--nx-red); }

/* ---------- HTML source view ---------- */

.e-richtexteditor .e-source-content,
.e-richtexteditor .e-rte-container.e-source-code-enabled .e-source-content {
    background: var(--nx-code-bg);
}

.e-richtexteditor .e-rte-srctextarea,
.e-richtexteditor textarea.e-content {
    background-color: transparent;
    color: var(--nx-code-text);
    caret-color: var(--nx-accent);
    font-family: var(--nx-font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    tab-size: 4;
    scrollbar-width: thin;
    scrollbar-color: var(--nx-border-strong) transparent;
}

/* ---------- Format and alignment lists (rendered into <body>) ---------- */

.e-dropdown-popup.e-rte-elements {
    border-radius: var(--nx-radius-sm);
    background: var(--rte-pop);
    box-shadow: var(--nx-shadow);
    color: var(--nx-text);
}

.e-dropdown-popup.e-rte-elements ul {
    padding: 6px;
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-sm);
    background: var(--rte-pop);
    box-shadow: none;
}

.e-dropdown-popup.e-rte-elements ul .e-item {
    border-radius: 6px;
    color: var(--nx-text);
}

.e-dropdown-popup.e-rte-elements ul .e-item .e-menu-icon,
.e-dropdown-popup.e-rte-elements.e-align-ddb ul .e-item:not(.e-selected) .e-menu-icon {
    color: var(--nx-text-dim);
}

.e-dropdown-popup.e-rte-elements ul .e-item:hover,
.e-dropdown-popup.e-rte-elements ul .e-item.e-focused {
    background: var(--rte-hover);
    box-shadow: none;
    color: var(--nx-text);
}

.e-dropdown-popup.e-rte-elements ul .e-item:active,
.e-dropdown-popup.e-rte-elements ul .e-item.e-selected,
.e-dropdown-popup.e-rte-elements ul .e-item.e-active {
    background: var(--rte-pressed);
    color: var(--nx-accent);
}

.e-dropdown-popup.e-rte-elements ul .e-item:active .e-menu-icon,
.e-dropdown-popup.e-rte-elements ul .e-item.e-selected .e-menu-icon,
.e-rte-dropdown-popup.e-rte-elements .e-active.e-item .e-menu-icon {
    color: var(--nx-accent);
}

.e-dropdown-popup.e-rte-elements ul .e-separator {
    border-bottom-color: var(--nx-border);
}

/* ---------- Insert link / image / table dialogs ---------- */

.e-dialog.e-rte-elements {
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius);
    background: var(--rte-pop);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 60px color-mix(in srgb, var(--nx-accent) 12%, transparent);
    color: var(--nx-text);
    font-family: var(--nx-font-sans);
}

.e-dialog.e-rte-elements .e-dlg-header-content {
    border-bottom: 1px solid var(--nx-border);
    border-radius: var(--nx-radius) var(--nx-radius) 0 0;
    background: transparent;
}

.e-dialog.e-rte-elements .e-dlg-header,
.e-dialog.e-rte-elements .e-dlg-header * {
    color: var(--nx-text);
    font-family: var(--nx-font-sans);
    font-weight: 700;
}

.e-dialog.e-rte-elements .e-dlg-content {
    background: transparent;
    color: var(--nx-text);
}

.e-dialog.e-rte-elements .e-footer-content {
    border-top: 1px solid var(--nx-border);
    border-radius: 0 0 var(--nx-radius) var(--nx-radius);
    background: transparent;
}

.e-dialog.e-rte-elements .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    border-radius: 50%;
}

.e-dialog.e-rte-elements .e-dlg-header-content .e-btn.e-dlg-closeicon-btn span,
.e-dialog.e-rte-elements .e-btn.e-dlg-closeicon-btn:active span,
.e-dialog.e-rte-elements .e-btn.e-dlg-closeicon-btn:focus span {
    color: var(--nx-text-dim);
}

.e-dialog.e-rte-elements .e-btn.e-dlg-closeicon-btn:hover {
    background-color: var(--rte-hover);
}

.e-dialog.e-rte-elements .e-btn.e-dlg-closeicon-btn:hover span {
    color: var(--nx-text);
}

.e-dialog.e-rte-elements .e-btn.e-dlg-closeicon-btn:focus-visible {
    outline: 2px solid var(--nx-accent);
    outline-offset: 1px;
}

/* Labels and fields, in the style of NxTextField */
.e-dialog.e-rte-elements .e-rte-label label,
.e-dialog.e-rte-elements .e-linkheader,
.e-dialog.e-rte-elements .e-rte-popup-header {
    color: var(--nx-text-dim);
    font-family: var(--nx-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.e-dialog.e-rte-elements input.e-input,
.e-dialog.e-rte-elements textarea.e-input,
.e-dialog.e-rte-elements .e-input-group,
.e-dialog.e-rte-elements .e-input-group.e-control-wrapper {
    border: 1px solid var(--nx-border-strong);
    border-radius: 10px;
    background: var(--rte-field);
    color: var(--nx-text);
    font-family: var(--nx-font-sans);
}

.e-dialog.e-rte-elements .e-input-group input.e-input,
.e-dialog.e-rte-elements .e-input-group.e-control-wrapper input.e-input {
    border: 0;
    background: transparent;
}

.e-dialog.e-rte-elements input.e-input:focus,
.e-dialog.e-rte-elements textarea.e-input:focus,
.e-dialog.e-rte-elements .e-input-group.e-input-focus,
.e-dialog.e-rte-elements .e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--nx-accent);
    box-shadow: var(--rte-ring);
}

.e-dialog.e-rte-elements .e-input-group input.e-input:focus {
    box-shadow: none;
}

.e-dialog.e-rte-elements input.e-input::placeholder,
.e-dialog.e-rte-elements textarea.e-input::placeholder {
    color: var(--nx-text-faint);
    opacity: 1;
}

.e-dialog.e-rte-elements .e-input.e-rte-linkurl.e-error,
.e-dialog.e-rte-elements .e-input.e-img-link.e-error {
    border-color: var(--nx-red);
    color: var(--nx-red);
}

.e-dialog.e-rte-elements .e-input-group .e-input-group-icon {
    border-color: var(--nx-border);
    background: transparent;
    color: var(--nx-text-dim);
}

/* Checkbox, in the style of NxCheckbox */
.e-dialog.e-rte-elements .e-checkbox-wrapper .e-frame,
.e-dialog.e-rte-elements .e-checkbox-wrapper:hover .e-frame {
    border: 1.5px solid var(--nx-border-strong);
    border-radius: 6px;
    background-color: var(--rte-field);
}

.e-dialog.e-rte-elements .e-checkbox-wrapper .e-frame.e-check,
.e-dialog.e-rte-elements .e-checkbox-wrapper:hover .e-frame.e-check {
    border-color: var(--nx-accent);
    background-color: var(--nx-accent);
    color: var(--nx-on-accent);
}

.e-dialog.e-rte-elements .e-checkbox-wrapper .e-label,
.e-dialog.e-rte-elements .e-checkbox-wrapper:hover .e-label {
    color: var(--nx-text);
}

.e-dialog.e-rte-elements .e-checkbox-wrapper.e-focus .e-frame,
.e-dialog.e-rte-elements .e-checkbox-wrapper input:focus-visible + .e-frame {
    box-shadow: var(--rte-ring);
}

/* Buttons, in the style of NxButton: pill, mono, gradient for the primary action */
.e-dialog.e-rte-elements .e-footer-content .e-btn,
.e-dialog.e-rte-elements .e-btn.e-browsebtn {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid var(--nx-border-strong);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--nx-text);
    font-family: var(--nx-font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

.e-dialog.e-rte-elements .e-footer-content .e-btn:hover,
.e-dialog.e-rte-elements .e-footer-content .e-btn:focus,
.e-dialog.e-rte-elements .e-footer-content .e-btn:active,
.e-dialog.e-rte-elements .e-btn.e-browsebtn:hover,
.e-dialog.e-rte-elements .e-btn.e-browsebtn:focus,
.e-dialog.e-rte-elements .e-btn.e-browsebtn:active {
    border-color: var(--nx-accent);
    background: transparent;
    box-shadow: var(--nx-glow-soft);
    color: var(--nx-text);
}

/* The theme paints dialog footer buttons solid blue/gray through a long :not() chain; repeating
   that chain (plus the dialog scope) is what outranks it without !important. */
.e-dialog.e-rte-elements .e-footer-content .e-btn.e-flat:not([disabled]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    border-color: var(--nx-border-strong);
    background: transparent;
    color: var(--nx-text);
}

.e-dialog.e-rte-elements .e-footer-content .e-btn.e-flat:not([disabled]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):hover,
.e-dialog.e-rte-elements .e-footer-content .e-btn.e-flat:not([disabled]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):focus {
    border-color: var(--nx-accent);
    background: transparent;
}

.e-dialog.e-rte-elements .e-footer-content .e-btn.e-primary,
.e-dialog.e-rte-elements .e-footer-content .e-btn.e-primary.e-flat:not([disabled]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info),
.e-dialog.e-rte-elements .e-footer-content .e-btn.e-primary.e-flat:not([disabled]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):hover,
.e-dialog.e-rte-elements .e-footer-content .e-btn.e-primary.e-flat:not([disabled]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):focus {
    border-color: transparent;
    background: linear-gradient(92deg, var(--nx-cyan), var(--nx-green) 70%, var(--nx-lime)) 0 0 / 160% 100%;
    color: var(--nx-on-accent);
}

.e-dialog.e-rte-elements .e-footer-content .e-btn.e-primary.e-flat:not([disabled]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):hover {
    background-position: 100% 0;
    box-shadow: var(--nx-glow);
}

.e-dialog.e-rte-elements .e-footer-content .e-btn:disabled,
.e-dialog.e-rte-elements .e-footer-content .e-btn.e-disabled,
.e-dialog.e-rte-elements .e-footer-content .e-btn.e-primary:disabled,
.e-dialog.e-rte-elements .e-footer-content .e-btn.e-primary.e-disabled {
    box-shadow: none;
    opacity: 0.45;
}

.e-dialog.e-rte-elements .e-footer-content .e-btn:focus-visible,
.e-dialog.e-rte-elements .e-btn.e-browsebtn:focus-visible {
    outline: 2px solid var(--nx-accent);
    outline-offset: 2px;
}

/* Image upload drop zone */
.e-dialog.e-rte-elements .e-img-uploadwrap .e-droptext,
.e-dialog.e-rte-elements .e-aud-uploadwrap .e-droptext,
.e-dialog.e-rte-elements .e-vid-uploadwrap .e-droptext {
    border: 1.5px dashed var(--nx-border-strong);
    border-radius: var(--nx-radius-sm);
    background: color-mix(in srgb, var(--nx-accent) 4%, transparent);
    color: var(--nx-text-dim);
}

.e-dialog.e-rte-elements .e-upload.e-lib.e-control-wrapper.e-rte-dialog-upload,
.e-dialog.e-rte-elements .e-rte-dialog-upload.e-upload.e-lib.e-keyboard,
.e-dialog.e-rte-elements .e-upload {
    background: transparent;
}

.e-dialog.e-rte-elements .e-upload .e-upload-files {
    border-top-color: var(--nx-border);
}

.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list {
    border-bottom-color: var(--nx-border);
}

.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-name,
.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-type,
.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-status,
.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-progress-bar-text {
    color: var(--nx-text);
}

.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-size,
.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-information {
    color: var(--nx-text-dim);
}

.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-status.e-upload-success { color: var(--nx-green); }
.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-status.e-upload-fails,
.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-status.e-validation-fails { color: var(--nx-red); }

.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-progress-inner-wrap {
    background-color: var(--nx-border);
}

.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-progress-inner-wrap .e-upload-progress-bar.e-upload-progress {
    background: var(--nx-accent);
}

.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-progress-inner-wrap .e-upload-progress-bar.e-upload-success {
    background: var(--nx-green);
}

.e-dialog.e-rte-elements .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-progress-inner-wrap .e-upload-progress-bar.e-upload-failed {
    background: var(--nx-red);
}

.e-dialog.e-rte-elements .e-upload .e-upload-files .e-icons {
    color: var(--nx-text-dim);
}

.e-rte-img-dialog .e-rte-upload-progress {
    color: var(--nx-accent);
}

/* Insert-table grid picker */
.e-rte-table-popup.e-popup.e-popup-open {
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-sm);
    background-color: var(--rte-pop, var(--nx-surface-solid));
    box-shadow: var(--nx-shadow);
    color: var(--nx-text);
}

.e-rte-table-popup .e-rte-popup-header {
    color: var(--nx-text-dim);
}

.e-rte-table-popup.e-popup-open .e-rte-tablecell,
.e-rte-elements .e-rte-table-popup.e-popup-open .e-rte-tablecell,
.e-richtexteditor .e-rte-table-popup.e-popup-open .e-rte-tablecell {
    border: 1px solid var(--nx-border-strong);
}

.e-rte-table-popup.e-popup-open .e-rte-tablecell.e-default {
    background-color: var(--rte-field, transparent);
}

.e-rte-table-popup.e-popup-open .e-rte-tablecell.e-active {
    border-color: var(--nx-accent);
    background-color: var(--rte-pressed, transparent);
}

.e-rte-table-popup .e-span-border {
    border-color: var(--nx-border);
}

/* ---------- Quick toolbars (image, link, table) ---------- */

.e-rte-quick-popup.e-rte-elements {
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-sm);
    background: var(--rte-pop);
    box-shadow: var(--nx-shadow);
}

.e-rte-quick-popup.e-rte-elements .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar,
.e-rte-quick-popup.e-rte-elements .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos),
.e-rte-quick-popup.e-rte-elements .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item.e-overlay {
    border-radius: var(--nx-radius-sm);
    background: var(--rte-pop);
}

.e-rte-quick-popup.e-rte-elements .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-active) .e-tbar-btn:not(.e-active):not(:hover):not(:focus):not(:active),
.e-rte-quick-popup.e-rte-elements .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-active) .e-rte-dropdown-menu:not(.e-active):not(:hover):not(:focus):not(:active) {
    background: transparent;
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-tbar-btn,
.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-tbar-btn:focus {
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item:not(.e-overlay) .e-tbar-btn .e-icons,
.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item:not(.e-overlay) .e-tbar-btn:focus .e-icons {
    color: var(--nx-text-dim);
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-tbar-btn:hover,
.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-tbar-btn:active,
.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item.e-active:not(.e-overlay) .e-tbar-btn {
    border-color: transparent;
    background: var(--rte-hover);
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item:not(.e-overlay) .e-tbar-btn:hover .e-icons,
.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item:not(.e-overlay) .e-tbar-btn:active .e-icons,
.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item.e-active:not(.e-overlay) .e-tbar-btn .e-icons {
    color: var(--nx-accent);
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-tbar-btn:focus-visible,
.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu:focus-visible {
    outline: 2px solid var(--nx-accent);
    outline-offset: -2px;
    box-shadow: none;
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item.e-separator {
    border-color: var(--nx-border-strong);
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu,
.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown {
    border-radius: 6px;
    box-shadow: none;
    color: var(--nx-text-dim);
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
    border: 1px solid transparent;
    background: transparent;
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu:hover,
.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu:focus,
.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu:active,
.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu.e-active {
    border: 1px solid transparent;
    background: var(--rte-hover);
    color: var(--nx-accent);
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu .e-icons {
    color: inherit;
}

.e-rte-quick-popup .e-rte-tip-pointer.e-rte-tip-top::before {
    border-bottom-color: var(--nx-border-strong);
}

.e-rte-quick-popup .e-rte-tip-pointer.e-rte-tip-bottom::before {
    border-top-color: var(--nx-border-strong);
}

/* ---------- Toolbar tooltips ---------- */

/* Rendered into <body> with no editor class, only an id derived from the editor's ("rte_..."),
   which RichTextEditor.razor sets. Styled like the kit's [data-nx-tip] tooltips. */
.e-tooltip-wrap.e-popup[id^="rte_"][id$="_tooltip_content"] {
    border: 1px solid var(--nx-border-strong);
    border-radius: 6px;
    background-color: var(--nx-surface-solid);
    box-shadow: var(--nx-shadow);
}

.e-tooltip-wrap[id^="rte_"][id$="_tooltip_content"] .e-tip-content {
    color: var(--nx-text);
    font-family: var(--nx-font-mono);
    font-size: 0.72rem;
}

.e-tooltip-wrap[id^="rte_"][id$="_tooltip_content"] .e-arrow-tip-outer.e-tip-top { border-bottom-color: var(--nx-border-strong); }
.e-tooltip-wrap[id^="rte_"][id$="_tooltip_content"] .e-arrow-tip-outer.e-tip-bottom { border-top-color: var(--nx-border-strong); }
.e-tooltip-wrap[id^="rte_"][id$="_tooltip_content"] .e-arrow-tip-outer.e-tip-left { border-right-color: var(--nx-border-strong); }
.e-tooltip-wrap[id^="rte_"][id$="_tooltip_content"] .e-arrow-tip-outer.e-tip-right { border-left-color: var(--nx-border-strong); }

.e-tooltip-wrap[id^="rte_"][id$="_tooltip_content"] .e-arrow-tip-inner {
    color: var(--nx-surface-solid);
}

/* ---------- Placeholder shown until the editor goes interactive ---------- */

.rte-loading {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--nx-border-strong);
    border-radius: 10px;
    background:
        linear-gradient(var(--nx-border), var(--nx-border)) 0 44px / 100% 1px no-repeat,
        linear-gradient(color-mix(in srgb, var(--nx-surface-solid) 82%, var(--nx-bg)), color-mix(in srgb, var(--nx-surface-solid) 82%, var(--nx-bg))) 0 0 / 100% 44px no-repeat,
        color-mix(in srgb, var(--nx-bg) 55%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .rte-loading::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--nx-accent) 7%, transparent) 50%, transparent 70%);
        background-size: 250% 100%;
        animation: rte-loading-sweep 1.6s ease-in-out infinite;
    }

    .e-richtexteditor .e-rte-container,
    .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-tbar-btn,
    .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu,
    .e-dialog.e-rte-elements .e-footer-content .e-btn {
        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.15s, color 0.15s;
    }
}

@keyframes rte-loading-sweep {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}