/*[[ Custom CSS for SfRichTextEditor */

.custom-editor .e-content p {
    line-height: 1 !important;
}

/* Keep editor surface white in edit mode (new email) */
.custom-editor:not(.rte-readonly).e-richtexteditor {
    background-color: white !important;
}

.custom-editor:not(.rte-readonly) .e-content {
    background-color: white !important;
    color: black !important;
}

/* In edit mode, keep imported email HTML white by default,
   but preserve explicit HTML background styles/attributes */
.custom-editor:not(.rte-readonly) .e-content :is(div, p, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, section, article, header, footer, blockquote):not([style*="background"]):not([bgcolor]) {
    background-color: white !important;
}

/* Set the main editor background and text color (readonly only) */
.custom-editor.rte-readonly.e-richtexteditor {
    background-color: white !important;
    color: black !important;
}

    /* Set the default background and text color for the content area (readonly only) */
    .custom-editor.rte-readonly .e-content {
        background-color: white !important; /* Editable area background */
        color: black !important; /* Editable area text */
        overflow: auto; /* Ensure the scrollable content respects these styles */
    }

        /* Default to white for common content blocks, but keep explicit HTML backgrounds */
        .custom-editor.rte-readonly .e-content :is(div, p, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, section, article, header, footer, blockquote):not([style*="background"]):not([bgcolor]) {
            background-color: white !important;
        }

/*]] */

/* XRich Component Styles */

.xrich-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0; /* critical for splitter/flex sizing */
}

.xrich-caption {
    font-weight: 600;
    margin-bottom: 6px;
}

/* Fullscreen container wrapper */
.xrich-fullscreen-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;
}

.xrich-fullscreen-container.is-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background: var(--bs-body-bg, #fff);
}

/* Header for AI toolbar row (only when editable) */
.rich-editor-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bs-dark, #212529);
    border: 1px solid var(--bs-border-color, #495057);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.is-fullscreen .rich-editor-header {
    border-radius: 0;
}

.xrich-editor-host {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* critical */
    width: 100%;
}

/* Make the Syncfusion RTE stretch */
.xrich-editor-host .e-richtexteditor,
.xrich-editor-host .e-rte-container,
.xrich-editor-host .e-rte-content,
.xrich-editor-host .e-content,
.xrich-editor-host .e-rte-content .e-content,
.xrich-editor-host .e-rte-content .e-rte-srctextarea {
    height: 100% !important;
}

/* In fullscreen mode, ensure editor fills remaining space */
.is-fullscreen .xrich-editor-host {
    flex: 1 1 auto;
    height: 100%;
}

.is-fullscreen .xrich-editor-host .e-richtexteditor {
    height: 100% !important;
    border-radius: 0 !important;
}

/* Hide toolbar in readonly mode (fallback, robust) */
.custom-editor.rte-readonly .e-rte-toolbar,
.custom-editor.rte-readonly .e-toolbar-wrapper {
    display: none !important;
}

/* === TABLE BORDER STYLING === */

/*
 * Table Border Strategy:
 * 1. EDIT MODE: Show dotted light gray guide borders for all tables (helps with design/resize)
 * 2. READONLY MODE: Hide guide borders, preserve original styling
 * 3. EXPLICIT BORDERS: Always respect tables with border attribute or inline styles
 */

/* EDIT MODE: Show thin dotted light gray guide borders for designing/resizing */
.custom-editor:not(.rte-readonly) .e-rte-table {
    border-collapse: collapse;
}

.custom-editor:not(.rte-readonly) .e-rte-table td,
.custom-editor:not(.rte-readonly) .e-rte-table th {
    border: 1px dotted #c0c0c0; /* Light gray, dotted, thin - visible but subtle */
}

/* READONLY MODE: Completely reset e-rte-table styling to preserve original appearance */
/* External emails and content will display exactly as they were originally styled */
.custom-editor.rte-readonly .e-rte-table {
    border: unset;
    border-collapse: unset;
}

.custom-editor.rte-readonly .e-rte-table td,
.custom-editor.rte-readonly .e-rte-table th {
    border: unset;
}

/* EXPLICIT BORDERS: Respect tables with border attribute (both modes) */
.custom-editor table[border]:not([border="0"]) {
    border-collapse: collapse;
    border: 1px solid #BDBDBD;
}

.custom-editor table[border]:not([border="0"]) td,
.custom-editor table[border]:not([border="0"]) th {
    border: 1px solid #BDBDBD;
}

/* Ensure table resize handles are visible in edit mode */
.custom-editor .e-rte-table-resize {
    display: block !important;
}

.custom-editor .e-table-rhelper {
    display: block !important;
}