/* styles.css – harmonisches Grün-Gold Farbschema */

:root {
    /* Farbpalette */
    --bg-body: #F1F3E0;       /* Heller Hintergrund */
    --bg-sidebar: #D2DCB6;    /* Pastellgrün Sidebar */
    --bg-card: #FFFFFF;       /* Weiß für Karten */
    
    --primary: #A1BC98;       /* Hauptgrün (Buttons, Header) */
    --primary-dark: #778873;  /* Dunkleres Grün (Hover, Titel) */
    --text-main: #3B3F2E;     /* Dunkles Grün/Schwarz für Text */
    --text-light: #666666;    /* Grau für Metadaten */
    
    --accent: #FFD166;        /* Gold (Highlights, Warnungen) */
    --accent-dark: #E6C153;   /* Dunkleres Gold */
    
    --border-color: #C7D1A8;  /* Sanfte Linien */
    
    /* Status Farben */
    --status-red: #7a0000;
    --status-green: #2e7d32;
    
    /* Period Tracker */
    --period-flow: #7a0000;
    --period-predicted: #b55;
    --period-ovulation: #7ec8e3;
    --period-luteal: #f2d36b;
}

/* =========================================
   RESET & BASIS
   ========================================= */
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    display: flex;
    background-color: var(--bg-body);
    color: var(--text-main);
    min-height: 100vh;
    line-height: 1.5;
}

