/* ── Outer wrapper: MudTextField outlined-style border ─────────────── */
.rte-wrapper {
    border: 1px solid var(--mud-palette-lines-inputs, rgba(0,0,0,.23));
    border-radius: 4px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rte-wrapper:hover {
    border-color: var(--mud-palette-text-primary, rgba(0,0,0,.87));
}

/* Focused state — thin primary ring, no border-width bump */
.rte-wrapper.rte-focused {
    border-color: var(--mud-palette-primary, #2196F3);
    box-shadow: 0 0 0 0.5px var(--mud-palette-primary, #2196F3);
}

/* -- Toolbar */
.rte-toolbar {
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    flex-wrap: wrap;
    height: auto !important;
    min-height: unset !important;
    padding: 4px 16px !important;
    gap: 0;
    position: relative;
    z-index: 10;
    /* MudToolBar uses background-color: transparent by default */
}

/* Vertical divider between groups */
.rte-divider {
    height: 22px !important;
    margin: 0 4px !important;
    align-self: center;
}

/* ── MudIconButton toolbar buttons ──────────────────────────────────── */

/* Suppress MudSelect underline inside toolbar */
.rte-toolbar .mud-input-underline::before,
.rte-toolbar .mud-input-underline::after {
    display: none !important;
}

/* Suppress MudButton ripple/focus indicator inside toolbar */
.rte-toolbar .mud-button-root::after,
.rte-toolbar .mud-icon-button::after {
    display: none !important;
}

/* Active state for alignment MudIconButtons — square highlight matching other toolbar buttons */
button.rte-btn-active,
button.rte-btn-active:hover {
    border-radius: 4px !important;
    color: var(--mud-palette-primary, #2196F3) !important;
    background-color: rgba(33, 150, 243, 0.1) !important;
}

/* Also square the ripple mask so the hover/ripple effect isn't circular */
button.rte-btn-active .mud-ripple-icon {
    border-radius: 4px !important;
}

/* Compact MudSelect sizing for toolbar */
.rte-toolbar-select {
    width: 90px;
    min-width: unset !important;
}

.rte-toolbar-select-sm {
    width: 65px;
}

/* Tighten MudSelect input slot padding in toolbar */
.rte-toolbar .mud-select-input {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* ── Apply fonts to editor content ─────────────────────────────────── */
.ql-font-arial           { font-family: Arial, sans-serif; }
.ql-font-georgia         { font-family: Georgia, serif; }
.ql-font-courier-new     { font-family: 'Courier New', monospace; }
.ql-font-verdana         { font-family: Verdana, sans-serif; }
.ql-font-times-new-roman { font-family: 'Times New Roman', serif; }

/* ── Quill editor area ──────────────────────────────────────────────── */
.rte-wrapper .ql-container {
    font-size: 0.9rem;
    overflow: visible;
    border: none;
    border-radius: 0 0 4px 4px;
}

.rte-wrapper .ql-editor {
    overflow-y: auto;
    height: 100%;
    line-height: 1.6;
}

/* ── Link tooltip — must clear MudBlazor dialogs (z-index 1200) ──────── */
.ql-snow .ql-tooltip {
    z-index: 1302 !important;
}

/* ── Image resize overlay ────────────────────────────────────────────── */
.rte-img-overlay {
    position: fixed;
    border: 2px solid var(--mud-palette-primary, #2196F3);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 9999;
}

.rte-img-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--mud-palette-primary, #2196F3);
    border: 2px solid #fff;
    border-radius: 2px;
    pointer-events: all;
}

.rte-img-handle-nw { top: -5px;    left: -5px;   cursor: nw-resize; }
.rte-img-handle-ne { top: -5px;    right: -5px;  cursor: ne-resize; }
.rte-img-handle-sw { bottom: -5px; left: -5px;   cursor: sw-resize; }
.rte-img-handle-se { bottom: -5px; right: -5px;  cursor: se-resize; }

/* ── Color toolbar buttons (text color + highlight color) ──────────── */
.rte-color-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 2px 0 0 0;
    margin: 0 1px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    transition: background-color 0.15s ease;
}

.rte-color-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

/* MudColorPicker activator wrapper — strip its default input field styling */
.rte-color-picker-field .mud-input-control,
.rte-color-picker-field .mud-input,
.rte-color-picker-field .mud-input-slot {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
}

.rte-color-picker-field .mud-input-underline::before,
.rte-color-picker-field .mud-input-underline::after {
    display: none !important;
}

/* ── Highlight color swatch menu ───────────────────────────────────── */
.rte-swatch-menu {
    padding: 0 !important;
}

.rte-swatch-grid {
    display: grid;
    grid-template-columns: repeat(7, 22px);
    gap: 4px;
    padding: 8px;
}

.rte-swatch {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,0.2));
    border-radius: 3px;
    cursor: pointer;
    background-color: transparent;
    transition: outline 0.1s ease, transform 0.1s ease;
}

.rte-swatch:hover {
    outline: 2px solid var(--mud-palette-primary, #2196F3);
    outline-offset: 1px;
    transform: scale(1.08);
}

.rte-swatch.rte-no-color {
    background:
        linear-gradient(to top right,
            transparent calc(50% - 1px),
            #f44336 50%,
            transparent calc(50% + 1px)) #fff;
}