/* body { font-family: Roboto, sans-serif; margin: 20px; }  */

/* toolbar classes that get applied to all instances of quill editor */
.toolbar { 
    background-color: var(--bg-color-light);
    /* width: 80%; */ 
    margin: 10px auto 0px auto; 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center;  }
.toolbar select, #toolbar button { vertical-align: middle; margin: 22px; }
.toolbar button { box-shadow: none !important; }        

/* Custom dropdown font preview: internal tokens are all lowercase and without whitespace */
.toolbar .ql-font span[data-label="amaticsc"]::before { font-family: 'Amatic SC', cursive; }
.toolbar .ql-font span[data-label="arial"]::before { font-family: 'Arial', sans-serif; }
.toolbar .ql-font span[data-label="caveat"]::before { font-family: 'Caveat', cursive; }
.toolbar .ql-font span[data-label="comicneue"]::before { font-family: 'Comic Neue', sans-serif; }
.toolbar .ql-font span[data-label="dancingscript"]::before { font-family: 'Dancing Script', cursive; }
.toolbar .ql-font span[data-label="opensans"]::before { font-family: 'Open Sans', sans-serif; }
.toolbar .ql-font span[data-label="roboto"]::before { font-family: 'Roboto', sans-serif; }
.toolbar .ql-font span[data-label="tahoma"]::before { font-family: 'Tahoma', sans-serif; }
.toolbar .ql-font span[data-label="zillaslab"]::before { font-family: 'Zilla Slab', serif; }

/* Custom font classes for editor content */
.ql-font-amaticsc { font-family: 'Amatic SC', cursive; }
.ql-font-arial { font-family: Arial, Helvetica, sans-serif; }
.ql-font-caveat { font-family: 'Caveat', cursive; }
.ql-font-comicneue { font-family: 'Comic Neue', sans-serif; }
.ql-font-dancingscript { font-family: 'Dancing Script', cursive; }
.ql-font-opensans { font-family: 'Open Sans', sans-serif; }
.ql-font-roboto { font-family: 'Roboto', sans-serif; }
.ql-font-tahoma { font-family: Tahoma, Geneva, sans-serif; }
.ql-font-zillaslab { font-family: 'Zilla Slab', serif; }

/* Make editor default size match non-editable size */
.ql-editor {color: #323538; font-size: 14pt; line-height: 1.4;} 
/* Default size setting for Quill editor */
.default-size-14pt {font-size: 14pt;}
/* Force proper bold weight and italic style */
.ql-editor strong, .ql-editor b {font-weight: 700;}
.ql-editor em, .ql-editor i {font-style: italic !important;}

/* System fonts already have proper weights */
/* .ql-font-arial,  .ql-font-tahoma  */

/* Custom size classes for editor content */
.ql-size-10pt { font-size: 10pt; }
.ql-size-12pt { font-size: 12pt; }
.ql-size-14pt { font-size: 14pt; }
.ql-size-16pt { font-size: 16pt; }
.ql-size-18pt { font-size: 18pt; }
.ql-size-20pt { font-size: 20pt; }
.ql-size-28pt { font-size: 28pt; }
.ql-size-40pt { font-size: 40pt; }


/* check this */
.editor-container {
    margin-bottom: 20px;
}


/* My editor class for container  */
.my-quill-editor {
    font-family: 'roboto';  
    /* background-color: #fff; */
    background-color: var(--card-bg-light);    /* not used */
}
.my-quill-editor.editing { background-color: var(--card-bg-light); }
.my-quill-editor.readonly { background-color: var(--card-bg-light); }   /* not used? */


.quill-styles-for-noneditable em { font-style: italic !important; }
.quill-styles-for-noneditable u { text-decoration: underline !important; }
.quill-styles-for-noneditable s { text-decoration: line-through !important; }
.quill-styles-for-noneditable strong { font-weight: bold !important; }
/*  strong elements use the inline color when specified, and otherwise fall back to inheriting the parent's color rather than the global strong color */
/* .my-quill-editor strong:not([style^="color:"]):not([style*="; color:"]) { color: inherit !important;} */
/* .my-quill-editor strong {  font-weight: 900 !important;  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); padding: 0.1em 0.2em !important; }  */


/* Base styling for non-editable Quill content */
.quill-styles-for-noneditable {
    color: #323538; 
    font-family: 'Roboto', sans-serif;
    font-size: 14pt;           /* Set default to match the selected default */
    line-height: 1.4;
}

/* Then override with specific sizes for other elements */
.quill-styles-for-noneditable [style*="font-size"] {
    /* These will keep their inline style sizes */
    line-height: 1.4;
}

/* Ensure unstyled spans in non-editable content get default size */
.quill-styles-for-noneditable span:not([style*="font-size"]) {
    font-size: 14pt !important;
}


/* Text formatting with proper tab support */
.quill-styles-for-noneditable p {
    white-space: pre-wrap !important;
    tab-size: 4 !important;
    -moz-tab-size: 4 !important;
    margin-top: 0 !important;    /* No top margin */
    margin-bottom: 0 !important; /* No bottom margin */
}

/* For consecutive paragraphs, reduce space even further */
.quill-styles-for-noneditable p + p {
    margin-top: 0.1em !important;
}


/* Paragraph indentation */
.quill-styles-for-noneditable p.ql-indent-1 { margin-left: 3em !important; }
.quill-styles-for-noneditable p.ql-indent-2 { margin-left: 6em !important; }
.quill-styles-for-noneditable p.ql-indent-3 { margin-left: 9em !important; }
.quill-styles-for-noneditable p.ql-indent-4 { margin-left: 12em !important; }

/* Handle images in non-editable content */
.quill-styles-for-noneditable img {
    max-width: 100%;
    height: auto;
    margin: 0.5em 0;
}


.quill-styles-for-noneditable pre.ql-syntax {
    background-color: orange;
    border-radius: 3px;
    padding: 0.5em;
    white-space: pre-wrap;
    font-family: monospace;
}

/* Ensure all font sizes render correctly */
.ql-picker.ql-size .ql-picker-item[data-value="18pt"]::before {
    content: "18pt";
    font-size: 18pt;
}

/* Quill alignment styles for non-editable content */
.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;
}

/* #region *********************** List Styling for Non-Editable Content ****************************/

/* Base styling for lists in non-editable content */
.quill-styles-for-noneditable ol,
.quill-styles-for-noneditable ul {
    padding-left: 1.8em !important; /* Consistent left padding */
    margin-bottom: 0.5em !important; /* Space below lists */
    margin-top: 0.3em !important; /* Space above lists */
}

/* Styling for nested lists - additional indentation */
.quill-styles-for-noneditable ol ol,
.quill-styles-for-noneditable ul ul,
.quill-styles-for-noneditable ol ul,
.quill-styles-for-noneditable ul ol {
    padding-left: 1.5em !important; /* Additional indentation for nesting */
    margin-top: 0.3em !important; /* Space between parent item and child list */
    margin-bottom: 0.3em !important; /* Space after nested list */
}

/* List items styling */
.quill-styles-for-noneditable ol li,
.quill-styles-for-noneditable ul li {
    display: list-item !important; /* Use standard list display */
    margin-bottom: 0.2em !important; /* Space between items */
}

/* Numbering styles for ordered lists */
.quill-styles-for-noneditable ol {list-style-type: decimal !important;}
.quill-styles-for-noneditable ol ol {list-style-type: lower-alpha !important;}
.quill-styles-for-noneditable ol ol ol {list-style-type: lower-roman !important;}
.quill-styles-for-noneditable ol ol ol ol {list-style-type: decimal !important;}

/* #endregion */