/* Quill checkbox styles moved from index.html
   Purpose: customize appearance and layout of checklist items injected by Quill
*/

/* Hide any pseudo-element Quill may inject on checklist list items only */
.ql-snow .ql-editor li[data-list="checked"]::before,
.ql-snow .ql-editor li[data-list="unchecked"]::before {
    display: none !important;
    content: none !important;
}

/* Also hide a pseudo-element on .ql-ui for checklist items so it won't render a second visual */
.ql-snow .ql-editor li[data-list="checked"] > .ql-ui::before,
.ql-snow .ql-editor li[data-list="unchecked"] > .ql-ui::before {
    display: none !important;
    content: none !important;
}

/* Position the checkbox visually inside checklist items only so text flows to the right.
   Increase spacing to avoid overlapping multiple checkboxes on adjacent lines. */
.ql-snow .ql-editor li[data-list="checked"],
.ql-snow .ql-editor li[data-list="unchecked"] {
    position: relative !important;
    padding-left: 2.0em !important; /* space for the absolute checkbox (reduced for 1.5x size) */
    line-height: 1.5 !important; /* slightly taller than default to prevent overlap */
    min-height: 1.65em !important; /* ensure each item reserves enough vertical space */
    margin-bottom: 0.12em !important; /* small gap between list items */
}

/* Draw our own clear, larger checkbox on the injected .ql-ui span for checklist items and center it vertically */
.ql-snow .ql-editor li[data-list="checked"] > .ql-ui,
.ql-snow .ql-editor li[data-list="unchecked"] > .ql-ui {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1.35em !important;
    height: 1.35em !important;
    box-sizing: border-box !important;
    border: 2px solid rgba(0,0,0,0.8) !important;
    border-radius: 3px !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 55% 55% !important;
}

/* Checked state: keep white background and draw a black check mark */
.ql-snow .ql-editor li[data-list="checked"] > .ql-ui {
    background-color: #fff !important;
    /* keep the outside border the same grey as the unchecked state */
    border-color: rgba(0,0,0,0.6) !important;
    /* larger, bolder check mark so it fills the box more */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><polyline points='3 8 6 11 11 4' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-size: 70% 70% !important;
}

/* Unchecked: visible empty box */
.ql-snow .ql-editor li[data-list="unchecked"] > .ql-ui {
    background-color: #fff !important;
    border-color: rgba(0,0,0,0.6) !important;
    background-image: none !important;
}