/* ===== SimpleEditor (ProseMirror) — SelfService subset ===== */

/* Base ProseMirror reset */
.ProseMirror {
    outline: none;
    cursor: text;
}

/* Override default ProseMirror paragraph margin — ad templates need tight spacing */
.simple-rich-text-editor .ProseMirror p {
    margin: 0;
}

/* Editor content area */
.simple-rich-text-editor .ProseMirror {
    min-height: 20px;
    outline: none;
}

.simple-rich-text-editor .se-editor-wrapper {
    position: relative;
}

/* Toolbar base */
.se-toolbar {
    display: flex;
    flex-direction: column;
}

.se-toolbar-row {
    align-items: center;
    display: flex;
    gap: 3px;
    padding: 4px 5px;
}

/* Inline toolbar (floating on selection) */
.se-toolbar-inline {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
    position: absolute;
    transform: translateY(-8px);
    z-index: 9100;
}

/* Separator between button groups */
.se-toolbar-separator {
    background: transparent;
    display: inline-block;
    height: 16px;
    margin: 0 2px;
    width: 1px;
}

/* Toolbar buttons — fully rounded, matches .rounded-button from side toolbar */
.se-toolbar-btn {
    align-items: center;
    background: rgba(0, 0, 0, 0.07);
    border: none;
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 13px;
    height: 28px;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s, transform 0.15s;
    width: 28px;
}

.se-toolbar-btn:hover {
    background: color-mix(in srgb, var(--theme-secondary, #B7DD7E) 28%, white);
    color: var(--theme-secondary, #B7DD7E);
    transform: scale(1.06);
}

.se-toolbar-btn-active {
    background: color-mix(in srgb, var(--theme-secondary, #B7DD7E) 15%, white);
    border: 1px solid color-mix(in srgb, var(--theme-secondary, #B7DD7E) 30%, white);
    color: var(--theme-secondary, #B7DD7E);
}

.se-toolbar-btn-active:hover {
    background: color-mix(in srgb, var(--theme-secondary, #B7DD7E) 25%, white);
    color: var(--theme-secondary, #B7DD7E);
}

.se-toolbar-btn:focus {
    outline: none;
}

/* Symbol button active when icon picker panel is open */
body:has(.panel-marker-icons) .se-toolbar-inline [data-btn="symbols"] {
    background: color-mix(in srgb, var(--theme-secondary, #B7DD7E) 20%, white) !important;
    border: 1px solid color-mix(in srgb, var(--theme-secondary, #B7DD7E) 35%, white) !important;
    color: var(--theme-secondary, #B7DD7E) !important;
}

/* Hide the "more" toggle in flat mode */
.se-toolbar-more-btn {
    display: none;
}

/* Secondary row — hidden in flat mode */
.se-toolbar-secondary {
    display: none;
}

/* ===== SpanPairEditor ===== */
.span-pair-editor {
    display: flex;
    width: 100%;
}

.span-pair-inline {
    flex-direction: row;
    gap: 12px;
}

.span-pair-stacked {
    flex-direction: column;
}

.span-pair-input {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    outline: none;
    padding: 0;
    text-align: inherit;
    width: 100%;
}

.span-pair-input:focus {
    outline: none;
}

/* ===== Placeholder text ===== */

/* <span class="ph" data-hint="Naam">⁣</span> (an invisible marker character), declared
   per-text in ElementHelper.cs.*/
.ph {
    background: color-mix(in srgb, var(--theme-secondary, #B7DD7E) 10%, white);
    border: 1px solid color-mix(in srgb, var(--theme-secondary, #B7DD7E) 30%, white);
    border-radius: 0.4em;
    padding: 1px 8px;
    transition: background-color 0.15s ease;
}

.ph::before {
    color: #5b6472;
    content: attr(data-hint);
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
}

.ph:hover {
    background: color-mix(in srgb, var(--theme-secondary, #B7DD7E) 24%, white);
}

/* ===== Placeholder image (unfilled photo slots) ===== */

.inline-img-placeholder,
.el-image-placeholder {
    background: color-mix(in srgb, var(--theme-secondary, #B7DD7E) 10%, white);
    border: 1px solid color-mix(in srgb, var(--theme-secondary, #B7DD7E) 30%, white);
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.inline-img-placeholder:hover,
.el-image-placeholder:hover {
    background: color-mix(in srgb, var(--theme-secondary, #B7DD7E) 24%, white);
}

/* ===== Placeholder colors on non-white template backgrounds ===== */

.template-div.has-background .ph,
.template-div.has-background .inline-img-placeholder,
.template-div.has-background .el-image-placeholder {
    background: white;
    border-color: white;
}

.template-div.has-background .ph:hover,
.template-div.has-background .inline-img-placeholder:hover,
.template-div.has-background .el-image-placeholder:hover {
    background: white;
}