/**
 * Meldo Learning Paths - Frontend Styles
 * Version: 1.0.0
 * 
 * Design: Modern, verspielt, klar strukturiert
 * Farben: Türkis #3D7C85 (primär), Limegrün #E8924F (sekundär)
 */

/* ===========================
   Root Variables & Resets
   =========================== */
:root {
    --meldo-turquoise: #3D7C85;
    --meldo-lime: #E8924F;
    --meldo-text-dark: #222222;
    --meldo-text-medium: #333333;
    --meldo-bg-light: #F4F5F7;
    --meldo-bg-card: #FFFFFF;
    --meldo-border: #EAEAEA;
    --meldo-error: #E2574C;
    --meldo-radius: 16px;
    --meldo-radius-small: 8px;
    --meldo-shadow: 0 4px 12px rgba(61, 124, 133, 0.08);
    --meldo-shadow-hover: 0 8px 24px rgba(61, 124, 133, 0.16);
    --meldo-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Only apply box-sizing to Learning Paths elements, NOT globally */
.meldo-learning-path-builder *,
.meldo-learning-path-display * {
    box-sizing: border-box;
}

/* ===========================
   Container & Layout
   =========================== */
.meldo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.meldo-card {
    background: var(--meldo-bg-card);
    border-radius: var(--meldo-radius);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--meldo-shadow);
    transition: var(--meldo-transition);
    border: 1px solid var(--meldo-border);
}

.meldo-card:hover {
    box-shadow: var(--meldo-shadow-hover);
    transform: translateY(-2px);
}

/* ===========================
   Typography
   =========================== */
.meldo-heading {
    color: var(--meldo-turquoise);
    font-weight: 700;
    margin: 0 0 1.5rem;
    font-size: 2rem;
    line-height: 1.2;
}

.meldo-subheading {
    color: var(--meldo-text-dark);
    font-weight: 600;
    margin: 0 0 1rem;
    font-size: 1.5rem;
}

.meldo-text {
    color: var(--meldo-text-medium);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

/* ===========================
   Buttons
   =========================== */
.meldo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    font-family: 'Akko', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: var(--meldo-transition);
    text-decoration: none;
    line-height: 1;
}

.meldo-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.meldo-btn-primary {
    background: linear-gradient(135deg, var(--meldo-lime), var(--meldo-turquoise));
    color: white;
    box-shadow: 0 5px 14px rgba(61, 124, 133, 0.22);
}

.meldo-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(61, 124, 133, 0.30);
}

.meldo-btn-secondary {
    background: #fff;
    color: var(--meldo-turquoise);
    border: 1.5px solid var(--meldo-turquoise);
}

.meldo-btn-secondary:hover:not(:disabled) {
    background: #F5F8F8;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(61, 124, 133, 0.14);
}

.meldo-btn-outline {
    background: transparent;
    color: var(--meldo-turquoise);
    border: 2px solid var(--meldo-turquoise);
}

.meldo-btn-outline:hover:not(:disabled) {
    background: var(--meldo-turquoise);
    color: white;
}

.meldo-btn-danger {
    background: var(--meldo-error);
    color: white;
}

.meldo-btn-danger:hover:not(:disabled) {
    background: #c74439;
}

.meldo-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

/* ===========================
   Form Elements
   =========================== */
.meldo-form-group {
    margin-bottom: 1.5rem;
}

.meldo-label {
    display: block;
    font-weight: 600;
    color: var(--meldo-text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.meldo-input,
.meldo-textarea,
.meldo-select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--meldo-border);
    border-radius: var(--meldo-radius-small);
    font-size: 1rem;
    color: var(--meldo-text-dark);
    transition: var(--meldo-transition);
    background: white;
    line-height: 1.5;
    min-height: 48px;
}

.meldo-input:focus,
.meldo-textarea:focus,
.meldo-select:focus {
    outline: none;
    border-color: var(--meldo-turquoise);
    box-shadow: 0 0 0 3px rgba(61, 124, 133, 0.1);
}

.meldo-textarea {
    min-height: 120px;
    resize: vertical;
}

.meldo-textarea-compact {
    min-height: 45px !important;
    max-height: 80px;
    resize: none;
}

/* ===========================
   Image Upload
   =========================== */
.meldo-image-upload-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.meldo-image-preview {
    position: relative;
    max-width: 300px;
    border-radius: var(--meldo-radius-small);
    overflow: hidden;
    border: 2px solid var(--meldo-border);
}

.meldo-image-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
}

.meldo-image-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.meldo-image-remove:hover {
    background: var(--meldo-error);
}

.meldo-image-remove .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

#meldo-image-upload-btn {
    align-self: flex-start;
}

#meldo-image-upload-btn .dashicons {
    margin-right: 6px;
}

/* ===========================
   Compact Layout Overrides
   =========================== */

.meldo-card {
    padding: 1.25rem !important; /* Reduced from 2rem */
}

.meldo-form-group {
    margin-bottom: 1rem !important; /* Reduced from 1.5rem */
}

.meldo-subheading {
    margin-bottom: 0.75rem !important; /* Reduced from 1rem */
}

.meldo-lesson-item-compact {
    padding: 0.6rem !important; /* Reduced from 0.75rem */
    margin-bottom: 0.4rem !important; /* Reduced from 0.5rem */
}

.meldo-section-item {
    padding: 0.75rem 1rem !important; /* Reduced */
    margin: 1rem 0 0.75rem !important; /* Reduced */
}

/* ===========================
   Course & Lesson Selection
   =========================== */
.meldo-course-selector {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

.meldo-course-card {
    background: var(--meldo-bg-light);
    border-radius: var(--meldo-radius-small);
    padding: 1.25rem;
    cursor: pointer;
    transition: var(--meldo-transition);
    border: 2px solid transparent;
}

.meldo-course-card:hover {
    background: white;
    border-color: var(--meldo-turquoise);
    transform: translateX(4px);
}

.meldo-course-card.active {
    background: white;
    border-color: var(--meldo-turquoise);
    box-shadow: var(--meldo-shadow);
}

.meldo-course-title {
    font-weight: 600;
    color: var(--meldo-turquoise);
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.meldo-lesson-count {
    color: var(--meldo-text-medium);
    font-size: 0.875rem;
}

/* ===========================
   Sortable Lessons (Drag & Drop)
   =========================== */
.meldo-lessons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.meldo-lessons-available,
.meldo-lessons-selected {
    background: var(--meldo-bg-light);
    border-radius: var(--meldo-radius);
    padding: 1.5rem;
}

.meldo-lessons-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--meldo-border);
}

.meldo-lessons-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.meldo-lessons-available .meldo-lessons-header-icon {
    background: rgba(61, 124, 133, 0.1);
    color: var(--meldo-turquoise);
}

.meldo-lessons-selected .meldo-lessons-header-icon {
    background: rgba(232, 146, 79, 0.1);
    color: var(--meldo-lime);
}

.meldo-lessons-header-title {
    font-weight: 600;
    color: var(--meldo-text-dark);
    font-size: 1.1rem;
}

.meldo-lesson-list {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 200px;
}

