/* ============================================================
   CPW Tracker — Quill Rich Text Editor Dark Theme
   Matches the Warm Broadcast design language
   ============================================================ */

/* Container */
.cpw-editor {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg-elevated);
}

/* Toolbar */
.cpw-editor .ql-toolbar {
    background: var(--bg-surface) !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 6px 8px !important;
}

.cpw-editor .ql-toolbar .ql-formats {
    margin-right: 8px;
}

/* Toolbar buttons */
.cpw-editor .ql-toolbar button {
    width: 28px !important;
    height: 28px !important;
    padding: 4px !important;
    border-radius: 4px !important;
    transition: all 0.15s !important;
}

.cpw-editor .ql-toolbar button:hover {
    background: var(--bg-hover) !important;
}

.cpw-editor .ql-toolbar button.ql-active {
    background: var(--accent) !important;
}

/* SVG icons in toolbar */
.cpw-editor .ql-toolbar .ql-stroke {
    stroke: var(--text-secondary) !important;
}
.cpw-editor .ql-toolbar .ql-fill {
    fill: var(--text-secondary) !important;
}
.cpw-editor .ql-toolbar button:hover .ql-stroke,
.cpw-editor .ql-toolbar .ql-picker-label:hover .ql-stroke {
    stroke: var(--text-primary) !important;
}
.cpw-editor .ql-toolbar button:hover .ql-fill {
    fill: var(--text-primary) !important;
}
.cpw-editor .ql-toolbar button.ql-active .ql-stroke {
    stroke: #000 !important;
}
.cpw-editor .ql-toolbar button.ql-active .ql-fill {
    fill: #000 !important;
}

/* Picker (headings dropdown, etc) */
.cpw-editor .ql-toolbar .ql-picker {
    color: var(--text-secondary) !important;
}
.cpw-editor .ql-toolbar .ql-picker-label {
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    transition: all 0.15s !important;
}
.cpw-editor .ql-toolbar .ql-picker-label:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}
.cpw-editor .ql-toolbar .ql-picker-label::before {
    color: var(--text-secondary) !important;
}
.cpw-editor .ql-toolbar .ql-picker.ql-expanded .ql-picker-label {
    border-color: var(--accent) !important;
}

/* Picker dropdown */
.cpw-editor .ql-toolbar .ql-picker-options {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xs) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    padding: 4px !important;
}
.cpw-editor .ql-toolbar .ql-picker-item {
    color: var(--text-secondary) !important;
    padding: 4px 8px !important;
    border-radius: 3px !important;
}
.cpw-editor .ql-toolbar .ql-picker-item:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}
.cpw-editor .ql-toolbar .ql-picker-item.ql-selected {
    color: var(--accent) !important;
}

/* Editor content area */
.cpw-editor .ql-container {
    border: none !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    color: var(--text-primary) !important;
}

.cpw-editor .ql-editor {
    min-height: 200px;
    padding: 1rem !important;
    line-height: 1.7 !important;
    color: var(--text-primary) !important;
}

.cpw-editor .ql-editor.ql-blank::before {
    color: var(--text-muted) !important;
    font-style: italic !important;
}

/* Minimal variant (wiki sections) */
.cpw-editor-mini .ql-editor {
    min-height: 120px;
}

/* ── Content styling inside editor ─────────────────── */
.cpw-editor .ql-editor h1 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 1rem 0 0.5rem;
    color: var(--text-primary);
}
.cpw-editor .ql-editor h2 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0.75rem 0 0.5rem;
    color: var(--text-primary);
}
.cpw-editor .ql-editor h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
    color: var(--text-primary);
}
.cpw-editor .ql-editor p {
    margin: 0 0 0.75rem;
}
.cpw-editor .ql-editor blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 1rem;
    margin: 0.75rem 0;
    color: var(--text-secondary);
    font-style: italic;
}
.cpw-editor .ql-editor ul, .cpw-editor .ql-editor ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}
.cpw-editor .ql-editor li {
    margin: 0.25rem 0;
}
.cpw-editor .ql-editor a {
    color: var(--accent);
    text-decoration: underline;
}
.cpw-editor .ql-editor img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin: 0.75rem 0;
}
.cpw-editor .ql-editor pre {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 0.75rem;
    font-family: monospace;
    font-size: 0.8rem;
    overflow-x: auto;
    margin: 0.75rem 0;
}
.cpw-editor .ql-editor hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}

/* ── Rendered article content (read-only view) ─────── */
.article-content h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.article-content h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin: 1.25rem 0 0.5rem; }
.article-content h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.article-content p { margin: 0 0 1rem; line-height: 1.8; }
.article-content blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; margin: 1rem 0; color: var(--text-secondary); font-style: italic; }
.article-content ul, .article-content ol { padding-left: 1.5rem; margin: 0.75rem 0; }
.article-content li { margin: 0.25rem 0; line-height: 1.7; }
.article-content a { color: var(--accent); text-decoration: underline; }
.article-content img { max-width: 100%; border-radius: var(--radius-sm); margin: 1rem 0; }
.article-content pre { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1rem; font-family: monospace; font-size: 0.8rem; overflow-x: auto; margin: 1rem 0; }
.article-content hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.article-content strong { font-weight: 700; }
.article-content em { font-style: italic; }