/* =================================================================
   QUILL EDITOR STYLES - COMPLETE SOLUTION
   Bullets/Numbers MOVE with text alignment
   ================================================================= */

/* ===== TEXT ALIGNMENT ===== */
.ql-align-center { text-align: center !important; }
.ql-align-right { text-align: right !important; }
.ql-align-left { text-align: left !important; }
.ql-align-justify { text-align: justify !important; }

/* ===== FONT FAMILIES ===== */
.ql-font-serif { font-family: Georgia, Times New Roman, serif !important; }
.ql-font-sans-serif { font-family: Arial, Helvetica, sans-serif !important; }
.ql-font-monospace { font-family: Monaco, Courier New, monospace !important; }

/* ===== FONT SIZES ===== */
.ql-size-small { font-size: 0.75em !important; }
.ql-size-large { font-size: 1.5em !important; }
.ql-size-huge { font-size: 2.5em !important; }

/* ===== HEADINGS ===== */
.ql-editor h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; }
.ql-editor h2 { font-size: 1.5em; font-weight: bold; margin: 0.75em 0; }
.ql-editor h3 { font-size: 1.17em; font-weight: bold; margin: 0.83em 0; }
.ql-editor h4 { font-size: 1em; font-weight: bold; margin: 1.12em 0; }

/* ===== BASE LIST STYLING ===== */
.ql-editor ol,
.ql-editor ul {
    list-style: none;
    padding: 0;
    margin: 1em 0;
    counter-reset: item;
}

/* ===== DEFAULT LIST ITEMS (LEFT ALIGNED) ===== */
.ql-editor li {
    display: block;
    position: relative;
    padding-left: 2.5em;
    padding-right: 0;
    margin-bottom: 0.5em;
    line-height: 1.6;
    text-align: left;
}

/* ===== DEFAULT BULLETS/NUMBERS (LEFT SIDE) ===== */
.ql-editor ol > li:before {
    content: counter(item, lower-alpha) ". ";
    counter-increment: item;
    position: absolute;
    left: 0;
    width: 2em;
    text-align: left;
    font-weight: 600;
    color: #333;
}

.ql-editor ul > li:before {
    content: "•";
    position: absolute;
    left: 0.5em;
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
}

/* ===== RIGHT ALIGNED - BULLETS MOVE TO RIGHT ===== */
.ql-editor li.ql-align-right {
    text-align: right !important;
    padding-left: 0 !important;
    padding-right: 2.5em !important;
}

.ql-editor ol > li.ql-align-right:before {
    left: auto !important;
    right: 0 !important;
    text-align: right !important;
}

.ql-editor ul > li.ql-align-right:before {
    left: auto !important;
    right: 0.5em !important;
}

/* ===== CENTER ALIGNED - BULLETS CENTERED ===== */
.ql-editor li.ql-align-center {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ql-editor ol > li.ql-align-center:before {
    position: relative !important;
    left: auto !important;
    display: inline !important;
    width: auto !important;
}

.ql-editor ul > li.ql-align-center:before {
    position: relative !important;
    left: auto !important;
    display: inline !important;
}

/* ===== JUSTIFY ALIGNED (BULLETS ON LEFT) ===== */
.ql-editor li.ql-align-justify {
    text-align: justify !important;
}

/* ===== NESTED LISTS - LEVEL 1 (LEFT ALIGNED) ===== */
.ql-editor li.ql-indent-1 {
    padding-left: 4.5em;
}

.ql-editor ol li.ql-indent-1:before {
    content: counter(item, lower-roman) ". ";
    left: 2em;
}

.ql-editor ul li.ql-indent-1:before {
    content: "○";
    left: 2.5em;
}

/* NESTED LISTS - LEVEL 1 (RIGHT ALIGNED) */
.ql-editor li.ql-indent-1.ql-align-right {
    padding-left: 0 !important;
    padding-right: 4.5em !important;
}

.ql-editor ol li.ql-indent-1.ql-align-right:before {
    left: auto !important;
    right: 2em !important;
}

.ql-editor ul li.ql-indent-1.ql-align-right:before {
    left: auto !important;
    right: 2.5em !important;
}

/* ===== NESTED LISTS - LEVEL 2 (LEFT ALIGNED) ===== */
.ql-editor li.ql-indent-2 {
    padding-left: 6.5em;
}

.ql-editor ol li.ql-indent-2:before {
    content: counter(item, decimal) ". ";
    left: 4em;
}

.ql-editor ul li.ql-indent-2:before {
    content: "■";
    font-size: 0.9em;
    left: 4.5em;
}

/* NESTED LISTS - LEVEL 2 (RIGHT ALIGNED) */
.ql-editor li.ql-indent-2.ql-align-right {
    padding-left: 0 !important;
    padding-right: 6.5em !important;
}

.ql-editor ol li.ql-indent-2.ql-align-right:before {
    left: auto !important;
    right: 4em !important;
}

.ql-editor ul li.ql-indent-2.ql-align-right:before {
    left: auto !important;
    right: 4.5em !important;
}

/* ===== INLINE FORMATTING ===== */
.ql-editor li strong {
    font-weight: bold;
    display: inline;
}

.ql-editor li em {
    font-style: italic;
    display: inline;
}

.ql-editor li u {
    text-decoration: underline;
    display: inline;
}

/* Highlighted text */
.ql-editor li span[style*="background"] {
    display: inline;
    padding: 2px 4px;
    border-radius: 2px;
}

/* ===== BLOCKQUOTE ===== */
.ql-editor blockquote {
    border-left: 4px solid #ccc;
    margin: 5px 0;
    padding-left: 16px;
    font-style: italic;
}

/* ===== CODE BLOCK ===== */
.ql-editor pre.ql-syntax {
    background-color: #23241f;
    color: #f8f8f2;
    padding: 1em;
    margin: 0.5em 0;
    border-radius: 4px;
}

/* ===== IMAGES ===== */
.ql-editor img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em 0;
}

