/* ========================================================================
   Editor.css — Blazor port of controls/Editor.css + EmojiPicker styles
   Teal: #00A1BE throughout
   ======================================================================== */

/* Toolbar */
.editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 100px 4px 8px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 1px;
    gap: 2px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
}

.toolbar-separator {
    width: 1px;
    height: 20px;
    background: #eee;
    margin: 0 4px;
    display: inline-block;
}

.toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.toolbar-save {
    position: absolute;
    top: 4px;
    right: 8px;
    display: flex;
    align-items: center;
}

.editor-toolbar button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 16px;
    border-radius: 4px;
    transition: background 0.1s;
}

.editor-toolbar button:hover {
    background: #f2f2f2;
}

.editor-btn-icon {
    display: inline-block;
    font-size: 8px;
    font-weight: 900;
    font-family: inherit;
    color: #fff;
    background: #555;
    border-radius: 3px;
    padding: 4px 4px;
    line-height: 1;
    letter-spacing: .04em;
    vertical-align: 1px;
}

.editor-btn-label {
    font-size: 9px;
    font-weight: 900;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: 1px;
    margin-left: 1px;
}

.toolbar-html-btn {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 25px;
    border-radius: 4px;
    transition: background 0.1s;
}

.toolbar-html-btn:hover {
    background: #f2f2f2;
}

.toolbar-break {
    flex-basis: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.editor-toolbar select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 4px 28px 4px 8px !important;
    font-size: 15px !important;
    color: #464646 !important;
    margin: 0 4px !important;
    min-width: 85px !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    outline: none !important;
    font-family: inherit !important;
    background-image: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 5.5L7 9.5L11 5.5" stroke="%235A5A5A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 18px 18px !important;
    transition: border 0.18s !important;
    box-sizing: border-box !important;
}

.editor-toolbar .toolbar-group > div:not(.emoji-picker) {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

.editor-toolbar i {
    color: #464646 !important;
}

/* Editor content area */
.editor-content {
    position: relative;
    min-height: 400px;
    outline: none;
    padding: 16px;
    font-size: 12pt;
    font-family: Muli, sans-serif;
}

.editor-html-source {
    min-height: 400px;
    width: 100%;
    padding: 16px;
    font-size: 11px;
    font-family: Consolas, 'Courier New', monospace;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    border: none;
    outline: none;
    resize: vertical;
    background: #fff;
    color: #000;
    tab-size: 2;
}

.editor-content ol,
.editor-content ul {
    margin-left: 0 !important;
    padding-left: 1.2em !important;
}

/* Images */
.editor-content img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    outline: none;
}

.editor-content img.image-selected {
    outline: 2px dashed #00A1BE;
    cursor: move;
}

.editor-content img[draggable="true"] {
    cursor: move;
}

/* Image resize handles */
.img-resize-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #00A1BE;
    border: 2px solid #fff;
    cursor: nwse-resize;
    z-index: 9999;
    border-radius: 3px;
    pointer-events: auto;
    box-shadow: 0 0 0 1px #00A1BE, 0 2px 8px rgba(0,0,0,0.3);
}

.img-resize-handle:hover {
    background: #007a8f;
}

.img-resize-info {
    position: absolute;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
}

/* Cell resize handles */
.cell-resize-handle {
    position: absolute;
    width: 10px;
    height: 20px;
    background: #00A1BE;
    border: 2px solid #fff;
    cursor: ew-resize;
    z-index: 9999;
    border-radius: 3px;
    pointer-events: auto;
    box-shadow: 0 0 0 1px #00A1BE, 0 2px 8px rgba(0,0,0,0.3);
}

.cell-resize-handle:hover {
    background: #007a8f;
}

.cell-resize-info {
    position: absolute;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
}

/* Links */
.editor-content a {
    cursor: pointer;
}

/* Table selection */
.editor-content table.editor-table-responsive.table-selected {
    outline: 2px solid #464646;
}

