/*
 * Issue #11: Enhanced Notes Display Styling
 * Addresses customer complaint: 'meine Notizen werden nicht als Liste sondern im Flusstext dargestellt'
 * Transforms flowing text notes into structured, visually appealing lists
 */

/* Note structure styling */
.note-text-formatted {
    line-height: 1.6;
    color: #2c3e50;
}

/* Headers in notes */
.note-text-formatted .note-header {
    color: #2980b9;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #ecf0f1;
}

.note-text-formatted h1.note-header {
    font-size: 1.25rem;
}

.note-text-formatted h2.note-header {
    font-size: 1.15rem;
}

.note-text-formatted h3.note-header {
    font-size: 1.1rem;
}

/* Paragraphs in notes */
.note-text-formatted .note-paragraph {
    margin-bottom: 0.75rem;
    color: #34495e;
}

/* Bullet lists */
.note-text-formatted .note-bullets {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.note-text-formatted .note-bullets li {
    margin-bottom: 0.25rem;
    color: #2c3e50;
    line-height: 1.4;
}

.note-text-formatted .note-bullets li::marker {
    color: #3498db;
}

/* Numbered lists */
.note-text-formatted .note-numbered {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
    counter-reset: item;
}

.note-text-formatted .note-numbered li {
    margin-bottom: 0.25rem;
    color: #2c3e50;
    line-height: 1.4;
}

.note-text-formatted .note-numbered li::marker {
    color: #2980b9;
    font-weight: 600;
}

/* Checklist styling */
.note-text-formatted .note-checklist {
    margin: 0.5rem 0;
    padding-left: 0;
    list-style: none;
}

.note-text-formatted .note-checklist li {
    margin-bottom: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border-left: 3px solid #dee2e6;
}

.note-text-formatted .note-checklist li.completed {
    background-color: #d4edda;
    border-left-color: #28a745;
    color: #155724;
}

.note-text-formatted .note-checklist li.completed .check-box {
    color: #28a745;
}

.note-text-formatted .note-checklist li.pending {
    background-color: #fff3cd;
    border-left-color: #ffc107;
    color: #856404;
}

.note-text-formatted .note-checklist li.pending .check-box {
    color: #ffc107;
}

.note-text-formatted .check-box {
    margin-right: 0.5rem;
    font-size: 1rem;
    font-weight: bold;
}

/* Responsive design */
@media (max-width: 768px) {
    .note-text-formatted .note-bullets,
    .note-text-formatted .note-numbered {
        padding-left: 1.2rem;
    }
    
    .note-text-formatted .note-checklist li {
        padding: 0.25rem 0.4rem;
        font-size: 0.9rem;
    }
    
    .note-text-formatted .note-header {
        font-size: 1rem;
    }
}

/* Integration with existing timeline styles */
.timeline-entry .note-text-formatted {
    margin-top: 0.5rem;
}

.timeline-entry .note-structured-content {
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    padding: 1rem;
    margin: 0.5rem 0;
}

/* Print styles */
@media print {
    .note-text-formatted .note-bullets,
    .note-text-formatted .note-numbered,
    .note-text-formatted .note-checklist {
        page-break-inside: avoid;
    }
    
    .note-text-formatted .note-header {
        page-break-after: avoid;
    }
}