/* ============================================================
   Quill Snow Override — passt den Editor ans mybetacube-Theme
   Einbinden NACH quill.snow.css
   ============================================================ */

/* --- Editor-Container ------------------------------------ */
.ql-container.ql-snow, 
div.ql-container.bg-white {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 0 8px 8px !important;
    background-color: rgba(30, 30, 30, 0.82) !important; /* Macht den weißen Kasten dunkel */
}

/* --- Toolbar -------------------------------------------- */
.ql-toolbar.ql-snow,
div.ql-toolbar {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px 8px 0 0 !important;
    background-color: rgba(20, 20, 20, 0.92) !important;
}

/* Toolbar Icons */
.ql-toolbar.ql-snow .ql-stroke {
    stroke: #cbd5e1 !important;
}
.ql-toolbar.ql-snow .ql-fill {
    fill: #cbd5e1 !important;
}
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke {
    stroke: #cb4b16 !important;
}
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill {
    fill: #cb4b16 !important;
}

/* Toolbar Dropdowns (Schriftgröße, Format etc.) */
.ql-snow .ql-picker {
    color: #cbd5e1 !important;
}
.ql-snow .ql-picker-options {
    background-color: rgba(30, 30, 30, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.ql-snow .ql-picker-item:hover {
    color: #cb4b16 !important;
}

/* --- Editor-Textbereich --------------------------------- */
.ql-editor {
    background-color: transparent !important;
    min-height: 200px;
}

/* Zwingt den eigentlichen Text, die Absätze und Listen-Elemente im Editor auf reines Weiß */
.ql-editor, 
.ql-editor p, 
.ql-editor span, 
.ql-editor li {
    color: #ffffff !important; /* Reines Weiß */
    font-family: "Helvetica Neue", ui-sans-serif, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
}

/* --- Typografie im Editor ------------------------------- */
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
    font-family: "Noto Sans 1", "Helvetica Neue", ui-sans-serif, sans-serif !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
}
.ql-editor h1 { font-size: 1.875rem !important; margin: 1.5rem 0 0.75rem !important; }
.ql-editor h2 { font-size: 1.5rem   !important; margin: 1.25rem 0 0.5rem !important; }
.ql-editor h3 { font-size: 1.25rem  !important; margin: 1rem 0 0.5rem !important; }

.ql-editor p  { margin-bottom: 0.75rem !important; }
.ql-editor a  { color: #cb4b16 !important; text-decoration: underline; }
.ql-editor a:hover { color: #e8622a !important; }

/* Listen */
.ql-editor ul,
.ql-editor ol {
    padding-left: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}

/* Inline Code */
.ql-editor code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 0.875rem !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    border-radius: 4px !important;
    padding: 0.125rem 0.375rem !important;
}

/* Code-Block */
.ql-editor pre.ql-syntax {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 0.875rem !important;
    background-color: #1e1e1e !important;
    color: #d4d4d4 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
    overflow-x: auto;
}

/* Blockquote */
.ql-editor blockquote {
    border-left: 4px solid #cb4b16 !important;
    padding-left: 1rem !important;
    font-style: italic !important;
    color: #94a3b8 !important;
    margin-bottom: 0.75rem !important;
}

/* --- 1. Die Hintergrund-Box der gesamten Liste --- */
.quill-view, 
.quill-list,
div[class*="quill-"] {
    background-color: rgba(30, 30, 30, 0.82) !important; /* Entspricht surface.card */
    border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Entspricht surface.border */
    border-radius: 8px !important;
    color: #ffffff !important;
}

/* --- 2. Die Überschrift und Titel innerhalb der Quill-Ansichten --- */
.quill-view h1, .quill-list h1,
.quill-view h2, .quill-list h2,
.quill-view h3, .quill-list h3 {
    color: #ffffff !important;
    font-family: "Noto Sans 1", sans-serif !important;
    font-weight: 700 !important;
}

/* --- 3. Die einzelnen Zeilen / Einträge in der Liste --- */
.quill-list-item,
.quill-view-item,
div[class*="quill-"] li,
div[class*="quill-"] a {
    color: #cbd5e1 !important; /* Entspricht content.secondary */
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; /* Entspricht surface.muted */
    background: transparent !important;
}

/* Hover-Effekt für die Einträge */
.quill-list-item:hover,
div[class*="quill-"] a:hover {
    background-color: rgba(255, 255, 255, 0.07) !important; /* Entspricht surface.muted */
    color: #cb4b16 !important; /* Schaltet bei Hover auf dein Orange (accent) um */
}

/* --- 4. Knöpfe und Buttons (z.B. der "+"-Button oder "Erstellen") --- */
.quill-btn,
button[class*="quill-"],
a[class*="quill-btn"] {
    background-color: #cb4b16 !important; /* Dein Orange (accent) */
    color: #ffffff !important;
    border-radius: 15px !important; /* Entspricht rounded-btn */
    border: none !important;
    transition: color 200ms linear, background-color 200ms linear !important;
}

.quill-btn:hover,
button[class*="quill-"]:hover,
a[class*="quill-btn"]:hover {
    background-color: #a83a0f !important; /* Dein dunkleres Orange (accent.hover) */
}

/* Erzwingt das Dark-Theme für das Django-Sichtbarkeits-Dropdown */
.custom-dark-select select {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border-color: #374151; /* gray-700 */
    background-color: #1f2937; /* gray-800 */
    color: #ffffff;
    padding: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.custom-dark-select select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #2563eb; /* focus:border-blue-500 */
    --tw-ring-color: #2563eb;
}