a {
    color: #4a7c59;
    text-decoration: none;
    transition: color 0.2s;
}
a:hover { text-decoration: underline; }
a:visited, a:active { color: #4a7c59; }

/* =========================================
   LAYOUT (Sidebar & Main)
   ========================================= */
.sidebar {
    width: 200px;
    background-color: var(--bg-sidebar);
    padding: 20px;
    height: 100vh;
    overflow-y: auto;
    /* Scrollbalken verstecken, aber Funktion behalten */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}

.sidebar::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.sidebar a {
    display: block;
    padding: 10px;
    margin-bottom: 10px;
    color: var(--text-main);
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.sidebar a:hover {
    background-color: var(--primary);
    color: #FFF; 
    text-decoration: none;
}

/* --- Sidebar Accordion (Gruppen) --- */
.sidebar details {
    margin-bottom: 5px;
}

.sidebar summary {
    padding: 10px;
    cursor: pointer;
    color: var(--text-main);
    font-weight: bold;
    border-radius: 4px;
    list-style: none; /* Standard Marker verstecken */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar summary::-webkit-details-marker { display: none; } /* Chrome/Safari Fix */

.sidebar summary:hover {
    background-color: rgba(255,255,255,0.2);
}

.sidebar summary::after {
    content: '›';
    font-size: 1.2em;
    transition: transform 0.2s;
}

.sidebar details[open] summary::after {
    transform: rotate(90deg);
}

.sidebar details a {
    margin-left: 12px;
    padding: 6px 10px;
    font-size: 0.95em;
    border-left: 2px solid rgba(0,0,0,0.1);
    border-radius: 0 4px 4px 0;
    margin-bottom: 4px;
}

.main {
    flex: 1;
    padding: 20px;
    padding-bottom: 80px; /* Platz für Mobile Bottom Bar */
    overflow-x: hidden;
    width: 100%;
}

/* --- Journal Sidebar (Rechts) --- */
.journal-sidebar {
    width: 20%;
    height: 100%;
    border-left: 1px solid var(--border-color);
    padding: 0.5em;
    overflow-y: auto;
    overflow-x: hidden; /* Horizontalen Scrollbalken verhindern */
    
    /* Scrollbalken optisch verstecken */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.journal-sidebar::-webkit-scrollbar {
    display: none;
}

/* =========================================
   KOMPONENTEN (Buttons, Inputs, Cards)
   ========================================= */

/* --- Buttons --- */
.button, .btn-back, button[type="submit"] {
    display: inline-block;
    padding: 8px 16px;
    margin: 4px 2px;
    text-decoration: none;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.button:hover, .btn-back:hover, button[type="submit"]:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    text-decoration: none;
}

.button.cancel {
    background-color: var(--accent);
    color: var(--text-main);
}
.button.cancel:hover { background-color: var(--accent-dark); }

/* --- Inputs & Forms --- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 1rem;
    font-family: inherit;
    background-color: #fff;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-main);
}

/* --- Tabellen (Generisch) --- */
.recipes-table, .todo-table, .calendar-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
    background: #fff;
    border-radius: 8px;
    overflow: hidden; /* Für runde Ecken */
}

.recipes-table th, .recipes-table td,
.todo-table th, .todo-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.recipes-table th, .todo-table th {
    background-color: var(--primary);
    color: var(--accent); /* Goldene Schrift im Header */
}

.recipes-table tr:nth-child(odd), .todo-table tr:nth-child(odd) {
    background-color: var(--bg-body);
}

.recipes-table td form button {
    transition: transform 0.1s;
}
.recipes-table td form button:active { transform: scale(0.9); }

/* Kalender: Aktueller Tag hervorheben */
.calendar-table td.today .day-number {
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    font-size: 1.2em;
}

/* --- Cards (Generisch) --- */
.card, .mobile-card, .mobile-card-container, .note-card, .entry-box, .tag-tile, .desktop-notes-box {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* =========================================
   MODULE & SPEZIALSEITEN
   ========================================= */

/* --- Dashboard Buttons (Kacheln) --- */
.dashboard-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.dashboard-buttons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 100px;
    background-color: var(--primary);
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    border-radius: 8px;
    transition: background-color 0.2s;
}
.dashboard-buttons a:hover { background-color: var(--primary-dark); }

/* --- Rezepte --- */
.recipes-table td.alcohol-yes { background-color: var(--accent); }

.type-label {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    color: white;
    font-size: 0.85em;
    text-transform: capitalize;
    font-weight: bold;
}
.type-hauptgericht { background-color: var(--primary); }
.type-suppe       { background-color: var(--bg-sidebar); color: var(--text-main); }
.type-kuchen      { background-color: var(--accent); color: var(--text-main); }
.type-dessert     { background-color: var(--accent); color: var(--text-main); }
.type-cocktail    { background-color: var(--primary-dark); }

.recipe-form {
    max-width: 600px;
    background-color: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.recipe-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background-color: var(--bg-body);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.recipe-title {
    font-size: 2.2em;
    margin-bottom: 10px;
    color: var(--primary-dark);
}

.recipe-meta {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.difficulty-label,
.duration-label {
    background-color: var(--bg-sidebar);
    color: #333;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.9em;
}

.recipe-properties {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.property-label {
    background-color: var(--primary);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85em;
}

/* --- ToDos --- */
.todo-detail {
    max-width: 700px;
    margin: 2em auto;
}

.todo-title {
    width: 100%;
    font-size: 1.8em;
    border: none;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5em;
    background: transparent;
}

.todo-description {
    min-height: 120px;
    border: 1px solid var(--border-color);
    padding: 0.5em;
}

.todo-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1em;
    margin: 1em 0;
}

.todo-saved {
    background: #e7f7e7;
    padding: 0.5em;
    margin-bottom: 1em;
    border-left: 4px solid var(--status-green);
}

.todo-prio {
    width: 0.8em;
    text-align: center;
    margin-right: 0.4em;
    font-size: 0.9em;
}

.todo-prio.prio-1::before { content: '◦'; opacity: 0.4; }
.todo-prio.prio-2::before { content: '●'; opacity: 0.7; }
.todo-prio.prio-3::before { content: '❗'; }

.todo-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.todo-list-title {
    font-size: 1em;      /* kompakt */
    font-weight: 500;
    text-decoration: none;
    color: var(--text-main);
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 0.6em; /* größerer Zeilenabstand */
}

/* --- Logout Link --- */
.logout-link {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem; /* kleinerer Text */
}

.logout-link a {
    color: #000;       /* schwarz */
    text-decoration: none;
}

.logout-link a:hover { text-decoration: underline; }

/* --- Period Tracker --- */
.period-day {
    background: var(--period-flow);
    color: #fff;
}

.period-day-predicted {
    background: var(--period-predicted);
    color: #fff;
}
.period-ovulation {
    background: var(--period-ovulation);
    color: #00334d;
}

.period-luteal {
    background: var(--period-luteal);
    color: #5c4a00;
}

/* Macht die Tracker-Boxen kompakter */
.tracker-detail h4 {
    margin: 0 0 5px 0; /* Entfernt den großen Standard-Abstand der Überschrift */
    font-size: 1em;    /* Überschrift kleiner machen */
    display: inline-block; /* Überschrift neben den Inhalt? Optional. */
}

/* Zwingt Label und Input in eine Zeile */
.tracker-detail form label {
    display: flex !important; /* Überschreibt dein display:block */
    align-items: center;
    gap: 5px;
    margin-bottom: 2px !important;
}
/* Macht die Eingabefelder kleiner */
.tracker-detail input[type="number"], 
.tracker-detail select {
    padding: 2px;
    height: 25px; /* Feste, kleine Höhe */
}

/* Buttons kompakter machen */
.tracker-detail button {
    padding: 2px 5px;
    margin-top: 2px;
    width:auto /* Oder auto, wenn er neben das Input soll */
}

    /* --- Tags / Kacheln --- */
    .tags-grid {
        display: flex; 
        flex-wrap: wrap; 
        gap: 15px;
    }
    .tag-tile {
        /* Erbt jetzt von .card */
        flex: 1 1 150px;
        max-width: 250px;
        text-decoration: none;
        color: var(--text-main);
    }
    .tag-tile:hover {
        background-color: var(--bg-sidebar);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .tag-tile h3 {
        margin: 0 0 5px 0;
        color: var(--primary-dark);
        font-size: 1.1em;
    }
    .tag-meta {
        font-size: 0.85em;
        color: var(--text-light);
    }

    /* --- Journal Einträge --- */
    .entry-box { overflow: hidden; } /* Header fix */
    
    .entry-header {
        background-color: var(--bg-sidebar);
        padding: 10px 15px;
        color: var(--text-main);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border-color);
    }
    .entry-type-badge {
        background-color: #fff;
        color: var(--primary-dark);
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.8em;
        text-transform: uppercase;
        font-weight: bold;
    }
    .entry-content {
        padding: 15px;
        line-height: 1.6;
        color: var(--text-main);
    }
    .entry-footer {
        padding: 10px 15px;
        text-align: right;
        background-color: #fafafa;
        border-top: 1px solid #eee;
    }
    .entry-link {
        color: var(--primary-dark);
        text-decoration: none;
        font-size: 0.9em;
        font-weight: bold;
    }

    /* Highlighting für den Suchbegriff (Nutzt dein Gold!) */
    .highlight-tag {
        background-color: var(--accent);
        color: var(--text-main);
        padding: 0 4px;
        border-radius: 3px;
        font-weight: bold;
    }

/* =========================================
   MOBILE STYLES (App-Feeling)
   ========================================= */

.mobile-header, .mobile-bottom-nav, .mobile-view {
    display: none;
}

@media (max-width: 768px) {
    body {
        flex-direction: column; /* Untereinander statt nebeneinander */
    }

    /* Sidebar wird zum Overlay-Menü */
    .sidebar {
        position: fixed;
        left: -250px; /* Versteckt */
        top: 50px; /* Unter dem Header */
        bottom: 60px; /* Über der Bottom Bar */
        width: 250px;
        z-index: 1000;
        transition: left 0.3s ease;
        box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    }

    .sidebar.active {
        left: 0; /* Hereinrutschen */
    }

    /* Mobile Header oben */
    .mobile-header {
        display: flex;
        align-items: center;
        background-color: var(--primary);
        color: white;
        padding: 10px 15px;
        height: 50px;
        position: sticky;
        top: 0;
        z-index: 1001;
    }

    .hamburger-btn {
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        margin-right: 15px;
    }

    .mobile-title {
        font-size: 1.2em;
        font-weight: bold;
    }

    /* Bottom Navigation unten */
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        background-color: #fff;
        border-top: 1px solid #ccc;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 60px;
        z-index: 1001;
        padding-bottom: env(safe-area-inset-bottom); /* Für iPhone X+ */
    }

    .nav-item {
        flex: 1;
        text-align: center;
        padding: 8px 0;
        font-size: 0.75em;
        color: #555;
        text-decoration: none;
    }
    
    .nav-item:hover, .nav-item:active {
        background-color: #f0f0f0;
        color: var(--primary);
    }

    /* Anpassungen für Inhalte */
    .main {
        padding: 15px;
        padding-bottom: 80px; /* Platz für Bottom Bar */
        width: 100%;
    }

    .dashboard-buttons a {
        width: 100%; /* Buttons volle Breite */
        height: 60px;
    }

    /* Tabellen scrollbar machen */
    .recipes-table, .todo-table, .calendar-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Inputs größer für Finger */
    input, select, button, textarea {
        font-size: 16px !important; /* Verhindert Zoom auf iPhone */
        min-height: 44px;
    }

    /* --- DASHBOARD WEICHE --- */
    .desktop-view {
        display: none;
    }
    .mobile-view {
        display: block;
    }

    /* --- MOBILE DASHBOARD CARDS --- */
    .mobile-card {
        /* Erbt von .card */
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--text-main);
    }
    .mobile-card:active {
        transform: scale(0.98);
    }
    .card-icon {
        font-size: 2em;
        margin-right: 15px;
    }
    .card-content h3 {
        margin: 0 0 5px 0;
        font-size: 1.1em;
    }
    .card-content p {
        margin: 0;
        color: var(--text-light);
    }
    .card-arrow {
        margin-left: auto;
        font-size: 1.5em;
        color: #ccc;
    }

    .mobile-todo-item {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        color: #333;
        text-decoration: none;
    }
    .mobile-link-btn {
        display: block;
        text-align: center;
        margin-top: 10px;
        color: var(--primary);
        font-weight: bold;
        text-decoration: none;
    }

    /* Quick Notes */
    .quick-notes-list {
        margin-top: 15px;
    }
    .quick-note-item {
        border-bottom: 1px solid #eee;
        padding: 8px 0;
        font-size: 0.9em;
        color: #333;
    }
    .quick-note-date {
        font-size: 0.7em;
        color: #999;
        margin-top: 2px;
    }
}

/* =========================================
   DESKTOP INBOX (Quick Notes)
   ========================================= */
.desktop-notes-box {
    /* Erbt von .card */
    border: 1px solid var(--accent);
    border-left: 5px solid var(--accent);
}

.desktop-notes-box h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--text-main);
    font-size: 1.1em;
}

.notes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.note-card {
    /* Erbt von .card */
    background: var(--bg-body);
    padding: 10px;
    min-width: 200px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.note-text {
    font-size: 0.95em;
    margin-bottom: 10px;
    color: #333;
}

.note-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 5px;
}

.note-date {
    font-size: 0.75em;
    color: var(--text-light);
}

.note-delete-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: bold;
    cursor: pointer;
    font-size: 1.2em;
    padding: 0 5px;
    box-shadow: none;
}