/* ===== LINKS ===== */
.ql-editor a { 
    color: #0066cc; 
    text-decoration: underline; 
}

.ql-editor a:hover { 
    color: #004499; 
}

/* ===== TEXT FORMATTING ===== */
.ql-editor strong { font-weight: bold; }
.ql-editor em { font-style: italic; }
.ql-editor u { text-decoration: underline; }
.ql-editor s { text-decoration: line-through; }

/* ===== PARAGRAPHS ===== */
.ql-editor p { 
    margin: 0.5em 0; 
    line-height: 1.6; 
}

/* ===== EDITOR CONTAINER ===== */
.ql-editor {
    font-size: 14px;
    line-height: 1.6;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .ql-editor li {
        padding-left: 2em;
        font-size: 14px;
    }
    
    .ql-editor li.ql-align-right {
        padding-left: 0 !important;
        padding-right: 2em !important;
    }
    
    .ql-editor ol > li:before {
        left: 0;
        width: 1.5em;
        font-size: 14px;
    }
    
    .ql-editor ol > li.ql-align-right:before {
        right: 0 !important;
    }
    
    .ql-editor ul > li:before {
        left: 0.3em;
        font-size: 16px;
    }
    
    .ql-editor ul > li.ql-align-right:before {
        right: 0.3em !important;
    }
    
    .ql-editor li.ql-indent-1 {
        padding-left: 3.5em;
    }
    
    .ql-editor li.ql-indent-1.ql-align-right {
        padding-left: 0 !important;
        padding-right: 3.5em !important;
    }
    
    .ql-editor li.ql-indent-2 {
        padding-left: 5em;
    }
    
    .ql-editor li.ql-indent-2.ql-align-right {
        padding-left: 0 !important;
        padding-right: 5em !important;
    }
}

@media (max-width: 480px) {
    .ql-editor li {
        padding-left: 1.8em;
        font-size: 13px;
    }
    
    .ql-editor li.ql-align-right {
        padding-left: 0 !important;
        padding-right: 1.8em !important;
    }
}

/* ===== VISUAL ENHANCEMENT (Optional) ===== */
.ql-editor li:hover {
    background-color: rgba(0, 0, 0, 0.02);
    transition: background-color 0.2s ease;
}

/* ===== COLOR SUPPORT ===== */
.ql-editor .ql-color-white { color: #ffffff; }
.ql-editor .ql-color-red { color: #e60000; }
.ql-editor .ql-color-orange { color: #f90; }
.ql-editor .ql-color-yellow { color: #ff0; }
.ql-editor .ql-color-green { color: #008a00; }
.ql-editor .ql-color-blue { color: #06c; }
.ql-editor .ql-color-purple { color: #93f; }

.ql-editor .ql-bg-white { background-color: #ffffff; }
.ql-editor .ql-bg-red { background-color: #e60000; }
.ql-editor .ql-bg-orange { background-color: #f90; }
.ql-editor .ql-bg-yellow { background-color: #ff0; }
.ql-editor .ql-bg-green { background-color: #008a00; }
.ql-editor .ql-bg-blue { background-color: #06c; }
.ql-editor .ql-bg-purple { background-color: #93f; }