.editor-content table.editor-table-responsive td.cell-selected {
    outline: 2px solid #00A1BE;
    background: #e8f4f8 !important;
}

/* Email button selection */
.editor-content table.email-button-widget.email-button-selected {
    outline: 2px solid #464646;
    cursor: move;
}

.editor-content table.email-button-widget[draggable="true"] {
    cursor: move;
}

/* Disable user-select on selected tables */
.editor-content table.editor-table-responsive.table-selected,
.editor-content table.editor-table-responsive.table-selected * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Text selection styling */
.editor-content ::selection {
    background: #464646;
    color: #fff;
}

.editor-content ::-moz-selection {
    background: #464646;
    color: #fff;
}

/* Spell check — pink highlight for misspelled words */
.editor-content .spell-error {
    background-color: #FFD6E8;
    text-decoration: underline wavy #D8237C;
    -webkit-text-decoration-color: #D8237C;
    cursor: pointer;
}

.editor-content[contenteditable="true"]:empty:before {
    content: "Just start typing here to enter content...";
    color: #aaa;
    pointer-events: none;
    display: block;
}

.editor-content[contenteditable="true"]:focus:before {
    content: "";
}

/* Drop active state */
.editor-content.editor-drop-active {
    background: rgba(0,161,190,0.08) !important;
    outline: 2px dashed #00A1BE !important;
}

/* Emoji picker */
.emoji-picker {
    display: none;
    position: absolute;
    top: 36px;
    left: 8px;
    z-index: 999;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.125);
    border-radius: 8px;
    max-width: 250px;
    max-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.emoji-picker span {
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    width: 28px;
    text-align: center;
}

/* Color dropdown */
.color-dropdown {
    min-width: 260px;
}

.color-swatch {
    width: 20px;
    height: 20px;
    display: inline-block;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    transition: border-color 0.18s;
}

.color-swatch:hover {
    border: 2px solid #464646;
}

/* Link modal */
.custom-link-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(42,44,56,0.25);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-link-modal-content {
    background: #fff;
    padding: 28px 24px 18px 24px;
    border-radius: 8px;
    box-shadow: 0 3px 32px rgba(0,0,0,0.125);
    width: 380px;
    max-width: 92vw;
}

.custom-link-modal input,
.custom-link-modal select {
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    font-size: 14px;
    padding: .375rem .75rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    outline: none;
}

.custom-link-modal select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    accent-color: #00A1BE;
}

.custom-link-modal input:focus,
.custom-link-modal select:focus {
    border-color: #00A1BE;
    box-shadow: 0 0 0 .2rem rgba(0, 161, 190, 0.25);
    outline: none;
}

.custom-link-modal-content h3 {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #DEE2E6;
}

/* Editor custom select (replaces native <select> for full styling) */
.editor-custom-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 14px;
    color: #212529;
    background-color: #fff;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    cursor: pointer;
    line-height: 1.5;
    text-align: left;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.editor-custom-select-btn:focus {
    border-color: #00A1BE;
    box-shadow: 0 0 0 .2rem rgba(0, 161, 190, 0.25);
    outline: none;
}
.editor-custom-select-btn i {
    font-size: 11px;
    color: #6c757d;
}
.editor-custom-select-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1200;
    margin: 2px 0 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
}
.editor-custom-select-list li {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #212529;
}
.editor-custom-select-list li:hover,
.editor-custom-select-list li.selected {
    background-color: #00A1BE;
    color: #fff;
}

/* Active toolbar button */
.btn-active-tool {
    background-color: #e8f4f8 !important;
    border: 1px solid #00A1BE !important;
    color: #00A1BE !important;
}

/* Save / HTML View buttons */
.toolbar-save a.toolbar-html-btn,
.toolbar-save button.toolbar-html-btn {
    background-color: #00A1BE;
    color: #fff;
    border: 1px solid #00A1BE;
    font-size: 14px;
    line-height: 1.5;
    padding: 6px 12px;
    border-radius: .25rem;
    font-weight: 400;
    text-shadow: none;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    margin-right: .25rem;
}