.note-delete-btn:hover {
    color: var(--primary-dark);
    background: none;
    transform: scale(1.2);
    box-shadow: none;
}

/* =========================================
   DATEI MANAGER
   ========================================= */
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.file-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 0.85em;
}

.file-preview {
    height: 120px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #888;
}

.file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-info {
    padding: 8px;
}

.file-name {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    display: block;
}

/* =========================================
   PATTERN MODULE
   ========================================= */
.selection-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.selection-grid input[type="radio"],
.selection-grid input[type="checkbox"] {
    display: none; /* Versteckt die echte Checkbox */
}
.selection-grid label {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px; /* Pill-Shape */
    cursor: pointer;
    background: #fff;
    font-size: 0.9em;
    transition: all 0.2s;
    color: var(--text-main);
    margin-bottom: 0; /* Reset */
}
.selection-grid input:checked + label {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary-dark);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* =========================================
   TRACKER WIDGETS
   ========================================= */
.tracker-mood-selector {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.tracker-mood-option {
    cursor: pointer;
    font-size: 1.5em;
    opacity: 0.4;
    transition: opacity 0.2s, transform 0.2s;
    filter: grayscale(100%);
}
.tracker-mood-option:hover, .tracker-mood-option.selected {
    opacity: 1;
    transform: scale(1.2);
    filter: grayscale(0%);
}
.tracker-list-item {
    border-bottom: 1px solid #eee;
    padding: 5px 0;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =========================================
   TRACKER WIDGETS
   ========================================= */
.tracker-mood-selector {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.tracker-mood-option {
    cursor: pointer;
    font-size: 1.5em;
    opacity: 0.4;
    transition: opacity 0.2s, transform 0.2s;
    filter: grayscale(100%);
}
.tracker-mood-option:hover, .tracker-mood-option.selected {
    opacity: 1;
    transform: scale(1.2);
    filter: grayscale(0%);
}
.tracker-list-item {
    border-bottom: 1px solid #eee;
    padding: 5px 0;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =========================================
   FOCUS MODE
   ========================================= */
.focus-mode-body {
    background-color: #fcfcfc; /* Sehr cleanes Weiß/Grau */
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.focus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 10px;
}

.timeline-container {
    position: relative;
    padding-left: 20px;
    border-left: 2px solid #ddd;
}

.timeline-item {
    position: relative;
    margin-bottom: 25px;
    padding: 15px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* Punkt auf der Linie */
.timeline-item::before {
    content: '';
    position: absolute;
    left: -26px; /* Position auf der Linie */
    top: 20px;
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* Status: Aktiv (Jetzt) */
.timeline-item.active {
    border-left: 5px solid var(--primary);
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.timeline-item.active::before {
    background: var(--primary);
    width: 14px;
    height: 14px;
    left: -28px;
}

/* Block Header im Planer */
.block-card {
    /* Styles sind inline definiert für schnelle Anpassung, aber Klasse existiert */
}

/* Status: Verspätet */
.timeline-item.delayed {
    border-left: 5px solid var(--status-red);
    background-color: #fff5f5;
}
.timeline-item.delayed::before {
    background: var(--status-red);
}

/* Status: Erledigt */
.timeline-item.done {
    opacity: 0.6;
    background-color: #f9f9f9;
    text-decoration: line-through;
}
.timeline-item.done::before {
    background: var(--status-green);
}

.time-badge {
    font-weight: bold;
    color: var(--primary-dark);
    font-size: 0.9em;
    margin-bottom: 5px;
    display: block;
}

/* =========================================
   STATISTIK & CHARTS
   ========================================= */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Heatmap (Jahresübersicht) */
.heatmap-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.heatmap-day {
    width: 12px;
    height: 12px;
    background-color: #ebedf0;
    border-radius: 2px;
}
.heatmap-day[data-level="1"] { background-color: #c6e48b; }
.heatmap-day[data-level="2"] { background-color: #7bc96f; }
.heatmap-day[data-level="3"] { background-color: #239a3b; }
.heatmap-day[data-level="4"] { background-color: #196127; }

/* Balkendiagramm (Woche) */
.chart-container {
    display: flex;
    align-items: stretch; /* WICHTIG: Damit die Gruppen die volle Höhe von 200px nutzen */
    justify-content: space-between;
    height: 200px; /* Höher für bessere Sichtbarkeit */
    padding-top: 20px;
    border-bottom: 1px solid #ccc;
    /* Optional: Grid Lines für bessere Lesbarkeit */
    background-image: linear-gradient(#eee 1px, transparent 1px);
    background-size: 100% 20%; /* Linien alle 20% (bei Max=5 also bei 1, 2, 3, 4, 5) */
}
.chart-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Inhalt nach unten schieben */
    flex: 1;
}
.chart-bar {
    width: 60%;
    background-color: var(--primary);
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
    min-height: 1px; /* Damit 0 nicht unsichtbar ist */
}
.chart-label {
    margin-top: 5px;
    font-size: 0.8em;
    color: #666;
}
.chart-value {
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 2px;
}

/* Statistik Kalender (Monatsansicht) */
.stats-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-top: 10px;
}
.cal-head {
    text-align: center;
    font-size: 0.8em;
    color: #888;
    padding-bottom: 5px;
}
.cal-day {
    aspect-ratio: 1 / 1; /* Quadratisch */
    border: 1px solid #eee;
    border-radius: 4px;
    position: relative;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cal-day.level-1 { background-color: #c6e48b; border-color: #b0d670; }
.cal-day.level-2 { background-color: #7bc96f; border-color: #68b55c; }
.cal-day.level-3 { background-color: #239a3b; border-color: #1e8533; color: #fff; }

.day-num {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.7em;
    opacity: 0.6;
}
.day-count {
    font-weight: bold;
    font-size: 1.1em;
}

/* AI Prompt Specifics */
.ai-condition-badge {
    background: #ffe; color: #b55; padding: 2px 5px; 
    font-size: 0.85em; display: inline-block; border: 1px solid #eed;
}

/* --- STATS CALENDAR --- */
.stats-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.cal-head {
    text-align: center;
    font-weight: bold;
    color: var(--text-light);
    font-size: 0.9em;
    padding-bottom: 5px;
}
.cal-cell {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    min-height: 60px;
    position: relative;
    padding: 2px;
}
.cal-cell.empty { background: transparent; border: none; }

.cal-cell .day-num {
    font-size: 0.8em;
    color: #666;
    position: absolute;
    top: 2px;
    left: 4px;
}
.cal-cell .day-content {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
}
.period-heavy { background-color: #ffcccc; border-color: var(--period-flow); }
.period-medium { background-color: #ffe6e6; border-color: #e57373; }
.period-light { background-color: #fff0f0; border-color: #ffcdd2; }

/* --- STATS LIST TABLE (Custom ohne Auto-Striping) --- */
.stats-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}
.stats-list-table th, .stats-list-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
.stats-list-table th {
    background-color: var(--primary);
    color: var(--accent);
}

/* Stats Table Rows */
.row-day-a { background-color: #ffffff; }
.row-day-b { background-color: #f4f7f0; } /* Leichtes Grün-Grau passend zum Theme */
.row-period-active { background-color: #fff0f0 !important; border-left: 4px solid var(--period-flow); }

/* === MODERN RECIPE STYLES === */

/* Detail View */
.recipe-view-container {
    max-width: 1000px;
    margin: 0 auto;
}

.recipe-header-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    border-top: 6px solid var(--primary);
}

.recipe-title-large {
    font-size: 2.2rem;
    margin: 10px 0;
    color: var(--text-main);
    font-family: 'Georgia', serif; /* Optional für Rezept-Feeling */
}

.recipe-badges {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.recipe-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    background: #f4f4f4;
    color: #555;
}

.recipe-badge.highlight {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.recipe-content-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 25px;
    align-items: start;
}

@media (max-width: 800px) {
    .recipe-content-grid { grid-template-columns: 1fr; }
}

.recipe-sidebar-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    margin-bottom: 20px;
    border: 1px solid #eee;
}

.recipe-main-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #eee;
    line-height: 1.8;
    font-size: 1.05rem;
    color: #444;
}

.ingredient-list-modern {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ingredient-item-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}
.ingredient-item-modern:last-child { border-bottom: none; }

.ingredient-amount {
    font-weight: bold;
    color: var(--primary-dark);
    margin-right: 8px;
}

/* Edit View */
.edit-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.edit-section h3 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bg-body);
    color: var(--primary-dark);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.edit-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ingredient-row-edit {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    background: #fafafa;
    padding: 8px;
    border-radius: 6px;
}

.ingredient-row-edit select { flex: 2; margin: 0; }
.ingredient-row-edit input[type="text"] { flex: 1; margin: 0; }
.ingredient-row-edit button { margin: 0; padding: 5px 10px; }

.checkbox-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f9f9f9;
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 5px;
    margin-bottom: 5px;
}
.checkbox-pill:hover { background: #f0f0f0; }
.checkbox-pill input:checked + span { font-weight: bold; color: var(--primary-dark); }
}
}