.ecms-editor-shell .note-editor.note-frame {
    border: 1px solid #dee2e6;
}
.ecms-editor-shell .note-editor .note-toolbar {
    border-bottom: 1px solid #dee2e6;
}
.ecms-editor-shell .note-editor .note-editing-area .note-editable {
    min-height: 180px;
    background: #fff;
}

.ecms-editor-code-input {
    font-family: Consolas, Monaco, monospace;
    min-height: 260px;
    white-space: pre;
}
.note-editor .note-toolbar .note-btn .ms-1 {
    font-size: 11px;
    vertical-align: middle;
}

.ecms-editor-shell .note-editor .note-toolbar .note-btn i.fa-solid {
    font-size: 14px;
    line-height: 1;
}
.ecms-editor-shell .note-editor .note-toolbar .note-btn[data-event="codeview"] .note-icon-code {
    display: none;
}
.ecms-editor-shell .note-editor .note-toolbar .note-btn[data-event="codeview"]::before {
    content: "\f121";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
}


.ecms-gif-grid,
.ecms-emote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}
.ecms-gif-item,
.ecms-emote-item {
    padding: 8px;
    text-align: center;
}
.ecms-gif-item img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
}
.ecms-emote-item-label {
    font-weight: 600;
}


.ecms-emote-modal-dialog {
    max-width: 980px;
}
.ecms-emote-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ecms-emote-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}
.ecms-emote-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e9ecef;
}
.ecms-emote-tabs .ecms-emote-tab {
    min-width: 42px;
}
.ecms-emote-results {
    min-height: 360px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}
.ecms-emote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 8px;
}
.ecms-emote-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
}
.ecms-emote-item:hover,
.ecms-emote-item:focus {
    background: #f8f9fa;
    border-color: #ced4da;
}
.ecms-emote-char {
    font-size: 26px;
    line-height: 1;
}
.ecms-emote-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    color: #6c757d;
    font-size: 14px;
    text-align: center;
}

/* Compact e-CMS/Summernote toolbar inside the modern control panel.
   The CP refresh globally enlarges .btn/.btn-group controls; the editor
   needs its own tighter WYSIWYG-style button sizing and grouping. */
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar {
    display: flex !important;
    align-items: center !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    padding: 6px 8px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--cp-accent-rgb), 0.10)) !important;
    border-bottom: 1px solid rgba(var(--cp-accent-rgb), 0.18) !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn-group,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .btn-group {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 -1px 0 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn-group + .note-btn-group,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .btn-group + .btn-group {
    margin-left: -1px !important;
}


#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar > .note-btn-group,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar > .btn-group {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 30px !important;
    width: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 7px !important;
    margin: 0 0 0 -1px !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn + .note-btn,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .btn + .btn {
    margin-left: -1px !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn-group > .note-btn:not(:first-child):not(:last-child),
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .btn-group > .note-btn:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn-group > .note-btn:first-child:not(:last-child),
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .btn-group > .note-btn:first-child:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn-group > .note-btn:last-child:not(:first-child),
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .btn-group > .note-btn:last-child:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn i,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn .note-icon-caret,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn::before {
    font-size: 13px !important;
    line-height: 1 !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn .ms-1 {
    margin-left: 4px !important;
    font-size: 11px !important;
    line-height: 1 !important;
}


/* Keep every e-editor toolbar profile as a single compact button rail.
   This overrides the general dashboard .btn-group spacing so Summernote
   groups do not spread apart on profile/content/editor pages. */
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-editor .note-toolbar,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar.card-header {
    justify-content: flex-start !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn-group,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .btn-group,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn-group.btn-group {
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    flex: 0 0 auto !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn-group:first-child .note-btn:first-child {
    margin-left: 0 !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn-group:last-child .note-btn:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-dropdown-menu,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .dropdown-menu {
    margin-top: 4px !important;
}


/* Keep the e-editor toolbar tied to the selected control panel accent.
   Page-level editor CSS used neutral/green-tinted toolbar backgrounds, so this
   shared override keeps every CP e-editor consistent with pages_cp_themesettings. */
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-editor .note-toolbar,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar.card-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--cp-accent-rgb), 0.10)) !important;
    border-bottom-color: rgba(var(--cp-accent-rgb), 0.18) !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn {
    border-color: rgba(var(--cp-accent-rgb), 0.22) !important;
}

#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn:hover,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn:focus,
#layoutSidenav_content > main:not(.cp-dashboard-main) .ecms-editor-shell .note-toolbar .note-btn.active {
    background: rgba(var(--cp-accent-rgb), 0.14) !important;
    border-color: rgba(var(--cp-accent-rgb), 0.36) !important;
    color: var(--cp-accent-dark) !important;
}