/* Compact Lesson Item Design */
.meldo-lesson-item-compact {
    background: white;
    border-radius: var(--meldo-radius-small);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: var(--meldo-transition);
    border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.meldo-lesson-item-compact:hover {
    border-color: var(--meldo-turquoise);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(61, 124, 133, 0.1);
}

.meldo-lesson-item-compact.selected {
    cursor: move;
}

.meldo-lesson-item-compact.ui-sortable-helper {
    box-shadow: var(--meldo-shadow-hover);
    transform: rotate(1deg) scale(1.02);
    border-color: var(--meldo-lime);
}

.meldo-lesson-drag-handle {
    font-size: 1.4rem;
    color: var(--meldo-border);
    cursor: grab;
    transition: var(--meldo-transition);
    padding: 0 0.25rem;
    letter-spacing: -2px;
    line-height: 1;
}

.meldo-lesson-drag-handle:active {
    cursor: grabbing;
}

.meldo-lesson-item-compact:hover .meldo-lesson-drag-handle {
    color: var(--meldo-turquoise);
}

/* Move Arrows for Lessons and Sections */
.meldo-move-arrows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.meldo-move-up,
.meldo-move-down {
    background: transparent;
    border: none;
    color: var(--meldo-border);
    font-size: 0.7rem;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    transition: var(--meldo-transition);
    border-radius: 3px;
}

.meldo-move-up:hover,
.meldo-move-down:hover {
    background: var(--meldo-turquoise);
    color: white;
    transform: scale(1.15);
}

.meldo-move-up:active,
.meldo-move-down:active {
    transform: scale(0.95);
}

/* Visual feedback when item is moved */
.meldo-item-moved {
    animation: meldoItemMoved 0.3s ease;
}

@keyframes meldoItemMoved {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
        background: rgba(232, 146, 79, 0.1);
    }
}

/* ===========================
   Insert Section Buttons (Between Items)
   =========================== */

.meldo-insert-section-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0;
    position: relative;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.meldo-insert-section-wrapper:hover {
    opacity: 1;
}

.meldo-insert-section-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--meldo-border) 20%, 
        var(--meldo-border) 80%, 
        transparent 100%);
    z-index: 0;
}

.meldo-insert-section-btn {
    background: white;
    border: 2px dashed var(--meldo-border);
    border-radius: 20px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    color: var(--meldo-text-medium);
    cursor: pointer;
    transition: var(--meldo-transition);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    position: relative;
    z-index: 1;
}

.meldo-insert-section-btn:hover {
    background: var(--meldo-lime);
    border-color: var(--meldo-lime);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(232, 146, 79, 0.3);
}

.meldo-insert-icon {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
}

.meldo-insert-text {
    font-weight: 600;
    font-size: 0.75rem;
}

/* First insert button (at the top) - slightly different style */
.meldo-insert-first {
    padding-top: 0.25rem;
    padding-bottom: 0.75rem;
}

/* Hide insert buttons when dragging */
.ui-sortable-helper ~ .meldo-insert-section-wrapper,
.ui-sortable-placeholder ~ .meldo-insert-section-wrapper {
    opacity: 0.1;
    pointer-events: none;
}

.meldo-lesson-content {
    flex: 1;
    min-width: 0;
}

.meldo-lesson-title {
    font-weight: 500;
    color: var(--meldo-text-dark);
    margin: 0;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meldo-lesson-course {
    font-size: 0.75rem;
    color: var(--meldo-text-medium);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meldo-lesson-number {
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--meldo-lime);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Plus and Remove Buttons */
.meldo-add-lesson-btn,
.meldo-remove-lesson-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--meldo-transition);
    flex-shrink: 0;
}

.meldo-add-lesson-btn {
    background: var(--meldo-turquoise);
    color: white;
}

.meldo-add-lesson-btn:hover {
    background: #2E5F65;
    transform: scale(1.1);
}

.meldo-remove-lesson-btn {
    background: var(--meldo-error);
    color: white;
}

.meldo-remove-lesson-btn:hover {
    background: #c74439;
    transform: scale(1.1);
}

.sortable-placeholder {
    background: var(--meldo-bg-light);
    border: 2px dashed var(--meldo-turquoise);
    border-radius: var(--meldo-radius-small);
    margin-bottom: 0.5rem;
    height: 50px;
}

/* ===========================
   Preset Items
   =========================== */
.meldo-preset-item {
    background: white;
    border-radius: var(--meldo-radius-small);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--meldo-lime);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: var(--meldo-transition);
}

.meldo-preset-item:hover {
    box-shadow: var(--meldo-shadow);
    transform: translateX(2px);
}

/* ===========================
   Group Selection
   =========================== */
.meldo-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.meldo-group-checkbox {
    position: relative;
}

.meldo-group-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.meldo-group-label {
    display: block;
    padding: 1.25rem;
    background: var(--meldo-bg-light);
    border-radius: var(--meldo-radius-small);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--meldo-transition);
    position: relative;
    padding-left: 3.5rem;
}

.meldo-group-checkbox input[type="checkbox"]:checked + .meldo-group-label {
    background: white;
    border-color: var(--meldo-turquoise);
    box-shadow: var(--meldo-shadow);
}

.meldo-group-label::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--meldo-border);
    border-radius: 6px;
    transition: var(--meldo-transition);
    background: white;
}

.meldo-group-checkbox input[type="checkbox"]:checked + .meldo-group-label::before {
    background: var(--meldo-turquoise);
    border-color: var(--meldo-turquoise);
}

.meldo-group-checkbox input[type="checkbox"]:checked + .meldo-group-label::after {
    content: '✓';
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.meldo-group-name {
    font-weight: 600;
    color: var(--meldo-text-dark);
    display: block;
    margin-bottom: 0.25rem;
}

.meldo-group-members {
    font-size: 0.85rem;
    color: var(--meldo-text-medium);
}

/* ===========================
   Progress Display
   =========================== */
.meldo-learning-paths-list {
    display: grid;
    gap: 1.5rem;
}

.meldo-path-card {
    background: white;
    border-radius: var(--meldo-radius);
    padding: 2rem;
    box-shadow: var(--meldo-shadow);
    transition: var(--meldo-transition);
    border-left: 4px solid var(--meldo-turquoise);
}

.meldo-path-card:hover {
    box-shadow: var(--meldo-shadow-hover);
    transform: translateX(4px);
}

.meldo-path-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.meldo-path-title-wrapper h3 {
    color: var(--meldo-turquoise);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.meldo-path-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.875rem;
    color: var(--meldo-text-medium);
}

.meldo-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

.meldo-status-badge.not-started {
    background: rgba(0, 0, 0, 0.05);
    color: var(--meldo-text-medium);
}

.meldo-status-badge.in-progress {
    background: rgba(232, 146, 79, 0.1);
    color: #E57C25;
}

.meldo-status-badge.completed {
    background: rgba(61, 124, 133, 0.1);
    color: var(--meldo-turquoise);
}

.meldo-status-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.meldo-status-badge.not-started::before {
    background: var(--meldo-text-medium);
}

.meldo-status-badge.in-progress::before {
    background: var(--meldo-lime);
}

.meldo-status-badge.completed::before {
    background: var(--meldo-turquoise);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.meldo-progress-section {
    margin-bottom: 1.5rem;
}

.meldo-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.meldo-progress-text {
    font-weight: 600;
    color: var(--meldo-text-dark);
}

.meldo-progress-percentage {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--meldo-turquoise);
}

.meldo-progress-bar {
    width: 100%;
    height: 12px;
    background: var(--meldo-bg-light);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.meldo-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--meldo-turquoise), var(--meldo-lime));
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.meldo-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.meldo-lessons-list {
    margin-top: 1.5rem;
}

.meldo-lesson-progress-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--meldo-bg-light);
    border-radius: var(--meldo-radius-small);
    margin-bottom: 0.5rem;
    transition: var(--meldo-transition);
}

.meldo-lesson-progress-item:hover {
    background: white;
    box-shadow: var(--meldo-shadow);
}

.meldo-lesson-progress-item.completed {
    background: rgba(61, 124, 133, 0.05);
}

.meldo-lesson-status-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.meldo-lesson-progress-item.completed .meldo-lesson-status-icon {
    background: var(--meldo-turquoise);
    color: white;
}

.meldo-lesson-progress-item:not(.completed) .meldo-lesson-status-icon {
    background: var(--meldo-bg-light);
    border: 2px solid var(--meldo-border);
    color: var(--meldo-text-medium);
}

.meldo-lesson-progress-title {
    flex: 1;
    font-weight: 500;
    color: var(--meldo-text-dark);
}

.meldo-lesson-progress-item.completed .meldo-lesson-progress-title {
    color: var(--meldo-turquoise);
}

/* ===========================
   Student Section Dividers (NEW!)
   =========================== */
.meldo-student-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, 
        rgba(232, 146, 79, 0.08) 0%, 
        rgba(232, 146, 79, 0.03) 100%);
    border-left: 4px solid var(--meldo-lime);
    border-radius: var(--meldo-radius-small);
    position: relative;
}

.meldo-student-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--meldo-lime) 20%, 
        var(--meldo-lime) 80%, 
        transparent 100%);
    opacity: 0.3;
}

.meldo-student-section-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(232, 146, 79, 0.2));
}

.meldo-student-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--meldo-text-dark);
    letter-spacing: 0.3px;
}

/* First lesson after section - add top spacing */
.meldo-student-section + .meldo-lesson-progress-item {
    margin-top: 1rem;
}

/* ===========================
   Messages & Alerts
   =========================== */
.meldo-message {
    padding: 1rem 1.5rem;
    border-radius: var(--meldo-radius-small);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.meldo-message-success {
    background: rgba(61, 124, 133, 0.1);
    border-left: 4px solid var(--meldo-turquoise);
    color: var(--meldo-turquoise);
}

.meldo-message-error {
    background: rgba(226, 87, 76, 0.1);
    border-left: 4px solid var(--meldo-error);
    color: var(--meldo-error);
}

.meldo-message-info {
    background: rgba(232, 146, 79, 0.1);
    border-left: 4px solid var(--meldo-lime);
    color: #E57C25;
}

.meldo-error {
    padding: 1rem;
    background: rgba(226, 87, 76, 0.1);
    color: var(--meldo-error);
    border-radius: var(--meldo-radius-small);
    border-left: 4px solid var(--meldo-error);
}

/* ===========================
   Loading States
   =========================== */
.meldo-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.meldo-skeleton {
    background: linear-gradient(
        90deg,
        var(--meldo-bg-light) 25%,
        #e0e0e0 50%,
        var(--meldo-bg-light) 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: var(--meldo-radius-small);
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 768px) {
    .meldo-lessons-container {
        grid-template-columns: 1fr;
    }
    
    .meldo-groups-grid {
        grid-template-columns: 1fr;
    }
    
    .meldo-card {
        padding: 1.5rem;
    }
    
    .meldo-heading {
        font-size: 1.5rem;
    }
    
    .meldo-path-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .meldo-path-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ===========================
   Utility Classes
   =========================== */
.meldo-text-center {
    text-align: center;
}

.meldo-mt-1 {
    margin-top: 0.5rem;
}

.meldo-mt-2 {
    margin-top: 1rem;
}

.meldo-mb-1 {
    margin-bottom: 0.5rem;
}

.meldo-mb-2 {
    margin-bottom: 1rem;
}

.meldo-flex {
    display: flex;
}

.meldo-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.meldo-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.meldo-gap-1 {
    gap: 0.5rem;
}

.meldo-gap-2 {
    gap: 1rem;
}

.meldo-hidden {
    display: none;
}

/* ===========================
   Sections Feature (NEW!)
   =========================== */

/* Section Button in Header */
.meldo-section-btn {
    background: linear-gradient(135deg, var(--meldo-lime) 0%, #E9771B 100%);
    color:#111416;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--meldo-transition);
    box-shadow: 0 2px 8px rgba(232, 146, 79, 0.2);
    margin-left: auto;
}

.meldo-section-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(232, 146, 79, 0.3);
}

.meldo-section-btn:active {
    transform: translateY(0);
}

.meldo-section-icon {
    font-size: 1.1rem;
}

/* Section Item in List */
.meldo-section-item {
    background: linear-gradient(135deg, #FAF8F3 0%, #e9ecef 100%);
    border: 2px dashed var(--meldo-lime);
    border-radius: var(--meldo-radius-small);
    padding: 1.25rem;
    margin: 1rem 0;
    cursor: move;
    transition: var(--meldo-transition);
    position: relative;
}

.meldo-section-item:hover {
    border-color: var(--meldo-turquoise);
    background: linear-gradient(135deg, #fff 0%, #FAF8F3 100%);
    box-shadow: var(--meldo-shadow);
}

.meldo-section-item.ui-sortable-helper {
    box-shadow: var(--meldo-shadow-hover);
    transform: rotate(2deg);
}

/* Section Content */
.meldo-section-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 3.5rem; /* More space for drag handle + arrows */
    position: relative;
}

.meldo-section-icon-main {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.meldo-section-input-wrapper {
    flex: 1;
}

.meldo-section-input {
    width: 100%;
    border: 2px solid transparent;
    background: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--meldo-text-dark);
    transition: var(--meldo-transition);
}

.meldo-section-input:focus {
    outline: none;
    border-color: var(--meldo-lime);
    box-shadow: 0 0 0 3px rgba(232, 146, 79, 0.1);
}

.meldo-section-input::placeholder {
    color: #999;
    font-weight: 500;
}

/* Section Remove Button */
.meldo-section-remove {
    background: #e9ecef;
    color: var(--meldo-text-medium);
    border: none;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--meldo-transition);
    flex-shrink: 0;
}

.meldo-section-remove:hover {
    background: var(--meldo-error);
    color: white;
}

/* Section Handle (for drag & drop) - IMPROVED */
.meldo-section-handle {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--meldo-lime);
    font-size: 1.3rem;
    opacity: 0.4;
    transition: var(--meldo-transition);
    cursor: grab;
    line-height: 0.8;
    letter-spacing: -3px;
    font-weight: bold;
}

.meldo-section-handle:active {
    cursor: grabbing;
}

.meldo-section-item:hover .meldo-section-handle {
    opacity: 1;
    color: var(--meldo-turquoise);
}

.meldo-section-item.ui-sortable-helper .meldo-section-handle {
    opacity: 1;
    color: var(--meldo-turquoise);
}

/* Section Move Arrows - positioned after handle */
.meldo-section-item .meldo-move-arrows {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Visual Divider Effect */
.meldo-section-divider {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: -1rem;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--meldo-lime) 10%, 
        var(--meldo-lime) 90%, 
        transparent 100%);
    opacity: 0.3;
}

/* ===========================
   Section Color Picker (NEW!)
   =========================== */

.meldo-section-color-picker {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--meldo-border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: white;
    cursor: pointer;
    transition: var(--meldo-transition);
}

.meldo-section-color-picker:hover {
    border-color: var(--meldo-turquoise);
}

/* ===========================
   Section Color Variations (Builder)
   =========================== */

/* Lime (Default) */
.section-color-lime {
    background: linear-gradient(135deg, 
        rgba(232, 146, 79, 0.12) 0%, 
        rgba(232, 146, 79, 0.06) 100%) !important;
    border-left-color: #E8924F !important;
}
.section-color-lime .meldo-section-divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #E8924F 10%, 
        #E8924F 90%, 
        transparent 100%);
}

/* Turquoise */
.section-color-turquoise {
    background: linear-gradient(135deg, 
        rgba(61, 124, 133, 0.12) 0%, 
        rgba(61, 124, 133, 0.06) 100%) !important;
    border-left-color: #3D7C85 !important;
}
.section-color-turquoise .meldo-section-divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #3D7C85 10%, 
        #3D7C85 90%, 
        transparent 100%);
}

/* Blue */
.section-color-blue {
    background: linear-gradient(135deg, 
        rgba(52, 152, 219, 0.12) 0%, 
        rgba(52, 152, 219, 0.06) 100%) !important;
    border-left-color: #3498DB !important;
}
.section-color-blue .meldo-section-divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #3498DB 10%, 
        #3498DB 90%, 
        transparent 100%);
}

/* Purple */
.section-color-purple {
    background: linear-gradient(135deg, 
        rgba(155, 89, 182, 0.12) 0%, 
        rgba(155, 89, 182, 0.06) 100%) !important;
    border-left-color: #9B59B6 !important;
}
.section-color-purple .meldo-section-divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #9B59B6 10%, 
        #9B59B6 90%, 
        transparent 100%);
}

/* Pink */
.section-color-pink {
    background: linear-gradient(135deg, 
        rgba(231, 76, 60, 0.12) 0%, 
        rgba(231, 76, 60, 0.06) 100%) !important;
    border-left-color: #E74C3C !important;
}
.section-color-pink .meldo-section-divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #E74C3C 10%, 
        #E74C3C 90%, 
        transparent 100%);
}

/* Orange */
.section-color-orange {
    background: linear-gradient(135deg, 
        rgba(243, 156, 18, 0.12) 0%, 
        rgba(243, 156, 18, 0.06) 100%) !important;
    border-left-color: #F39C12 !important;
}
.section-color-orange .meldo-section-divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #F39C12 10%, 
        #F39C12 90%, 
        transparent 100%);
}

/* Yellow */
.section-color-yellow {
    background: linear-gradient(135deg, 
        rgba(241, 196, 15, 0.12) 0%, 
        rgba(241, 196, 15, 0.06) 100%) !important;
    border-left-color: #F1C40F !important;
}
.section-color-yellow .meldo-section-divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #F1C40F 10%, 
        #F1C40F 90%, 
        transparent 100%);
}

/* Red */
.section-color-red {
    background: linear-gradient(135deg, 
        rgba(192, 57, 43, 0.12) 0%, 
        rgba(192, 57, 43, 0.06) 100%) !important;
    border-left-color: #C0392B !important;
}
.section-color-red .meldo-section-divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #C0392B 10%, 
        #C0392B 90%, 
        transparent 100%);
}

/* Green */
.section-color-green {
    background: linear-gradient(135deg, 
        rgba(39, 174, 96, 0.12) 0%, 
        rgba(39, 174, 96, 0.06) 100%) !important;
    border-left-color: #27AE60 !important;
}
.section-color-green .meldo-section-divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #27AE60 10%, 
        #27AE60 90%, 
        transparent 100%);
}

/* Gray */
.section-color-gray {
    background: linear-gradient(135deg, 
        rgba(127, 140, 141, 0.12) 0%, 
        rgba(127, 140, 141, 0.06) 100%) !important;
    border-left-color: #7F8C8D !important;
}
.section-color-gray .meldo-section-divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #7F8C8D 10%, 
        #7F8C8D 90%, 
        transparent 100%);
}

/* ===========================
   Student Section Colors (Student View)
   =========================== */

/* Lime */
.student-section-color-lime {
    background: linear-gradient(135deg, 
        rgba(232, 146, 79, 0.08) 0%, 
        rgba(232, 146, 79, 0.03) 100%);
    border-left-color: #E8924F;
}
.student-section-color-lime::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #E8924F 20%, 
        #E8924F 80%, 
        transparent 100%);
}

/* Turquoise */
.student-section-color-turquoise {
    background: linear-gradient(135deg, 
        rgba(61, 124, 133, 0.08) 0%, 
        rgba(61, 124, 133, 0.03) 100%);
    border-left-color: #3D7C85;
}
.student-section-color-turquoise::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #3D7C85 20%, 
        #3D7C85 80%, 
        transparent 100%);
}

/* Blue */
.student-section-color-blue {
    background: linear-gradient(135deg, 
        rgba(52, 152, 219, 0.08) 0%, 
        rgba(52, 152, 219, 0.03) 100%);
    border-left-color: #3498DB;
}
.student-section-color-blue::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #3498DB 20%, 
        #3498DB 80%, 
        transparent 100%);
}

/* Purple */
.student-section-color-purple {
    background: linear-gradient(135deg, 
        rgba(155, 89, 182, 0.08) 0%, 
        rgba(155, 89, 182, 0.03) 100%);
    border-left-color: #9B59B6;
}
.student-section-color-purple::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #9B59B6 20%, 
        #9B59B6 80%, 
        transparent 100%);
}

/* Pink */
.student-section-color-pink {
    background: linear-gradient(135deg, 
        rgba(231, 76, 60, 0.08) 0%, 
        rgba(231, 76, 60, 0.03) 100%);
    border-left-color: #E74C3C;
}
.student-section-color-pink::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #E74C3C 20%, 
        #E74C3C 80%, 
        transparent 100%);
}

/* Orange */
.student-section-color-orange {
    background: linear-gradient(135deg, 
        rgba(243, 156, 18, 0.08) 0%, 
        rgba(243, 156, 18, 0.03) 100%);
    border-left-color: #F39C12;
}
.student-section-color-orange::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #F39C12 20%, 
        #F39C12 80%, 
        transparent 100%);
}

/* Yellow */
.student-section-color-yellow {
    background: linear-gradient(135deg, 
        rgba(241, 196, 15, 0.08) 0%, 
        rgba(241, 196, 15, 0.03) 100%);
    border-left-color: #F1C40F;
}
.student-section-color-yellow::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #F1C40F 20%, 
        #F1C40F 80%, 
        transparent 100%);
}

/* Red */
.student-section-color-red {
    background: linear-gradient(135deg, 
        rgba(192, 57, 43, 0.08) 0%, 
        rgba(192, 57, 43, 0.03) 100%);
    border-left-color: #C0392B;
}
.student-section-color-red::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #C0392B 20%, 
        #C0392B 80%, 
        transparent 100%);
}

/* Green */
.student-section-color-green {
    background: linear-gradient(135deg, 
        rgba(39, 174, 96, 0.08) 0%, 
        rgba(39, 174, 96, 0.03) 100%);
    border-left-color: #27AE60;
}
.student-section-color-green::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #27AE60 20%, 
        #27AE60 80%, 
        transparent 100%);
}

/* Gray */
.student-section-color-gray {
    background: linear-gradient(135deg, 
        rgba(127, 140, 141, 0.08) 0%, 
        rgba(127, 140, 141, 0.03) 100%);
    border-left-color: #7F8C8D;
}
.student-section-color-gray::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #7F8C8D 20%, 
        #7F8C8D 80%, 
        transparent 100%);
}

/* ===========================
   Due Date Feature (NEW!)
   =========================== */

/* Due Date Container */
.meldo-lesson-due-date-container {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
}

/* Due Date Wrapper (contains label and input) */
.meldo-due-date-wrapper {
    position: relative;
    border: 1px dashed var(--meldo-border);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    transition: var(--meldo-transition);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.meldo-due-date-wrapper:hover {
    border-color: var(--meldo-turquoise);
    background: rgba(61, 124, 133, 0.05);
}

.meldo-due-date-wrapper.has-date {
    border-style: solid;
    border-color: var(--meldo-lime);
    background: rgba(232, 146, 79, 0.08);
}

.meldo-due-date-wrapper.has-date:hover {
    background: rgba(232, 146, 79, 0.15);
}

/* Label (visible text) */
.meldo-due-date-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--meldo-text-medium);
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.meldo-due-date-wrapper.has-date .meldo-due-date-label {
    color: var(--meldo-text-dark);
    font-weight: 600;
}

.meldo-due-date-text {
    font-size: 0.85rem;
}

/* Date Input (overlays the wrapper, transparent) */
.meldo-due-date-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.meldo-due-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ===========================
   Student Due Date Display
   =========================== */

/* Due date badge in student view */
.meldo-lesson-due-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

/* Due date states */
.meldo-lesson-due-badge.due-ok {
    background: rgba(46, 213, 115, 0.15);
    color: #27AE60;
}

.meldo-lesson-due-badge.due-soon {
    background: rgba(241, 196, 15, 0.15);
    color: #F39C12;
}

.meldo-lesson-due-badge.due-urgent {
    background: rgba(231, 76, 60, 0.15);
    color: #C0392B;
}

.meldo-lesson-due-badge.due-overdue {
    background: rgba(192, 57, 43, 0.2);
    color: #A93226;
    font-weight: 700;
}

.meldo-lesson-due-badge.due-future {
    background: rgba(149, 165, 166, 0.15);
    color: #7F8C8D;
}

/* ===========================
   Tab System (NEW!)
   =========================== */

/* Tabs - ONLY for Learning Paths Builder */
.meldo-learning-path-builder .meldo-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--meldo-border);
    margin-bottom: 1.5rem;
}

.meldo-learning-path-builder .meldo-tab {
    background: transparent;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--meldo-text-medium);
    cursor: pointer;
    transition: var(--meldo-transition);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    position: relative;
}

.meldo-learning-path-builder .meldo-tab:hover {
    color: var(--meldo-turquoise);
    background: rgba(61, 124, 133, 0.08);
}

.meldo-learning-path-builder .meldo-tab.active {
    color: white !important;
    background: var(--meldo-turquoise);
    border-bottom-color: var(--meldo-turquoise);
}

.meldo-learning-path-builder .meldo-tab.active:hover {
    color: white !important;
}


.meldo-learning-path-builder .meldo-tab-content {
    display: none;
}

.meldo-learning-path-builder .meldo-tab-content.active {
    display: block;
}

/* Featured Tab (Vorlagen) */
.meldo-learning-path-builder .meldo-tab-featured {
    position: relative;
}

.meldo-learning-path-builder .meldo-tab-badge {
    display: inline-block;
    background: var(--meldo-lime);
    color: white;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.5rem;
    font-weight: 700;
    vertical-align: middle;
}

.meldo-learning-path-builder .meldo-tab-featured.active .meldo-tab-badge {
    background: rgba(232, 146, 79, 0.3);
}

/* Hint Box for Templates */
.meldo-hint-box {
    background: linear-gradient(135deg, 
        rgba(232, 146, 79, 0.1) 0%, 
        rgba(232, 146, 79, 0.05) 100%);
    border-left: 4px solid var(--meldo-lime);
    padding: 1rem 1.25rem;
    border-radius: var(--meldo-radius-small);
    font-size: 0.95rem;
    color: var(--meldo-text-dark);
    line-height: 1.5;
}

/* ===========================
   Favorites Functionality
   =========================== */

/* Favorite Star (SVG, Meldo) */
.meldo-favorite-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 0.4rem;
    vertical-align: middle;
    position: relative;
    z-index: auto;
    flex-shrink: 0;
    user-select: none;
    pointer-events: all;
    transition: background 0.15s ease;
}

.meldo-fav-svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #c4cece;
    stroke-width: 1.7;
    stroke-linejoin: round;
    transition: transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease;
}

.meldo-favorite-star:hover {
    background: rgba(0,0,0,0.05);
}

.meldo-favorite-star:hover .meldo-fav-svg {
    stroke: var(--meldo-lime);
    transform: scale(1.1);
}

.meldo-favorite-star.meldo-favorite-active .meldo-fav-svg {
    fill: var(--meldo-lime);
    stroke: var(--meldo-lime);
}

.meldo-favorite-star.meldo-favorite-active:hover .meldo-fav-svg {
    fill: #E47219;
    stroke: #E47219;
}

/* Favorite Message */
.meldo-favorite-message {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: var(--meldo-lime);
    color: white;
    border-radius: var(--meldo-radius-small);
    font-size: 0.9rem;
    font-weight: 600;
    animation: meldoFadeIn 0.3s ease;
    position: relative;
    z-index: 1000;
}

@keyframes meldoFadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* LearnDash Integration - Course Overview
   Star is appended inside .ld-item-title which is inside a.ld-item-name.
   LearnDash uses flex with order values on children — our star defaults to order:0
   and lands on the LEFT. Fix: order:999 !important pushes it to the far right. */
a.ld-item-name .meldo-favorite-star {
    order: 999 !important;
    margin-left: 0.5rem;
    flex-shrink: 0;
    pointer-events: all;
    display: inline-flex;
    align-items: center;
}

/* LearnDash Integration - Single Lesson */
.single-sfwd-lessons .entry-title .meldo-favorite-star,
.single-sfwd-lessons .learndash-page-title .meldo-favorite-star,
.single-sfwd-lessons h1 .meldo-favorite-star {
    width: 36px;
    height: 36px;
    margin-left: 0.6rem;
}
.single-sfwd-lessons .entry-title .meldo-fav-svg,
.single-sfwd-lessons .learndash-page-title .meldo-fav-svg,
.single-sfwd-lessons h1 .meldo-fav-svg {
    width: 24px;
    height: 24px;
}

/* Make sure star is always visible */
.meldo-favorite-star {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .meldo-favorite-star {
        width: 30px;
        height: 30px;
        margin-left: 0.35rem;
    }
    .meldo-fav-svg {
        width: 20px;
        height: 20px;
    }
    
    .single-sfwd-lessons .entry-title .meldo-favorite-star,
    .single-sfwd-lessons .learndash-page-title .meldo-favorite-star,
    .single-sfwd-lessons h1 .meldo-favorite-star {
        width: 32px;
        height: 32px;
    }
    .single-sfwd-lessons .entry-title .meldo-fav-svg,
    .single-sfwd-lessons .learndash-page-title .meldo-fav-svg,
    .single-sfwd-lessons h1 .meldo-fav-svg {
        width: 21px;
        height: 21px;
    }
    
    .meldo-favorite-message {
        font-size: 0.8rem;
        padding: 0.25rem 0.6rem;
    }
}

/* Ensure stars don't break layout */
.ld-item-name {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/* Better positioning for stars in links */
a[href*="/lessons/"] .meldo-favorite-star {
    margin-left: auto;
}




/* ===========================
   Import/Export UI (v1.3.0+)
   =========================== */

/* Export/Import Section */
.meldo-export-import-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--meldo-border);
}

.meldo-export-import-section h3 {
    color: var(--meldo-text-dark);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.meldo-import-export-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.meldo-import-export-actions .meldo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Import Dialog */
.meldo-import-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.meldo-import-dialog-content {
    background: white;
    border-radius: var(--meldo-radius);
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.meldo-import-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--meldo-border);
}

.meldo-import-dialog-header h2 {
    margin: 0;
    color: var(--meldo-text-dark);
    font-size: 1.5rem;
}

.meldo-import-dialog-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    transition: var(--meldo-transition);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meldo-import-dialog-close:hover {
    color: #333;
}

.meldo-import-step {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--meldo-border);
}

.meldo-import-step:last-child {
    border-bottom: none;
}

.meldo-import-step h3 {
    margin: 0 0 1rem 0;
    color: var(--meldo-text-dark);
    font-size: 1.2rem;
}

.meldo-import-preview-table {
    width: 100%;
    border-collapse: collapse;
}

.meldo-import-preview-table td {
    padding: 8px;
    border-bottom: 1px solid var(--meldo-border);
}

.meldo-import-preview-table td:first-child {
    font-weight: 600;
    width: 150px;
    color: var(--meldo-text-dark);
}

.meldo-import-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--meldo-border);
}

/* Validation Results */
.meldo-validation-success {
    background: #d4edda;
    border-left: 4px solid #28a745;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: var(--meldo-radius-small);
    color: #155724;
}

.meldo-validation-warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: var(--meldo-radius-small);
    color: #856404;
}

.meldo-validation-error {
    background: #f8d7da;
    border-left: 4px solid #dc3545;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: var(--meldo-radius-small);
    color: #721c24;
}

/* Group Selection */
#meldo-import-group-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--meldo-border);
    border-radius: var(--meldo-radius-small);
    font-size: 14px;
    min-height: 150px;
}

#meldo-import-group-select option {
    padding: 8px;
}

/* Notifications */
.meldo-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    background: white;
    border-radius: var(--meldo-radius-small);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 9999999;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.meldo-notification.meldo-notification-show {
    transform: translateX(0);
    opacity: 1;
}

.meldo-notification-success {
    border-left: 4px solid #28a745;
    background: #d4edda;
    color: #155724;
}

.meldo-notification-error {
    border-left: 4px solid #dc3545;
    background: #f8d7da;
    color: #721c24;
}

.meldo-notification-warning {
    border-left: 4px solid #ffc107;
    background: #fff3cd;
    color: #856404;
}

.meldo-notification-info {
    border-left: 4px solid var(--meldo-turquoise);
    background: #d1ecf1;
    color: #0c5460;
}

/* Bulk Export Controls */
.meldo-bulk-export-controls {
    background: var(--meldo-bg-light);
    padding: 1.5rem;
    border-radius: var(--meldo-radius);
    margin-bottom: 2rem;
}

.meldo-bulk-export-controls h4 {
    margin: 0 0 1rem 0;
    color: var(--meldo-text-dark);
}

.meldo-path-checkbox {
    margin-right: 8px;
}

/* Loading Spinner */
.dashicons-spin {
    animation: meldo-spin 1s linear infinite;
}

@keyframes meldo-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .meldo-import-export-actions {
        flex-direction: column;
    }
    
    .meldo-import-export-actions .meldo-btn {
        width: 100%;
        justify-content: center;
    }
    
    .meldo-import-dialog-content {
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }
    
    .meldo-notification {
        right: 10px;
        left: 10px;
        min-width: auto;
    }
}

/* Icon-Only Buttons (Bearbeiten, Export, Löschen) */
.meldo-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #ddd;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.meldo-btn-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.meldo-btn-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Edit Button */
.meldo-btn-icon-edit {
    border-color: var(--meldo-turquoise);
    color: var(--meldo-turquoise);
}

.meldo-btn-icon-edit:hover {
    background: var(--meldo-turquoise);
    color: white;
}

/* Export Button */
.meldo-btn-icon-export {
    border-color: var(--meldo-lime);
    color: var(--meldo-lime);
}

.meldo-btn-icon-export:hover {
    background: var(--meldo-lime);
    color: white;
}

/* Delete Button */
.meldo-btn-icon-delete {
    border-color: var(--meldo-error);
    color: var(--meldo-error);
}

.meldo-btn-icon-delete:hover {
    background: var(--meldo-error);
    color: white;
}

