/* --- GLOBALE VARIABLEN (DARK MODE ONLY) --- */
:root {
    /* Dunkle Farbpalette */
    --bg-color: #121212;         /* Fast Schwarz */
    --card-bg: #1e1e1e;          /* Dunkelgrau für Karten */
    --primary-text: #e0e0e0;     /* Helles Grau für Text */
    --secondary-text: #a0a0a0;   /* Gedimmter Text */
    
    --accent-color: #3d3d3d;     /* Button Hintergrund */
    
    --red-status: #cf6679;       /* Pastell-Rot (angenehmer im Darkmode) */
    --green-status: #03dac6;     /* Teal/Grün für Erledigt */
    --green-text: #000000;       /* Textfarbe auf grünem Grund */
    
    --border-radius: 12px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--primary-text);
    line-height: 1.5;
    
    /* Standard: Mobile First */
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    width: 100%;
}

/* --- RESPONSIVE LAYOUT --- */

/* Ab 768px (Tablet/Desktop) wird alles breiter */
@media (min-width: 768px) {
    body {
        max-width: 1000px; /* Viel breiter auf dem PC */
    }
    
    /* Desktop: 4 Kacheln nebeneinander */
    .status-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* Desktop: Statistiken nebeneinander */
    .stats-container {
        flex-direction: row !important;
    }
}

/* --- HEADER --- */
.app-header {
    text-align: center;
    margin-bottom: 30px;
    padding-top: 10px;
}

.app-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--primary-text);
}

.date-display {
    color: var(--secondary-text);
    font-size: 1rem;
}

/* --- VIEW LOGIK --- */
.view { display: block; animation: fadeIn 0.3s ease-in-out; }
.hidden { display: none !important; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- BUTTONS --- */
button { cursor: pointer; border: none; font-family: inherit; }

.btn-primary {
    width: 100%;
    background-color: var(--accent-color);
    color: var(--primary-text);
    border: 1px solid #555;
    padding: 15px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-primary:hover { background-color: #505050; }
.btn-primary:active { transform: scale(0.98); }

.section-title {
    text-align: center;
    margin: 25px 0 15px;
    color: var(--secondary-text);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- STATUS GRID (Kacheln) --- */
.status-grid {
    display: grid;
    /* Mobile Standard: 2 Spalten (sieht meist besser aus als 1 lange Wurst) */
    /* Falls du strikt 1 untereinander willst auf Handy, ändere "1fr 1fr" zu "1fr" */
    grid-template-columns: 1fr 1fr; 
    gap: 15px;
    margin-bottom: 30px;
}

.status-card {
    padding: 20px;
    border-radius: var(--border-radius);
    background-color: var(--card-bg); /* Fallback */
    color: var(--primary-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    min-height: 140px;
    border: 1px solid #333;
    transition: transform 0.2s;
}

/* Neue Icon Klasse für Bilder */
.icon-img {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    /* Optional: Invertiert Farben bei schwarzen Icons, damit sie weiß werden */
    /* filter: invert(1); */ 
}

.status-card .label { font-size: 1rem; font-weight: 600; }
.status-card .state-text { font-size: 0.75rem; margin-top: 5px; text-transform: uppercase; font-weight: bold;}

/* Status Farben im Dark Mode */
.status-missing {
    background-color: #2c2c2c; /* Dunkler Hintergrund für "Offen" */
    border: 1px solid var(--red-status);
    color: var(--red-status);
}

.status-done {
    background-color: var(--green-status);
    color: var(--green-text); /* Schwarz auf Grün für Lesbarkeit */
    border: 1px solid var(--green-status);
}

/* --- STATS CONTAINER --- */
.stats-container {
    display: flex;
    /* Mobile Standard: Untereinander */
    flex-direction: column; 
    gap: 15px;
    margin-bottom: 30px;
}

.stat-card {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid #333;
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card h3 {
    font-size: 0.85rem;
    color: var(--secondary-text);
    margin-bottom: 8px;
    font-weight: normal;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-text);
}

/* --- KALENDER PLATZHALTER --- */
.calendar-wrapper {
    background: var(--card-bg);
    padding: 15px;
    border-radius: var(--border-radius);
    border: 1px solid #333;
    text-align: center;
    color: var(--secondary-text);
}

/* --- MODAL (Dark Mode) --- */
.modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: var(--card-bg);
    color: var(--primary-text);
    width: 90%;
    max-width: 400px;
    padding: 25px;
    border-radius: var(--border-radius);
    border: 1px solid #444;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-modal {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--secondary-text);
}

.form-group label { color: var(--secondary-text); }

input, select {
    width: 100%;
    padding: 12px;
    border: 1px solid #444;
    border-radius: 6px;
    font-size: 1rem;
    background: #2c2c2c;
    color: white;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--green-status);
}

.image-upload-area {
    border: 2px dashed #444;
    background: #252525;
    color: var(--secondary-text);
}

.btn-save {
    background-color: var(--green-status);
    color: var(--green-text);
    font-weight: bold;
    border: none;
    padding: 12px;
    width: 100%;
    border-radius: 8px;
    margin-top: 15px;
}

/* --- TAGESÜBERSICHT --- */

#view-daily {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Hier ist der garantierte Abstand zwischen den Blöcken */
}

/* WICHTIG: Die .hidden Klasse muss stärker sein als display: flex */
#view-daily.hidden {
    display: none !important;
}

#btn-back-dashboard {
    align-self: flex-start; /* Button linksbündig */
    background: none;
    color: var(--primary-text);
    text-decoration: underline;
    margin-bottom: 0; /* Margin brauchen wir nicht mehr dank gap */
    padding: 0;
}

