/* ===========================
   Quill Checklist Renderer CSS
   Append to style.css
   =========================== */

/* Container for each checklist item */
.ql-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 2px;
    line-height: 1.5;
}

/* The actual checkbox input */
.ql-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1.5px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-surface);
    cursor: pointer;
    margin-top: 2px;
    position: relative;
    transition: all 150ms ease;
    flex-shrink: 0;
}

.ql-checkbox:hover {
    border-color: var(--color-primary);
    background: rgba(196, 113, 74, 0.06);
}

.ql-checkbox:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Checkmark via pseudo-element */
.ql-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: 2px solid white;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* The label text next to the checkbox */
.ql-checkbox-label {
    flex: 1;
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
    transition: color 150ms ease;
    line-height: 1.5;
}

/* Strike-through when checked */
.ql-checkbox-label.ql-checked {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

/* Preserve inline formatting inside labels */
.ql-checkbox-label strong { font-weight: 600; }
.ql-checkbox-label em { font-style: italic; }
.ql-checkbox-label a { color: var(--color-primary); text-decoration: underline; }
.ql-checkbox-label code {
    font-family: monospace;
    background: rgba(0,0,0,0.06);
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.8em;
}

/* Make sure regular ul/ol in task details still look clean */
.task-html-details ul,
.task-html-details ol {
    margin: 6px 0 6px 20px;
    padding: 0;
}

.task-html-details li {
    margin: 3px 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
}

/* Quill heading styles inside task details */
.task-html-details h1 { font-size: 1.2rem; margin: 10px 0 6px; }
.task-html-details h2 { font-size: 1.05rem; margin: 10px 0 6px; }
.task-html-details h3 { font-size: 0.95rem; margin: 8px 0 4px; }

.task-html-details p {
    margin: 4px 0;
    line-height: 1.5;
}

.task-html-details blockquote {
    border-left: 3px solid var(--color-primary-light);
    margin: 8px 0;
    padding-left: 12px;
    color: var(--color-text-muted);
    font-style: italic;
}

.task-html-details pre {
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 0.8rem;
    overflow-x: auto;
    margin: 8px 0;
}

/* Quill alignment classes */
.task-html-details .ql-align-center { text-align: center; }
.task-html-details .ql-align-right { text-align: right; }
.task-html-details .ql-align-justify { text-align: justify; }