.toolbar-save a.toolbar-html-btn:hover,
.toolbar-save button.toolbar-html-btn:hover {
    background-color: #138496;
    border-color: #117a8b;
    color: #FFF;
    text-decoration: none;
}


/* Responsive table */
.editor-table-responsive {
    border-collapse: collapse;
    display: table;
    /* Bug 74307: this was "width: 100% !important" and it is why the table resize handle did
       nothing at all. An author !important beats a NON-important inline style, so the inline
       width doTableResize writes could never take effect. The drag was dead on arrival.

       Dropping the !important HERE does not give back 73453. The mobile stacking is done by the
       @media (max-width: 768px) block further down, which keeps its own width:100%!important and
       is untouched. Rendered both ways at 375px before changing this: cells still stack
       (display:block) and the table still fills the screen.

       Do NOT "restore" the !important here. Setting the inline width WITH the important flag was
       the other candidate and it is worse: an important inline style beats the media query too,
       so a table resized to 60% renders 60% wide on a phone (measured 215px inside a 359px
       viewport) instead of stacking full width.

       max-width below KEEPS its !important, so a resized table still cannot overflow. */
    width: 100%;
    max-width: 100% !important;
    background: #FFF;
    table-layout: fixed;
    height: auto !important;
}

.editor-table-responsive td,
.editor-table-responsive th {
    border: 1px solid #CCC;
    padding: 8px 6px;
    text-align: left;
    background: #FFF;
    font-size: 1em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    height: auto !important;
    vertical-align: top;
}

.editor-table-responsive td img,
.editor-table-responsive th img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

.editor-table-responsive tr {
    background: #FFF;
    height: auto !important;
}

.table-resize-wrapper {
    position: relative;
    display: block;
    outline: 1.5px dashed #aaa;
    width: 100% !important;
    max-width: 100% !important;
}

.table-resize-handle {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1.5px solid #888;
    cursor: nwse-resize;
    z-index: 10;
}

@media (max-width: 768px) {
    .editor-table-responsive,
    .editor-table-responsive tbody {
        display: block;
        width: 100% !important;
    }

    .editor-table-responsive tr {
        display: block;
        width: 100%;
    }

    .editor-table-responsive td,
    .editor-table-responsive th {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        font-size: .96em;
        padding: 6px 4px;
        word-break: break-word;
    }

    .editor-table-responsive td img,
    .editor-table-responsive th img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .editor-table-responsive td,
    .editor-table-responsive th {
        display: block;
        width: 100% !important;
        font-size: .90em;
        padding: 5px 2px;
    }
}

/* Toolbar responsive — 768px */
@media (max-width: 768px) {
    .editor-toolbar {
        padding: 6px 4px;
        gap: 1px;
    }

    .toolbar-group {
        flex-wrap: wrap;
        gap: 1px;
    }

    .editor-toolbar button {
        padding: 4px 6px;
        font-size: 14px;
        min-width: 28px;
    }

    .toolbar-html-btn {
        padding: 4px 6px;
        font-size: 20px;
    }

    .editor-toolbar select {
        min-width: 70px !important;
        font-size: 13px !important;
        padding: 3px 24px 3px 6px !important;
        height: 28px !important;
        min-height: 28px !important;
        margin: 0 2px !important;
    }

    .toolbar-separator {
        height: 16px;
        margin: 0 2px;
    }

    .toolbar-save {
        margin-left: 4px;
    }

    .color-dropdown {
        min-width: 200px;
        left: auto !important;
        right: 0 !important;
    }

    .emoji-picker {
        max-width: 200px;
        grid-template-columns: repeat(5, 1fr);
    }

    .editor-content {
        min-height: 300px;
        padding: 12px;
        font-size: 11pt;
    }

    .editor-toolbar .toolbar-group > div:last-child {
        flex-basis: 100%;
        display: flex !important;
        flex-wrap: wrap;
        margin-top: 4px;
        justify-content: flex-start;
    }

    .editor-toolbar .toolbar-group > div:last-child > * {
        margin-right: 4px;
    }
}