#daily-view-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-text);
    margin: 0; /* Reset Browser Standards */
    text-align: center;
}

.daily-top-stats {
    display: flex;
    gap: 15px;
    /* margin-bottom entfernt, macht jetzt das Parent-Gap */
}

.table-section {
    background: var(--card-bg);
    padding: 15px;
    border-radius: var(--border-radius);
    border: 1px solid #333;
    /* margin-bottom entfernt, macht jetzt das Parent-Gap */
}

/* --- LOGIN VIEW --- */
.login-container {
    max-width: 400px;
    margin: 50px auto;
    text-align: center;
    background: var(--card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    border: 1px solid #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.login-container h2 {
    margin-bottom: 10px;
    color: var(--primary-text);
}

.login-container p {
    color: var(--secondary-text);
    margin-bottom: 20px;
}

.login-hint {
    font-size: 0.8rem;
    margin-top: 20px;
    color: #cf6679; /* Rötlicher Warn-Hinweis */
    border-top: 1px solid #333;
    padding-top: 10px;
}

/* Abstand für den Login-Button erzwingen */
#login-form .btn-primary {
    margin-top: 20px;
}

/* --- KALENDER STYLES --- */

.calendar-wrapper {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    border: 1px solid #333;
    padding: 15px;
    margin-top: 20px;
    overflow: hidden; /* Damit nichts rausragt */
}

/* Header (Monat wählen) */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.calendar-header h3 {
    margin: 0;
    color: var(--primary-text);
    font-size: 1.1rem;
}

.nav-btn {
    background: #333;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.nav-btn:hover { background: #555; }

/* Wochentage Leiste */
.weekdays-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    color: var(--secondary-text);
    margin-bottom: 10px;
    font-size: 0.8rem;
}

.weekdays-grid .sunday { color: var(--red-status); }

/* Das Haupt-Grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px; /* Abstand zwischen den Zellen */
}

/* Einzelne Tag-Zelle */
.day-cell {
    background-color: #252525;
    border-radius: 4px;
    min-height: 80px; /* Mindesthöhe damit Infos passen */
    padding: 4px;
    font-size: 0.7rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.2s;
}

.day-cell:hover {
    background-color: #333;
    border-color: #555;
}

/* Leere Zellen (Versatz am Monatsanfang) */
.day-cell.empty {
    background-color: transparent;
    cursor: default;
    border: none;
}

/* Datum Zahl */
.day-number {
    font-weight: bold;
    margin-bottom: 4px;
    color: var(--secondary-text);
    text-align: right;
}

/* Sonntag Styling (Zelle) */
.day-sunday {
    background-color: rgba(207, 102, 121, 0.1); /* Hauch von Rot */
    border: 1px solid rgba(207, 102, 121, 0.2);
}
.day-sunday .day-number { color: var(--red-status); }

/* Inhalt in der Zelle (Kcal, Workout...) */
.day-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-row {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ... wenn zu lang */
    color: #bbb;
}

.info-kcal { color: var(--green-status); font-weight: 600; }
.info-workout { color: #f1c40f; } /* Gelb für Sport */
.info-cardio { color: #3498db; } /* Blau für Cardio */

/* RESPONSIVE ANPASSUNG FÜR HANDY */
@media (max-width: 480px) {
    .day-cell {
        min-height: 60px; /* Etwas kleiner auf Handy */
        font-size: 0.6rem;
        padding: 2px;
    }
    
    /* Auf sehr kleinen Screens verstecken wir unwichtige Details */
    .info-weight { display: none; } 
    
    .calendar-grid {
        gap: 2px;
    }
}