/* Wrapper for Quill-based rich text editor (company settings + reuse elsewhere) */
.rich-text-editor-wrap {
    border: 1px solid var(--border-light, #ddd);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.rich-text-editor-wrap .rich-text-editor-toolbar {
    border-bottom: 1px solid var(--border-light, #e0e0e0);
    padding: 4px 8px;
}

.rich-text-editor-wrap .rich-text-editor-area {
    min-height: 220px;
    font-size: 15px;
}

.rich-text-editor-wrap .ql-editor {
    min-height: 220px;
}

/*
 * Survey specs: Quill list format "tick" vs "bullet" — stored on <ul data-rte-list="tick|bullet"> so save/reload works.
 * Editor: anything that is not an explicit tick list uses disc bullets.
 */
.rich-text-editor-wrap.rte-tick-list .ql-editor ul:not([data-checked]):not([data-rte-list="tick"]) > li {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 0.25em;
    margin-left: 1.25em;
}

.rich-text-editor-wrap.rte-tick-list .ql-editor ul:not([data-checked]):not([data-rte-list="tick"]) > li::before {
    content: none !important;
}

.rich-text-editor-wrap.rte-tick-list .ql-editor ul:not([data-checked])[data-rte-list="tick"] > li {
    list-style: none;
    position: relative;
    padding-left: 1.35em;
}

.rich-text-editor-wrap.rte-tick-list .ql-editor ul:not([data-checked])[data-rte-list="tick"] > li::before {
    content: "✓" !important;
    position: absolute;
    left: 0;
    top: 0.05em;
    color: #16a34a !important;
    font-weight: 700 !important;
}

/* Pasted Quill 2–style: <ol><li data-list="bullet"> */
.rich-text-editor-wrap.rte-tick-list .ql-editor ol > li[data-list="bullet"]::before {
    content: "✓" !important;
    color: #16a34a !important;
    font-weight: 700 !important;
}

/* Rendered specification blocks outside the editor (requested quotes modal) */
.quote-spec-tick-list ol {
    margin: 0 0 10px 0;
    padding-left: 0;
}

.quote-spec-tick-list li[data-list="bullet"] {
    list-style: none;
    position: relative;
    padding-left: 26px;
    margin: 6px 0;
}

.quote-spec-tick-list li[data-list="bullet"]::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.05em;
    color: #16a34a;
    font-weight: 700;
}

.quote-spec-tick-list li[data-list="bullet"] > .ql-ui {
    display: none;
}

.quote-spec-tick-list ul:not([data-checked]) {
    list-style: none;
    padding-left: 0;
    margin: 0 0 10px 0;
}

.quote-spec-tick-list ul:not([data-checked]) > li {
    margin: 6px 0;
}

/* Explicit tick list (saved) */
.quote-spec-tick-list ul:not([data-checked])[data-rte-list="tick"] > li {
    list-style: none;
    position: relative;
    padding-left: 26px;
}

.quote-spec-tick-list ul:not([data-checked])[data-rte-list="tick"] > li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.05em;
    color: #16a34a;
    font-weight: 700;
}

/* Explicit bullet list (saved) */
.quote-spec-tick-list ul:not([data-checked])[data-rte-list="bullet"] > li {
    list-style: disc;
    list-style-position: outside;
    padding-left: 0.25em;
    margin-left: 1.25em;
}

.quote-spec-tick-list ul:not([data-checked])[data-rte-list="bullet"] > li::before {
    content: none !important;
}

/* Legacy: plain <ul> (before data-rte-list) — treat as ticks */
.quote-spec-tick-list ul:not([data-checked]):not([data-rte-list]) > li {
    list-style: none;
    position: relative;
    padding-left: 26px;
}

.quote-spec-tick-list ul:not([data-checked]):not([data-rte-list]) > li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.05em;
    color: #16a34a;
    font-weight: 700;
}

.rich-text-editor-wrap .ql-container {
    font-family: inherit;
}

.rich-text-editor-wrap .ql-editor img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    cursor: pointer;
}