/* 600px */
@media (max-width: 600px) {
    .editor-toolbar {
        padding: 4px 2px;
        gap: 1px;
    }

    .editor-toolbar button {
        padding: 3px 4px;
        font-size: 12px;
        min-width: 24px;
    }

    .toolbar-html-btn {
        padding: 3px 4px;
        font-size: 18px;
    }

    .editor-toolbar select {
        min-width: 60px !important;
        font-size: 11px !important;
        padding: 2px 20px 2px 4px !important;
        height: 24px !important;
        min-height: 24px !important;
        margin: 0 1px !important;
    }

    .toolbar-separator {
        height: 14px;
        margin: 0 1px;
    }

    .toolbar-save {
        margin-left: 2px;
    }

    .color-dropdown {
        min-width: 180px;
    }

    .emoji-picker {
        max-width: 180px;
        grid-template-columns: repeat(4, 1fr);
    }

    .editor-content {
        min-height: 250px;
        padding: 8px;
        font-size: 10pt;
    }

    .editor-toolbar button[title="StrikeThrough"],
    .editor-toolbar button[title="Superscript"],
    .editor-toolbar button[title="Subscript"],
    .editor-toolbar button[title="UPPERCASE"],
    .editor-toolbar button[title="lowercase"],
    .editor-toolbar button[title="Insert Symbol"] {
        display: none;
    }

    .toolbar-separator:nth-child(n+10) {
        display: none;
    }

    .editor-toolbar .toolbar-group > div:last-child {
        flex-basis: 100%;
        display: flex !important;
        flex-wrap: wrap;
        margin-top: 4px;
        justify-content: flex-start;
    }

    .editor-toolbar .toolbar-group > div:last-child > * {
        margin-right: 2px;
    }
}

/* 480px */
@media (max-width: 480px) {
    .editor-toolbar button {
        padding: 2px 3px;
        font-size: 11px;
        min-width: 20px;
    }

    .toolbar-html-btn {
        padding: 2px 3px;
        font-size: 16px;
    }

    .editor-toolbar select {
        min-width: 50px !important;
        font-size: 10px !important;
        padding: 1px 16px 1px 3px !important;
        height: 20px !important;
        min-height: 20px !important;
    }

    .editor-toolbar button[title="Insert Date"],
    .editor-toolbar button[title="Insert Time"],
    .editor-toolbar button[title="Horizontal Rule"],
    .editor-toolbar button[title="Insert Table"] {
        display: none;
    }

    .editor-toolbar .toolbar-group > div:last-child {
        flex-basis: 100%;
        display: flex !important;
        flex-wrap: wrap;
        margin-top: 4px;
        justify-content: flex-start;
    }

    .editor-toolbar .toolbar-group > div:last-child > * {
        margin-right: 2px;
        margin-bottom: 2px;
    }
}

/* 360px */
@media (max-width: 360px) {
    .editor-toolbar .toolbar-group > div:last-child {
        flex-basis: 100%;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 4px;
        gap: 2px;
    }

    .editor-toolbar .toolbar-group > div:last-child > * {
        margin-right: 0;
        margin-bottom: 2px;
        align-self: flex-start;
    }
}

/* Email button modal and color controls */
.email-btn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.email-color-row label {
    display: block;
    margin-bottom: 2px;
}

.email-color-ctrl {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.email-color-ctrl input[type=text] {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    font-size: 14px;
    height: 36px;
}

.email-color-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    padding: 0;
}

.email-color-btn span {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

.email-color-btn i {
    position: relative;
    z-index: 2;
    font-size: 15px;
    color: #333;
    mix-blend-mode: difference;
}

.email-color-btn:hover {
    border-color: #888;
}

.email-color-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 18px rgba(0,0,0,.15);
    padding: 10px;
    border-radius: 6px;
    z-index: 1500;
    min-width: 250px;
}

