/* ============================================================================
   TMIS WYSIWYG HTML EDITOR — RESTORED STYLES
   Matches tmis.htmlEditor.js + _HtmlEditor.cshtml
   ============================================================================ */

/* Root editor container */
.tmis-html-editor {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
}

/* ============================================================================
   TOOLBAR
   ============================================================================ */

.tmis-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    border-radius: 6px 6px 0 0;
}

    .tmis-editor-toolbar .btn {
        padding: 2px 6px;
        font-size: 0.85rem;
        line-height: 1rem;
    }

    .tmis-editor-toolbar .btn-light {
        background: #f8f9fa;
        border: 1px solid #ddd;
    }

        .tmis-editor-toolbar .btn-light:hover {
            background: #e2e6ea;
        }

.toolbar-sep {
    margin: 0 6px;
    color: #777;
    font-weight: bold;
}

/* Token dropdown */
.tmis-editor-token-select {
    min-width: 140px;
    font-size: 0.85rem;
}

/* ============================================================================
   EDITABLE DESIGN SURFACE
   ============================================================================ */

[data-editor-role="design"] {
    width: 100%;
    min-height: 240px;
    padding: 8px;
    border: none;
    border-radius: 0 0 6px 6px;
    background: #fff;
    font-size: 1rem;
    line-height: 1.35rem;
    cursor: text;
    white-space: pre-wrap;
}

    [data-editor-role="design"]:focus {
        outline: 2px solid #0d6efd55;
    }

    /* Paragraph spacing inside editor */
    [data-editor-role="design"] p {
        margin: 0 0 0.5rem 0;
    }

    /* Images inside editor */
    [data-editor-role="design"] img {
        max-width: 100%;
        height: auto;
        margin: 4px 0;
    }

/* ============================================================================
   PREVIEW MODAL
   ============================================================================ */

#tmisPreviewText {
    font-family: "Segoe UI", sans-serif;
    white-space: pre-wrap;
    background: #fafafa;
    border: 1px solid #ddd;
    padding: 1rem;
    min-height: 250px;
}

/* ============================================================================
   IMAGE UPLOAD MODAL
   ============================================================================ */

#tmisEditorImageFile {
    border: 1px solid #ccc;
    padding: 6px;
    border-radius: 4px;
    width: 100%;
}

#tmisEditorInsertImageBtn {
    min-width: 120px;
}

/* ============================================================================
   MODAL BEHAVIOR FIXES
   ============================================================================ */

.modal-backdrop.show {
    opacity: 0.45 !important;
    transition: opacity 0.15s ease-in-out;
}

.modal {
    pointer-events: auto !important;
}

body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* ============================================================================
   DARK MODE SUPPORT
   ============================================================================ */

.dark-mode .tmis-html-editor {
    background: #222;
    border-color: #444;
}

.dark-mode [data-editor-role="design"] {
    background: #222;
    color: #f1f1f1;
}

.dark-mode #tmisPreviewText {
    background: #222;
    color: #eee;
    border-color: #555;
}

.dark-mode .tmis-editor-toolbar .btn-light {
    background: #333;
    border-color: #555;
    color: #eee;
}

    .dark-mode .tmis-editor-toolbar .btn-light:hover {
        background: #444;
    }