/* Block alignment: Quill sets ql-align-* on <p>; images need block + margins to actually move */
.rich-text-editor-wrap .ql-editor .ql-align-center img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.rich-text-editor-wrap .ql-editor .ql-align-right img {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.rich-text-editor-wrap .ql-editor .ql-align-left img,
.rich-text-editor-wrap .ql-editor .ql-align-justify img {
    display: block;
    margin-left: 0;
    margin-right: auto;
}

.rich-text-editor-wrap .ql-editor img.rte-img-selected {
    outline: 2px solid var(--color-primary, #572a85);
    outline-offset: 2px;
}

/* Custom toolbar: insert {{quoteLinkButton}} placeholder */
.rich-text-editor-wrap .ql-toolbar button.rte-toolbar-proposal-btn {
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    margin: 0 2px !important;
    min-width: 44px !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #572a85 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #572a85 0%, #7b3fb8 100%) !important;
    color: #fff !important;
    opacity: 1 !important;
    text-indent: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(87, 42, 133, 0.35);
}

.rich-text-editor-wrap .ql-toolbar button.rte-toolbar-proposal-btn:hover {
    filter: brightness(1.04);
    box-shadow: 0 2px 6px rgba(87, 42, 133, 0.45);
}

.rich-text-editor-wrap .ql-toolbar button.rte-toolbar-proposal-btn::before {
    content: none !important;
}

.rich-text-editor-wrap .ql-toolbar button.rte-toolbar-table-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    min-width: 48px !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid var(--border-light, #d1d5db) !important;
    border-radius: 6px !important;
    line-height: 1.2 !important;
}

.rich-text-editor-wrap .ql-toolbar button.rte-toolbar-table-btn::before {
    content: none !important;
}

.rich-text-editor-wrap .ql-toolbar button.rte-toolbar-tick-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    min-width: 44px !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid var(--border-light, #d1d5db) !important;
    border-radius: 6px !important;
    color: #16a34a !important;
    line-height: 1.2 !important;
}

.rich-text-editor-wrap .ql-toolbar button.rte-toolbar-tick-btn::before {
    content: none !important;
}

.rich-text-editor-wrap .ql-toolbar button.rte-toolbar-attach-pdf-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    min-width: 44px !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid var(--border-light, #d1d5db) !important;
    border-radius: 6px !important;
    line-height: 1.2 !important;
}

.rich-text-editor-wrap .ql-toolbar button.rte-toolbar-attach-pdf-btn::before {
    content: none !important;
}

.rte-toolbar-attach-pdf-input--hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.rich-text-editor-wrap .ql-editor .rte-attachment-line,
.quote-spec-rich .rte-attachment-line,
.quote-spec-rich-inner .rte-attachment-line {
    margin: 8px 0;
}

.rich-text-editor-wrap .ql-editor .rte-attachment-link,
.quote-spec-rich .rte-attachment-link,
.quote-spec-rich-inner .rte-attachment-link {
    font-weight: 600;
    color: var(--color-primary, #572a85);
    text-decoration: underline;
}

.rich-text-editor-wrap .ql-editor .rte-attachment-link:hover,
.quote-spec-rich .rte-attachment-link:hover,
.quote-spec-rich-inner .rte-attachment-link:hover {
    text-decoration: none;
}

.rich-text-editor-wrap .ql-editor .rte-attachment-meta,
.quote-spec-rich .rte-attachment-meta,
.quote-spec-rich-inner .rte-attachment-meta {
    font-size: 0.9em;
    color: #64748b;
}

.rich-text-editor-wrap .ql-editor table,
.quote-spec-rich table,
.quote-spec-rich-inner table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

.rich-text-editor-wrap .ql-editor th,
.rich-text-editor-wrap .ql-editor td,
.quote-spec-rich th,
.quote-spec-rich td,
.quote-spec-rich-inner th,
.quote-spec-rich-inner td {
    border: 1px solid #d1d5db;
    padding: 8px 10px;
    vertical-align: top;
}

.rich-text-editor-wrap .ql-editor th,
.quote-spec-rich th,
.quote-spec-rich-inner th {
    background: #f8fafc;
    font-weight: 700;
}

.rich-text-editor-wrap .ql-editor td img,
.rich-text-editor-wrap .ql-editor th img,
.quote-spec-rich td img,
.quote-spec-rich th img,
.quote-spec-rich-inner td img,
.quote-spec-rich-inner th img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.rte-table-tools {
    display: none;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border-top: 1px solid var(--border-light, #e5e7eb);
    background: #f8fafc;
}

.rte-table-tools.is-visible {
    display: flex;
}

.rte-table-tools button {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--border-light, #d1d5db);
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
}

.rte-table-tools button:hover {
    border-color: var(--color-primary, #572a85);
    color: var(--color-primary, #572a85);
}

.rich-text-editor-wrap .ql-editor a[style*="background-color"] {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
    line-height: 1.1;
}

.rte-cta-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 110000;
    background: rgba(20, 20, 30, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.rte-cta-modal {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--border-light, #ddd);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    padding: 16px;
}

.rte-cta-modal h4 {
    margin: 0 0 10px 0;
    color: #222;
}

.rte-cta-modal label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin: 8px 0 4px 0;
}

.rte-cta-modal input {
    width: 100%;
    border: 1px solid var(--border-light, #ccc);
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 14px;
}

.rte-cta-hint {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: #555;
}

.rte-cta-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Fixed UI (appended to body while resizing) */
.rte-img-resize-handle {
    position: fixed;
    width: 14px;
    height: 14px;
    background: var(--color-primary, #572a85);
    border: 2px solid #fff;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: nwse-resize;
    z-index: 99999;
    pointer-events: auto;
}

.rte-img-resize-bar {
    position: fixed;
    display: flex;
    gap: 4px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid var(--border-light, #ccc);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    z-index: 99999;
}

.rte-img-resize-bar button {
    font-size: 11px;
    padding: 4px 8px;
    border: 1px solid var(--border-light, #ddd);
    border-radius: 4px;
    background: var(--color-gray-50, #f5f5f5);
    cursor: pointer;
    color: #333;
}

.rte-img-resize-bar button:hover {
    border-color: var(--color-primary, #572a85);
    color: var(--color-primary, #572a85);
}

/* Placeholder chips row */
.email-template-placeholders {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px 0;
}

.email-template-placeholders button {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-light, #ccc);
    background: var(--color-gray-50, #f5f5f5);
    cursor: pointer;
    color: var(--color-text, #333);
}

.email-template-placeholders button:hover {
    border-color: var(--color-primary, #572A85);
    color: var(--color-primary, #572A85);
}

/* Quote email tab: live preview of sent layout (outer colour + column width) */
.rich-text-editor-wrap.rte-quote-email-layout-preview {
    --rte-email-outer-bg: #ffffff;
    --rte-email-card-max: 600px;
    background: transparent;
    border-color: var(--border-light, #ddd);
}

.rich-text-editor-wrap.rte-quote-email-layout-preview .rich-text-editor-area {
    background: var(--rte-email-outer-bg);
    padding: 20px 14px;
    box-sizing: border-box;
}

.rich-text-editor-wrap.rte-quote-email-layout-preview .rich-text-editor-area .ql-toolbar.ql-snow {
    max-width: var(--rte-email-card-max);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    background: #f8fafc;
}

.rich-text-editor-wrap.rte-quote-email-layout-preview.rte-email-card-plain .rich-text-editor-area .ql-toolbar.ql-snow {
    border-color: #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0;
    background: #fff;
}

.rich-text-editor-wrap.rte-quote-email-layout-preview .rich-text-editor-area .ql-container.ql-snow {
    max-width: var(--rte-email-card-max);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: #fff;
}

.rich-text-editor-wrap.rte-quote-email-layout-preview.rte-email-card-plain .rich-text-editor-area .ql-container.ql-snow {
    border: none;
    border-radius: 0;
    border-top: 1px solid #e0e0e0;
}