.email-color-grid {
    display: grid;
    grid-template-columns: repeat(10, 20px);
    gap: 4px;
    margin-bottom: 8px;
}

.email-color-cell {
    width: 20px;
    height: 20px;
    border: 1px solid #bbb;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
}

.email-color-cell:hover {
    border: 2px solid #333;
}

.email-color-custom {
    display: flex;
    align-items: center;
    gap: 6px;
}

.email-color-custom input {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    font-size: 13px;
}

.email-color-custom button {
    padding: 4px 10px;
    font-size: 13px;
    border: 1px solid #17a2b8;
    background: #17a2b8;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.email-color-custom button:hover {
    background: #138496;
    border-color: #117a8b;
}

/* Cell context menu */
.editor-cell-menu {
    position: fixed;
    z-index: 10001;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    padding: 0;
    font-size: 13px;
    min-width: 200px;
}

.editor-cell-menu-handle {
    padding: 6px 10px;
    background: #F8F9FA;
    border-bottom: 1px solid #dee2e6;
    border-radius: 6px 6px 0 0;
    cursor: move;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    user-select: none;
}

.editor-cell-menu-items {
    padding: 4px 0;
}

.editor-cell-menu button {
    display: block;
    width: 100%;
    padding: 4px 10px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
}

.editor-cell-menu button:hover {
    background: #f2f2f2;
}

/* Dropdown items */
.dropdown-item {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
}

.dropdown-item:hover {
    background-color: #f2f2f2;
}

/* Toolbar button groups */
.toolbar-btn-group {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 2px;
    margin-right: 4px;
    background-color: #fff;
    height: 32px;
    box-sizing: border-box;
}

.toolbar-btn-group button {
    margin: 0 !important;
}

.toolbar-btn-group > button + .dropdown-toolbar {
    border-left: 1px solid #eee;
    padding-left: 2px;
    margin-left: 2px;
}

/* Dropdown triggers */
.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #464646;
    outline: none;
    height: 32px;
    padding-left: 12px !important;
    padding-right: 8px !important;
    box-sizing: border-box;
    vertical-align: middle;
    margin: 0 1px;
}

.border-all {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding-left: .25em;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: .10%;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 100%;
    border-radius: 4px;
    margin-top: 2px;
}

/* Font selectors row */
.font-selectors-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 768px) {
    .font-selectors-row {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        flex-basis: 100% !important;
        margin-top: 4px;
    }
}

/* Color picker group with preview swatch */
.color-picker-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 6px 0 0;
    background: #fff;
    margin-right: 8px;
}

.color-picker-group .dropdown-trigger {
    border: none;
    padding: 6px 4px 6px 8px;
}

.color-preview-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #000000;
    border: 1px solid #aaa;
    border-radius: 3px;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.color-preview-swatch:hover {
    transform: scale(1.1);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 0 3px rgba(0,0,0,0.3);
}

/* AI Improve */
.ai-improve-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.ai-improve-btn {
    white-space: nowrap;
}

.ai-improve-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.ai-tone-select {
    width: auto !important;
    max-width: 120px !important;
    font-size: 0.85em !important;
}

/* Editor Bootstrap modals (image/document manager) + backdrop above sticky header (z-index:5000) */
.modal[id^="imageManagerModal-"],
.modal[id^="documentManagerModal-"] {
    z-index: 10001 !important;
}
/* Only bump the backdrop above the sticky header when an editor modal is actually open.
   A global `.modal-backdrop { z-index: 10000 !important }` would clobber every other
   Bootstrap modal on the site (default modal z-index is 1055), making the backdrop
   sit on top of the modal content. */
body:has(.modal[id^="imageManagerModal-"].show, .modal[id^="documentManagerModal-"].show) .modal-backdrop {
    z-index: 10000 !important;
}