/* === Main Editor Wrapper === */
.quill-editor {
    background-color: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 13px;
    color: #000;
    box-sizing: border-box;
    /* --- HORIZONTAL SCROLLING: Let this wrapper handle it --- */
    overflow-x: visible; /* This element will have the horizontal scrollbar */
    position: relative; /* Essential for positioning context */
    width: 100%;        /* Take full available width */
    height: auto;       /* Allow height to adjust */
    -webkit-overflow-scrolling: touch; /* Improves touch scrolling */
}

/* === Toolbar === */
.ql-toolbar.ql-snow {
    background-color: #f8f8f8;
    border: 1px solid #cfcfcf;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 5px 8px;
    font-family: Arial, sans-serif;

    /* --- HORIZONTAL SCROLLING: Toolbar must align and scroll --- */
    flex-shrink: 0;
    width: 100%;
    min-width: 100%; /* Ensures it expands with content */
    box-sizing: border-box;
    z-index: 2;
    position: sticky; /* For vertical sticky behaviour */
    top: 0;
}

.ql-toolbar .ql-formats {
    margin-right: 10px;
}

.ql-toolbar button,
.ql-toolbar .ql-picker {
    height: 28px;
    min-width: 28px;
    padding: 3px;
    margin: 0 2px;
    vertical-align: middle;
    border: none;
    background: transparent;
}

.ql-toolbar button:hover,
.ql-toolbar .ql-picker:hover {
    background-color: #e6e6e6;
}

.ql-toolbar .ql-picker-label {
    font-family: inherit;
    /* --- CRITICAL: Use flexbox to arrange text and arrow side-by-side --- */
    display: flex; /* Make label a flex container */
    align-items: center; /* Vertically center items */
    /* Removed: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */
    /* We will apply text overflow to the ::before pseudo-element instead */
}

/* --- FIX FOR FONT PICKER ARROW POSITIONING --- */
/* This rule allows the label to dynamically size itself based on content */
.ql-toolbar .ql-picker.ql-font .ql-picker-label,
.ql-toolbar .ql-picker.ql-size .ql-picker-label,
.ql-toolbar .ql-picker.ql-header .ql-picker-label {
    width: auto; /* Allow the width to adjust to content */
    max-width: 200px;
    position: relative;
}

/* --- Ensure Quill's default SVG arrow is visible and positioned correctly --- */
.ql-toolbar .ql-picker-label svg {
    margin-top: 0px !important;
    display: block !important; /* Make sure the SVG arrow is visible */
    width: 18px; /* Default SVG width */
    height: 18px; /* Default SVG height */
    position: absolute; /* Position the arrow absolutely */
    right: 0; /* Place it at the right edge of the label */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
}

/* Ensure the options themselves in the dropdown can be wide enough */
.ql-snow .ql-picker.ql-font .ql-picker-options,
.ql-snow .ql-picker.ql-size .ql-picker-options,
.ql-snow .ql-picker.ql-header .ql-picker-options {
    min-width: 150px; /* Make sure the dropdown list itself is wide enough */
    width: auto;     /* Allow it to expand to its widest content */
}

/* === Editor Container === */
.ql-container.ql-snow {
    border: 1px solid #cfcfcf;
    border-top: none;
    border-radius: 0 0 4px 4px;
    font-family: 'Times New Roman', Times, serif;
    background-color: #fff;

    overflow-x: visible; /* Prevent horizontal scrollbar on this element */
    position: relative;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

/* === Editor Content (THE ELEMENT WHOSE CONTENT FORCES SCROLL) === */
.ql-editor {
    padding: 10px 12px;
    min-height: 200px;
    line-height: 1.5;
    color: #000;
    font-family: 'Times New Roman', Times, serif;
    font-size: 13px;
    word-wrap: break-word;

    overflow-x: visible;
    white-space: pre-wrap;

    width: 100%;
    min-width: 100%;
}

.ql-editor p {
    margin: 0 0 0.5em 0;
}

/* === Focus Outline === */
.ql-editor:focus {
    outline: none;
    box-shadow: 0 0 3px #66afe9;
    border-color: #66afe9;
}

.ql-toolbar { /* This specific rule might be a duplicate, check if it's needed after .ql-toolbar.ql-snow */
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0;
}

/* === Footer === */
.editor-footer {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-top: none;
    padding: 6px 8px;
    font-size: 12px;
    color: #333;
    font-family: Arial, sans-serif;
    text-align: right;

    position: sticky;
    bottom: 0;
    z-index: 2;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

/* --- TOOLTIP-SPECIFIC CSS (no positioning override here, unchanged) --- */
.ql-snow .ql-tooltip {
    position: absolute;
}

.ql-snow .ql-tooltip a.ql-preview {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

.ql-snow .ql-tooltip .ql-action,
.ql-snow .ql-tooltip .ql-remove {
    white-space: nowrap;
    margin-left: 5px;
}

/* === Font Style Classes === */
.ql-font-arial { font-family: Arial, sans-serif; }
.ql-font-times-new-roman { font-family: 'Times New Roman', Times, serif; }
.ql-font-verdana { font-family: Verdana, Geneva, sans-serif; }
.ql-font-tahoma { font-family: Tahoma, sans-serif; }
.ql-font-courier-new { font-family: 'Courier New', monospace; }
.ql-font-georgia { font-family: Georgia, serif; }

/* === Font Dropdown Labels === */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before {
    content: 'Arial';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times-new-roman"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times-new-roman"]::before {
    content: 'Times New Roman';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before {
    content: 'Verdana';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="tahoma"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="tahoma"]::before {
    content: 'Tahoma';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier-new"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier-new"]::before {
    content: 'Courier New';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before {
    content: 'Georgia';
}
.ql-edm-link svg path {
    transition: fill 0.2s ease;
}
.ql-edm-link:hover svg path {
    fill: #d4a635;
}
.editor-footer.exceeded-limit {
    color: red;
}

body.ql-editor {
    white-space: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
}

/* Apply these styles to any element with both classes */
.ql-editor.is-readonly {
    padding: 0 !important;
    border: none !important;
    overflow: visible !important;
    height: auto !important;
}