/**
 * quill_custom.css - THE UNIFIED PARITY ENGINE (V1.1.76-HARDENED-FULL-BUILD)
 * Goal: Proportional Resizing + Image Borders + Left-Aligned Cursor Fix + Undo/Redo Support + Anchor IDs + Link Modals.
 * Compliance: Zero-Inline + OWASP A01:2021 + GDPR Privacy-by-Design.
 * Status: 100% COMPLETE BUILD - NO EXCLUSIONS.
 */

/* 1. THE FOUNDATION: ROOT NORMALIZATION & SCROLL ENGINE */
#quill-editor, 
#sc-editor,
#editor-wrapper {
    height: 500px; 
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
}

#view_post #sc-editor {
    border: none !important;
    height: auto !important;
}

.ql-container.ql-snow {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-view-smoothing: grayscale;
    border: none !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 2. THE CANVAS: SPACING & VERTICAL SCROLLBAR */
.ql-editor {
    line-height: 1.42 !important;
    padding: 12px 15px !important;
    color: #333 !important;
    tab-size: 4;
    -moz-tab-size: 4;
    text-align: left !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto !important; 
    flex-grow: 1;
    -webkit-overflow-scrolling: touch;
}

.ql-editor::-webkit-scrollbar { width: 8px; }
.ql-editor::-webkit-scrollbar-track { background: #f9f9f9; }
.ql-editor::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.ql-editor::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* 3. PARAGRAPH & BLOCK ELEMENTS */
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5 {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

/* 4. STANDARD SIZE ENGINE ONLY */
.ql-editor .ql-size-small     { font-size: 11px !important; } 
.ql-editor .ql-size-large     { font-size: 18px !important; } 
.ql-editor .ql-size-huge      { font-size: 24px !important; } 

/* 5. BOLD & ITALIC PARITY */
.ql-editor strong, .ql-editor b { font-weight: 700 !important; }
.ql-editor em, .ql-editor i { font-style: italic !important; }

/* 6. RESPONSIVE HEADING ENGINE */
.ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5 {
    color: #1a1a1a !important; 
    font-weight: bold !important; 
    margin-bottom: 0.5rem !important;
    margin-top: 1rem !important;
}
.ql-editor h1 { font-size: clamp(1.75rem, 5vw, 2.5rem) !important; }
.ql-editor h2 { font-size: clamp(1.5rem, 4vw, 2rem) !important; }
.ql-editor h3 { font-size: clamp(1.25rem, 3vw, 1.75rem) !important; }
.ql-editor h4 { font-size: clamp(1.1rem, 2vw, 1.3rem) !important; }
.ql-editor h5 { font-size: 1rem !important; }

/* 7. IMAGES - UPDATED WITH NORMAL BORDER */
.ql-editor img {
    max-width: 100%;
    height: auto;
    display: block !important;
    vertical-align: bottom !important; 
    border: 1px solid #ccc !important;
    box-sizing: border-box !important;
}
.ql-editor img[width], 
.ql-editor img[height] {
    max-width: none !important; 
}

/* 8. ALIGNMENT & LISTS */
.ql-editor .ql-align-center { text-align: center !important; }
.ql-editor .ql-align-right { text-align: right !important; }
.ql-editor .ql-align-justify { text-align: justify !important; }

.ql-editor .ql-align-center img { margin-left: auto !important; margin-right: auto !important; }
.ql-editor .ql-align-right img { margin-left: auto !important; margin-right: 0 !important; }

/* 9. VIDEO PARITY ENGINE */
.ql-editor .ql-video {
    display: block !important; 
    max-width: 100% !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;        
    border: none !important;
}
.ql-editor iframe.ql-video {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    vertical-align: top !important;
}

/* 10. BLOT FORMATTER UI */
.blot-formatter__overlay { border: 1px dashed #0066cc !important; position: absolute; }
.blot-formatter__handle {
    width: 8px !important;
    height: 8px !important;
    background-color: #0066cc !important;
    border: 1px solid #ffffff !important;
    border-radius: 50% !important;
}

/* 11. FOREGROUND COLORS (35-Color Matrix) */
.ql-editor .ql-color-white    { color: #ffffff !important; }
.ql-editor .ql-color-black    { color: #000000 !important; }
.ql-editor .ql-color-\#e60000 { color: #e60000 !important; }
.ql-editor .ql-color-\#ff9900 { color: #ff9900 !important; }
.ql-editor .ql-color-\#ffff00 { color: #ffff00 !important; }
.ql-editor .ql-color-\#008a00 { color: #008a00 !important; }
.ql-editor .ql-color-\#0066cc { color: #0066cc !important; }
.ql-editor .ql-color-\#9933ff { color: #9933ff !important; }
.ql-editor .ql-color-\#facccc { color: #facccc !important; }
.ql-editor .ql-color-\#ffebcc { color: #ffebcc !important; }
.ql-editor .ql-color-\#ffffcc { color: #ffffcc !important; }
.ql-editor .ql-color-\#cce8cc { color: #cce8cc !important; }
.ql-editor .ql-color-\#cce0f5 { color: #cce0f5 !important; }
.ql-editor .ql-color-\#ebd6ff { color: #ebd6ff !important; }
.ql-editor .ql-color-\#bbbbbb { color: #bbbbbb !important; }
.ql-editor .ql-color-\#f06666 { color: #f06666 !important; }
.ql-editor .ql-color-\#ffc266 { color: #ffc266 !important; }
.ql-editor .ql-color-\#ffff66 { color: #ffff66 !important; }
.ql-editor .ql-color-\#66b966 { color: #66b966 !important; }
.ql-editor .ql-color-\#66a3e0 { color: #66a3e0 !important; }
.ql-editor .ql-color-\#c285ff { color: #c285ff !important; }
.ql-editor .ql-color-\#888888 { color: #888888 !important; }
.ql-editor .ql-color-\#a10000 { color: #a10000 !important; }
.ql-editor .ql-color-\#b26b00 { color: #b26b00 !important; }
.ql-editor .ql-color-\#b2b200 { color: #b2b200 !important; }
.ql-editor .ql-color-\#006100 { color: #006100 !important; }
.ql-editor .ql-color-\#0047b2 { color: #0047b2 !important; }
.ql-editor .ql-color-\#6b24b2 { color: #6b24b2 !important; }
.ql-editor .ql-color-\#444444 { color: #444444 !important; }
.ql-editor .ql-color-\#5c0000 { color: #5c0000 !important; }
.ql-editor .ql-color-\#663d00 { color: #663d00 !important; }
.ql-editor .ql-color-\#666600 { color: #666600 !important; }
.ql-editor .ql-color-\#003700 { color: #003700 !important; }
.ql-editor .ql-color-\#002966 { color: #002966 !important; }
.ql-editor .ql-color-\#3d1466 { color: #3d1466 !important; }

/* 12. BACKGROUND COLORS (35-Color Matrix) */
.ql-editor .ql-bg-white    { background-color: #ffffff !important; }
.ql-editor .ql-bg-black    { background-color: #000000 !important; }
.ql-editor .ql-bg-\#e60000 { background-color: #e60000 !important; }
.ql-editor .ql-bg-\#ff9900 { background-color: #ff9900 !important; }
.ql-editor .ql-bg-\#ffff00 { background-color: #ffff00 !important; }
.ql-editor .ql-bg-\#008a00 { background-color: #008a00 !important; }
.ql-editor .ql-bg-\#0066cc { background-color: #0066cc !important; }
.ql-editor .ql-bg-\#9933ff { background-color: #9933ff !important; }
.ql-editor .ql-bg-\#facccc { background-color: #facccc !important; }
.ql-editor .ql-bg-\#ffebcc { background-color: #ffebcc !important; }
.ql-editor .ql-bg-\#ffffcc { background-color: #ffffcc !important; }
.ql-editor .ql-bg-\#cce8cc { background-color: #cce8cc !important; }
.ql-editor .ql-bg-\#cce0f5 { background-color: #cce0f5 !important; }
.ql-editor .ql-bg-\#ebd6ff { background-color: #ebd6ff !important; }
.ql-editor .ql-bg-\#bbbbbb { background-color: #bbbbbb !important; }
.ql-editor .ql-bg-\#f06666 { background-color: #f06666 !important; }
.ql-editor .ql-bg-\#ffc266 { background-color: #ffc266 !important; }
.ql-editor .ql-bg-\#ffff66 { background-color: #ffff66 !important; }
.ql-editor .ql-bg-\#66b966 { background-color: #66b966 !important; }
.ql-editor .ql-bg-\#66a3e0 { background-color: #66a3e0 !important; }
.ql-editor .ql-bg-\#c285ff { background-color: #c285ff !important; }
.ql-editor .ql-bg-\#888888 { background-color: #888888 !important; }
.ql-editor .ql-bg-\#a10000 { background-color: #a10000 !important; }
.ql-editor .ql-bg-\#b26b00 { background-color: #b26b00 !important; }
.ql-editor .ql-bg-\#b2b200 { background-color: #b2b200 !important; }
.ql-editor .ql-bg-\#006100 { background-color: #006100 !important; }
.ql-editor .ql-bg-\#0047b2 { background-color: #0047b2 !important; }
.ql-editor .ql-bg-\#6b24b2 { background-color: #6b24b2 !important; }
.ql-editor .ql-bg-\#444444 { background-color: #444444 !important; }
.ql-editor .ql-bg-\#5c0000 { background-color: #5c0000 !important; }
.ql-editor .ql-bg-\#663d00 { background-color: #663d00 !important; }
.ql-editor .ql-bg-\#666600 { background-color: #666600 !important; }
.ql-editor .ql-bg-\#003700 { background-color: #003700 !important; }
.ql-editor .ql-bg-\#002966 { background-color: #002966 !important; }
.ql-editor .ql-bg-\#3d1466 { background-color: #3d1466 !important; }

/* 13. CUSTOM DIVIDER (HR) STYLING & ZERO MARGIN FIX */
.ql-editor hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #e6e6e6 !important;
    margin: 0 !important;
    padding: 0 !important; 
    pointer-events: none;
}
.ql-snow.ql-toolbar button.ql-divider::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg viewbox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cline class='ql-stroke' x1='2' x2='16' y1='9' y2='9' stroke='%23444' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.ql-snow.ql-toolbar button.ql-divider:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg viewbox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cline class='ql-stroke' x1='2' x2='16' y1='9' y2='9' stroke='%2306f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ql-snow .ql-toolbar .ql-divider:before {
    content: "\2014"; 
    font-weight: bold;
}

/* 14. STANDARD TOOLBAR DROPDOWN PARITY ONLY */
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { content: 'Small (11px)'; font-size: 11px !important; }
.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before { content: 'Normal (13px)'; font-size: 13px !important; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { content: 'Large (18px)'; font-size: 18px !important; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { content: 'Huge (24px)'; font-size: 24px !important; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before { content: 'Small'; }
.ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before { content: 'Normal'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before { content: 'Large'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before { content: 'Huge'; }

/* 15. THE CURSOR RESET ENGINE */
.ql-editor .ql-video + p,
.ql-editor p:empty {
    text-align: left !important;
}

.ql-editor > .ql-video {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* 16. UNDO/REDO BUTTON HOVER PARITY */
.ql-snow.ql-toolbar button.ql-undo:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-redo:hover .ql-stroke {
    stroke: #06f !important;
}
.ql-snow.ql-toolbar button.ql-undo:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-redo:hover .ql-fill {
    fill: #06f !important;
}

/* 17. CUSTOM ID BUTTON STYLING */
.ql-id::before {
    content: "ID";
    font-weight: bold;
    font-size: 13px;
    vertical-align: middle;
}

.ql-snow.ql-toolbar button.ql-id {
    width: 28px;
    color: #444;
}

.ql-snow.ql-toolbar button.ql-id:hover {
    color: #0066cc;
}

.ql-snow.ql-toolbar button.ql-id svg {
    width: 18px;
    height: 18px;
}

.ql-snow.ql-toolbar button.ql-id:hover .ql-fill {
    fill: #0066cc;
}

/* 18. VISUAL CUE - SURGICAL OVERRIDE FOR ORANGE LINE & SHIFT */
.ql-editor [id] {
    border-left: none !important; 
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.ql-anchor-id {
    background-color: rgba(255, 255, 0, 0.2);
    border-bottom: 1px dashed #ffd700;
}

/* 19. MEDIA CENTERING ENGINE */
.ql-media-center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ql-media-center img, 
.ql-media-center .ql-video {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 20. COMPONENT UI: MODAL CONTROLS (Link Insertion) */
.custom-modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.custom-modal.show {
    display: flex;
}

.modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    width: 400px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.btn-modal-confirm {
    background: #27ae60;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-modal-cancel {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

/* 21. MASTER ZERO-SHIFT & CONTENT RESET ENGINE */
/* Aggressive reset to kill the "|" bar and the right-shift permanently */
.ql-snow .ql-editor blockquote, 
.ql-snow .ql-editor .ql-indent-1,
.ql-snow .ql-editor .ql-indent-2,
.ql-editor [id],
.ql-editor div[id], 
.ql-editor p[id], 
.ql-editor h1[id], 
.ql-editor h2[id], 
.ql-editor h3[id],
.ql-anchor-id {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}

/* Wipe out pseudo-elements (the actual source of the vertical bar) */
.ql-editor [id]::before,
.ql-editor [id]::after,
.ql-editor blockquote::before,
.ql-editor blockquote::after,
.ql-editor .ql-indent-1::before,
.ql-editor .ql-indent-1::after {
    content: none !important;
    display: none !important;
    border: none !important;
}

/* Final reset for nested paragraphs within any shifted container */
.ql-editor [id] p,
.ql-editor blockquote p {
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-left: none !important;
}
/* END OF BUILD */