/* Rich-text editor field (email/SMS template HTML editor).
   Themed via core theme.css custom properties (light/dark aware), with fallbacks
   so it degrades gracefully if a variable is ever missing. JS hooks preserved:
   .editor-container .toolbar [data-command] .toggle-view-btn .rich-editor
   .html-editor .hidden-editor-input .link-popup. */

/* ---- field label (the CRUD block wraps this in .field.rich) ---- */
.field.rich > label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--main-font-color, #222); }

/* ---- outer frame ---- */
.editor-container {
    background: var(--main-background, #fff);
    border: var(--main-border, 1px solid #ccc);
    border-radius: var(--page-grid-border-radius, 8px);
    overflow: hidden;
    margin-bottom: 14px;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.editor-container:focus-within {
    border-color: var(--button-background, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.field.rich.error .editor-container { border-color: var(--status-failed-background, #c0392b); }

/* ---- toolbar ---- */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--field-bubble-background, #f5f5f5);
    border-bottom: var(--main-border, 1px solid #ddd);
}
.tb-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tb-group + .tb-group { margin-left: 4px; padding-left: 8px; border-left: 1px solid rgba(0, 0, 0, .14); }

.toolbar button,
.toolbar select {
    height: 30px;
    min-width: 30px;
    padding: 0 8px;
    font-size: 13px;
    line-height: 1;
    color: var(--input-font-color, #222);
    background: var(--input-background, #fff);
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.toolbar select { padding-right: 4px; }
.toolbar button:hover,
.toolbar select:hover { background: var(--sidebar-menu-hover-background, #eaeaea); border-color: rgba(0, 0, 0, .32); }
.toolbar button:focus-visible,
.toolbar select:focus-visible { outline: 2px solid var(--button-background, #2563eb); outline-offset: 1px; }
.toolbar button.active {
    background: var(--button-background, #333);
    color: var(--button-font-color, #fff);
    border-color: var(--button-background, #333);
}
.toolbar button:disabled,
.toolbar select:disabled { opacity: var(--disabled-opacity, .5); cursor: not-allowed; }

/* fixed-width icon-ish buttons for the inline format / list controls */
.toolbar [data-command="bold"],
.toolbar [data-command="italic"],
.toolbar [data-command="underline"],
.toolbar [data-command="insertUnorderedList"],
.toolbar [data-command="insertOrderedList"],
.toolbar [data-command="removeFormat"] { width: 32px; padding: 0; font-weight: 600; }

/* ---- HTML/Rich-Text toggle: pushed to the right, distinct, with active state.
   (.toolbar .toggle-view-btn out-specifies the generic .toolbar button rule.) ---- */
.toolbar .toggle-view-btn {
    margin-left: auto;
    padding: 0 12px;
    font-weight: 600;
    color: var(--button-font-color, #fff);
    background: var(--button-background, #444);
    border-color: var(--button-background, #444);
}
.toolbar .toggle-view-btn:hover {
    background: var(--button-hover-background, #222);
    border-color: var(--button-hover-background, #222);
}
.toolbar .toggle-view-btn.html-mode {
    color: var(--status-failed-font-color, #fff);
    background: var(--status-failed-background, #c0392b);
    border-color: var(--status-failed-background, #c0392b);
}

/* ---- editing surfaces ---- */
.rich-editor {
    min-height: 240px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px 18px;
    outline: none;
    font-size: 15px;
    line-height: 1.6;
    color: var(--input-font-color, #222);
    background: var(--input-background, #fff);
}
.rich-editor:empty:before { content: attr(data-placeholder); color: var(--banner-subtext, #999); pointer-events: none; }
.rich-editor a { color: var(--link-font-color, #2563eb); text-decoration: underline; }
.rich-editor img { max-width: 100%; height: auto; }
.rich-editor h1 { font-size: 1.6em; margin: .5em 0 .3em; }
.rich-editor h2 { font-size: 1.3em; margin: .5em 0 .3em; }
.rich-editor p, .rich-editor div { margin: .35em 0; }

.html-editor {
    display: none;
    width: 100%;
    box-sizing: border-box;
    min-height: 240px;
    max-height: 60vh;
    padding: 16px 18px;
    border: none;
    outline: none;
    resize: vertical;
    font-family: ui-monospace, "SF Mono", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.5;
    tab-size: 2;
    color: var(--input-font-color, #222);
    background: var(--fillup-background, #f6f8fa);
}

/* ---- link popup ---- */
.link-popup {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 320px;
    padding: 14px;
    color: var(--popup-font-color, #222);
    background: var(--popup-background, #fff);
    border: var(--popup-window-border, 1px solid #ccc);
    border-radius: var(--page-grid-border-radius, 8px);
    box-shadow: var(--popup-window-shadow, 0 8px 24px rgba(0, 0, 0, .18));
}
.link-popup.show { display: block; }
.link-popup-content { display: flex; flex-direction: column; gap: 10px; }
.link-input-group { display: flex; gap: 8px; align-items: center; }
.link-input-group.hide { display: none; }
.link-input-group label { min-width: 64px; font-weight: 600; font-size: 13px; }
.link-input-group input,
.link-input-group select {
    flex: 1;
    padding: 7px 9px;
    font-size: 13px;
    color: var(--input-font-color, #222);
    background: var(--input-background, #fff);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
}
.link-input-group input:focus,
.link-input-group select:focus { outline: none; border-color: var(--button-background, #2563eb); box-shadow: 0 0 0 2px rgba(37, 99, 235, .12); }

.link-popup-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.link-popup-buttons button {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--input-font-color, #222);
    background: var(--input-background, #fff);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
}
.link-popup-buttons button:hover { background: var(--sidebar-menu-hover-background, #eaeaea); }
.link-popup-buttons .primary {
    color: var(--button-font-color, #fff);
    background: var(--button-background, #2563eb);
    border-color: var(--button-background, #2563eb);
}
.link-popup-buttons .primary:hover { background: var(--button-hover-background, #1d4ed8); border-color: var(--button-hover-background, #1d4ed8); }
.link-popup-buttons .danger {
    color: var(--status-failed-font-color, #fff);
    background: var(--status-failed-background, #c0392b);
    border-color: var(--status-failed-background, #c0392b);
}
.link-popup-buttons .danger:hover { filter: brightness(.93); }