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

/* Base ProseMirror reset */
.ProseMirror {
    outline: none;
    cursor: text;
    /* Without this a trailing space collapses (normal) or hangs past the line end in centered
       text (pre-wrap), so the caret doesn't visibly move after typing a space. */
    white-space: break-spaces;
}

/* 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. Only the still-unfilled hint (data-hint present) gets the pill
   treatment — once real text replaces it, the JS editor clears data-hint (see
   HtmlTextArea.razor's StripFilledPlaceholderMarks comment) so this stops matching and the
   typed text just inherits the template's normal text color. */
.ph[data-hint] {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    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[data-hint]:hover {
    background: #e5e7eb;
}

/* Rubric's lone "type your ad here" placeholder (empty-text, CategoryIds [5] in
   ElementHelper.cs) reads as an instruction rather than a fillable field, so it skips the pill
   treatment — just the gray hint text, no box. */
.el-rubric-empty .ph[data-hint] {
    background: none;
    border: none;
    padding: 0;
}

.el-rubric-empty .ph::before {
    font-size: 11pt;
    white-space: normal;
}

.el-rubric-empty .ph[data-hint]:hover {
    background: none;
}

/* Keyframes for the fake caret drawn on the placeholder under the caret. The rules that hide that
   placeholder's hint and draw the caret are generated by TokenSelect.focusPlaceholder in
   tokenSelect.js. */
@keyframes ph-caret-blink {
    50% {
        opacity: 0;
    }
}

body.ph-highlight-mode .ph[data-hint],
body.ph-highlight-mode .template-div.has-background .ph[data-hint] {
    background: #fee2e2;
    border-color: #ef4444;
}

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

.inline-img-placeholder,
.el-image-placeholder {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    margin-left: 10px;
}

.inline-img-placeholder:hover,
.el-image-placeholder:hover {
    background: #e5e7eb;
}

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

.template-div.has-background .ph[data-hint] {
    background: white;
    border-color: white;
}

.template-div.has-background .el-rubric-empty .ph[data-hint] {
    background: none;
    border-color: transparent;
}

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

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

/* Text colour picker: the printable colours as round swatches, plus "Verwijderen" */
.se-color-popup {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
    gap: 6px;
    grid-template-columns: repeat(4, 22px);
    left: 50%;
    padding: 8px;
    position: absolute;
    top: 34px;
    transform: translateX(-50%);
    z-index: 9200;
}

.se-color-swatch {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    cursor: pointer;
    height: 22px;
    padding: 0;
    transition: transform 0.15s;
    width: 22px;
}

.se-color-swatch:hover {
    transform: scale(1.15);
}

.se-color-remove {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    grid-column: 1 / -1;
    padding: 4px 0 0;
}

.se-color-remove:hover {
    color: #111827;
}