/* Summernote Global Customization */

/* 1. Essential Z-Index Fixes (Prevents dropdowns/modals from being hidden) */
.note-editor .dropdown-menu { z-index: 10005 !important; }
.note-toolbar { z-index: 50 !important; position: relative; }
.note-modal-backdrop { z-index: 1040 !important; }
.note-modal { z-index: 1050 !important; }

/* 2. Dark Theme Overrides (Matches Reply Box Style) */
.note-editor .note-editable {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

.note-placeholder {
    color: #888 !important;
}

/* 3. Toolbar customizations to match dark theme gracefully */
.note-toolbar {
    background: #252525 !important;
    border-bottom: 1px solid #333 !important;
    color: #eee;
}

/* Exclude color palette buttons from the generic gray button style */
.note-btn:not(.note-color-btn) {
    background: #333 !important;
    border: 1px solid #444 !important;
    color: #ddd !important;
}

.note-btn:hover, .note-btn.active {
    background: #444 !important;
    color: #fff !important;
    border-color: #555 !important;
}

/* Dropdown menus in dark mode */
.note-dropdown-menu {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #fff !important;
}

.note-dropdown-item:hover {
    background-color: #333 !important;
}

.note-dropdown-menu .dropdown-item {
     color: #eee !important;
}
.note-dropdown-menu .dropdown-item:hover {
    background-color: #333 !important;
}

/* Modal Content */
.note-modal-content {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #fff !important;
}
.note-modal-header {
    border-bottom: 1px solid #333 !important;
}
.note-modal-footer {
    border-top: 1px solid #333 !important;
}
.close {
    color: #fff !important;
    opacity: 0.7;
}

/* Border for the editor frame */
.note-editor.note-frame {
    border: 1px solid #333 !important;
    background: #1a1a1a !important; 
}

/* --- Color Palette Fixes --- */

/* Ensure color rows are displayed correctly */
.note-color-palette .note-color-row {
    display: flex !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Style individual color buttons */
.note-color-palette .note-color-btn {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 2px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    display: block !important; /* Force visibility */
}

/* Hover effect for color buttons */
.note-color-palette .note-color-btn:hover {
    transform: scale(1.2);
    border: 1px solid #fff !important;
    cursor: pointer;
    z-index: 10; /* Bring to front on hover */
}

/* Palette Titles (Background Color / Text Color) */
.note-dropdown-menu .note-palette-title {
    color: #ccc !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 5px 0 8px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Scrollbar for long dropdowns */
.note-dropdown-menu::-webkit-scrollbar { width: 6px; }
.note-dropdown-menu::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.note-dropdown-menu::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }