/* Meals Module */
.meals-module { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---- Wochenplan ---- */
.meals-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); }
.meal-week-nav { display: flex; align-items: center; gap: var(--sp-3); }
.meal-week-nav button {
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); cursor: pointer;
    font-family: var(--font-sans); transition: all var(--dur-fast);
}
.meal-week-nav button:hover { border-color: var(--accent); color: var(--accent); }
#m-week-label { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }

.meal-plan-grid {
    display: grid; grid-template-columns: repeat(7,1fr);
    gap: var(--sp-2); overflow-x: auto;
}
.meal-day-col {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); min-width: 130px; overflow: hidden;
}
.meal-day-header {
    padding: var(--sp-2) var(--sp-3); text-align: center; font-size: var(--text-sm);
    font-weight: 600; color: var(--text-primary); background: var(--bg-surface);
    border-bottom: 1px solid var(--border); line-height: 1.4;
}
.meal-slot {
    padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); min-height: 56px;
}
.meal-slot:last-child { border-bottom: none; }
.meal-type-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }
.meal-entry {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1);
    font-size: var(--text-xs); color: var(--text-primary); padding: 4px 6px;
    background: var(--accent-muted); border-radius: var(--radius-sm); margin-top: 2px;
}
.meal-entry .btn-icon.delete {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    padding: 0 2px; font-size: 0.75rem; line-height: 1; flex-shrink: 0;
}
.meal-entry .btn-icon.delete:hover { color: var(--red); }
.btn-add-meal {
    font-size: var(--text-xs); color: var(--text-muted); background: none;
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
    padding: 3px 6px; cursor: pointer; width: 100%; margin-top: 4px;
    font-family: var(--font-sans); transition: all var(--dur-fast);
}
.btn-add-meal:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Rezept-Bereich Header ---- */
.recipes-top {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2);
}
.recipe-source-tabs {
    display: flex; gap: 0; background: var(--bg-input);
    border-radius: var(--radius-md); padding: 3px;
}
.source-tab {
    padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); font-weight: 500;
    color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm);
    cursor: pointer; font-family: var(--font-sans); transition: all var(--dur-fast);
}
.source-tab.active { background: var(--accent); color: white; }
.source-tab:hover:not(.active) { color: var(--text-secondary); }
.recipe-actions-right { display: flex; gap: var(--sp-2); }

/* ---- Filter-Chips ---- */
.recipe-filters {
    display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2);
}
.filter-chip {
    padding: 5px 14px; font-size: var(--text-sm); font-weight: 500;
    border: 2px solid var(--chip-color, var(--border)); border-radius: var(--radius-full);
    background: transparent; color: var(--text-secondary); cursor: pointer;
    font-family: var(--font-sans); transition: all var(--dur-fast);
}
.filter-chip:hover { background: color-mix(in srgb, var(--chip-color,#6C9CFF) 10%, transparent); color: var(--text-primary); }
.filter-chip.active {
    background: color-mix(in srgb, var(--chip-color,#6C9CFF) 15%, transparent);
    color: var(--chip-color, var(--accent)); border-color: var(--chip-color, var(--accent));
    font-weight: 700;
}

/* ---- Rezept-Suche ---- */
.recipe-search-bar {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    margin-bottom: var(--sp-4); transition: border-color var(--dur-fast);
}
.recipe-search-bar:focus-within { border-color: var(--accent); }
.recipe-search-bar svg { color: var(--text-muted); flex-shrink: 0; }
.recipe-search-bar input {
    flex: 1; background: none; border: none; outline: none;
    color: var(--text-primary); font-size: var(--text-base); font-family: var(--font-sans);
}

/* ---- Rezept-Karten ---- */
.recipes-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--sp-4);
}
.recipe-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; transition: all var(--dur-fast); cursor: pointer; position: relative;
    display: flex; flex-direction: column;
}
.recipe-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.recipe-card-body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.recipe-card-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.recipe-card-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recipe-card-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
.recipe-time, .recipe-cal, .recipe-servings {
    font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono);
    background: var(--bg-surface); padding: 2px 6px; border-radius: var(--radius-sm);
}
.recipe-cal { color: #f59e0b; }
.recipe-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--sp-1); }
.recipe-tag {
    font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: var(--radius-full);
}
.tag-vegetarisch { background: rgba(94,224,156,0.15); color: #16a34a; }
.tag-vegan       { background: rgba(52,211,153,0.15); color: #059669; }
.tag-kalorienarm { background: rgba(77,217,232,0.15); color: #0891b2; }
.tag-fleisch     { background: rgba(255,107,107,0.15); color: #dc2626; }
.tag-fisch       { background: rgba(245,158,11,0.15); color: #d97706; }
.tag-schnell     { background: rgba(255,179,71,0.15); color: #b45309; }
.recipe-card-cat {
    padding: 4px var(--sp-4); font-size: var(--text-xs); color: var(--text-muted);
    background: var(--bg-surface); border-top: 1px solid var(--border); letter-spacing: 0.03em;
}

/* ---- Rezept-Modal ---- */
.recipe-modal-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--text-sm); color: var(--text-muted); margin: var(--sp-2) 0; }
.recipe-modal-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.recipe-modal-desc { color: var(--text-secondary); font-size: var(--text-base); margin-bottom: var(--sp-4); }
.recipe-modal-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }

/* ---- Neues-Rezept-Formular ---- */
.form-row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); }
.tag-checkboxes { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.tag-check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; }
.tag-check input { accent-color: var(--accent); cursor: pointer; }

/* ---- Ingredients ---- */
.ingredients-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-4); }
.ingredients-list li { font-size: var(--text-sm); color: var(--text-primary); padding: var(--sp-1) 0; border-bottom: 1px solid var(--border); }
.ingredients-list li:last-child { border-bottom: none; }
.recipe-instructions { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7; white-space: pre-line; }

/* ---- Responsive ---- */
@media (max-width: 900px) { .meal-plan-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 600px) { .meal-plan-grid { grid-template-columns: repeat(2,1fr); } .form-row { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .meal-plan-grid { grid-template-columns: 1fr; } }


/* ---- Zutaten-Eingabe im Rezept-Formular ---- */
.ingredient-rows { display: flex; flex-direction: column; gap: var(--space-2, 8px); margin-bottom: var(--space-2, 8px); }
.ing-row { display: grid; grid-template-columns: 70px 90px 1fr auto; gap: var(--space-2, 8px); align-items: center; }
.ing-row .form-input { padding: 6px 8px; font-size: 0.9em; }
.ing-row-remove { background: transparent; border: 1px solid var(--border, #333); color: var(--text-muted, #888); padding: 4px 8px; border-radius: 4px; cursor: pointer; }
.ing-row-remove:hover { background: var(--danger, #dc3545); color: #fff; }
.form-hint { color: var(--text-muted, #888); font-size: 0.85em; display: block; margin-top: 4px; }
@media (max-width: 500px) { .ing-row { grid-template-columns: 60px 70px 1fr auto; } }