/* summernote-dark.css – an DaisyUI-Theme-Variablen gebunden */

/* ============ Editor-Grundfläche ============ */

.note-editor.note-frame {
    background-color: var(--color-base-100);
    border-color: var(--color-base-300) !important;
}

.note-editor.note-frame .note-editing-area .note-editable {
    background-color: var(--color-base-100) !important;
    color: var(--color-base-content) !important;
}

.note-editor.note-frame.fullscreen {
    background-color: var(--color-base-100) !important;
}

.note-editor.note-frame .note-statusbar {
    background-color: var(--color-base-200) !important;
    border-top-color: var(--color-base-300) !important;
}

/* ============ Toolbar ============ */

.note-editor.note-frame .note-toolbar {
    background-color: var(--color-base-200) !important;
    border-bottom: 1px solid var(--color-base-300) !important;
}

.note-editor.note-frame .note-btn:not(.note-color-btn) {
    background-color: var(--color-base-300) !important;
    color: var(--color-base-content) !important;
    border-color: var(--color-base-300) !important;
}

.note-editor.note-frame .note-btn:not(.note-color-btn):hover,
.note-editor.note-frame .note-btn:not(.note-color-btn):focus {
    background-color: var(--color-base-200) !important;
    color: var(--color-base-content) !important;
}

.note-editor.note-frame .note-btn:not(.note-color-btn).active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary-content) !important;
}

/* ============ Dropdowns allgemein ============ */

.note-editor.note-frame .note-dropdown-menu {
    background-color: var(--color-base-100) !important;
    border-color: var(--color-base-300) !important;
}

.note-editor.note-frame .note-dropdown-menu .note-dropdown-item,
.note-editor.note-frame .note-dropdown-menu a {
    color: var(--color-base-content) !important;
}

.note-editor.note-frame .note-dropdown-item:hover,
.note-editor.note-frame .note-dropdown-menu a:hover {
    background-color: var(--color-base-200) !important;
}

/* ============ Inhalte im Editor ============ */

.note-editable blockquote {
    border-left: 3px solid var(--color-primary);
    padding-left: 0.75rem;
    margin: 0.25rem 0;
    opacity: 0.9;
}
.note-editable a { color: var(--color-primary); text-decoration: underline; }
.note-editable ul { list-style: disc inside; }
.note-editable ol { list-style: decimal inside; }
.note-editable p { margin-bottom: 0.5em; }

/* ============ Summernote-Modals ============ */

.note-modal .modal-content {
    background-color: var(--color-base-100) !important;
    color: var(--color-base-content) !important;
    border-radius: var(--radius-box) !important;
    border-color: var(--color-base-300) !important;
}

.note-modal .modal-header {
    background-color: var(--color-base-200) !important;
    border-bottom: 1px solid var(--color-base-300) !important;
}

.note-modal .modal-body {
    background-color: var(--color-base-100) !important;
    color: var(--color-base-content) !important;
}

.note-modal .modal-footer {
    background-color: var(--color-base-200) !important;
    border-top: 1px solid var(--color-base-300) !important;
}

.note-modal .close {
    color: var(--color-base-content) !important;
    opacity: 0.7;
}

.note-modal .close:hover {
    opacity: 1;
    color: var(--color-primary) !important;
}

.note-modal .form-control {
    background-color: var(--color-base-200) !important;
    color: var(--color-base-content) !important;
    border-color: var(--color-base-300) !important;
}

.note-modal .form-control:focus {
    background-color: var(--color-base-100) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 30%, transparent) !important;
}

.note-modal .note-form-label {
    color: var(--color-base-content) !important;
}

.note-modal .btn {
    background-color: var(--color-base-300) !important;
    color: var(--color-base-content) !important;
    border-color: var(--color-base-300) !important;
}

.note-modal .btn:hover {
    background-color: var(--color-base-200) !important;
}

.note-modal .btn-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-primary-content) !important;
    border-color: var(--color-primary) !important;
}

/* ============ Farbpalette: Swatches ============ */

.note-color-palette .note-color-row {
    white-space: nowrap;
}

.note-color-palette .note-color-btn {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--color-base-300) !important;
    border-radius: 0 !important;
    background-clip: padding-box !important;
    /* KEIN background-color hier – das style-Attribut (Farbe) muss durchkommen. */
}

.note-color-reset,
.note-color-select {
    display: block !important;
    width: 100% !important;
    margin: 4px 0 !important;
    padding: 4px 8px !important;
    min-height: unset !important;
    font-size: 13px !important;
}

.note-palette-title {
    font-size: 13px;
    font-weight: 600;
    margin: 6px 0 4px;
    color: var(--color-base-content);
}

/* ============ Farbpaletten nebeneinander ============ */
/*
 * WICHTIG:
 * - Selektor hängt NICHT an .open, sondern direkt am Menü.
 *   Geschlossen greift weiterhin Summernotes display:none;
 *   beim Öffnen schlägt unser flex !important das inline display:block.
 * - Feste Palettenbreite (8 Swatches à 20px + Rahmen/Padding ≈ 176px),
 *   kein flex-grow → kein Umbruch möglich.
 */

.note-editor.note-frame .note-color.open .note-dropdown-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px;
}

.note-editor.note-frame .note-color .note-palette {
    width: 176px !important;
    flex: 0 0 176px !important;
}

/* holder darf die Palette nicht breiter ziehen */
.note-editor.note-frame .note-color .note-holder,
.note-editor.note-frame .note-color .note-holder-custom {
    width: 100%;
}

/* Custom-Palette (unter dem Color-Picker) standardmäßig versteckt –
   Summernote zeigt sie erst nach "Select" per Inline-Style */
.note-editor.note-frame .note-color .note-holder-custom {
    display: none;
}