/**
 * QUILL EDITOR - Dark Luxury Theme
 * =================================
 * Clean Architecture: This file owns ALL Quill styling for the Dark Luxury admin theme.
 * Loaded as a dedicated <link> tag in admin pages that use Quill.
 *
 * Principle: Configure, don't fight. Use Quill's own class names (.ql-stroke, .ql-fill)
 * to recolor icons without destroying their internal SVG transparency masks.
 *
 * NO inline style overrides exist here — all styling is done via CSS cascade.
 * The quill-wrapper.js must NOT set any color inline styles on buttons.
 */

/* ==========================================================================
   1. CONTAINER & EDITOR AREA
   ========================================================================== */

#editor-container {
    min-height: 400px;
    border-radius: 0 0 8px 8px;
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

.ql-container.ql-snow {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.ql-editor {
    min-height: 350px;
    color: var(--color-text-primary) !important;
    font-size: 1rem;
    line-height: 1.6;
}

.ql-editor p,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6,
.ql-editor li {
    color: var(--color-text-primary) !important;
}

.ql-editor.ql-blank::before {
    color: rgba(255, 255, 255, 0.4) !important;
    font-style: italic;
}

/* ==========================================================================
   2. TOOLBAR BASE
   ========================================================================== */

.ql-toolbar.ql-snow {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px 8px 0 0 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 8px !important;
    position: relative;
    z-index: 2;
    overflow: visible !important;
}

/* Compact button groups */
.ql-toolbar.ql-snow .ql-formats {
    margin-right: 6px !important;
}

/* ==========================================================================
   3. ICON COLORS — Base state (Ivory)
   Uses Quill's own class names to preserve SVG transparency masks.
   ========================================================================== */

/* Stroke-based icons (Bold, Italic, Link, Align, etc.) */
.ql-toolbar.ql-snow .ql-stroke {
    fill: none !important;
    stroke: var(--color-text-primary) !important;
}

/* Fill-based icons (List bullet, etc.) */
.ql-toolbar.ql-snow .ql-fill {
    fill: var(--color-text-primary) !important;
    stroke: none !important;
}

/* Icons that have BOTH stroke and fill */
.ql-toolbar.ql-snow .ql-stroke.ql-fill {
    fill: var(--color-text-primary) !important;
    stroke: var(--color-text-primary) !important;
}

/* CRITICAL: Quill Snow's internal <path>, <line> etc. inside SVGs use
   a hardcoded dark-grey 'stroke' attr. These selectors reach those raw SVG
   elements directly so they're visible on the Obsidian background. */
.ql-toolbar.ql-snow button svg path,
.ql-toolbar.ql-snow button svg line,
.ql-toolbar.ql-snow button svg circle,
.ql-toolbar.ql-snow button svg polyline,
.ql-toolbar.ql-snow button svg polygon,
.ql-toolbar.ql-snow button svg rect {
    stroke: var(--color-text-primary) !important;
}

.ql-toolbar.ql-snow button svg path[fill],
.ql-toolbar.ql-snow button svg rect[fill] {
    fill: var(--color-text-primary) !important;
}

/* Exceptions: Keep hollow paths hollow (identified by fill=none in SVG) */
.ql-toolbar.ql-snow button svg path[fill="none"],
.ql-toolbar.ql-snow button svg circle[fill="none"],
.ql-toolbar.ql-snow button svg rect[fill="none"] {
    fill: none !important;
}

/* Picker labels (dropdowns: Font, Size, Header, Color, Align) */
.ql-toolbar.ql-snow .ql-picker,
.ql-toolbar.ql-snow .ql-picker-label {
    color: var(--color-text-primary) !important;
}

/* Picker label dropdown chevron SVG */
.ql-toolbar.ql-snow .ql-picker-label .ql-stroke {
    stroke: var(--color-text-primary) !important;
}

/* Custom FontAwesome icon buttons (Download, YouTube) — inherit color from button */
.ql-toolbar.ql-snow button {
    color: var(--color-text-primary) !important;
}

.ql-toolbar.ql-snow button i {
    color: inherit !important;
}

/* ==========================================================================
   4. ICON COLORS — Hover / Active state (Electric Teal)
   ========================================================================== */

.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button:focus .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--color-accent) !important;
}

.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button:focus .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill,
.ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-fill {
    fill: var(--color-accent) !important;
}

/* Custom FontAwesome icon buttons (hover via JS sets color inline — this is the CSS fallback) */
.ql-toolbar.ql-snow button.ql-youtube:hover,
.ql-toolbar.ql-snow button.ql-download:hover,
.ql-toolbar.ql-snow button.ql-youtube:focus,
.ql-toolbar.ql-snow button.ql-download:focus {
    color: var(--color-accent) !important;
    background: rgba(45, 212, 191, 0.08) !important;
}

.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button:focus,
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label.ql-active {
    color: var(--color-accent) !important;
}

/* ==========================================================================
   5. PICKER DROPDOWN OPTIONS (Dark Background)
   ========================================================================== */

.ql-toolbar.ql-snow .ql-picker-options {
    z-index: 1000 !important;
    position: absolute !important;
    background-color: #1a1a24 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.ql-toolbar.ql-snow .ql-picker-item {
    color: var(--color-text-primary) !important;
}

.ql-toolbar.ql-snow .ql-picker-item:hover,
.ql-toolbar.ql-snow .ql-picker-item.ql-selected {
    color: var(--color-accent) !important;
}

/* ==========================================================================
   6. COLOR PICKERS (Text Color & Background Color swatches)
   ========================================================================== */

.ql-toolbar.ql-snow .ql-color-picker .ql-picker-options {
    width: 232px !important;
}