.meldo-btn-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.meldo-btn-icon:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Tooltip on hover */
.meldo-btn-icon::after {
    content: attr(title);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.meldo-btn-icon:hover::after {
    opacity: 1;
}

/* Gap between buttons */
.meldo-gap-1 {
    gap: 8px;
}

.meldo-flex {
    display: flex;
    align-items: center;
}

/* Smart Import Validation */
.meldo-validation-warning {
    line-height: 1.6;
    padding: 10px 14px;
}

.meldo-validation-warning strong {
    display: inline-block;
    margin-bottom: 4px;
}

/* ===========================
   Ultra Compact Lessons (NEW!)
   =========================== */
.meldo-lesson-compact {
    background: white;
    border: 1px solid var(--meldo-border);
    border-radius: 8px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}

.meldo-lesson-compact:hover {
    border-color: var(--meldo-turquoise);
    box-shadow: 0 2px 8px rgba(61, 124, 133, 0.1);
}

.meldo-lesson-compact.ui-sortable-helper {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

.meldo-lesson-main {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    min-height: 40px;
}

.meldo-lesson-drag {
    color: #ccc;
    font-size: 12px;
    cursor: grab;
    padding: 2px;
    user-select: none;
}

.meldo-lesson-drag:active {
    cursor: grabbing;
}

.meldo-lesson-compact:hover .meldo-lesson-drag {
    color: var(--meldo-turquoise);
}

.meldo-lesson-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--meldo-lime);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.meldo-lesson-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.meldo-lesson-name {
    font-weight: 500;
    color: var(--meldo-text-dark);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.meldo-lesson-course-tag {
    font-size: 0.7rem;
    color: var(--meldo-text-medium);
    background: var(--meldo-bg-light);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.meldo-lesson-due-badge {
    font-size: 0.7rem;
    color: white;
    background: var(--meldo-turquoise);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.meldo-lesson-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--meldo-bg-light);
    border: none;
    border-radius: 6px;
    color: var(--meldo-text-medium);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.meldo-lesson-expand:hover {
    background: var(--meldo-turquoise);
    color: white;
}

.meldo-lesson-expand svg {
    transition: transform 0.2s ease;
}

.meldo-lesson-compact.is-expanded .meldo-lesson-expand svg {
    transform: rotate(180deg);
}

.meldo-lesson-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.meldo-lesson-remove:hover {
    background: var(--meldo-error);
    color: white;
}

/* Expandable Options */
.meldo-lesson-options {
    display: none;
    padding: 8px 10px 10px 44px;
    border-top: 1px solid var(--meldo-border);
    background: var(--meldo-bg-light);
    gap: 12px;
    flex-wrap: wrap;
    border-radius: 0 0 8px 8px;
}

.meldo-lesson-compact.is-expanded .meldo-lesson-options {
    display: flex;
}

/* Prevent date input from being focusable when hidden */
.meldo-lesson-options .meldo-due-date-input {
    pointer-events: none;
}

.meldo-lesson-compact.is-expanded .meldo-lesson-options .meldo-due-date-input {
    pointer-events: auto;
}

.meldo-lesson-option {
    display: flex;
    align-items: center;
    gap: 6px;
}

.meldo-option-label {
    font-size: 0.8rem;
    color: var(--meldo-text-medium);
}

.meldo-lesson-options .meldo-due-date-input {
    position: static !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    padding: 4px 8px;
    border: 1px solid var(--meldo-border);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
}

.meldo-lesson-options .meldo-due-date-input:focus {
    outline: 2px solid var(--meldo-turquoise);
    outline-offset: 1px;
}

.meldo-lesson-moves {
    display: flex;
    gap: 4px;
}

.meldo-lesson-moves button {
    padding: 4px 10px;
    background: white;
    border: 1px solid var(--meldo-border);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--meldo-text-medium);
    cursor: pointer;
    transition: all 0.15s ease;
}

.meldo-lesson-moves button:hover {
    border-color: var(--meldo-turquoise);
    color: var(--meldo-turquoise);
}

/* Responsive Compact Lessons */
@media (max-width: 768px) {
    .meldo-lesson-name {
        max-width: 150px;
    }
    
    .meldo-lesson-course-tag {
        display: none;
    }
    
    .meldo-lesson-options {
        padding-left: 10px;
    }
}

/* ===========================
   SVG Icon System
   =========================== */

/* Default: türkis */
.meldo-heading-icon,
.meldo-subheading-icon,
.meldo-tab-icon,
.meldo-meta-icon,
.meldo-empty-icon {
    color: var(--meldo-turquoise);
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Inline alignment helpers */
.meldo-heading svg,
.meldo-subheading svg {
    vertical-align: middle;
    margin-right: 0.4rem;
    position: relative;
    top: -1px;
}

.meldo-lp-tab-content-wrapper svg,
.meldo-lp-tab-pin svg {
    vertical-align: middle;
    flex-shrink: 0;
    color: var(--meldo-lime);
}
/* Pin is active/set as default */
.meldo-lp-tab-pin.is-default svg {
    color: var(--meldo-lime);
    opacity: 1;
}
/* On active (teal) tab: white pin */
.meldo-lp-tab.active .meldo-lp-tab-pin svg {
    color: white;
    opacity: 0.7;
}
.meldo-lp-tab.active .meldo-lp-tab-pin.is-default svg {
    color: white;
    opacity: 1;
}

/* Empty state icons */
.meldo-empty-icon {
    display: block;
    margin: 0 auto 1rem;
    opacity: 0.6;
}

/* Meta icons (small, inline) */
.meldo-meta-icon {
    margin-right: 0.25rem;
    vertical-align: middle;
}

/* Button SVG icons: white on primary/secondary buttons */
.meldo-btn-primary .meldo-btn-svg-icon,
.meldo-btn-secondary .meldo-btn-svg-icon,
.meldo-sticky-btn-save svg {
    color: white;
}

/* Outline button: türkis, becomes white on hover */
.meldo-btn-svg-icon--outline {
    color: var(--meldo-turquoise);
    transition: color 0.2s;
}
.meldo-btn-outline:hover .meldo-btn-svg-icon--outline {
    color: white;
}

/* Tab pin icon */
.meldo-lp-tab-pin svg {
    color: var(--meldo-text-medium);
    opacity: 0.5;
    transition: color 0.2s, opacity 0.2s;
}
.meldo-lp-tab-pin:hover svg,
.meldo-lp-tab-pin.is-default svg {
    color: var(--meldo-turquoise);
    opacity: 1;
}
.meldo-lp-tab.active .meldo-lp-tab-pin svg {
    color: white;
    opacity: 0.7;
}
.meldo-lp-tab.active .meldo-lp-tab-pin:hover svg,
.meldo-lp-tab.active .meldo-lp-tab-pin.is-default svg {
    opacity: 1;
}

/* Sticky header mode badge icons */
.meldo-sticky-mode-badge svg {
    vertical-align: middle;
    color: inherit;
    margin-right: 0.25rem;
}

/* Paths-btn icon (drawer open) */
.meldo-paths-btn svg {
    color: var(--meldo-turquoise);
    flex-shrink: 0;
}

/* =========================================================
   Meldo Redesign v1.12.29 – Lernpfad-Display im Meldo-Stil
   ========================================================= */
.meldo-learning-path-display .meldo-path-card {
    background: #fff !important;
    border: 1px solid #eef1f1 !important;
    border-left: 5px solid #3D7C85 !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 22px rgba(0,0,0,.05) !important;
    padding: 22px 24px !important;
    margin-bottom: 16px !important;
}
.meldo-learning-path-display .meldo-path-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.meldo-learning-path-display .meldo-path-title-wrapper h3 {
    font-family: 'Akko', sans-serif; font-weight: 700; font-size: 20px;
    color: #3D7C85 !important; margin: 0 0 8px !important;
}
.meldo-learning-path-display .meldo-path-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.meldo-learning-path-display .meldo-path-meta span {
    display: inline-flex; align-items: center; gap: 6px;
    background: #F5F8F8; color: #1F737A;
    font-family: 'Akko', sans-serif; font-weight: 700; font-size: 12px;
    padding: 5px 11px; border-radius: 999px;
}
.meldo-learning-path-display .meldo-status-badge {
    font-family: 'Akko', sans-serif; font-weight: 700; font-size: 12px;
    padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.meldo-learning-path-display .meldo-status-badge.not_started { background:#f0f3f3 !important; color:#7a8a8a !important; }
.meldo-learning-path-display .meldo-status-badge.in_progress { background:#fff5e6 !important; color:#b8791b !important; }
.meldo-learning-path-display .meldo-status-badge.completed { background:#eef7e6 !important; color:#C48321 !important; }

/* Fortschritt: Ring + Status + CTA */
.meldo-learning-path-display .meldo-progress-section {
    display: flex !important; align-items: center; gap: 18px;
    background: #fafbfb; border: 1px solid #eef1f1; border-radius: 16px;
    padding: 16px 18px; margin-bottom: 4px;
}
.meldo-learning-path-display .meldo-lp-ring {
    width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto;
    background: conic-gradient(#3D7C85 calc(var(--p,0) * 1%), #e6eded 0);
    display: flex; align-items: center; justify-content: center;
}
.meldo-learning-path-display .meldo-lp-ring i {
    width: 48px; height: 48px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Akko', sans-serif; font-weight: 700; font-size: 14px;
    color: #3D7C85; font-style: normal;
}
.meldo-learning-path-display .meldo-lp-progress-mid { flex: 1; min-width: 0; }
.meldo-learning-path-display .meldo-lp-progress-status {
    display: block; font-family: 'Akko', sans-serif; font-weight: 700;
    font-size: 15px; color: #111416;
}
.meldo-learning-path-display .meldo-lp-progress-sub {
    display: block; font-size: 13px; color: #7a8a8a; margin-top: 2px;
}
.meldo-learning-path-display .meldo-lp-cta {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #E8924F, #3D7C85) !important;
    color:#111416 !important; font-family: 'Akko', sans-serif; font-weight: 700;
    font-size: 14px; padding: 12px 20px; border-radius: 999px;
    text-decoration: none !important; box-shadow: 0 6px 16px rgba(61,124,133,.26);
    transition: transform .15s, box-shadow .15s;
}
.meldo-learning-path-display .meldo-lp-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(61,124,133,.32); color:#fff !important; }
.meldo-learning-path-display .meldo-lp-cta-ic { font-size: 11px; }

@media (max-width: 560px) {
    .meldo-learning-path-display .meldo-progress-section { flex-wrap: wrap; }
    .meldo-learning-path-display .meldo-lp-cta { width: 100%; justify-content: center; }
}

/* Lessons heading */
.meldo-learning-path-display .meldo-lessons-head {
    font-family: 'Akko', sans-serif !important; font-weight: 700 !important;
    font-size: 13px !important; letter-spacing: .03em; text-transform: uppercase;
    color: #566 !important; margin: 22px 0 12px !important;
}

/* Sektion als farbiger Gruppen-Header */
.meldo-learning-path-display .meldo-student-section {
    display: flex !important; align-items: center; gap: 10px;
    background: transparent !important; border: none !important;
    margin: 20px 0 10px !important; padding: 0 !important;
}
.meldo-learning-path-display .meldo-student-section-dot {
    width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; background: #3D7C85;
}
.meldo-learning-path-display .student-section-color-lime .meldo-student-section-dot { background:#E8924F; }
.meldo-learning-path-display .student-section-color-turquoise .meldo-student-section-dot { background:#3D7C85; }
.meldo-learning-path-display .student-section-color-blue .meldo-student-section-dot { background:#3498DB; }
.meldo-learning-path-display .student-section-color-purple .meldo-student-section-dot { background:#9B59B6; }
.meldo-learning-path-display .meldo-student-section-title {
    font-family: 'Akko', sans-serif !important; font-weight: 700 !important;
    font-size: 13px !important; letter-spacing: .03em; text-transform: uppercase;
    color: #566 !important;
}
.meldo-learning-path-display .meldo-student-section-line { flex: 1; height: 1px; background: #eef1f1; }

/* Lektionszeilen */
.meldo-learning-path-display .meldo-lesson-progress-item {
    display: flex !important; align-items: center; gap: 14px;
    padding: 13px 16px !important; border-radius: 13px !important;
    background: #fff !important; border: 1px solid #eef1f1 !important;
    margin-bottom: 8px !important; transition: all .15s ease;
}
.meldo-learning-path-display .meldo-lesson-progress-item:hover {
    border-color: #DCE3E3 !important; box-shadow: 0 5px 14px rgba(61,124,133,.08) !important;
    transform: translateY(-1px);
}
.meldo-learning-path-display .meldo-lesson-status-icon {
    width: 30px !important; height: 30px !important; border-radius: 50% !important; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Akko', sans-serif; font-weight: 700; font-size: 13px;
    background: #f0f3f3 !important; color: #7a8a8a !important;
}
.meldo-learning-path-display .meldo-lesson-progress-item.completed .meldo-lesson-status-icon { background:#E8924F !important; color:#111416 !important; }
.meldo-learning-path-display .meldo-lesson-progress-item.current .meldo-lesson-status-icon { background:#3D7C85 !important; color:#fff !important; font-size: 11px; }
.meldo-learning-path-display .meldo-lesson-progress-title {
    flex: 1; min-width: 0; font-family: 'Akko', sans-serif; font-weight: 700;
    font-size: 14.5px; color: #111416; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.meldo-learning-path-display .meldo-lesson-progress-item.completed .meldo-lesson-progress-title { color: #6a7676; }
.meldo-learning-path-display .meldo-lesson-now {
    font-family: 'Akko', sans-serif; font-weight: 700; font-size: 11px;
    color: #3D7C85; background:#F3F6F6; padding: 2px 8px; border-radius: 999px;
}
.meldo-learning-path-display .meldo-lesson-arrow { flex: 0 0 auto; color: #b8c4c4; font-size: 18px; }
.meldo-learning-path-display .meldo-lesson-progress-item.current {
    border-color: #3D7C85 !important;
    background: linear-gradient(120deg, #F5F8F8, #F3F6F6) !important;
    box-shadow: 0 6px 16px rgba(61,124,133,.12) !important;
}
.meldo-learning-path-display .meldo-lesson-progress-item.current .meldo-lesson-progress-title { color: #3D7C85; }
.meldo-learning-path-display .meldo-lesson-progress-item.current .meldo-lesson-arrow { color: #3D7C85; }

/* v1.12.29 – Mobile: Badges auf eine Zeile, kompakter */
@media (max-width: 600px) {
    .meldo-learning-path-display .meldo-path-card { padding: 18px 16px !important; }
    .meldo-learning-path-display .meldo-path-title-wrapper h3 { font-size: 18px; }
    .meldo-learning-path-display .meldo-path-meta { flex-direction: row !important; flex-wrap: nowrap !important; gap: 6px !important; }
    .meldo-learning-path-display .meldo-path-meta span {
        font-size: 11px; padding: 4px 10px; white-space: nowrap;
    }
    .meldo-learning-path-display .meldo-path-meta .meldo-meta-icon { display: none !important; }
    .meldo-learning-path-display .meldo-progress-section { gap: 14px; padding: 14px; }
    .meldo-learning-path-display .meldo-lp-ring { width: 54px; height: 54px; }
    .meldo-learning-path-display .meldo-lp-ring i { width: 42px; height: 42px; font-size: 13px; }
    .meldo-learning-path-display .meldo-lp-progress-status { font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════
   STERN AM TITEL — kein Umbruch allein

   Der Stern wird zusammen mit dem letzten Wort in diese Klammer
   gelegt. Dadurch wandert er beim Zeilenumbruch mit dem Wort mit,
   statt als einzelnes Zeichen auf einer neuen Zeile zu landen.
   Siehe bindStarToLastWord() in meldo-learning-paths.js.
   ════════════════════════════════════════════════════════════ */
.meldo-fav-bind {
    white-space: nowrap;
}

/* Der Stern ist 32px breit und hoch. Ohne feste Masse bestimmt er beim
   Erscheinen die Zeilenhoehe neu — der Titel wuerde dann noch einmal
   springen, auch wenn er nicht umbricht. */
.meldo-favorite-star {
    width: 32px;
    height: 32px;
    line-height: 1;
}

/* ════════════════════════════════════════════════════════════
   STERN AM LEKTIONSTITEL — fester Platz statt Fliesstext

   Der Stern kommt per Skript und damit nach dem ersten Bild. Im
   Fliesstext nimmt er am Zeilenumbruch teil: Auf dem Handy bricht ein
   langer Titel zuerst ohne ihn um und beim Eintreffen ein zweites Mal —
   alles darunter rutscht.

   Darum zaehlt er nicht mehr mit. Der Platz rechts im Titel ist ab dem
   ersten Bild reserviert (diese Datei laedt im Kopfbereich), der Stern
   sitzt absolut darin. Der Umbruch wird einmal berechnet und bleibt.

   Bewusst ueber die body-Klasse und nicht ueber eine Klasse, die das
   Skript setzt: Die kaeme wieder zu spaet.
   ════════════════════════════════════════════════════════════ */
body.single-sfwd-lessons .entry-title,
body.single-sfwd-lessons h1.learndash-page-title,
body.single-sfwd-lessons .ld-lesson-title,
body.single-sfwd-topic .entry-title,
body.single-sfwd-topic h1.learndash-page-title,
body.single-sfwd-topic .ld-lesson-title,
.meldo-fav-slot {
    position: relative;
    padding-right: 42px;
}

body.single-sfwd-lessons .entry-title > .meldo-favorite-star,
body.single-sfwd-lessons h1.learndash-page-title > .meldo-favorite-star,
body.single-sfwd-lessons .ld-lesson-title > .meldo-favorite-star,
body.single-sfwd-topic .entry-title > .meldo-favorite-star,
body.single-sfwd-topic h1.learndash-page-title > .meldo-favorite-star,
body.single-sfwd-topic .ld-lesson-title > .meldo-favorite-star,
.meldo-fav-slot > .meldo-favorite-star {
    position: absolute;
    top: 0;
    /* Links vom Notizzeichen. Dessen Breite misst notizknopf.js und legt
       sie als --mwl-notiz-breite an der Titelzeile ab; Eigenschaften
       vererben sich, das h1 kennt den Wert also. Gibt es kein
       Notizzeichen, faellt der Wert auf 0 und der Stern sitzt aussen. */
    right: var(--mwl-notiz-breite, 0px);
    margin-left: 0;
}

/* ── Zwei Zeichen, zwei Plaetze ─────────────────────────────────────
   Das Workbook-Plugin haelt rechts Platz fuer das Notizzeichen frei —
   mit !important, was meine Reservierung oben ueberschrieb. Beide
   zusammen brauchen die Summe. Hoehere Spezifitaet gewinnt bei
   gleichem !important, darum die body-Klasse davor.

   Reserviert wird immer, auch bevor der Stern da ist: Wuerde der Platz
   erst mit ihm entstehen, waere der Umbruch wieder zweimal faellig —
   genau das, was diese Datei verhindern soll. */
body.single-sfwd-lessons .mwl-titel-mit-notiz h1,
body.single-sfwd-topic .mwl-titel-mit-notiz h1 {
    padding-right: calc(var(--mwl-notiz-breite, 60px) + 42px) !important;
}

/* ── Der Titel auf dem Handy ────────────────────────────────────────
   Zwei Zeichen kosten rund 100 Pixel, und die fehlen dem Titel genau
   dort, wo am wenigsten Platz ist. Eine kleinere Schrift bringt die
   meisten Titel auf eine Zeile zurueck.

   Ehrlich dazu: Das schafft keine Garantie. Ein Titel, der auch klein
   nicht passt, bricht weiterhin um — die Alternative waere Abschneiden,
   und ein halber Lektionstitel ist schlechter als zwei Zeilen. */
@media (max-width: 640px) {
    body.single-sfwd-lessons .entry-title,
    body.single-sfwd-lessons h1.learndash-page-title,
    body.single-sfwd-lessons .ld-lesson-title,
    body.single-sfwd-topic .entry-title,
    body.single-sfwd-topic h1.learndash-page-title,
    body.single-sfwd-topic .ld-lesson-title {
        font-size: clamp(18px, 5.4vw, 26px);
        line-height: 1.25;
        /* Bindestrich-Woerter duerfen trennen, statt eine halbe Zeile
           leer zu lassen. */
        overflow-wrap: break-word;
    }
    
    body.single-sfwd-lessons .entry-title,
    body.single-sfwd-lessons h1.learndash-page-title,
    body.single-sfwd-lessons .ld-lesson-title,
    body.single-sfwd-topic .entry-title,
    body.single-sfwd-topic h1.learndash-page-title,
    body.single-sfwd-topic .ld-lesson-title,
    .meldo-fav-slot {
        padding-right: 38px;
    }
    
    body.single-sfwd-lessons .mwl-titel-mit-notiz h1,
    body.single-sfwd-topic .mwl-titel-mit-notiz h1 {
        padding-right: calc(var(--mwl-notiz-breite, 52px) + 38px) !important;
    }
    
    /* Kleinere Zeichen, damit sie zur kleineren Schrift passen und
       weniger Breite kosten. */
    body.single-sfwd-lessons .meldo-favorite-star,
    body.single-sfwd-topic .meldo-favorite-star {
        width: 28px;
        height: 28px;
    }
}