/**
 * Checklist Styles
 * 
 * This file contains the CSS styles for the checklist feature
 * in the Instant Knowledge Base plugin.
 * 
 * @package Instant_Knowledge_Base
 * @since 1.0.7
 */

/* Checklist Container - No styling */
.ikbase-checklist-container {
    margin: 10px 0;
}

/* Article Content Spacing */
.ikbase-article-body p,
.ikbase-article-content-body p,
.ikbase-faq-content p,
.hcm-article-body p,
.prose p {
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.ikbase-article-body p:first-child,
.ikbase-article-content-body p:first-child,
.ikbase-faq-content p:first-child,
.hcm-article-body p:first-child,
.prose p:first-child {
    margin-top: 0;
}

.ikbase-article-body p:last-child,
.ikbase-article-content-body p:last-child,
.ikbase-faq-content p:last-child,
.hcm-article-body p:last-child,
.prose p:last-child {
    margin-bottom: 0;
}

/* Minimal spacing for lists in ALL article templates */
.ikbase-article-body ul,
.ikbase-article-body ol,
.ikbase-article-content-body ul,
.ikbase-article-content-body ol,
.ikbase-faq-content ul,
.ikbase-faq-content ol,
.hcm-article-body ul,
.hcm-article-body ol,
.prose ul,
.prose ol,
.ikbase-main-content ul,
.ikbase-main-content ol,
.ikbase-article-main-with-toc ul,
.ikbase-article-main-with-toc ol,
.ikbase-article-content ul,
.ikbase-article-content ol,
.ikbase-faq-answer ul,
.ikbase-faq-answer ol,
.ikbase-faq-item-content ul,
.ikbase-faq-item-content ol {
    margin: 0 0 8px 0;
    padding-left: 12px;
}

.ikbase-article-body li,
.ikbase-article-content-body li,
.ikbase-faq-content li,
.hcm-article-body li,
.prose li,
.ikbase-main-content li,
.ikbase-article-main-with-toc li,
.ikbase-article-content li,
.ikbase-faq-answer li,
.ikbase-faq-item-content li {
    margin: 0 0 1px 0;
    line-height: 1.2;
    padding-left: 4px;
}

.ikbase-article-body ul li,
.ikbase-article-content-body ul li,
.ikbase-faq-content ul li,
.hcm-article-body ul li,
.prose ul li,
.ikbase-main-content ul li,
.ikbase-article-main-with-toc ul li,
.ikbase-article-content ul li,
.ikbase-faq-answer ul li,
.ikbase-faq-item-content ul li {
    list-style-type: disc;
    list-style-position: outside;
    margin-left: -4px;
}

.ikbase-article-body ol li,
.ikbase-article-content-body ol li,
.ikbase-faq-content ol li,
.hcm-article-body ol li,
.prose ol li,
.ikbase-main-content ol li,
.ikbase-article-main-with-toc ol li,
.ikbase-article-content ol li,
.ikbase-faq-answer ol li,
.ikbase-faq-item-content ol li {
    list-style-type: decimal;
    list-style-position: outside;
    margin-left: -4px;
}


/* Checklist Items */
.ikbase-checklist-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ikbase-checklist-item {
    margin: 0 0 4px 0;
    padding: 0;
}

.ikbase-checklist-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    padding: 2px 0;
    transition: all 0.2s ease;
    position: relative;
}


/* Custom Checkbox */
.ikbase-checklist-checkbox {
    margin: 0 12px 0 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    position: relative;
    appearance: none;
    border: 2px solid #ddd;
    border-radius: 4px;
    background: white;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.ikbase-checklist-checkbox:checked {
    background: #007cba;
    border-color: #007cba;
}

.ikbase-checklist-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.ikbase-checklist-checkbox:focus {
    outline: 2px solid rgba(0, 124, 186, 0.3);
    outline-offset: 2px;
}

/* Checklist Text */
.ikbase-checklist-text {
    flex: 1;
    line-height: 1.3;
    color: #007cba;
    font-size: inherit;
    font-weight: 500;
}

/* Checked Item Styling */
.ikbase-checklist-item.checked .ikbase-checklist-text {
    text-decoration: line-through;
    color: #666;
    opacity: 0.7;
}



/* Upgrade Notice */
.ikbase-checklist-upgrade-notice {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin: 20px 0;
    text-align: center;
}

.ikbase-checklist-upgrade-notice p {
    margin: 0 0 10px 0;
}

.ikbase-checklist-upgrade-notice p:last-child {
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ikbase-checklist-container {
        padding: 15px;
        margin: 15px 0;
    }
    
    .ikbase-checklist-title {
        font-size: 16px;
    }
    
    .ikbase-checklist-label {
        padding: 6px 8px;
    }
    
    .ikbase-checklist-checkbox {
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }
    
    .ikbase-checklist-text {
        font-size: 13px;
    }
}

/* Single Check Styles - Minimal */
.ikbase-single-check {
    display: inline;
    margin: 0 2px;
}

.ikbase-check-label {
    display: inline;
    cursor: pointer;
    font-size: inherit;
    line-height: inherit;
}

.ikbase-check-checkbox {
    margin: 0 4px 0 0;
    width: 12px;
    height: 12px;
    cursor: pointer;
    vertical-align: middle;
}

.ikbase-check-text {
    color: #007cba;
    font-size: inherit;
    font-weight: 500;
    display: inline;
}

/* Checked state - only strikethrough */
.ikbase-single-check.checked .ikbase-check-text {
    text-decoration: line-through;
    color: #666;
}

/* Upgrade notice for single check */
.ikbase-check-upgrade {
    display: inline-block;
    color: #999;
    font-size: 16px;
    cursor: help;
    margin: 0 4px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    
    
    .ikbase-checklist-text {
        color: #007cba;
    }
    
    .ikbase-checklist-checkbox {
        background: #404040;
        border-color: #666;
    }
    
    .ikbase-checklist-checkbox:checked {
        background: #007cba;
        border-color: #007cba;
    }
    
    
    .ikbase-checklist-upgrade-notice {
        background: #2c2c2c;
        border-color: #404040;
        color: #fff;
    }
    
    .ikbase-check-text {
        color: #007cba;
    }
    
    .ikbase-check-checkbox {
        background: #404040;
        border-color: #666;
    }
    
    .ikbase-check-checkbox:checked {
        background: #007cba;
        border-color: #007cba;
    }
    
    .ikbase-check-upgrade {
        color: #666;
    }
}