/* ==========================================================================
   1. GRUNDLAGEN, VARIABLEN & GLOBALE STILE
   ========================================================================== */

/* --- 1. Globale Variablen --- */
:root {
    /* Layout und Typografie */
    --font-family-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --sidebar-width: 250px;
    
    /* Mobile Breakpoints & Responsive Variablen */
    --mobile-breakpoint: 768px;
    --small-mobile-breakpoint: 480px;
    --mobile-padding: 20px;
    --mobile-gap: 15px;
}

/* --- 2. Theme-Variablen (werden dynamisch durch Projekt gesetzt) --- */
/* Die HSL-Komponenten werden per JavaScript gesetzt: --primary-h, --primary-s, --primary-l */
body {
    /* Fallback-Werte für neutrales Theme (Welcome Screen) */
    --primary-h: 207;
    --primary-s: 70%;
    --primary-l: 55%;
    
    /* Zusammengesetzte Akzentfarben für den Standardzustand (Light Mode) */
    --chart-primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --btn-primary-bg: var(--chart-primary-color);
    --btn-primary-hover-bg: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 5%));
    
    /* Standard (Light Mode) Farben */
    --active-item-bg: #e0e0e0;
    --bg-color: #f4f7f9;
    --border-color: #e0e0e0;
    --card-bg: #ffffff;
    --chart-grid-color: #ecf0f1;
    --hover-item-bg: #ecf0f1;
    --sidebar-bg: #ffffff;
    --stat-box-bg: #f8f9fa;
    --text-color: #333;
    --text-color-light: #7f8c8d;

    /* Button Farben (Light Mode) */
    --btn-text-color: #ffffff;
    --btn-danger-bg: #e74c3c;
    --btn-danger-hover-bg: #c0392b;
    --btn-neutral-bg: #95a5a6;
    --btn-neutral-hover-bg: #7f8c8d;
    --btn-disabled-bg: #bdc3c7;
    --btn-disabled-text-color: #7f8c8d;
    --btn-icon-color: var(--text-color-light);
    --btn-icon-hover-color: var(--text-color);
    --btn-icon-solid-hover-bg: #bdc3c7;
}

/* --- 3. Dark Mode Überschreibungen --- */
body.dark-mode {
    /* Dark Mode Farben */
    --active-item-bg: #4a4a4a;
    --bg-color: #1a1a1a;
    --border-color: #444444;
    --card-bg: #2c2c2c;
    --chart-grid-color: #444444;
    --hover-item-bg: #3a3a3a;
    --sidebar-bg: #252525;
    --stat-box-bg: #333333;
    --text-color: #e0e0e0;
    --text-color-light: #8e8e8e;

    /* Überschreibe die Hover-Farbe für den Dark Mode */
    --btn-primary-hover-bg: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 7%));

    /* Andere Dark Mode Button-Farben */
    --btn-danger-bg: #c0392b;
    --btn-danger-hover-bg: #e74c3c;
    --btn-neutral-bg: #566573;
    --btn-neutral-hover-bg: #627282;
    --btn-disabled-bg: #424949;
    --btn-disabled-text-color: var(--text-color-light);
    --btn-icon-solid-hover-bg: #555555;
}

/* --- 5. Globale Stile anwenden --- */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family-main);
    margin: 0;
}

/* Für Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Für Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

input{
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-color);
    font-size: 1em;
    margin: 5px;
    padding: 10px;
}

/* ==========================================================================
   2. LAYOUT
   ========================================================================== */

.dashboard {
    display: flex;
    height: 100vh;
}

.main-content {
    color: var(--text-color-light);
    flex-grow: 1;
    overflow-y: auto;
    padding: 40px;
    position: relative; /* Positioning-Kontext für #welcome-view */
}

/* --- Willkommensansicht --- */
/* Wird weiter unten bei Onboarding definiert */


/* ==========================================================================
   3. SIDEBAR
   ========================================================================== */

.project-sidebar {
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 20px;
    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
    width: var(--sidebar-width); 
    flex-shrink: 0;
}

.sidebar-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.project-sidebar h2 {
    color: var(--text-color);
    margin-bottom: 0;
    margin-top: 0;
    overflow: hidden;
    white-space: nowrap;
}

.project-list-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: visible;
}

#project-list {
    list-style: none;
    margin: 0;
    overflow-y: auto;
    padding: 0;
}

#project-list li {
    align-items: center;
    border-radius: 8px;
    cursor: grab;
    display: flex;
    font-weight: 500;
    margin-bottom: 8px;
    padding: 8px 10px;
    transition: background-color 0.2s;
}

#project-list li:hover {
    background-color: var(--hover-item-bg);
}

#project-list li.active {
    background-color: var(--active-item-bg);
    color: var(--text-color);
}

#project-list li:grabbing {
    cursor: grabbing;
}

.project-icon-wrapper {
    align-items: center;
    border-radius: 50%;
    color: white;
    display: flex;
    flex-shrink: 0;
    font-size: 16px;
    height: 32px;
    justify-content: center;
    margin-right: 12px;
    transition: margin 0.3s ease-in-out;
    width: 32px;
}

.project-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Sidebar Footer & "Projekt erstellen" Button --- */
.sidebar-footer-actions {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 10px;
}

#add-project-list-item-li {
    margin-top: 8px;
    padding: 0;
}

.add-project-list-item {
    align-items: center;
    align-self: center;
    background-color: var(--chart-primary-color);
    border: none;
    border-radius: 99px;
    color: var(--btn-text-color);
    display: flex;
    flex-shrink: 0;
    font-size: 1em;
    font-weight: 500;
    margin-top: 8px;
    padding: 8px 10px;
    text-align: left;
    transition: background-color 0.2s, opacity 0.2s;
    width: 100%;
}

.add-project-list-item:hover {
    opacity: 0.9;
}

.add-project-list-item .project-icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
}

/* --- Veralteter "Projekt hinzufügen"-Button-Stil (falls noch benötigt) --- */
.add-project-btn {
    background-color: #3498db;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-size: 20px;
    margin-top: 10px;
    padding: 12px;
    transition: background-color 0.2s;
    width: 100%;
}

.add-project-btn:hover {
    background-color: #2980b9;
}


/* --- Sidebar Einklapp-Mechanismus --- */
.project-sidebar {
    /* Smooth transition for all sidebar changes */
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

/* Fix all direct children of sidebar: left-aligned, fixed width, no movement */
.sidebar-header,
.project-list-container,
.sidebar-footer-actions {
    width: 210px; /* Content width (250px - 2*20px padding) */
    margin-left: 20px; /* Left-aligned! Content stays fixed to the left */
    margin-right: auto; /* Push content to the left */
    flex-shrink: 0;
    transition: none; /* Never animate - content must stay fixed */
}

.sidebar-header h2 {
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.project-name {
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.project-icon-wrapper {
    transition: margin 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#project-list li {
    transition: padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                justify-content 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s;
}

.add-project-list-item {
    transition: border-radius 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                justify-content 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover effects for sidebar toggle button */
#toggle-sidebar-btn {
    position: relative;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#toggle-sidebar-btn:hover {
    transform: scale(1.1);
}

/* Hover states: SUBTLE preview - only right edge moves, content stays left */
.project-sidebar.sidebar-hover-preview-collapse {
    width: 235px; /* Subtle shrink: -15px from 250px */
}

.project-sidebar.sidebar-hover-preview-expand {
    width: 95px; /* Subtle grow: +15px from 80px */
}

body.sidebar-collapsed .project-sidebar {
    padding-left: 10px;
    padding-right: 10px;
    --sidebar-width: 80px;
}

/* In collapsed state: center everything */
body.sidebar-collapsed .sidebar-header,
body.sidebar-collapsed .project-list-container,
body.sidebar-collapsed .sidebar-footer-actions {
    width: 60px; /* Content width when collapsed (80px - 2*10px padding) */
    margin-left: 10px; /* Center by using auto margins on both sides */
    margin-right: auto;
}

body.sidebar-collapsed .sidebar-header {
    justify-content: center; /* Center the chevron within the 60px */
}

body.sidebar-collapsed .sidebar-header h2,
body.sidebar-collapsed .project-name {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    width: 0; /* Completely hide to prevent layout issues */
    overflow: hidden;
}

body.sidebar-collapsed #project-list li {
    justify-content: center;
    padding: 8px 0; /* Vertical padding only */
    margin-bottom: 8px;
}

body.sidebar-collapsed .project-icon-wrapper {
    margin-right: 0;
    transform: scale(1.1);
}

body.sidebar-collapsed .add-project-list-item {
    border-radius: 50%;
    height: 48px;
    width: 48px;
    justify-content: center;
    padding: 0;
    margin: 8px auto; /* Center the button */
    flex-shrink: 0;
}

body.sidebar-collapsed .add-project-list-item .project-name {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    width: 0;
    overflow: hidden;
}

body.sidebar-collapsed .add-project-list-item .project-icon-wrapper {
    margin-right: 0;
}

/* Ensure settings button is properly centered when collapsed */
body.sidebar-collapsed .sidebar-footer-actions .icon-button {
    margin: 0 auto;
}


/* ==========================================================================
   4. ONBOARDING
   ========================================================================== */

/* --- Onboarding & Welcome View (VERBESSERT) --- */
#welcome-view {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 80px); /* Volle Höhe minus Padding von main-content (2 * 40px) */
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

.welcome-container {
    width: 100%;
    max-width: 600px; /* Begrenzt Breite auf großen Screens */
    text-align: center;
    color: var(--text-color-light);
    min-height: min-content; /* Verhindert Überlauf */
    padding-bottom: 40px; /* Extra Platz am unteren Rand */
    
    /* Subtile Animation für den gesamten Block */
    animation: fadeInUp 0.6s ease-out forwards;
}

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

.welcome-illustration {
    max-width: 100%;
    height: auto;
    max-height: 220px; /* Etwas kleiner, um dem Text mehr Raum zu geben */
    margin-bottom: 2.5rem; /* Größerer Abstand für klarere Trennung */
}

.welcome-title {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.75rem; /* Angepasster Abstand */
}

.welcome-pitch {
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 2.5rem auto; /* Größerer Abstand nach unten */
}

.welcome-features {
    list-style: none;
    padding: 0;
    display: flex; /* Bleibt Flexbox... */
    flex-direction: column; /* ...aber jetzt als vertikale Spalte! */
    align-items: center; /* Links ausrichten für bessere Lesbarkeit */
    gap: 1rem; /* Konsistenter Abstand zwischen den Items */
    max-width: 300px; /* Begrenzt die Breite der Liste */
    margin: 0 auto 3rem auto; /* Zentriert den Block und schafft Abstand zum Button */
}

.welcome-features li {
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 12px; /* Etwas mehr Abstand zwischen Icon und Text */
    font-size: 1.05em; /* Leicht vergrößert für mehr Gewicht */
}

.welcome-features li i {
    color: var(--chart-primary-color);
    font-size: 1.1em;
    width: 20px; /* Gibt dem Icon einen festen Platz, damit der Text bündig ist */
    text-align: center;
}

.welcome-cta-btn {
    background-color: var(--chart-primary-color);
    color: var(--btn-text-color);
    border: none;
    border-radius: 8px;
    padding: 15px 30px;
    font-size: 1.2em;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    
    /* NEU: Subtiler Schatten für mehr "Pop" */
    box-shadow: 0 4px 15px rgba(var(--chart-primary-color-rgb, 52, 152, 219), 0.2);
}

.welcome-cta-btn:hover {
    background-color: var(--btn-primary-hover-bg);
    transform: translateY(-3px); /* Stärkerer Hover-Effekt */
    box-shadow: 0 6px 20px rgba(var(--chart-primary-color-rgb, 52, 152, 219), 0.3);
}

/* --- Responsive Anpassungen für Welcome View --- */
@media (max-height: 700px) {
    /* Reduziere Abstände bei kleinen Viewport-Höhen */
    .welcome-illustration {
        max-height: 150px;
        margin-bottom: 1.5rem;
    }
    
    .welcome-title {
        font-size: 2em;
        margin-bottom: 0.5rem;
    }
    
    .welcome-pitch {
        font-size: 1em;
        margin-bottom: 1.5rem;
    }
    
    .welcome-features {
        margin-bottom: 2rem;
        gap: 0.75rem;
    }
    
    .welcome-cta-btn {
        padding: 12px 24px;
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    /* Mobile: Kleinere Schriftgrößen und Abstände */
    #welcome-view {
        padding: 15px;
    }
    
    .welcome-container {
        padding-bottom: 30px;
    }
    
    .welcome-illustration {
        max-height: 120px;
        margin-bottom: 1.25rem;
    }
    
    .welcome-title {
        font-size: 1.75em;
    }
    
    .welcome-pitch {
        font-size: 0.95em;
        line-height: 1.5;
        max-width: 100%;
    }
    
    .welcome-features {
        max-width: 280px;
        gap: 0.65rem;
    }
    
    .welcome-features li {
        font-size: 0.95em;
    }
    
    .welcome-cta-btn {
        padding: 12px 20px;
        font-size: 1em;
        gap: 8px;
    }
}

@media (max-height: 600px) and (max-width: 480px) {
    /* Extra kleine Screens (z.B. iPhone SE): Maximale Kompression */
    .welcome-illustration {
        max-height: 100px;
        margin-bottom: 1rem;
    }
    
    .welcome-title {
        font-size: 1.5em;
    }
    
    .welcome-pitch {
        margin-bottom: 1rem;
    }
    
    .welcome-features {
        margin-bottom: 1.5rem;
    }
}

body.no-projects .sticky-footer-bar {
    display: none;
}

/* --- Onboarding & Guided Tour --- */
#onboarding-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1999; /* Liegt unter dem Tooltip und dem Highlight */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#onboarding-tooltip {
    position: absolute; /* Wird per JS positioniert */
    background-color: var(--card-bg);
    color: var(--text-color);
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 2000; /* Höchster z-index */
    max-width: 300px;
    display: none; /* Standardmäßig unsichtbar */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#onboarding-tooltip::after { /* Der kleine Pfeil */
    content: '';
    position: absolute;
    bottom: 100%; /* Pfeil zeigt nach oben */
    left: 30px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent var(--card-bg) transparent;
}

/* KORREKTUR: Neuer Stil für Pfeil nach unten */
#onboarding-tooltip.tooltip-arrow-down::after {
    bottom: auto; /* Deaktiviere die alte Position */
    top: 100%;   /* Positioniere am unteren Rand des Tooltips */
    border-color: var(--card-bg) transparent transparent transparent; /* Drehe die Pfeilrichtung um */
}


#onboarding-close-btn {
    position: absolute;
    top: 5px;
    right: 8px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-color-light);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

/* Stil für das hervorgehobene Element */
.onboarding-highlight {
    /* WICHTIG: Setzt das Element in einen neuen Stapelkontext */
    position: relative; 
    /* Hebt das Element über das Overlay */
    z-index: 2000; 
    
    box-shadow: 0 0 0 4px var(--chart-primary-color);
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

#sticky-footer-bar.onboarding-highlight {
    /* Da der Footer 'position: fixed' hat, brauchen wir 'position: relative' nicht zu überschreiben.
       Der z-index ist das Wichtigste. */
    z-index: 2000;
}

/* Spezifisch: Chart-Bereich während Onboarding-Hervorhebung lesbar halten */
.chart-container.onboarding-highlight {
    background-color: var(--card-bg);
    border-radius: 8px;
}

/* --- Empty State & Gamified Checklist --- */
.checklist-card {
    grid-column: 1 / -1; /* WICHTIG: Sorgt dafür, dass diese Karte die volle Breite einnimmt */
    padding: 25px 30px;
    text-align: left;
    background-color: var(--card-bg); /* Nutzt die normale Kartenfarbe */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Hinzugefügt für die Ausblend-Animation */
}

.checklist-card h4 {
    font-size: 1.4em;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 20px;
}

.checklist-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.checklist-card li {
    font-size: 1.1em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-color-light);
    transition: color 0.3s ease;
}

.checklist-card li.completed {
    color: var(--text-color);
    text-decoration-color: var(--chart-primary-color);
    text-decoration-thickness: 2px;
}

/* NEUE Regel: Wende die Textdekoration NUR auf das Span-Element an */
.checklist-card li.completed span {
    text-decoration: line-through;
    text-decoration-color: var(--chart-primary-color);
    text-decoration-thickness: 2px;
}

.checklist-card li.active {
    color: var(--text-color);
    font-weight: 600; /* Hebt die aktuelle Aufgabe hervor */
}

.checklist-card li i {
    font-size: 1.2em;
    width: 22px; /* Fester Platz für das Icon */
    text-align: center;
}

.checklist-card li .fa-check-circle {
    color: var(--chart-primary-color);
}

.checklist-card li .fa-circle { /* fa-dot-circle ist ein FontAwesome Pro Icon, fa-circle-dot ist free */
    color: var(--chart-primary-color);
    animation: pulse 2s infinite; /* Lässt die aktuelle Aufgabe pulsieren */
}

/* Animation für die aktive Aufgabe */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* --- Belohnungs-Animationen --- */

/* 1. Animation für die Checkliste (unverändert) */
/* 1. Animation für die Checkliste (unverändert) */
.checklist-card.is-disappearing {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.checklist-card li .fa-circle {
    transition: all 0.4s ease;
}

.checklist-card li.is-completing span {
    /* Wende den Durchstreich-Effekt an, wenn die Animation läuft */
    text-decoration: line-through;
    text-decoration-color: var(--chart-primary-color);
    text-decoration-thickness: 2px;
}

.checklist-card li.is-completing .fa-circle {
    /* Animiert den Übergang vom Kreis zum (noch unsichtbaren) Haken */
    transition: all 0.4s ease;
    transform: rotate(360deg) scale(0);
}



/* 2. Animation für das Erscheinen der Statistiken */
.stat-box.is-animating-in {
    /* Diese Klasse definiert jetzt die Einblende-Animation. */
    opacity: 0;
    transform: translateY(90px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* Kaskadierende Verzögerung für einen eleganten "Domino"-Effekt */
#stats-board.is-revealing .stat-box:nth-child(1) { transition-delay: 0s; }
#stats-board.is-revealing .stat-box:nth-child(2) { transition-delay: 0.08s; }
#stats-board.is-revealing .stat-box:nth-child(3) { transition-delay: 0.16s; }
#stats-board.is-revealing .stat-box:nth-child(4) { transition-delay: 0.24s; }
#stats-board.is-revealing .stat-box:nth-child(5) { transition-delay: 0.32s; }
#stats-board.is-revealing .stat-box:nth-child(6) { transition-delay: 0.4s; }
/* (Du kannst diese Kette bei Bedarf verlängern) */

/* Klasse für den Startpunkt der Animation.
   KEINE transition hier! */
.stat-box.anim-start {
    opacity: 0;
    transform: translateY(20px);
}

/* Klasse, die NUR die Transition definiert. */
.stat-box.anim-active {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Kaskadierende Verzögerung, die NUR auf die aktive Animation wirkt. */
.stat-box.anim-active:nth-child(1) { transition-delay: 0s; }
.stat-box.anim-active:nth-child(2) { transition-delay: 0.08s; }
.stat-box.anim-active:nth-child(3) { transition-delay: 0.16s; }
.stat-box.anim-active:nth-child(4) { transition-delay: 0.24s; }
.stat-box.anim-active:nth-child(5) { transition-delay: 0.32s; }
.stat-box.anim-active:nth-child(6) { transition-delay: 0.4s; }
/* ... */


/* Spezifischer Zustand für den "Empty State" (unverändert) */
.dashboard-hidden .stats-board > .stat-box {
    visibility: hidden;
}
.dashboard-hidden .chart-container {
    visibility: hidden;
}

/* Spezifischer Zustand für das AUSBLENDEN im Empty State */
/* NEUER, KORRIGIERTER ZUSTAND: */
.dashboard-hidden .chart-container,
.dashboard-hidden .stats-board > .stat-box { /* Spricht nur die direkten Kinder an, die eine .stat-box sind */
    display: none !important;
}
.dashboard-hidden #stats-header { /* Optional, falls du den Header hast */
    display: none !important;
}

/* NUR wenn der Container die Klasse .is-revealing hat,
   bereiten wir die Kacheln für die Animation vor. */
#stats-board.is-revealing .stat-box {
    /* Setze die Startposition der Animation */
    opacity: 0;
    transform: translateY(20px);
    
    /* WICHTIG: Die transition wird NUR in diesem Zustand definiert. */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Wenn die Kinder sichtbar werden sollen, bekommen sie .is-visible */
#stats-board.is-revealing .stat-box.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.stat-box.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Der Haupt-Container für die Karte */
/* --- Entry Form & Feedback (NEUE, ROBUSTE GRID-LÖSUNG) --- */

.entry-card-container {
    display: grid; /* Macht den Container zu einem Grid-Layout */
    /* Wir definieren keine explizite Höhe, sie passt sich dem Inhalt an */
}

.entry-form,
.entry-feedback-container {
    /* HIER IST DIE MAGIE: Lege beide Elemente in dieselbe Grid-Zelle (Zeile 1, Spalte 1) */
    grid-row: 1 / 1;
    grid-column: 1 / 1;
    
    /* Der Rest dient der Zentrierung und Transition */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* --- Steuerung der Sichtbarkeit --- */

/* Standardmäßig ist das Formular sichtbar und das Feedback versteckt */
.entry-form {
    opacity: 1;
    visibility: visible;
}

.entry-feedback-container {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Wenn die Feedback-Klasse aktiv ist, kehren wir die Sichtbarkeit um */
.entry-card-container.is-showing-feedback .entry-form {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.entry-card-container.is-showing-feedback .entry-feedback-container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* --- Stile für die Feedback-Animation (bleiben fast gleich) --- */

.feedback-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2ecc71;
    color: white;
    font-size: 2.5em;
    transform: scale(0);
    opacity: 0;
}

.feedback-text {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    transform: translateY(10px);
    opacity: 0;
}

/* Wenn das Feedback gezeigt wird, animiere Icon und Text */
.entry-card-container.is-showing-feedback .feedback-icon-wrapper {
    animation: pop-in 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.entry-card-container.is-showing-feedback .feedback-text {
    animation: fade-up 0.4s ease-out 0.2s forwards;
}

@keyframes pop-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fade-up {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* KORREKTUR: Finale Stile für den "Datum löschen"-Button mit Sichtbarkeits-Steuerung */
.clearable-input-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.clearable-input-container input {
    width: 100%;
    /* Das Padding-Right wird jetzt dynamisch per JS gesteuert,
       kann aber als Fallback hier bleiben. */
    padding-right: 10px; 
}

.clear-input-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    height: 34px;
    width: 34px;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0;
    transition: color 0.2s, background-color 0.2s, opacity 0.2s, visibility 0.2s;

    /* Standard: Button ist rot */
    color: var(--btn-danger-bg);

    /* Standard: Button ist UNSICHTBAR */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Nicht klickbar, wenn unsichtbar */
}

/* Zustand: Button wird SICHTBAR gemacht durch JS */
.clear-input-btn.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Klickbar machen */
}

.clear-input-btn:hover {
    background-color: rgba(231, 76, 60, 0.1);
}

/* ==========================================================================
   5. LANDING PAGE & EMPTY STATE
   ========================================================================== */

/* --- Landing Page (Non-Authenticated Users) --- */
#landing-page-view {
    width: 100%;
    min-height: 100vh;
    overflow-y: auto;
}

.landing-page {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Landing background illustration */
.landing-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: calc(var(--sidebar-width) + 41px); /* +40px main-content padding + 1px divider */
    right: 0;
    bottom: 0;
    z-index: 0;
    /* background-image wird per JavaScript dynamisch gesetzt */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.28; /* increased opacity for better visibility */
    pointer-events: none;
}

/* Slightly adjust opacity in dark mode for better contrast */
body.dark-mode .landing-page::before {
    opacity: 0.32;
}

/* Collapsed sidebar: reserve ~80px (collapsed width) */
body.sidebar-collapsed .landing-page::before {
    left: calc(80px + 20px);
}

/* Mobile: sidebar is off-canvas → use full width */
@media (max-width: 768px) {
    .landing-page::before {
        left: 0;
    }
}

/* (Removed) Demo Chart Background */

/* Landing Hero Section */
.landing-hero {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    box-sizing: border-box;
}

.landing-hero-content {
    max-width: 700px;
    text-align: center;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.40);
    padding: 60px 40px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

body.dark-mode .landing-hero-content {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.landing-title {
    font-size: 3em;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.landing-subtitle {
    font-size: 1.25em;
    color: var(--text-color-light);
    margin: 0 0 40px 0;
    line-height: 1.6;
}

/* CTA Button Group */
.cta-button-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.landing-cta-primary,
.landing-cta-secondary {
    padding: 16px 32px;
    font-size: 1.1em;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.landing-cta-primary {
    background: var(--chart-primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.landing-cta-primary:hover {
    background: var(--btn-primary-hover-bg);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.landing-cta-secondary {
    background: transparent;
    color: var(--text-color);
    border: 2px solid var(--border-color);
}

.landing-cta-secondary:hover {
    background: var(--hover-item-bg);
    transform: translateY(-2px);
}

/* Trust Badges */
.trust-badges {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color-light);
    font-size: 0.95em;
    font-weight: 500;
}

.trust-badge i {
    color: var(--chart-primary-color);
}

/* Features Section */
.landing-features-section {
    position: relative;
    z-index: 1;
    padding: 80px 40px;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.40);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    align-self: center;
}

body.dark-mode .landing-features-section {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.features-section-title {
    text-align: center;
    font-size: 2.5em;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 60px 0;
}

.landing-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1300px) {
    .landing-features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .landing-features-section {
            padding: 60px 20px;
        }
    
    .features-section-title {
        font-size: 1.8em;
        margin-bottom: 40px;
    }
    
    .landing-features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.feature-card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    cursor: default;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--chart-primary-color);
}

.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--chart-primary-color), var(--btn-primary-hover-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.feature-icon i {
    font-size: 1.8em;
    color: white;
}

.feature-title {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 12px 0;
}

.feature-description {
    font-size: 1em;
    color: var(--text-color-light);
    line-height: 1.6;
    margin: 0;
}

/* --- Empty State (Authenticated Users with No Projects) --- */
#empty-state-view {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 80px);
    width: 100%;
    padding: 0;
    margin: -40px;
    box-sizing: border-box;
    flex-direction: column;
}

.empty-state-content {
    width: calc(100% - 80px);
    max-width: 700px;
    margin: 40px;
    text-align: center;
    background: var(--card-bg);
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
}

.empty-state-header {
    margin-bottom: 40px;
}

.empty-state-title {
    font-size: 2em;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 10px 0;
}

.empty-state-subtitle {
    font-size: 1.2em;
    color: var(--text-color-light);
    margin: 0;
}

/* Quick Start Steps */
.quick-start-steps {
    margin: 40px 0;
    text-align: left;
}

.quick-start-title {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 25px 0;
    text-align: center;
}

.step-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-item {
    display: flex;
    gap: 20px;
    align-self: center;
    padding: 20px;
    background: var(--stat-box-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    max-width: 344px;
}

.step-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--chart-primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: 700;
}

.step-content h4 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 5px 0;
}

.step-content p {
    font-size: 0.95em;
    color: var(--text-color-light);
    margin: 0;
}

/* Empty State Features */
.empty-state-features {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 30px 0;
}

.empty-state-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color-light);
    font-size: 0.95em;
}

.empty-state-feature i {
    color: var(--chart-primary-color);
    font-size: 1.2em;
}

/* Empty State CTA */
.empty-state-cta {
    padding: 18px 36px;
    font-size: 1.2em;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    background: var(--chart-primary-color);
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 20px;
}

.empty-state-cta:hover {
    background: var(--btn-primary-hover-bg);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .landing-hero {
        min-height: auto;
        padding: 40px 20px;
    }
    
    .landing-hero-content {
        padding: 40px 25px;
    }
    
    .landing-title {
        font-size: 2em;
    }
    
    .landing-subtitle {
        font-size: 1.1em;
    }
    
    .cta-button-group {
        flex-direction: column;
        width: 100%;
    }
    
    .landing-cta-primary,
    .landing-cta-secondary {
        width: 100%;
        justify-content: center;
    }
    
    
    
    #empty-state-view {
        padding: 0;
        margin: -20px;
    }
    
    .empty-state-content {
        width: calc(100% - 40px);
        margin: 20px;
        padding: 40px 25px;
    }
    
    .empty-state-title {
        font-size: 1.6em;
    }
    
    .step-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .step-content {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .demo-chart-background {
        display: none; /* Hide chart on very small screens */
    }
    
    .landing-title {
        font-size: 1.75em;
    }
    
    .landing-subtitle {
        font-size: 1em;
    }
    
    .features-section-title {
        font-size: 1.5em;
    }
    
    .trust-badges {
        flex-direction: column;
        gap: 10px;
    }
    
    .empty-state-title {
        font-size: 1.4em;
    }
    
    .empty-state-subtitle {
        font-size: 1em;
    }
}

/* ==========================================================================
   Entry-form
   ========================================================================== */

/* --- Entry Form "Aktionszeile" (NEUE VERSION) --- */

.entry-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Abstand zwischen Quick-Add und Aktionszeile */
}

.entry-form-quick-add {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.quick-add-btn {
    background-color: var(--stat-box-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.quick-add-btn:hover {
    background-color: var(--hover-item-bg);
    transform: translateY(-2px);
}

/* Die neue Aktionszeile */
.entry-action-row {
    display: flex;
    width: 100%;
    align-items: stretch; /* Sorgt dafür, dass alle Elemente die gleiche Höhe haben */
    gap: 10px;
}

.date-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--stat-box-bg);
    border: 1px solid var(--border-color);
    padding: 0 12px;
    border-radius: 8px;
    cursor: pointer;
    position: relative; /* <-- DIESE ZEILE HINZUFÜGEN */
    white-space: nowrap; /* Verhindert Umbruch */
    color: var(--text-color-light);
    font-weight: 500;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s ease;
    height: 48px; /* Einheitliche Höhe */
    flex-shrink: 0; /* Verhindert Schrumpfen */
}

/* Custom DatePicker Wrapper - Hover-Effekt */
.custom-datepicker-wrapper .datepicker-display {
    transition: background-color 0.2s, transform 0.2s ease;
}
.date-display:hover,
.datepicker-display:hover,
.custom-datepicker-wrapper:hover .datepicker-display {
    background-color: var(--hover-item-bg);
    transform: scale(1.02); /* Subtiler Scale-Effekt wie beim Verwalten-Button */
}

.date-input-hidden {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}
.date-display i,
.date-display span {
    pointer-events: none; /* WICHTIG: Sorgt dafür, dass Klicks "durchfallen" zum dahinterliegenden Container */
}

/* Das zentrale Eingabefeld - Eingebettete Version */
.embedded-input-container .entry-input-main {
    flex-grow: 1; /* Nimmt den meisten Platz im Container ein */
    font-size: 1.1em;
    font-weight: 500;
    text-align: center; /* Text immer zentriert */
    border: none; /* Kein eigener Rand, da Container den Rand hat */
    border-radius: 0; /* Keine abgerundeten Ecken, da Container sie hat */
    padding: 12px 50px 12px 16px; /* Rechts mehr Platz für Button */
    background-color: transparent; /* Transparenter Hintergrund */
    color: var(--text-color);
    -moz-appearance: textfield;
    height: 100%;
    min-width: 0; /* Verhindert Overflow */
    overflow: visible; /* Placeholder-Text soll nicht abgeschnitten werden */
}

.embedded-input-container .entry-input-main::-webkit-outer-spin-button,
.embedded-input-container .entry-input-main::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.embedded-input-container .entry-input-main:focus {
    outline: none;
    background-color: transparent; /* Bleibt transparent auch beim Fokus */
}

/* Der eingebettete Absenden-Button */
.embedded-input-container .submit-entry-icon-btn {
    flex-shrink: 0; /* Verhindert, dass der Button schrumpft */
    width: 48px; /* Gleiche Höhe wie Container */
    height: 48px;
    font-size: 1.2em;
    border: none;
    border-radius: 0; /* Keine abgerundeten Ecken, da Container sie hat */
    background-color: var(--chart-primary-color);
    color: var(--btn-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin: 0; /* Entferne alle Margins */
    border-left: 1px solid rgba(255, 255, 255, 0.2); /* Subtiler Trenner */
    position: relative; /* Für bessere Positionierung */
    z-index: 1; /* Stellt sicher, dass Button über Input liegt */
}

.embedded-input-container .submit-entry-icon-btn:not(:disabled):hover {
    background-color: var(--btn-primary-hover-bg);
    transform: none; /* Keine Scale-Transformation im eingebetteten Zustand */
}

.embedded-input-container .submit-entry-icon-btn:disabled {
    background-color: var(--btn-disabled-bg);
    cursor: not-allowed;
    color: var(--btn-disabled-text-color);
}

/* Eingebetteter Button: Text verstecken, nur Icon anzeigen */
.embedded-input-container .submit-entry-icon-btn .btn-text {
    display: none;
}

/* Der neue Absenden-Button */
.submit-entry-icon-btn {
    flex-shrink: 0; /* Verhindert, dass der Button schrumpft */
    width: 50px; /* Quadratische Form */
    height: 50px;
    font-size: 1.4em;
    border: none;
    border-radius: 8px;
    background-color: var(--chart-primary-color);
    color: var(--btn-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.submit-entry-icon-btn:not(:disabled):hover {
    transform: scale(1.05);
}
.submit-entry-icon-btn:disabled {
    background-color: var(--btn-disabled-bg);
    cursor: not-allowed;
    color: var(--btn-disabled-text-color);
}

/* Zustände für das Senden- und Erfolgs-Icon */
.submit-entry-icon-btn .btn-icon-success { display: none; }
.submit-entry-icon-btn.is-success .btn-icon-send { display: none; }
.submit-entry-icon-btn.is-success .btn-icon-success { display: block; }
.submit-entry-icon-btn.is-success {
    background-color: #2ecc71;
    transform: scale(1.1); /* "Pop"-Effekt beim Erfolg */
}

/* Der neue Absenden-Button (Mobile-First-Ansatz) */
.submit-entry-icon-btn {
    flex-shrink: 0;
    width: 50px; /* Standard: Quadratische Icon-Form für Mobile */
    height: 50px;
    font-size: 1.4em;
    padding: 0; /* Kein Padding, da feste Größe */
    border: none;
    border-radius: 8px;
    background-color: var(--chart-primary-color);
    color: var(--btn-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Abstand zwischen Text und Icon (für Desktop) */
    transition: all 0.2s ease;
    overflow: hidden; /* Verhindert, dass Text kurz aufblitzt */
}

/* Standardmäßig den Text verstecken */
.submit-entry-icon-btn .btn-text {
    display: none;
}

.submit-entry-icon-btn:not(:disabled):hover {
    transform: scale(1.05);
}
.submit-entry-icon-btn:disabled {
    background-color: var(--btn-disabled-bg);
    cursor: not-allowed;
    color: var(--btn-disabled-text-color);
}

/* Zustände für das Senden- und Erfolgs-Icon */
.submit-entry-icon-btn .btn-icon-success { display: none; }

.submit-entry-icon-btn.is-success .btn-text,
.submit-entry-icon-btn.is-success .btn-icon-send {
    display: none;
}

.submit-entry-icon-btn.is-success .btn-icon-success {
    display: block;
}

.submit-entry-icon-btn.is-success {
    background-color: #2ecc71;
    transform: scale(1.1);
}


/* --- DESKTOP-ERWEITERUNG MIT MEDIA QUERY --- */
/* Gilt für Bildschirme, die 768px oder breiter sind */
@media (min-width: 768px) {
    .submit-entry-icon-btn {
        width: auto; /* Breite passt sich wieder dem Inhalt an */
        padding: 0 20px; /* Padding links und rechts hinzufügen */
        font-size: 1.1em; /* Schriftgröße leicht anpassen */
    }

    /* Auf dem Desktop den Text anzeigen */
    .submit-entry-icon-btn .btn-text {
        display: inline;
        font-weight: 600;
    }
    
    /* Optional: Icon auf dem Desktop leicht verkleinern */
    .submit-entry-icon-btn .btn-icon-send i {
        font-size: 0.9em;
    }
}

/* ==========================================================================
   Maincontent und Footer
   ========================================================================== */


/* Sorge dafür, dass der scrollbare Inhalt unten Platz lässt */
#main-content {
    position: relative; /* Wichtig für die Positionierung des Footers */
    padding-bottom: 150px; /* Platz für den Footer, Höhe anpassen! */
}

/* Die neue Floating Footer Bar - Mobile Default */
.sticky-footer-bar {
    position: fixed; /* Klebt am Viewport - auch positioned für absolute children */
    bottom: 20px; /* Schwebt 20px über dem Bildschirmrand */
    left: 15px; /* Mobile: 15px Abstand links */
    right: 15px; /* Mobile: 15px Abstand rechts */
    
    /* Floating Design mit Backdrop Blur */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent für Light Mode */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); /* Safari Support */
    
    /* Pill-Shape Design */
    border-radius: 25px;
    padding: 0px 20px; /* Reduzierte Höhe */
    
    /* Größerer, weicherer Schatten */
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtiler Rand */
    
    display: flex;
    justify-content: center; /* Zentriert den Inhalt der Leiste */
    
    transition: left 0.3s ease-in-out, transform 0.4s ease-out, width 0.3s ease-in-out; /* Animiert Position, Slide-up und Breite */
    z-index: 500;
    
    /* Slide-up Animation Startzustand */
    transform: translateY(100%);
    opacity: 0;
}

/* Desktop: Responsive Footer-Breiten-Logik (≥768px) */
@media (min-width: 768px) {
    .sticky-footer-bar {
        /* Verfügbarer Platz rechts der Sidebar */
        --available-width: calc(100vw - var(--sidebar-width));
        
        /* Footer-Breite: Maximum 800px, aber mindestens 20px Abstand */
        width: min(800px, calc(var(--available-width) - 100px));
        
        /* Positionierung: Mittig im verfügbaren Bereich */
        left: calc(var(--sidebar-width) + (var(--available-width) - min(800px, calc(var(--available-width) - 100px))) / 2);
        
        /* Entferne right, da width die Breite bestimmt */
        right: auto;
        margin: 0;
        
        /* Zentriere den Footer-Inhalt */
        display: flex;
        justify-content: center;
    }
}

/* Dark Mode Anpassungen für Floating Footer */
body.dark-mode .sticky-footer-bar {
    background-color: rgba(44, 44, 44, 0.8); /* Semi-transparent für Dark Mode */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer ist sichtbar und animiert */
.sticky-footer-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Desktop: Anpassung, wenn die Sidebar eingeklappt ist */
@media (min-width: 768px) {
    body.sidebar-collapsed .sticky-footer-bar {
        /* Verfügbarer Platz rechts der eingeklappten Sidebar */
        --available-width: calc(100vw - 100px);
        
        /* Footer-Breite: Maximum 800px, aber mindestens 20px Abstand */
        width: min(800px, calc(var(--available-width) - 80px));
        
        /* Positionierung: Mittig im verfügbaren Bereich */
        left: calc(100px + (var(--available-width) - min(800px, calc(var(--available-width) - 40px))) / 2);
    }
}

/* Das Formular in der Leiste */
.sticky-footer-bar .entry-action-row {
    width: 100%;
    max-width: 700px; /* Begrenzt die Breite auf Desktops für eine bessere Optik */
    display: flex;
    gap: 12px;
    align-items: center; /* Zentriert alle Elemente horizontal */
    height: 48px; /* Einheitliche Höhe für alle Elemente */
    min-width: 0; /* Verhindert Overflow bei kleinen Screens */
}

/* Eingebetteter Input-Container */
.embedded-input-container {
    display: flex;
    flex-grow: 1;
    background-color: var(--stat-box-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px; /* Pill-Shape */
    overflow: hidden; /* Verhindert, dass der Button über den Rand hinausragt */
    height: 48px;
    align-items: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.embedded-input-container:focus-within {
    border-color: var(--chart-primary-color);
    box-shadow: 0 0 0 3px rgba(var(--chart-primary-color), 0.1);
}

/* --- Styling für den Button auf der linken Seite --- */

#manage-entries-footer-btn {
    /* Grundform aus .icon-button nutzen und verfeinern */
    padding: 0;
    width: 48px;
    height: 48px;
    border-radius: 24px; /* Pill-Shape für Konsistenz */
    
    /* Visuelles Styling: Dezent & funktional */
    background: var(--stat-box-bg); /* Hintergrund für bessere Sichtbarkeit */
    border: 1px solid var(--border-color);
    color: var(--text-color-light); /* Subtile, sekundäre Farbe */
    flex-shrink: 0; /* Verhindert, dass der Button schrumpft */
    align-self: center;
    /* Sanfte Übergänge für alle Zustandsänderungen */
    transition: background-color 0.2s, color 0.2s, transform 0.2s, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#manage-entries-footer-btn:hover,
#manage-entries-footer-btn:focus-visible {
    /* Feedback bei Interaktion: Wird deutlicher und lebendiger */
    background-color: var(--hover-item-bg); /* Konsistenter Hover-Effekt */
    color: var(--text-color); /* Farbe wird zur primären Textfarbe */
    transform: scale(1.1); /* Kleiner "Pop"-Effekt */
    outline: none; /* Entfernt den Standard-Fokus-Rahmen */
}


/* --- Der unsichtbare Platzhalter auf der rechten Seite --- */

.footer-spacer {
    /* Muss exakt die gleichen Abmessungen wie der Button haben */
    width: 40px;
    height: 40px;
    
    /* Stellt sicher, dass er seinen Platz behält */
    flex-shrink: 0;
    
    /* Ist und bleibt unsichtbar */
    visibility: hidden;
}
/* ==========================================================================
   4. KOMPONENTEN (Karten, Formulare, Buttons)
   ========================================================================== */


/* --- Karten-Stil --- */
.card {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    padding: 25px;
}

.card-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.card-header h1 {
    margin: 0;
}

.card h3 {
    margin-top: 0;
}


.card-actions { margin-top: 20px; border-top: 1px solid var(--border-color); padding-top: 20px; }


/* --- Fortschrittsanzeige --- */
.progress-stats {
    display: flex;
    font-size: 1.2em;
    font-weight: 500;
    justify-content: space-between;
    margin: 10px 0;
}

#progress-percent {
    color: var(--chart-primary-color);
}

.progress-bar-container {
    background-color: var(--hover-item-bg);
    border-radius: 10px;
    height: 20px;
    margin-bottom: 20px;
    width: 100%;
}

.progress-bar {
    background-color: var(--chart-primary-color);
    border-radius: 10px;
    height: 100%;
    transition: width 0.5s ease-in-out;
    width: 0%;
}


/* ==========================================================================
   CHART-ANIMATION (FINALE CSS-LÖSUNG)
   ========================================================================== */

.chart-container {
    height: 300px;
    margin-top: 20px;
    position: relative;
    width: 100%;
}

/* Chart-Erklärung für Monte Carlo Konfidenzbänder */
.chart-explanation {
    margin-top: 15px;
    padding: 12px 16px;
    background: var(--stat-box-bg);
    border-radius: 8px;
    border-left: 3px solid var(--chart-primary-color);
    font-size: 14px;
    line-height: 1.4;
}

.chart-explanation .explanation-content {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.chart-explanation i {
    color: var(--chart-primary-color);
    margin-top: 2px;
    flex-shrink: 0;
}

.chart-explanation span {
    color: var(--text-color-light);
}

/* NEU: Gemeinsame Stile für BEIDE Canvas-Elemente */
.chart-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;  /* Wichtig, um die Größe zu erzwingen */
    height: 100% !important; /* Wichtig, um die Größe zu erzwingen */
}

/* Spezifische Steuerung für den Achsen-Canvas */
#progress-chart-axes {
    /* Liegt über dem Linien-Canvas */
    z-index: 5; 
    
    /* Standardmäßig unsichtbar */
    opacity: 0; 
    
    /* Die Animation für das Einblenden */
    transition: opacity 0.8s ease-in-out; 
}



/* --- Statistik-Board --- */
.stats-board {
    border-top: 1px solid var(--hover-item-bg);
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-top: 30px;
    padding-top: 20px;
}

.stat-box {
    background-color: var(--stat-box-bg);
    border-radius: 8px;
    cursor: grab;
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    opacity: 1;
}


.stat-box:grabbing {
    cursor: grabbing;
}

.stat-value {
    color: var(--text-color);
    font-size: 1.8em;
    font-weight: 600;
    line-height: 1.2;
}

.stat-value .sub-value {
    color: #7f8c8d;
    font-size: 0.6em;
    font-weight: 400;
    padding-left: 10px;
}

.stat-label {
    color: var(--text-color-light);
    font-size: 0.9em;
    margin-top: 5px;
}

.stat-box.quote-box .stat-value {
    color: var(--text-color);
    font-size: 1em;
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
}

.stat-box.quote-box {
    /* Optional: Gib der Kachel ein anderes Gefühl, z.B. weniger Padding */
    padding-top: 20px;
    padding-bottom: 20px;
}

.stat-box.quote-box .stat-main-value {
    /* Überschreibe die riesige Schriftgröße */
    font-size: 1em; /* Eine angenehme, lesbare Größe */
    font-weight: 500; /* Normales Gewicht statt fett */
    font-style: italic; /* Kursiv für Zitate */
    line-height: 1.5; /* Besserer Zeilenabstand für längeren Text */
    text-align: left; /* Zitate sehen linksbündig oft besser aus */
    margin-bottom: 10px; /* Abstand zum Autor */
}

.stat-box.quote-box .stat-sub-value {
    /* Passe den Stil für den Autor an */
    font-size: 0.9em;
    font-style: italic;
    text-align: right; /* Autor rechtsbündig */
    width: 100%; /* Nötig für text-align: right */
}

.stat-value-wrapper {
    /* Diese Regel sorgt dafür, dass die Elemente in einer Zeile sind
       und sich an der Grundlinie ausrichten, was optisch am besten aussieht. */
    display: flex;
    align-items: baseline;
    gap: 6px; /* Abstand zwischen Hauptwert und Subtext */
}

.stat-main-value {
    font-size: 1.8em;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.2;
}

.stat-sub-value {
    font-size: 0.9em;
    font-weight: 400;
    color: var(--text-color-light);
}

/* --- Wochentag-Diagramm --- */
.weekday-chart {
    display: flex;
    height: 80px;
    justify-content: space-around;
    margin-top: 10px;
}

.weekday-column {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    width: 12%;
}

.weekday-bar {
    background-color: var(--chart-primary-color);
    border-radius: 3px;
    transition: height 0.3s ease-out;
    width: 70%;
}

.weekday-label {
    color: var(--text-color-light);
    font-size: 0.75em;
    font-weight: 500;
    margin-top: 5px;
}


/* --- Formulare & Inputs --- */
input[type="text"],
input[type="number"],
input[type="date"],
select {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-color);
    font-size: 1em;
    margin: 5px;
    padding: 10px;
}

.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* KORREKTUR: Stil für ungültige Input-Felder */
input.has-error {
    border-color: var(--btn-danger-bg); /* Nutzt die rote "Gefahr"-Farbe */
    background-color: rgba(231, 76, 60, 0.05); /* Optional: Ein ganz leichter roter Schimmer */
}

/* Optional: Eine kleine Animation, um die Aufmerksamkeit zu erregen */
@keyframes shake-horizontal {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

input.has-error {
    animation: shake-horizontal 0.4s cubic-bezier(.455,.03,.515,.955) both;
}

/* --- Buttons --- */
button {
    background-color: var(--chart-primary-color);
    border: none;
    border-radius: 5px;
    color: var(--btn-text-color);
    cursor: pointer;
    font-size: 1em;
    margin: 5px;
    padding: 10px;
    transition: background-color 0.2s;
}

button:hover {
    background-color: var(--btn-primary-hover-bg);
}

button:disabled {
    background-color: var(--btn-disabled-bg);
    color: var(--btn-disabled-text-color);
    cursor: not-allowed;
}

.primary-btn {
    background-color: var(--btn-primary-bg);
    color: var(--btn-text-color);
    font-weight: 600;
}

.primary-btn:hover {
    background-color: var(--btn-primary-hover-bg);
}

.primary-btn:active {
    opacity: 0.9;
    transform: translateY(1px);
}

.danger-btn {
    background-color: var(--btn-danger-bg);
}

.danger-btn:hover {
    background-color: var(--btn-danger-hover-bg);
}

.neutral-btn {
    background-color: var(--btn-neutral-bg);
}

.neutral-btn:hover {
    background-color: var(--btn-neutral-hover-bg);
}

.card-header .neutral-btn {
    margin: 0;
    padding: 8px 12px;
    white-space: nowrap;
}
.card-header .neutral-btn i {
    margin-right: 6px;
}

.icon-button {
    align-items: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--btn-icon-color);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 1.1em;
    height: 34px;
    justify-content: center;
    padding: 8px;
    transition: background-color 0.2s, color 0.2s;
    width: 34px;
}

.icon-button:hover {
    background-color: var(--hover-item-bg);
    color: var(--btn-icon-hover-color);
}

.sidebar-footer-actions .icon-button {
    background-color: var(--active-item-bg);
    flex-shrink: 0;
    height: 44px;
    width: 44px;
}

.sidebar-footer-actions .icon-button:hover {
    background-color: var(--btn-icon-solid-hover-bg);
}

/* ==========================================================================
   NEUE STILE FÜR DIE ÜBERARBEITETE PROJEKTEINSTELLUNGS-KARTE
   ========================================================================== */

/* Die Karte selbst braucht keine großen Änderungen, aber wir stylen die neuen inneren Container */
#project-settings-card {
    padding: 0; /* Entferne altes Padding, wir steuern es jetzt intern */
    display: flex;
    flex-direction: column;
}

/* Hauptzone für die Routine-Einstellungen */
.project-settings-main-zone {
    padding: 25px 25px 20px 25px; /* Padding oben, links, rechts und etwas weniger unten */
}

/* Der Container für den "Speichern"-Button */
.project-settings-actions {
    margin-top: 20px;
    display: flex;
}

/* Der Speichern-Button soll die volle Breite einnehmen */
.project-settings-actions #update-project-btn {
    flex-grow: 1;
    margin: 0;
    padding: 12px; /* Etwas größer für mehr Präsenz */
    font-size: 1.1em;
    font-weight: 600;
}

/* Die neue Trennlinie für die visuelle Hierarchie */
.settings-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
}

/* Die neue "Gefahrenzone" */
.project-settings-danger-zone {
    padding: 20px 25px 25px 25px;
    background-color: rgba(231, 76, 60, 0.05); /* Ein sehr subtiler roter Hintergrund */
    border-bottom-left-radius: 8px; /* Stellt sicher, dass die Ecken der Karte abgerundet bleiben */
    border-bottom-right-radius: 8px;
}

.project-settings-danger-zone h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--text-color); /* Neutrale Farbe, die Gefahr wird durch den Button kommuniziert */
    font-size: 1.1em;
}

.project-settings-danger-zone p {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: var(--text-color-light);
}

.project-settings-danger-zone #delete-project-btn {
    width: 100%; /* Nimmt die volle Breite ein */
    margin: 0;
}


/* Kleinere Anpassungen an den Einstellungs-Reihen für bessere Optik */
#project-settings-form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Etwas mehr Abstand zwischen den Zeilen */
    margin: 20px 0 0 0;
}

.setting-row label {
    flex-basis: 110px; /* Etwas mehr Platz für längere Labels */
    font-weight: 500;
    color: var(--text-color);
    padding-top: 8px; /* Vertikal zentrieren mit den höheren Inputs */
    align-self: flex-start;
}

.setting-row .clearable-input-container {
    flex-grow: 1;
}

.setting-row input {
    margin: 0;
    width: 100%;
    box-sizing: border-box; /* Wichtig, damit Padding/Border die Breite nicht sprengen */
}


/* ==========================================================================
   5. MODALER DIALOG
   ========================================================================== */

.modal-backdrop {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    
    /* Animation-Eigenschaften */
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.modal-backdrop.is-visible {
    opacity: 1;
}

.modal {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-width: 600px;
    max-height: 90vh;
    width: 90%;
    
    /* Flexbox-Struktur für sticky footer */
    display: flex;
    flex-direction: column;
    
    /* Animation-Eigenschaften */
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.modal-backdrop.is-visible .modal {
    transform: scale(1);
    opacity: 1;
}

/* Spezielle Behandlung für Account Modal - oben fixiert & größere Breite */
.modal:has(.account-modal-content) {
    max-width: 900px;
    width: 95%;
    align-self: flex-start;
    margin-top: 5vh;
    margin-bottom: 5vh;
    transform: scale(0.95) translateY(-20px);
    transform-origin: top center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-backdrop.is-visible .modal:has(.account-modal-content) {
    transform: scale(1) translateY(0);
}

.modal h2 {
    color: var(--text-color);
    padding: 30px 30px 20px 30px;
    margin: 0;
    flex-shrink: 0;
}

.modal-actions {
    padding: 20px 30px 30px 30px;
    margin-top: auto;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
}

.modal-actions button {
    margin-left: 10px;
}

#modal-cancel-btn {
    background-color: var(--btn-neutral-bg);
}

#modal-cancel-btn:hover {
    background-color: var(--btn-neutral-hover-bg);
}

#modal-content {
    color: var(--text-color-light);
    padding: 0 30px;
    flex-grow: 1;
    overflow-y: auto;
    max-height: 90vh;
    padding-right: 30px;
    transition: min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* --- Modal-Inhalt: Projekt-Einstellungen --- */
#project-settings-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.setting-row {
    align-items: center;
    display: flex;
    gap: 15px;
}

.setting-row label {
    flex-basis: 90px;
    flex-shrink: 0;
    font-weight: 500;
}

.setting-row input[type="text"],
.setting-row input[type="number"] {
    flex-grow: 1;
    margin: 0;
}

.style-controls {
    align-items: center;
    display: flex;
    flex-grow: 1;
    gap: 10px;
}

.style-control {
    border: 2px solid #ccc;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 0;
    height: 40px;
    margin: 0;
    padding: 0;
    transition: transform 0.2s, border-color 0.2s;
    width: 40px;
}

.color-picker-btn.style-control {
    background: transparent;
}

.color-picker-btn.style-control:hover {
    transform: scale(1.1);
}

/* --- Modal-Inhalt: Globale Einstellungen --- */
#settings-modal .setting-group {
    margin-bottom: 20px;
}

#settings-modal h4 {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
    margin-top: 0;
    padding-bottom: 5px;
}

#settings-modal .radio-group,
#settings-modal .theme-group {
    display: flex;
    gap: 15px;
}

#settings-modal .theme-button {
    border: 2px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    height: 30px;
    transition: transform 0.2s, border-color 0.2s;
    width: 30px;
}

#settings-modal .theme-button.active {
    border-color: var(--chart-primary-color);
    transform: scale(1.15);
}


/* --- Modal-Inhalt: Statistiken anpassen --- */
#customize-stats-list {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.customize-stat-item {
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    padding: 8px;
}

.customize-stat-item:hover {
    background-color: var(--hover-item-bg);
}

.customize-stat-item input[type="checkbox"] {
    height: 18px;
    margin: 0;
    width: 18px;
}

.customize-stat-item label {
    color: var(--text-color);
    cursor: pointer;
}


/* --- Modal-Inhalt: Einträge verwalten --- */
.entry-edit-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.entry-edit-item {
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap; /* NEU: Erlaubt den Elementen, umzubrechen, wenn der Platz zu eng wird */
    gap: 10px;
    padding: 10px;
}

.entry-edit-item:last-child {
    border-bottom: none;
}

.entry-edit-item input {
    background-color: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-color);
    min-width: 0; /* NEU: Der wichtigste Fix! Erlaubt den Inputs, unter ihre Standard-Mindestgröße zu schrumpfen. */
}

.entry-edit-item input[type="date"] {
    flex-basis: 130px;
    flex-grow: 1;
    flex-shrink: 1; /* Explizit gesetzt, um das Schrumpfverhalten zu verdeutlichen */
}

.entry-edit-item input[type="number"] {
    flex-basis: 70px;  /* Basis etwas verkleinert, da Zahlen weniger Platz brauchen */
    flex-grow: 1;
    flex-shrink: 1;
}

/* Der .filler wird nicht mehr benötigt! Entferne ihn aus dem HTML. */
/* Stattdessen schieben wir die Buttons mit einem automatischen Margin nach rechts. */
.entry-edit-item .save-entry-btn {
    margin-left: auto; /* NEU: Schiebt diesen Button (und alle danach) ganz nach rechts */
    white-space: nowrap;
}

.entry-edit-item .icon-button.danger-btn {
    background-color: transparent;
    border: none;
    color: var(--btn-danger-bg);
    flex-shrink: 0; /* Verhindert, dass der Button selbst schrumpft */
    height: 40px;
    width: 40px;
}

.entry-edit-item .icon-button.danger-btn:hover {
    background-color: rgba(231, 76, 60, 0.1);
}

/* --- 1. Soft-Delete-Stile für das Edit-Modal (FINALE, ROBUSTE VERSION) --- */

.entry-edit-item.is-marked-for-deletion {
    /* Setze die Position auf relativ, damit wir das ::after-Element
       daran ausrichten können. */
    position: relative; 
    opacity: 0.6;
    
    /* WICHTIG: Die originale text-decoration wird entfernt! 
       Wir ersetzen sie durch unser eigenes Pseudo-Element. */
    text-decoration: none; 
}

/* Erzeugt unsere benutzerdefinierte "Durchstreich-Linie" */
.entry-edit-item.is-marked-for-deletion::after {
    content: ''; /* Erforderlich, damit das Element angezeigt wird */
    position: absolute;
    left: 20px;
    
    /* Positioniert die Linie vertikal in der Mitte des Elements.
       'top: 55%' berücksichtigt oft besser die Text-Unterlängen (g, p, etc.) */
    top: 47%; 

    width: 80%; /* Die Linie geht über die gesamte Breite */
    height: 2px; /* <-- HIER ist unsere gewünschte Dicke! */
    
    background-color: var(--btn-danger-bg); /* Die Farbe der Linie */
    
    /* Stellt sicher, dass die Linie nicht versehentlich geklickt werden kann */
    pointer-events: none; 
}


/* Die restlichen Stile bleiben gleich, da sie weiterhin benötigt werden */

.entry-edit-item.is-marked-for-deletion .edit-date-input,
.entry-edit-item.is-marked-for-deletion .edit-words-input {
    pointer-events: none;
    background-color: transparent;
    border-color: transparent;
}

.entry-edit-item.is-marked-for-deletion .delete-entry-btn {
    display: none;
}

.entry-edit-item .undo-delete-btn {
    display: none;
}

.entry-edit-item.is-marked-for-deletion .undo-delete-btn {
    display: inline-block;
    vertical-align: middle;
    color: var(--chart-primary-color);
    background-color: transparent;
    border: none;
    text-decoration: none;
}

.entry-edit-item.is-marked-for-deletion .undo-delete-btn:hover {
    background-color: var(--hover-item-bg);
}


/* --- Modal-Inhalt: Icon & Color Picker --- */
.icon-picker-header,
.color-picker-header {
    margin-bottom: 15px;
}

.icon-picker-header input {
    font-size: 1.1em;
    margin: 0;
    padding: 10px;
    width: 95%;
}

.icon-picker-grid,
.color-picker-grid {
    display: grid;
    gap: 15px;
    height: 40vh;
    overflow-y: auto;
    padding-top: 5px;
    scrollbar-gutter: stable;
    padding-right: 10px;

    /* DER FIX: Verhindert das vertikale Dehnen der Reihen */
    align-content: start;
}

.icon-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}

.color-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

.icon-picker-item {
    align-items: center;
    background-color: #f0f0f1;
    border-radius: 50%;
    color: #3c4043;
    cursor: pointer;
    display: flex;
    font-size: 28px;
    height: 60px;
    justify-content: center;
    transition: background-color 0.2s, transform 0.1s;
    width: 60px;
}
.icon-picker-item:hover {
    background-color: #e0e0e0;
    transform: scale(1.1);
}

.icon-picker-btn.style-control {
    align-items: center;
    background-color: #f0f0f1;
    color: #3c4043;
    display: flex;
    justify-content: center;
}
.icon-picker-btn.style-control:hover {
    background-color: #e0e0e0;
}
.icon-picker-btn.style-control i {
    font-size: 1.2em;
    margin: 0;
}

.color-picker-item {
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    height: 50px;
    transition: transform 0.2s, border-color 0.2s;
    width: 50px;
}
.color-picker-item:hover {
    transform: scale(1.1);
}
.color-picker-item.active {
    border-color: #3498db;
    transform: scale(1.1);
}

/* ==========================================================================
   6. DRAG & DROP (SortableJS)
   ========================================================================== */
.sortable-chosen {
    opacity: 1;
}
/* Das Element, das an der Maus "klebt" (der "Geist") */
.sortable-ghost {
    opacity: 0;
    background-color: #c8ebfb; /* Optional: Ein leichter blauer Schimmer als visueller Indikator */
}

/* ==========================================================================
   STICKY FOOTER & FADE-ANIMATION
   ========================================================================== */

.entry-card-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    min-height: 90px; /* Verhindert "Springen" der Footer-Höhe */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Beide Ansichten (Formular und Feedback) werden absolut positioniert */
.entry-view {
    position: absolute;
    width: 100%;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

/* Standardzustand: Formular ist sichtbar, Feedback ist unsichtbar */
#entry-form-view {
    opacity: 1;
    visibility: visible;
}

#entry-feedback-view {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Klicks auf die unsichtbare Ebene verhindern */
}

/* Wenn der Container die Klasse .is-showing-feedback hat, wird umgeschaltet */
.entry-card-container.is-showing-feedback #entry-form-view {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.entry-card-container.is-showing-feedback #entry-feedback-view {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Stile für die animierte Erfolgsmeldung */
.entry-feedback-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.feedback-icon-wrapper {
    width: 70px; /* Etwas größer für mehr Wirkung */
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2ecc71;
    color: white;
    font-size: 2.5em;
    margin-bottom: 15px;
    /* Pop-In Animation für das Icon */
    transform: scale(0);
    opacity: 0;
    /* Die Animation wird nur gestartet, wenn die Feedback-Ansicht aktiv ist */
    animation: none;
}

.feedback-text {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    /* Fade-Up Animation für den Text */
    transform: translateY(10px);
    opacity: 0;
    animation: none;
}

/* Animationen nur starten, wenn die Feedback-Ansicht aktiv wird */
.entry-card-container.is-showing-feedback .feedback-icon-wrapper {
    animation: pop-in-feedback 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
.entry-card-container.is-showing-feedback .feedback-text {
    animation: fade-up-feedback 0.4s ease-out 0.2s forwards;
}

/* ==========================================================================
   OPTION 3: Footer-Bar Morphing Animation
   Die gesamte Footer-Bar wird grün mit Checkmark und Glow-Effekt
   ========================================================================== */

/* Footer-Bar Success State - Grundtransformation */
.sticky-footer-bar.is-success {
    animation: footer-bar-success-morph 2s ease-out forwards;
    overflow: hidden; /* Verhindert, dass das Overlay über den Rand hinausragt */
}

/* Erfolgs-Overlay über dem Formular (versteckt standardmäßig) */
.footer-success-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
    padding: 0 20px;
}

.sticky-footer-bar.is-success .footer-success-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: success-overlay-fade-in 0.3s ease-out 0.2s forwards;
}

/* Formular während Success ausblenden */
.sticky-footer-bar.is-success .entry-action-row {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

/* Success Icon */
.footer-success-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2ecc71;
    font-size: 1.2em;
    flex-shrink: 0;
    transform: scale(0);
    animation: success-icon-pop 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.4s forwards;
}

/* Success Text */
.footer-success-text {
    font-size: 1.1em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    transform: translateY(5px);
    opacity: 0;
    animation: success-text-fade-up 0.4s ease-out 0.6s forwards;
}

/* Hauptanimation: Footer-Bar wird grün mit Glow */
@keyframes footer-bar-success-morph {
    0% {
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
    }
    15% {
        background-color: rgba(46, 204, 113, 0.95);
        box-shadow: 0 -8px 32px rgba(46, 204, 113, 0.4), 0 0 20px rgba(46, 204, 113, 0.3);
        border-color: rgba(46, 204, 113, 0.5);
    }
    50% {
        background-color: rgba(46, 204, 113, 0.98);
        box-shadow: 0 -8px 40px rgba(46, 204, 113, 0.5), 0 0 30px rgba(46, 204, 113, 0.4);
        border-color: rgba(46, 204, 113, 0.6);
        transform: translateY(0) scale(1.02);
    }
    85% {
        background-color: rgba(46, 204, 113, 0.95);
        box-shadow: 0 -8px 32px rgba(46, 204, 113, 0.4), 0 0 20px rgba(46, 204, 113, 0.3);
        border-color: rgba(46, 204, 113, 0.5);
        transform: translateY(0) scale(1);
    }
    100% {
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(0) scale(1);
    }
}

/* Dark Mode Variante */
body.dark-mode .sticky-footer-bar.is-success {
    animation: footer-bar-success-morph-dark 2s ease-out forwards;
}

@keyframes footer-bar-success-morph-dark {
    0% {
        background-color: rgba(44, 44, 44, 0.8);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.1);
    }
    15% {
        background-color: rgba(46, 204, 113, 0.95);
        box-shadow: 0 -8px 32px rgba(46, 204, 113, 0.4), 0 0 20px rgba(46, 204, 113, 0.3);
        border-color: rgba(46, 204, 113, 0.5);
    }
    50% {
        background-color: rgba(46, 204, 113, 0.98);
        box-shadow: 0 -8px 40px rgba(46, 204, 113, 0.5), 0 0 30px rgba(46, 204, 113, 0.4);
        border-color: rgba(46, 204, 113, 0.6);
        transform: translateY(0) scale(1.02);
    }
    85% {
        background-color: rgba(46, 204, 113, 0.95);
        box-shadow: 0 -8px 32px rgba(46, 204, 113, 0.4), 0 0 20px rgba(46, 204, 113, 0.3);
        border-color: rgba(46, 204, 113, 0.5);
        transform: translateY(0) scale(1);
    }
    100% {
        background-color: rgba(44, 44, 44, 0.8);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.1);
        transform: translateY(0) scale(1);
    }
}

/* Overlay Fade-In Animation */
@keyframes success-overlay-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Success Icon Pop Animation */
@keyframes success-icon-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Success Text Fade-Up Animation */
@keyframes success-text-fade-up {
    from {
        transform: translateY(5px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .footer-success-text {
        font-size: 1em;
    }
    
    .footer-success-icon {
        width: 28px;
        height: 28px;
        font-size: 1em;
    }
    
    .footer-success-overlay {
        gap: 10px;
        padding: 0 15px;
    }
}

/* Alte Feedback-Animationen bleiben für Kompatibilität, werden aber nicht mehr verwendet */
@keyframes pop-in-feedback {
    to {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes fade-up-feedback {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================================================
   7. FLATPICKR ANPASSUNGEN (NOCH WEITER ERWEITERT & KORRIGIERT)
   ========================================================================== */

.flatpickr-calendar {
    /* Grundlegender Kalender-Container */
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    font-family: var(--font-family-main) !important; /* WICHTIG: Schriftart für den gesamten Kalender */
    color: var(--text-color);
    border-radius: 8px;
    z-index: 1001;
    font-size: 14px;
    border-radius: 20px;
}

/* Header (Monats-/Jahresauswahl) */
.flatpickr-calendar .flatpickr-months { /* Erhöhte Spezifität */
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    border-radius: 20px;
}

.flatpickr-months .flatpickr-month{
    height: 53px;
}

/* Navigationspfeile (Vorheriger/Nächster Monat) */
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month { /* Erhöhte Spezifität */
    color: var(--text-color); /* Haupt-Textfarbe für bessere Sichtbarkeit */
    fill: var(--text-color);
    transition: color 0.2s, fill 0.2s;
}
.flatpickr-calendar .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-next-month:hover { /* Erhöhte Spezifität */
    color: var(--chart-primary-color);
    fill: var(--chart-primary-color);
}

/* Monats-Dropdown und Jahres-Input Felder (Anpassung an .date-display Button) */
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input { /* Erhöhte Spezifität */
    font-family: var(--font-family-main) !important; /* WICHTIG: Korrekte Schriftart */
    color: var(--text-color); /* WICHTIG: Haupt-Textfarbe für Lesbarkeit */
    background-color: var(--stat-box-bg); /* Hintergrundfarbe wie deine Stat-Boxen */
    border: 1px solid var(--border-color); /* Rahmenfarbe */
    border-radius: 8px;
    padding: 6px 10px;
    height: auto;
    line-height: 1.2;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    font-size: inherit; /* Größe von Kalender-Container erben */
    font-weight: 500;
    /* Sicherstellen, dass der Pfeil im Dropdown nicht abgeschnitten wird */
    -webkit-appearance: none; /* Für Chrome/Safari, um native Dropdown-Pfeile zu unterdrücken */
    -moz-appearance: none; /* Für Firefox */
    appearance: none; /* Standard */
    /* Eigener Pfeil für das Dropdown, um volle Kontrolle zu haben */
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%237f8c8d%22%20d%3D%22M4.5%204l3%203%203-3H4.5z%22%2F%3E%3C%2Fsvg%3E'); /* Ein grauer Pfeil */
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 25px; /* Platz für den benutzerdefinierten Pfeil */
}

/* Dark Mode spezifische Pfeilfarbe für Dropdown */
body.dark-mode .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%238e8e8e%22%20d%3D%22M4.5%204l3%203%203-3H4.5z%22%2F%3E%3C%2Fsvg%3E'); /* Ein hellerer Pfeil für Dark Mode */
}


/* Hover-Effekt für diese Input-/Select-Felder */
.flatpickr-calendar .flatpickr-current-month select:hover,
.flatpickr-calendar .flatpickr-current-month input.flatpickr-monthYear-input:hover { /* Erhöhte Spezifität */
    background-color: var(--hover-item-bg);
    border-color: var(--chart-primary-color);
}

/* Spezifische Anpassungen für das Jahres-Input-Feld */
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input { /* Erhöhte Spezifität */
    width: 8ch;
    -moz-appearance: textfield;
}
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input::-webkit-outer-spin-button,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Pfeile für Jahres-Input (Standard-Flatpickr-Pfeile, die bleiben, auch wenn wir eigene Bilder für Select verwenden) */
.flatpickr-calendar .numInputWrapper span.arrowUp:after,
.flatpickr-calendar .numInputWrapper span.arrowDown:after { /* Erhöhte Spezifität */
    border-color: var(--text-color-light);
}
.flatpickr-calendar .numInputWrapper span.arrowUp:hover:after,
.flatpickr-calendar .numInputWrapper span.arrowDown:hover:after { /* Erhöhte Spezifität */
    border-color: var(--chart-primary-color);
}

/* Wochentags-Header (Mo, Di, Mi...) */
.flatpickr-calendar .flatpickr-weekday { /* WICHTIG: Erhöhte Spezifität */
    font-family: var(--font-family-main) !important; /* Korrekte Schriftart */
    color: var(--text-color); /* WICHTIG: Haupt-Textfarbe für Lesbarkeit im Dark Mode */
    font-weight: 600; /* Etwas fetter für bessere Lesbarkeit */
}

/* Individuelle Tage im Kalender */
.flatpickr-calendar .flatpickr-day { /* Erhöhte Spezifität */
    font-family: var(--font-family-main) !important; /* Korrekte Schriftart */
    color: var(--text-color);
    border-radius: 99px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Hover-Effekt für Tage */
.flatpickr-calendar .flatpickr-day:hover { /* Erhöhte Spezifität */
    background: var(--hover-item-bg);
    color: var(--text-color);
}

/* Heutiges Datum */
.flatpickr-calendar .flatpickr-day.today { /* Erhöhte Spezifität */
    border: 1px solid var(--chart-primary-color);
    color: var(--chart-primary-color);
}
.flatpickr-calendar .flatpickr-day.today:hover { /* Erhöhte Spezifität */
    background: var(--chart-primary-color);
    color: var(--btn-text-color);
}

/* Ausgewähltes Datum */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected.startRange,
.flatpickr-calendar .flatpickr-day.selected.endRange,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange { /* Erhöhte Spezifität */
    background: var(--chart-primary-color); /* AKZENTFARBE für die Auswahl */
    border-color: var(--chart-primary-color);
    color: var(--btn-text-color);
}

/* Tage aus Vormonat/Nächstem Monat */
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay { /* Erhöhte Spezifität */
    color: var(--text-color-light);
    opacity: 0.6;
}

/* Deaktivierte Tage */
.flatpickr-calendar .flatpickr-day.disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled { /* Erhöhte Spezifität */
    color: var(--btn-disabled-text-color);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Das Flatpickr Input Feld (versteckt im HTML) */
.flatpickr-calendar .flatpickr-input { /* Erhöhte Spezifität */
    background: transparent;
    color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.flatpickr-calendar .flatpickr-input:focus,
.flatpickr-calendar .flatpickr-input:active { /* Erhöhte Spezifität */
    outline: none;
    box-shadow: none;
}

/* Sicherstellen, dass der date-display-container (das visuelle Element) seine Farben behält */
.date-display {
    background-color: var(--stat-box-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color-light);
    /* ... weitere bestehende Stile ... */
}
.date-display:hover {
    background-color: var(--hover-item-bg);
}

/* Scrollbar Styling für Flatpickr, falls es overflow hat */
.flatpickr-calendar .flatpickr-rContainer {
    scrollbar-color: var(--text-color-light) var(--hover-item-bg); /* For Firefox */
}
.flatpickr-calendar .flatpickr-rContainer::-webkit-scrollbar {
    background: var(--hover-item-bg);
}
.flatpickr-calendar .flatpickr-rContainer::-webkit-scrollbar-thumb {
    background: var(--text-color-light);
    border-radius: 999px;
}

/* ==========================================================================
   8. BENUTZERDEFINIERTE FORMULAR-ELEMENTE (MODUS-SCHALTER)
   ========================================================================== */

.mode-selector-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Responsives Grid */
    gap: 10px;
}

.mode-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border: 2px solid var(--border-color); /* Standard-Rahmen */
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--card-bg); /* Standard-Hintergrund */
    color: var(--text-color); /* Standard-Textfarbe */
}

/* Spezifische Vorschau-Stile, die immer gleich bleiben */
.mode-button.mode-light-preview {
    background-color: #f4f7f9;
    border-color: #e0e0e0;
    color: #333;
}
.mode-button.mode-dark-preview {
    background-color: #2c2c2c;
    border-color: #444444;
    color: #e0e0e0;
}

/* Hover-Effekt (außer für den aktiven Button) */
.mode-button:not(.active):hover {
    transform: translateY(-2px);
    border-color: var(--text-color-light);
}

/* Styling für den ausgewählten Button */
.mode-button.active {
    border-color: var(--chart-primary-color);
    box-shadow: 0 0 0 2px var(--chart-primary-color);
    color: var(--chart-primary-color);
}

.mode-button[data-mode="auto"].active {
    color: var(--text-color);
}

.mode-button i {
    font-size: 1.1em;
}

/* Pro Badge in Mode Buttons */
.mode-button .pro-badge {
    display: inline-block !important;
    margin-left: 6px;
    font-size: 0.75em;
    background: var(--chart-primary-color);
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.2;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Language flag buttons */
.language-flag-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 50px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-bg);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 2em;
    padding: 0;
}

.language-flag-btn:hover {
    transform: translateY(-2px);
    border-color: var(--text-color-light);
}

.language-flag-btn.active {
    border-color: var(--chart-primary-color);
    box-shadow: 0 0 0 2px var(--chart-primary-color);
}

.language-flag-btn .flag {
    font-size: inherit;
    line-height: 1;
}

/* ==========================================================================
   FEEDBACK & BUGS STYLES
   ========================================================================== */

/* Feedback Buttons Group */
.feedback-buttons-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Feedback Button Base Styles */
.feedback-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--stat-box-bg);
    color: var(--text-color);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    flex: 1;
    min-width: 140px;
}

.feedback-btn i {
    font-size: 1em;
    color: var(--text-color-light);
}

/* Feedback Button Hover */
.feedback-btn:hover {
    transform: translateY(-2px);
    border-color: var(--chart-primary-color);
    background-color: var(--hover-item-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feedback-btn:hover i {
    color: var(--text-color);
}

/* Feedback Button Specific Styles - schlicht, keine bunten Farben */
.feedback-btn-feedback {
    color: var(--text-color);
    border-color: var(--border-color);
}

.feedback-btn-feedback:hover {
    border-color: var(--chart-primary-color);
}

.feedback-btn-bug {
    color: var(--text-color);
    border-color: var(--border-color);
}

.feedback-btn-bug:hover {
    border-color: var(--chart-primary-color);
}

/* Feedback Form Container */
.feedback-form-container {
    padding: 0;
}

.feedback-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.feedback-form-header i {
    font-size: 1.5em;
    color: var(--chart-primary-color);
}

.feedback-form-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: var(--text-color);
}

.feedback-form-description {
    color: var(--text-color-light);
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Feedback Form */
.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feedback-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feedback-form-label {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95em;
}

.feedback-form-input,
.feedback-form-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-bg);
    color: var(--text-color);
    font-family: var(--font-family-main);
    font-size: 0.95em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.feedback-form-input:focus,
.feedback-form-textarea:focus {
    outline: none;
    border-color: var(--chart-primary-color);
    box-shadow: 0 0 0 3px rgba(var(--chart-primary-color-rgb, 52, 152, 219), 0.1);
}

.feedback-form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.feedback-form-input:disabled,
.feedback-form-textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.feedback-form-hint {
    color: var(--text-color-light);
    font-size: 0.85em;
    margin-top: -4px;
}

.feedback-char-count {
    text-align: right;
    color: var(--text-color-light);
    font-size: 0.85em;
    margin-top: -4px;
}

.feedback-char-count span {
    font-weight: 600;
}

/* Feedback Form Feedback Messages */
.feedback-form-feedback {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.feedback-form-feedback.success {
    background-color: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #27ae60;
}

.feedback-form-feedback.error {
    background-color: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}

.feedback-form-feedback i {
    font-size: 1.1em;
}

/* Dark Mode Adjustments - bereits durch CSS-Variablen abgedeckt */

/* ==========================================================================
   9. BENUTZERDEFINIERTE FORMULAR-ELEMENTE (CHECKBOXEN)
   ========================================================================== */

/* 1. Der Container einer einzelnen Checkbox-Reihe */
.customize-stat-item {
    display: flex;
    align-items: center;
    border-radius: 8px; /* Leicht abgerundete Ecken für den Hover-Effekt */
    padding: 8px;
    transition: background-color 0.2s ease-in-out;
}

/* 2. Den echten, unschönen Input unsichtbar machen */
.customize-stat-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 3. Das Label wird zum Haupt-Klickelement */
.customize-stat-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-color);
    flex-grow: 1; /* Nimmt den restlichen Platz ein */
}

/* 4. Die neue, benutzerdefinierte Checkbox-Box mit ::before erstellen */
.customize-stat-item label::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-color-light); /* Grauer Rahmen im Normalzustand */
    border-radius: 5px; /* Leicht abgerundete Ecken */
    margin-right: 12px;
    background-color: var(--card-bg);
    transition: all 0.2s ease-in-out;
}

/* 5. Hover-Effekt für die gesamte Zeile */
.customize-stat-item:hover {
    background-color: var(--hover-item-bg);
}

/* 6. Das Styling, wenn eine Option AUSGEWÄHLT (:checked) ist */
.customize-stat-item input[type="checkbox"]:checked + label::before {
    background-color: var(--chart-primary-color);
    border-color: var(--chart-primary-color);
}

/* 7. Das Häkchen mit ::after erstellen (Standard: unsichtbar) */
.customize-stat-item label {
    position: relative; /* Wichtig für die Positionierung des Häkchens */
}

.customize-stat-item label::after {
    content: '';
    position: absolute;
    left: 7px; /* Positionierung innerhalb der Box */
    top: 5px;
    
    width: 6px;
    height: 10px;
    
    border: solid white; /* Das Häkchen ist weiß */
    border-width: 0 3px 3px 0; /* Erzeugt die Form eines Häkchens */
    
    transform: rotate(45deg); /* Dreht es in die richtige Position */
    
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.1s ease-in-out;
}

/* Das Häkchen sichtbar machen, wenn die Checkbox ausgewählt ist */
.customize-stat-item input[type="checkbox"]:checked + label::after {
    opacity: 1;
}

/* Optional: Fokus-Stil für Tastatur-Navigation */
.customize-stat-item input[type="checkbox"]:focus-visible + label::before {
    box-shadow: 0 0 0 3px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.4);
}
/* ==========================================================================
   CHART.JS BENUTZERDEFINIERTER TOOLTIP (Theme-Integriert)
   ========================================================================== */

#chartjs-tooltip {
    /* Grundlegende Positionierung und Übergänge */
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, calc(-100% - 12px)); /* Positioniert über dem Punkt mit etwas Abstand */
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* ----- HIER PASSIERT DIE MAGIE: WIR NUTZEN DEINE VARIABLEN ----- */
    
    /* Hintergrund & Rahmen passend zu den Karten */
    background: var(--card-bg); 
    border: 1px solid var(--border-color);
    
    /* Radius & Schatten konsistent mit dem Rest der App */
    border-radius: 8px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Ein subtiler Schatten, der zum UI passt */

    /* Typografie & Abstände */
    font-family: var(--font-family-main);
    padding: 1rem; /* 16px, etwas großzügiger für bessere Lesbarkeit */
    min-width: 200px;
    z-index: 9999;
}

/* Body/Inhalt des Tooltips */
#chartjs-tooltip .tooltip-body {
    display: flex; /* Statt nur Text, enthält es jetzt Block-Elemente */
    flex-direction: column; /* Richtet die Zeilen untereinander aus */
    gap: 0.35rem; /* Kleiner Abstand zwischen den Zeilen */
    color: var(--text-color);
}

/* NEU: Styling für eine einzelne Zeile im Tooltip */
.tooltip-line {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Behält den Abstand zwischen Swatch und Text bei */
    font-weight: 500;
}

/* NEU: Spezielles Styling für die "Gesamt"-Zeile */
.tooltip-total {
    color: var(--text-color-light); /* Hellere Farbe für sekundäre Information */
    font-size: 0.85em; /* Etwas kleiner, um die Hierarchie zu verdeutlichen */
    font-weight: 400;

    /* Trick, um den Text der zweiten Zeile bündig unter dem Text der ersten auszurichten */
    /* (Breite des Swatches + Gap) */
    padding-left: calc(12px + 0.75rem); 
}

/* Tooltip-Titel (z.B. das Datum) */
#chartjs-tooltip h3 {
    margin: 0 0 0.75rem 0; /* Mehr Abstand nach unten (12px) */
    font-size: 1rem; /* 16px, für eine klare Hierarchie */
    font-weight: 600;
    color: var(--text-color); /* Nutzt die Haupttextfarbe des Themes */
    white-space: nowrap;
}

/* Liste für die Datenpunkte (Fortschritt, Prognose etc.) */
#chartjs-tooltip ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Konsistenter Abstand zwischen den Listenelementen (8px) */
}

/* Einzelner Listeneintrag */
#chartjs-tooltip li {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Abstand zwischen Farbfeld und Text (12px) */
    font-size: 0.9rem; /* 14.4px */
    font-weight: 500;
    color: var(--text-color-light); /* Nutzt die hellere Textfarbe für sekundäre Infos */
}

/* Das kleine Farbfeld (Swatch) */
#chartjs-tooltip .tooltip-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 4px; /* Leicht abgerundet für einen modernen Look */
    flex-shrink: 0; /* Verhindert, dass es schrumpft */
}

/* Styling für das FontAwesome-Icon im Tooltip-Body */
#chartjs-tooltip .tooltip-body i {
    font-size: 1.1em; /* Macht das Icon etwas größer und präsenter */
    width: 12px;      /* Gibt ihm eine feste Breite, damit der Text bündig ist */
    text-align: center;
    flex-shrink: 0;
}

/* ==========================================================================
   BENUTZERDEFINIERTE KOMPONENTEN: DATUMSWÄHLER (FINALE VERSION)
   ========================================================================== */

/* Der Haupt-Container, der von der JS-Funktion erstellt wird.
   Er sorgt für die korrekte Positionierung und das Layout. */
.custom-datepicker-wrapper {
    position: relative;
    display: flex;
    flex-grow: 1; /* Nimmt den verfügbaren Platz in Flexbox-Layouts (wie den Einstellungs-Reihen) ein */
}

/* Das sichtbare, klickbare "Button"-Element */
.datepicker-display {
    display: flex;
    align-items: center;
    gap: 8px; /* Abstand zwischen Icon und Text */
    
    background-color: var(--stat-box-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    
    /* Wichtig: Padding links und rechts für die Optik */
    padding: 10px 12px;
    
    cursor: pointer;
    position: relative;
    width: 100%;
    box-sizing: border-box; /* Stellt sicher, dass Padding/Border die Breite nicht sprengen */
    
    transition: background-color 0.2s, border-color 0.2s;

    /* Verhindert, dass langer Text das Layout zerstört */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datepicker-display:hover {
    background-color: var(--hover-item-bg);
}

/* Passt das rechte Padding an, wenn der "Löschen"-Button sichtbar wird,
   damit der Text nicht darunter verschwindet. */
.datepicker-display.has-clear-btn-visible {
    padding-right: 40px;
}

/* Das Textelement für "Heute", das Datum oder den Platzhalter "Optional" */
.datepicker-text {
    font-size: 1em;
    font-weight: 500;
    color: var(--text-color-light);
}

/* Das eigentliche Flatpickr-Input, das wir für den Nutzer verstecken,
   aber für die Funktionalität benötigen. */
.datepicker-input-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* Der "Löschen"-Button, der bei Bedarf erscheint */
.datepicker-clear-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    
    background: none;
    border: none;
    cursor: pointer;
    margin: 0;
    
    height: 34px;
    width: 34px;
    padding: 8px;
    font-size: 1em;
    
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    color: var(--btn-danger-bg);
    transition: color 0.2s, background-color 0.2s, opacity 0.2s, visibility 0.2s;
    
    /* Standardmäßig ist der Button unsichtbar und nicht klickbar */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Zustand, wenn der Button sichtbar gemacht wird (per JS durch Hinzufügen der Klasse) */
.datepicker-clear-btn.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.datepicker-clear-btn:hover {
    background-color: rgba(231, 76, 60, 0.1);
}

/* ==========================================================================
   MOBILE RESPONSIVENESS
   ========================================================================== */

/* --- Hamburger Menu Button (nur auf Mobile sichtbar) --- */
.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 999;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-menu-btn:hover {
    background-color: var(--hover-item-bg);
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}

.mobile-menu-btn i {
    font-size: 1.2em;
    color: var(--text-color);
}

/* --- Mobile Breakpoint: ≤768px --- */
@media (max-width: 768px) {
    /* Zeige Hamburger Button */
    .mobile-menu-btn {
        display: block;
    }
    
    /* Verstecke Sidebar Toggle (Chevron) auf Mobile - wird durch Hamburger ersetzt */
    #toggle-sidebar-btn {
        display: none;
    }
    
    /* Sidebar standardmäßig versteckt (off-screen links) */
    .project-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        z-index: 1000;
        width: 250px;
        transition: left 0.3s ease-in-out;
        box-shadow: 2px 0 15px rgba(0,0,0,0.2);
        display: flex;
        flex-direction: column;
    }
    
    /* Sidebar-Bereiche: Header und Footer fixiert, List scrollbar */
    .sidebar-header {
        flex-shrink: 0;
    }
    
    .project-list-container {
        flex-grow: 1;
        overflow-y: auto;
        min-height: 0; /* Wichtig für Flexbox-Scrolling */
    }
    
    .sidebar-footer-actions {
        flex-shrink: 0;
        padding-bottom: 30px; /* Extra Abstand zum unteren Rand */
        padding-top: 15px; /* Zusätzlicher Abstand nach oben */
    }
    
    /* Safe-Area für iOS-Geräte (Notch/Home-Indicator) */
    .project-sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* Sidebar sichtbar wenn body.mobile-menu-open */
    body.mobile-menu-open .project-sidebar {
        left: 0;
    }
    
    /* Mobile: Überschreibe alle Sidebar-Collapsed-Styles */
    /* Auf Mobile soll die Sidebar immer vollständig sichtbar sein, auch wenn sie von Desktop collapsed war */
    body.sidebar-collapsed .project-sidebar {
        width: 250px !important;
        padding: 20px !important;
    }
    
    /* Mobile: Sidebar-Container normal anzeigen, auch wenn collapsed */
    body.sidebar-collapsed .sidebar-header,
    body.sidebar-collapsed .project-list-container,
    body.sidebar-collapsed .sidebar-footer-actions {
        width: 210px !important; /* Desktop-Breite (250px - 2*20px padding) */
        margin-left: 20px !important;
        margin-right: auto !important;
    }
    
    /* Mobile: Sidebar-Header normal anzeigen, auch wenn collapsed */
    body.sidebar-collapsed .sidebar-header {
        justify-content: space-between !important; /* Desktop-Layout */
    }
    
    /* Mobile: Projektnamen immer sichtbar, auch wenn Sidebar collapsed war */
    body.sidebar-collapsed .project-name,
    body.sidebar-collapsed .sidebar-header h2,
    body.sidebar-collapsed .add-project-list-item .project-name {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        width: auto !important;
        overflow: visible !important;
    }
    
    /* Mobile: Projekt-Icons normal positionieren, auch wenn collapsed */
    body.sidebar-collapsed .project-icon-wrapper {
        margin-right: 10px !important;
        transform: none !important;
    }
    
    /* Mobile: Projekt-Liste normal anzeigen, auch wenn collapsed */
    body.sidebar-collapsed #project-list li {
        padding: 8px 12px !important;
        justify-content: flex-start !important;
    }
    
    /* Mobile: Add-Project-Button normal anzeigen, auch wenn collapsed */
    body.sidebar-collapsed .add-project-list-item {
        border-radius: 99px !important;
        width: 100% !important;
        height: auto !important;
        padding: 8px 10px !important;
        justify-content: flex-start !important;
    }
    
    /* Dunkler Backdrop beim Öffnen der Sidebar */
    body.mobile-menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* Main Content auf volle Breite */
    .main-content {
        margin-left: 0;
        padding: 60px 20px 20px 20px;
    }
    
    /* Stats-Board: Single-Column auf Mobile */
    .stats-board {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 20px;
    }
    
    .stat-box {
        padding: 12px 15px;
    }
    
    .stat-value {
        font-size: 1.5em;
    }
    
    /* Footer: Mobile horizontales Layout */
    .sticky-footer-bar {
        left: 15px;
        right: 15px;
        bottom: 15px;
        padding: 0px 15px; /* Padding für die eine große Pill */
        background: rgba(255, 255, 255, 0.9); /* Hintergrund für die große Pill */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        flex-direction: column;
        gap: 0; /* Kein Abstand, da alles in einer Pill */
    }
    
    body.sidebar-collapsed .sticky-footer-bar {
        left: 15px;
        right: 15px;
    }
    
    /* Mobile: Haupt-Pill für alle Eingabefelder - Horizontal Layout */
    .sticky-footer-bar .entry-action-row {
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 25px;
        padding: 8px 12px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        flex-direction: row; /* Horizontal statt vertikal */
        gap: 8px; /* Reduzierter Abstand für Mobile */
        width: 100%;
        height: 48px; /* Feste Höhe für horizontales Layout */
        align-items: center;
    }

    /* Mobile: Eingebetteter Input-Container - Kompakter für horizontales Layout */
    .sticky-footer-bar .embedded-input-container {
        height: 40px; /* Etwas niedriger für Mobile */
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.1);
        flex-grow: 1; /* Nimmt den meisten Platz ein */
        min-width: 0; /* Verhindert Overflow */
        overflow: hidden; /* Verhindert, dass der Button über den Rand hinausragt */
    }

    /* Mobile: Eingebetteter Button - Angepasst für kompaktere Höhe */
    .sticky-footer-bar .embedded-input-container .submit-entry-icon-btn {
        height: 40px;
        width: 40px;
        font-size: 1.1em;
    }

    /* Mobile: Eingebettetes Input-Feld */
    .sticky-footer-bar .embedded-input-container .entry-input-main {
        padding: 8px 40px 8px 12px; /* Rechts Platz für Button */
        font-size: 1em;
        text-align: center; /* Text zentriert */
        overflow: visible; /* Placeholder-Text soll nicht abgeschnitten werden */
    }

    /* Mobile: Datumswähler - Kompakter für horizontales Layout */
    .sticky-footer-bar .date-display {
        height: 40px; /* Etwas niedriger für Mobile */
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0 12px;
        flex-shrink: 0; /* Verhindert Schrumpfen */
        font-size: 0.9em; /* Etwas kleinere Schrift */
    }
    
    /* Dark Mode für Mobile Footer */
    body.dark-mode .sticky-footer-bar {
        background: rgba(44, 44, 44, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Dark Mode für Mobile Entry Action Row */
    body.dark-mode .sticky-footer-bar .entry-action-row {
        background-color: transparent; /* Transparent, da Container den Hintergrund hat */
        border: none;
    }

    /* Dark Mode für Mobile Eingebetteten Input-Container */
    body.dark-mode .sticky-footer-bar .embedded-input-container {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Dark Mode für Mobile Datumswähler */
    body.dark-mode .sticky-footer-bar .date-display {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    /* Mobile: Verwalten-Button - Teil der horizontalen Pill */
    #manage-entries-footer-btn {
        width: 48px;
        height: 48px;
        border-radius: 24px; /* Konsistent mit anderen Elementen */
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin: 0 auto; /* Zentriere die Pill */
        order: 2;
        align-self: center;
    }
    
    /* Dark Mode für Mobile Verwalten-Button */
    body.dark-mode #manage-entries-footer-btn {
        background-color: rgba(44, 44, 44, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .footer-input-group {
        flex-direction: column;
        gap: 8px;
    }
}

/* Sehr kleine Screens (iPhone SE, etc.) - Adaptive Layout + Kompakte Elemente */
@media (max-width: 375px) {
    /* Footer: Horizontales Layout bleibt, aber kompakter */
    .sticky-footer-bar .entry-action-row {
        flex-direction: row; /* Bleibt horizontal */
        height: 40px; /* Kompaktere Höhe */
        gap: 6px; /* Reduzierter Abstand */
        padding: 6px 8px;
    }

    /* Datumswähler - Icon-Button (nur Icon, kein Text) */
    .sticky-footer-bar .date-display {
        width: 36px; /* Sehr kompakt - nur Icon */
        height: 36px;
        border-radius: 18px;
        padding: 0;
        justify-content: center;
        min-width: 36px;
        flex-shrink: 0;
    }

    /* Datumswähler Text verstecken auf sehr kleinen Screens */
    .sticky-footer-bar .datepicker-text {
        display: none;
    }

    /* Datumswähler Icon größer machen für bessere Sichtbarkeit */
    .sticky-footer-bar .date-display i {
        font-size: 1.1em;
        margin: 0;
    }

    /* Datumswähler Icon eingefärbt wenn Datum manuell gesetzt wurde */
    .sticky-footer-bar .date-display.has-custom-date i,
    .sticky-footer-bar .custom-datepicker-wrapper.has-custom-date .datepicker-display i,
    .sticky-footer-bar .custom-datepicker-wrapper.has-custom-date i.fa-calendar-day {
        color: var(--chart-primary-color) !important;
        transition: color 0.2s ease;
    }

    /* Fallback: Direkte Icon-Einfärbung für iPhone SE */
    .sticky-footer-bar .custom-datepicker-wrapper.has-custom-date .fa-calendar-day {
        color: var(--chart-primary-color) !important;
    }

    /* Eingebetteter Input-Container - Kompakter */
    .sticky-footer-bar .embedded-input-container {
        height: 36px;
        border-radius: 18px;
        flex-grow: 1;
        min-width: 0;
        overflow: hidden; /* Verhindert, dass der Button über den Rand hinausragt */
    }

    /* Eingebetteter Button - Kompakter */
    .sticky-footer-bar .embedded-input-container .submit-entry-icon-btn {
        height: 36px;
        width: 36px;
        font-size: 1em;
    }

    /* Eingebettetes Input-Feld - Kompakter */
    .sticky-footer-bar .embedded-input-container .entry-input-main {
        padding: 6px 40px 6px 10px; /* Rechts Platz für Button */
        font-size: 0.9em;
        text-align: center; /* Text zentriert */
        overflow: visible; /* Placeholder-Text soll nicht abgeschnitten werden */
    }

    /* Verwalten-Button - Kompakter */
    #manage-entries-footer-btn {
        width: 36px;
        height: 36px;
        border-radius: 18px;
        font-size: 0.9em;
        flex-shrink: 0;
    }
    
    /* Chart: Reduzierte Höhe für Mobile */
    .chart-container {
        height: 250px;
        margin-top: 20px;
    }
    
    #progress-chart {
        max-height: 250px;
    }
    
    /* Modals: Fullscreen auf Mobile */
    .modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    
    .modal-header {
        padding: 20px;
        flex-shrink: 0;
    }
    
    .modal-content {
        padding: 20px;
        padding-right: 0; /* Kein rechtes Padding auf Mobile */
        flex-grow: 1;
        overflow-y: auto;
        padding-bottom: 100px; /* Platz für die fixierten Buttons */
    }
    
    /* Entferne max-height auf Mobile für maximalen Platz */
    #modal-content {
        max-height: none;
    }
    
    /* Modal Actions: Am unteren Bildschirmrand fixiert mit viel Luft */
    .modal-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 20px;
        padding-bottom: calc(40px + env(safe-area-inset-bottom)); /* Sehr viel Abstand unten + iOS Safe-Area */
        background-color: var(--card-bg);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 10;
    }
    
    /* Icon/Color Picker Grid: Maximale Platznutzung auf Mobile */
    .icon-picker-grid,
    .color-picker-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        padding: 10px;
        height: auto; /* Überschreibt height: 40vh */
        max-height: none; /* Nutze vollen verfügbaren Platz */
    }
    
    /* Größere Icon/Color Buttons für bessere Touch-Targets */
    .icon-option,
    .color-option {
        width: 100%;
        height: 70px;
        font-size: 1.6em;
    }
}

/* --- Small Mobile Breakpoint: ≤480px --- */
@media (max-width: 480px) {
    .icon-picker-grid,
    .color-picker-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .icon-option,
    .color-option {
        height: 65px;
        font-size: 1.5em;
    }
}

/* --- iOS Input Font-Size Fix (verhindert Auto-Zoom) --- */
/* Setze mindestens 16px für alle Input-Felder auf Mobile */
@media (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* Auf Desktop kleinere Schriften erlauben */
@media (min-width: 769px) {
    input[type="text"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        font-size: 14px;
    }
}

/* --- Touch-Interaktionen Optimieren --- */
@media (max-width: 768px) {
    /* Mindestgröße für Touch-Targets: 44x44px (Apple Human Interface Guidelines) */
    .icon-button,
    button,
    .project-list-item {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Entferne Hover-Effekte auf Touch-Geräten */
    @media (hover: none) {
        .project-sidebar.sidebar-hover-preview-collapse,
        .project-sidebar.sidebar-hover-preview-expand {
            width: var(--sidebar-width);
        }
        
        .icon-button:hover,
        button:hover {
            transform: none;
        }
        
        .project-list-item:hover {
            background-color: transparent;
        }
    }
    
    /* Welcome View: Mobile Anpassungen */
    #welcome-view {
        min-height: calc(100vh - 60px);
        padding: 10px;
    }
    
    .welcome-cta-btn {
        width: 100%;
        padding: 15px 30px;
    }
    
    /* Project Settings Modal: Mobile Anpassungen */
    .project-settings-modal .form-group {
        flex-direction: column;
    }
    
    .project-settings-modal label {
        margin-bottom: 8px;
    }
    
    .project-settings-modal input,
    .project-settings-modal select {
        width: 100%;
    }
    
    /* Modal Actions: Buttons nebeneinander, rechts ausgerichtet */
    .modal-actions {
        flex-direction: row;
        gap: 10px;
        justify-content: flex-end;
    }
    
    .modal-actions button {
        flex: 0 0 auto;
        min-width: 0; /* Verhindert Overflow */
    }
    
    /* Bei nur einem Button: volle Breite und zentriert */
    .modal-actions button:only-child {
        flex: 0 1 auto;
        min-width: 200px;
    }
    
    /* Dashboard anpassen: Single-Column für Checkboxen */
    #customize-stats-list {
        grid-template-columns: 1fr;
    }
    
    /* Dashboard anpassen Button: Nur Icon auf Mobile */
    #customize-stats-btn span {
        display: none;
    }
    
    #customize-stats-btn i {
        margin-right: 0;
    }
    
    /* Einträge verwalten: Alles in einer Zeile */
    .entry-edit-item {
        flex-wrap: nowrap;
        gap: 6px;
    }
    
    .entry-edit-item input[type="date"] {
        flex-basis: 100px;
        flex-grow: 0;
        font-size: 14px;
    }
    
    .entry-edit-item input[type="number"] {
        flex-basis: 60px;
        flex-grow: 0;
        font-size: 14px;
    }
    
    .entry-edit-item .icon-button {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    
    .entry-edit-item .save-entry-btn {
        font-size: 14px;
        padding: 6px 10px;
    }
    
    /* Flatpickr: Zentriert auf Mobile */
    .flatpickr-calendar {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 90vw;
        z-index: 2000;
    }
}

/* ==========================================================================
   HIGHLIGHTS SYSTEM (Apple Health-inspiriert)
   ========================================================================== */

/* Highlights Section Container */
.highlights-section {
    margin-bottom: 40px;
    animation: fadeInUp 0.6s ease-out;
    border-top: 1px solid var(--hover-item-bg);
    margin-top: 30px;
    padding-top: 20px;
}

/* Highlights Header */
.highlights-header {
    margin-bottom: 24px;
}

.highlights-title {
    font-size: 26px;
    font-weight: 700;
    margin-block-start: 0em;
    margin: 0 0 6px 0;
    color: var(--text-color);
    display: flex;
    align-items: left;
}

.highlights-title i {
    color: var(--chart-primary-color);
    font-size: 24px;
}

.highlights-subtitle {
    font-size: 15px;
    color: var(--text-color-light);
    margin: 0;
    font-weight: 400;
}

/* Highlights Grid */
.highlights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
}

/* Responsive Grid Layout */
@media (min-width: 640px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .highlights-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1600px) {
    .highlights-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Highlight Card */
.highlight-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(10px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.highlight-card-visible {
    opacity: 1;
    transform: translateY(0);
}

.highlight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

body.dark-mode .highlight-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .highlight-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Highlight Header - Icon + Title horizontal */
.highlight-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.highlight-icon {
    font-size: 16px;
    color: var(--chart-primary-color);
    opacity: 0.85;
}

.highlight-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-color-light);
    opacity: 0.8;
}

/* Highlight Value - Haupttext */
.highlight-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-color);
    letter-spacing: -0.8px;
}

/* Visual Container - Groß und zentral */
.highlight-visual-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    margin: 8px 0;
}

/* Highlight Subtitle - Erklärung unten */
.highlight-subtitle {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-color-light);
    margin-top: auto;
}

/* --- Quest Card Styles --- */

.quest-card {
    /* Hebe die Quest-Karte hervor, z.B. mit einem leichten Rand */
    border: 1px solid var(--primary-color-alpha);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.1);
}

.quest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
}

.quest-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    background-color: var(--primary-color-alpha);
    padding: 3px 8px;
    border-radius: 6px;
}

.quest-tag i {
    margin-right: 4px;
}

.quest-skip-button {
    background: none;
    border: none;
    color: var(--text-color-light);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.quest-skip-button:hover {
    color: var(--text-color);
    background-color: var(--hover-bg);
}

.quest-title {
    font-size: 1.25rem; /* Etwas kleiner als Highlight-Value */
    margin-bottom: 10px;
}

.quest-visual-container {
    width: 100%;
    margin-bottom: 10px;
}

/* Nutze die existierende .mini-progress-Bar, aber sorge für Label-Sichtbarkeit */
.quest-progress {
    position: relative;
}

.quest-progress .progress-label {
    /* Stelle sicher, dass der Text immer lesbar ist, auch bei 0% */
    color: var(--text-color-light);
    z-index: 2;
    text-shadow: none;
    font-size: 0.8rem;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.quest-progress .mini-progress-bar:not([style*="width: 0%"]) + .progress-label {
    /* Wenn Balken da ist, Text heller/weiß machen */
    color: var(--text-color-inverted);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.quest-description {
    font-size: 0.85rem;
    color: var(--text-color);
    margin-top: auto; /* Schiebt Beschreibung nach unten */
}

/* --- Quest Visuals --- */

/* V1: Meilenstein-Pfad */
.quest-milestone-path {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.quest-milestone-path .path-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.quest-milestone-path .path-bar {
    flex-grow: 1;
    height: 10px;
    background-color: var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
.quest-milestone-path .path-progress {
    height: 100%;
    background-color: var(--chart-primary-color);
    border-radius: 6px;
    transition: width 0.5s ease-out;
}
.quest-milestone-path .path-metrics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-color-light);
}
.quest-milestone-path .path-progress-text { font-weight: 600; color: var(--text-color); }
.quest-milestone-path .path-percent { opacity: 0.8; }

/* V2: Routine-Tracker */
.quest-streak-tracker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 40px;
}
.quest-streak-tracker .streak-cell {
    width: 30px;
    height: 30px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.quest-streak-tracker .streak-cell.is-complete {
    background-color: var(--chart-primary-color);
    border-color: var(--chart-primary-color);
}

/* V3: Rekord-Messer */
.quest-record-chase {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.quest-record-chase .record-bar-wrapper {
    width: 100%;
    height: 22px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}
.quest-record-chase .record-bar-top {
    background-color: var(--border-color);
    color: var(--text-color-light);
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
}
.quest-record-chase .record-bar-bottom {
    background-color: var(--border-color);
}
.quest-record-chase .record-bar {
    height: 100%;
    background-color: var(--chart-primary-color);
    color: var(--text-color-inverted);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
    transition: width 0.5s ease-out;
    min-width: 20%; /* Damit Text sichtbar bleibt */
}

/* V4: Kurs-Kompass */
.quest-pace-compass {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.quest-pace-compass .compass-dial {
    width: 80px;
    height: 40px; /* Halbkreis */
    border-radius: 80px 80px 0 0;
    background: conic-gradient(
        from -90deg at 50% 100%,
        #e74c3c 0%,
        #f1c40f 50%,
        #2ecc71 100%
    );
    position: relative;
    overflow: hidden;
}
.quest-pace-compass .compass-needle {
    width: 2px;
    height: 35px;
    background-color: var(--card-bg);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform-origin: bottom center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.quest-pace-compass .compass-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color-light);
}

/* Mini Visual Components */
.mini-visual {
    display: block;
}

/* Mini Donut - Größere Version */
.mini-donut {
    width: 100px;
    height: 100px;
}

.mini-donut .donut-background {
    fill: none;
    stroke: var(--border-color);
}

.mini-donut .donut-foreground {
    fill: none;
    stroke: var(--chart-primary-color);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.mini-donut .donut-text {
    font-size: 18px;
    font-weight: 700;
    fill: var(--text-color);
}

/* Mini Bar Charts - Größere Version */
.mini-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 70px;
    width: 100%;
    max-width: 160px;
    position: relative;
}

.mini-bar-7 {
    gap: 4px;
}

.mini-bar-14 {
    gap: 2px;
    max-width: 200px;
}

.mini-bar-2 {
    gap: 8px;
    max-width: 80px;
}

.mini-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.mini-bar {
    width: 100%;
    background: var(--chart-primary-color);
    border-radius: 3px 3px 0 0;
    min-height: 3px;
    transition: height 0.4s ease, opacity 0.4s ease;
    opacity: 0.9;
}

.mini-bar.prev-week {
    opacity: 0.35;
}

.bar-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-color-light);
    margin-top: 4px;
    text-transform: uppercase;
}

/* Trendlinie für Bar-Charts */
.trend-line-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.trend-line {
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.8;
}

.trend-line.trend-up {
    stroke: #2ecc71;
}

.trend-line.trend-down {
    stroke: #e74c3c;
}

body.dark-mode .trend-line.trend-up {
    stroke: #27ae60;
}

body.dark-mode .trend-line.trend-down {
    stroke: #c0392b;
}

/* Mini Sparkline - Größere Version */
.mini-sparkline {
    display: block;
}

.mini-sparkline .spark-area {
    fill: var(--chart-primary-color);
    opacity: 0.15;
}

.mini-sparkline .spark-line {
    fill: none;
    stroke: var(--chart-primary-color);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Mini Progress Bar - Größere Version */
.mini-progress {
    width: 100%;
    max-width: 180px;
    height: 18px;
    background: var(--border-color);
    border-radius: 9px;
    overflow: hidden;
    position: relative;
}

.mini-progress-bar {
    height: 100%;
    background: var(--chart-primary-color);
    border-radius: 9px;
    transition: width 0.6s ease;
}

.progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Mini Box Plot - Größere Version */
.mini-box {
    position: relative;
    width: 100px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-box-line {
    position: absolute;
    width: 100%;
    height: 3px;
    background: var(--border-color);
    top: 50%;
    transform: translateY(-50%);
    border-radius: 2px;
}

.mini-box-marker {
    position: absolute;
    width: 6px;
    height: 40px;
    background: var(--chart-primary-color);
    border-radius: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mini-box-label {
    position: absolute;
    bottom: -4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color);
}

/* Mini Activity Grid */
.mini-activity-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-rows: repeat(2, 10px);
    gap: 6px 4px;
    align-items: center;
    justify-items: center;
    min-height: 26px;
}

.activity-cell {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--border-color);
}

.activity-cell.active {
    background: var(--chart-primary-color);
}

.activity-cell.inactive {
    background: var(--border-color);
    opacity: 0.9;
}



/* Mini Streak Tracker (Die Perfekte Woche Quest) */
.mini-streak-tracker {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px 0;
}

.streak-icon {
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

/* Leerer Slot */
.streak-icon.empty {
    color: var(--border-color);
    opacity: 0.6;
}

/* Bereits erfüllter Slot */
.streak-icon.filled {
    color: var(--chart-primary-color);
    transform: scale(1.1);
}

/* Der heutige, noch offene Slot */
.streak-icon.current {
    color: var(--chart-primary-color);
    opacity: 0.8;
    animation: pulse 1.5s infinite ease-in-out;
}

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

/* Mini Timeline Marker */
.mini-timeline {
    position: relative;
    width: 160px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-line {
    position: absolute;
    left: 5%;
    right: 5%;
    height: 3px;
    background: var(--border-color);
    border-radius: 2px;
}

.timeline-flag {
    position: absolute;
    top: -6px;
    transform: translateX(-50%);
    color: var(--text-color-light);
}

.timeline-flag i {
    font-size: 12px;
}

.timeline-point {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--chart-primary-color);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
    transform: translate(-50%, -50%);
    top: 50%;
}

/* Center Icon Visual */
.mini-center-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 70px;
}

.mini-center-icon i {
    font-size: 42px;
    color: var(--chart-primary-color);
}

/* Emoji-Variante des Center Icons */
.mini-center-icon .emoji-icon {
    font-size: 42px;
    line-height: 1;
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* --- Completion Dashboard Styles --- */

.completion-dashboard .highlight-card:not(.completion-celebration) .highlight-value {
    font-size: 1.8rem;
}

.completion-dashboard .highlight-card .highlight-subtitle {
    margin-top: 10px;
}

.completion-cta-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 20px 0;
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
}

.completion-cta-container button {
    font-size: 0.9rem;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
}

.btn-secondary {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--hover-bg);
}

/* Input Pulse für Ziel-Erhöhen CTA */
.pulse-highlight {
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.35);
    animation: pulseOutline 1.2s ease-out 1;
}

@keyframes pulseOutline {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(255, 193, 7, 0.0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.0); }
}

/* Trophy Glanz-Effekt */
.mini-center-icon i.fa-trophy {
    animation: trophyShine 3s ease-in-out infinite;
}

@keyframes trophyShine {
    0%, 100% { 
        filter: brightness(1) drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }
    50% { 
        filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
        transform: scale(1.05);
    }
}

/* Mini Target Bar */
.mini-target-bar {
    position: relative;
    width: 100%;
    max-width: 220px;
    height: 18px;
    background: var(--border-color);
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.mini-target-bar-fill {
    height: 100%;
    background: var(--chart-primary-color);
    transition: width 0.6s ease;
}

.mini-target-bar.is-new-record .mini-target-bar-fill {
    background: var(--chart-gold-color, #f1c40f);
}

.target-bar-label {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color);
}

.target-bar-icon {
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translate(50%, -50%);
    color: var(--chart-gold-color, #f1c40f);
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Mobile Optimierungen für Highlights */
@media (max-width: 768px) {
    .highlights-section {
        margin-bottom: 30px;
    }
    
    .highlights-title {
        font-size: 22px;
    }
    
    .highlights-title i {
        font-size: 20px;
    }
    
    .highlights-subtitle {
        font-size: 14px;
    }
    
    .highlights-grid {
        gap: 12px;
    }
    
    .highlight-card {
        padding: 16px;
    }
    
    .highlight-icon {
        font-size: 14px;
    }
    
    .highlight-title {
        font-size: 10px;
    }
    
    .highlight-value {
        font-size: 26px;
    }
    
    .highlight-subtitle {
        font-size: 12px;
    }
    
    .highlight-visual-container {
        min-height: 60px;
    }
    
    /* Kleinere Visuals auf Mobile */
    .mini-donut {
        width: 80px;
        height: 80px;
    }
    
    .mini-donut .donut-text {
        font-size: 14px;
    }
    
    .mini-bar-chart {
        height: 50px;
        max-width: 120px;
    }
    
    .mini-sparkline {
        width: 100px;
        height: 50px;
    }
    
    .mini-progress {
        width: 100px;
        height: 10px;
    }
}

/* Fade-in Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Compact 3-cell grid for Routine Quest */
.quest-streak-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    grid-template-rows: 1fr;
    gap: 8px !important;
    justify-content: center;
    align-items: center;
    min-height: 0;
}
.quest-streak-grid .activity-cell {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

/* === USER MENU RESPONSIVE STYLES === */

/* User info styles */
.user-info {
    font-size: 0.85em;
    color: var(--text-color-light);
    margin-bottom: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateY(0);
}

.user-email {
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-status {
    opacity: 0.7;
    font-size: 0.8em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logout button styles */
.logout-btn {
    width: 100%;
    padding: 8px 12px;
    background: var(--neutral-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.logout-btn:hover {
    background: var(--neutral-color-hover);
    border-color: var(--border-color-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logout-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.logout-text {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateX(0);
}

/* Auth button styles */
.auth-btn {
    width: 100%;
    padding: 8px 12px;
    background: var(--neutral-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.auth-btn:hover {
    background: var(--neutral-color-hover);
    border-color: var(--border-color-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.auth-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.auth-text {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateX(0);
}

/* Responsive behavior for collapsed sidebar */
.sidebar-collapsed .user-info {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    margin-bottom: 0;
    height: 0;
}

.sidebar-collapsed .logout-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    min-width: 40px;
    flex-shrink: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-collapsed .logout-text {
    opacity: 0;
    transform: translateX(-10px);
    width: 0;
    overflow: hidden;
}

.sidebar-collapsed .logout-btn i {
    margin: 0;
    font-size: 16px;
}

.sidebar-collapsed .auth-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    min-width: 40px;
    flex-shrink: 0;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-collapsed .auth-text {
    opacity: 0;
    transform: translateX(-10px);
    width: 0;
    overflow: hidden;
}

.sidebar-collapsed .auth-btn i {
    margin: 0;
    font-size: 16px;
}

/* Smooth transitions for sidebar collapse/expand */
.sidebar-footer-actions {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .user-info {
        font-size: 0.8em;
    }
    
    .logout-btn,
    .auth-btn {
        padding: 6px 10px;
        font-size: 0.85em;
    }
}

/* Additional smooth transitions for better UX */
#user-menu {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.sidebar-collapsed #user-menu {
    padding: 4px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85px;
}

/* ==========================================================================
   SUPPORTER MODAL (PAYWALL)
   ========================================================================== */

.supporter-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Close Button (X oben rechts) */
.supporter-modal-close {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 32px;
    height: 32px;
    border: none;
    background-color: var(--bg-color);
    color: var(--text-color-light);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.supporter-modal-close:hover {
    background-color: var(--border-color);
    color: var(--text-color);
    transform: scale(1.1);
}

/* Header Section */
.support-header {
    text-align: center;
    padding: 0 4px;
}

.support-icon {
    font-size: 2.5em;
    color: var(--chart-primary-color);
    margin-bottom: 10px;
}

.support-header h3 {
    color: var(--text-color);
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 0 8px;
}

.support-header p {
    color: var(--text-color-light);
    font-size: 1em;
    line-height: 1.6;
    margin: 0;
    padding: 0 4px;
}

/* Perks Section */
.support-perks {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin: 0;
    width: 80%;
    box-sizing: border-box;
    align-self: center;
}

.support-perks h4 {
    color: var(--text-color);
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
}

.perks-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: start;
}

.perks-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-color);
    font-size: 0.95em;
    justify-content: center;
}

.perks-list li i {
    color: var(--chart-primary-color);
    font-size: 1.1em;
    flex-shrink: 0;
}

/* Price Tiers Section */
.price-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.price-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-bg);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    min-width: 0;
    box-sizing: border-box;
}

.price-tier:hover {
    transform: translateY(-2px);
    border-color: var(--text-color-light);
}

.price-tier.active {
    border-color: var(--chart-primary-color);
    box-shadow: 0 0 0 2px var(--chart-primary-color);
}

/* Das hervorgehobene (jährliche) Tier */
.price-tier-highlighted {
    border-color: var(--chart-primary-color);
    background-color: var(--bg-color);
}

.price-tier-highlighted:hover {
    border-color: var(--chart-primary-color);
}

/* Badge für "Bester Deal" */
.tier-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--chart-primary-color);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-label {
    color: var(--text-color);
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: center;
    padding: 0 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tier-price {
    color: var(--text-color);
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tier-subtext {
    color: var(--text-color-light);
    font-size: 0.85em;
    text-align: center;
    padding: 0 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* CTA Button */
.support-cta-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none;
    border-radius: 8px;
    font-size: 1.05em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.support-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #5568d3 0%, #6a4190 100%) !important;
}

.support-cta-btn:active {
    transform: translateY(0);
}

/* Footer */
.support-footer {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.support-footer-separator {
    color: var(--text-color-light);
    font-size: 0.9em;
}

.support-terms-link-inline {
    color: var(--text-color-light);
    font-size: 0.9em;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.support-terms-link-inline:hover {
    color: var(--text-color);
}

.support-close-link {
    background: none;
    border: none;
    color: var(--text-color-light);
    font-size: 0.9em;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}

.support-close-link:hover {
    color: var(--text-color);
}

/* ==========================================================================
   RESPONSIVE STYLES FÜR SUPPORTER MODAL
   ========================================================================== */

@media (max-width: 768px) {
    .supporter-modal-content {
        gap: 18px;
        padding: 0;
    }
    
    .price-tiers {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .price-tier {
        padding: 18px 16px;
    }
    
    .tier-badge {
        top: 8px;
        left: 8px;
        transform: none;
    }
    
    .support-header h3 {
        font-size: 1.4em;
    }
    
    .support-header p {
        font-size: 0.95em;
    }
    
    .support-icon {
        font-size: 2.5em;
    }
    
    .support-perks {
        padding: 16px 12px;
    }
}

@media (max-width: 480px) {
    .supporter-modal-content {
        gap: 16px;
        padding: 0;
    }
    
    .support-header {
        padding: 0 2px;
    }
    
    .support-header h3 {
        font-size: 1.3em;
        padding: 0 4px;
    }
    
    .support-header p {
        font-size: 0.9em;
        padding: 0 2px;
    }
    
    .support-perks {
        padding: 14px 10px;
    }
    
    .price-tier {
        padding: 16px 12px;
    }
    
    .tier-price {
        font-size: 1.6em;
    }
    
    .support-cta-btn {
        padding: 14px 20px;
        font-size: 1em;
    }
    
    .support-footer {
        padding: 0 4px;
    }
}

/* ==========================================================================
   ACCOUNT MODAL - REDESIGNED (2024)
   ========================================================================== */

/* Toast Container */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 400px;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    font-size: 0.95em;
    color: var(--text-color);
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast i {
    font-size: 1.2em;
    flex-shrink: 0;
}

.toast-success {
    border-left: 4px solid #10b981;
}

.toast-success i {
    color: #10b981;
}

.toast-error {
    border-left: 4px solid #ef4444;
}

.toast-error i {
    color: #ef4444;
}

.toast-warning {
    border-left: 4px solid #f59e0b;
}

.toast-warning i {
    color: #f59e0b;
}

.toast-info {
    border-left: 4px solid #3b82f6;
}

.toast-info i {
    color: #3b82f6;
}

/* Account Modal Content */
.account-modal-content {
    width: 100%;
    max-width: 800px;
    position: relative;
    padding-top: 20px;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Close Button */
.account-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--card-bg);
    color: var(--text-color-light);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
}

.account-modal-close:hover {
    transform: scale(1.1);
    background: var(--hover-item-bg);
    color: var(--text-color);
}

/* Header Section */
.account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 12px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.account-header-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.account-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color, #667eea), var(--accent-hover, #764ba2));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.account-avatar-initials {
    color: white;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1;
}

.account-header-info {
    flex: 1;
    min-width: 0;
}

.account-header-name {
    margin: 0 0 4px 0;
    font-size: 1.25em;
    font-weight: 600;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-header-email {
    margin: 0;
    font-size: 0.9em;
    color: var(--text-color-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-header-status {
    flex-shrink: 0;
}

.account-status-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9em;
    white-space: nowrap;
}

.account-status-badge.status-free {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
}

.account-status-badge.status-monthly,
.account-status-badge.status-annual {
    background: linear-gradient(135deg, var(--accent-color, #667eea), var(--accent-hover, #764ba2));
    color: white;
}

.account-status-badge.status-lifetime {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: white;
}

/* Tab Navigation */
.account-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 24px;
    overflow: visible;
    width: 100%;
}

.account-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-color-light);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 44px;
    flex: 1;
    min-width: 0;
}

.account-tab:hover {
    color: var(--text-color);
    background: var(--hover-item-bg);
}

.account-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    background: var(--hover-item-bg);
}


.account-tab span {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-tab i {
    font-size: 1.1em;
    flex-shrink: 0;
}

/* Tab Content */
.account-tab-content {
    min-height: 300px;
    transition: min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.account-panel {
    display: none;
}

.account-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Cards */
.account-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.account-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.account-card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.account-card-title {
    margin: 0;
    font-size: 1.125em;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-card-title i {
    font-size: 1em;
    color: var(--accent-color);
}

.account-card-title-danger {
    color: #e74c3c;
}

.account-card-title-danger i {
    color: #e74c3c;
}

.account-card-body {
    padding: 24px;
}

.account-card-description {
    margin: 0 0 16px 0;
    color: var(--text-color-light);
    line-height: 1.6;
    font-size: 0.95em;
}

.account-card-danger {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.02);
}

/* Field Groups */
.account-field-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.account-field-group-editable {
    position: relative;
}

.account-field-group.is-editing .account-field-input {
    border-color: var(--accent-color);
    background: var(--card-bg);
}

.account-field-value {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.95em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-field-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font-size: 0.95em;
    transition: all 0.2s ease;
}

.account-field-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb, 102, 126, 234), 0.1);
}

.account-field-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--bg-secondary);
}

.account-field-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.85em;
    color: var(--text-color-light);
    opacity: 0.8;
}

/* Buttons */
.account-copy-btn,
.account-edit-btn,
.account-save-btn,
.account-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.account-copy-btn:hover,
.account-edit-btn:hover {
    background: var(--hover-item-bg);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.account-save-btn {
    background: var(--accent-color);
    color: black;
    border-color: var(--accent-color);
}

.account-save-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: white;
}

.account-cancel-btn {
    background: transparent;
    color: var(--text-color-light);
}

.account-cancel-btn:hover {
    background: var(--hover-item-bg);
    color: var(--text-color);
}

.account-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

#export-data-btn{
    color: black;
    border: 1px solid;
}
#export-data-btn:hover{
    color: white;
}

.account-action-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.account-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.account-action-btn-primary {
    background: linear-gradient(135deg, var(--accent-color, #667eea), var(--accent-hover, #764ba2));
}

.account-action-btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.account-action-btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #c0392b, #a93226);
}

.account-action-btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.account-action-btn-secondary:hover:not(:disabled) {
    background: var(--hover-item-bg);
}

.account-action-btn-full {
    width: 100%;
    justify-content: center;
}

.account-action-group {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.account-action-group .account-action-btn {
    flex: 1;
    margin-top: 0;
}

/* Info Items */
.account-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.account-info-item:last-child {
    border-bottom: none;
}

.account-info-label {
    font-weight: 500;
    color: var(--text-color-light);
    font-size: 0.95em;
}

.account-info-value {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95em;
}

.account-info-value.status-free {
    color: #7f8c8d;
}

.account-info-value.status-monthly,
.account-info-value.status-annual {
    color: var(--accent-color);
}

.account-info-value.status-lifetime {
    color: #f5576c;
}

/* Form Groups */
.account-form-group {
    margin-bottom: 20px;
}

.account-form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-color);
}

.account-form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.95em;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.account-form-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb, 102, 126, 234), 0.1);
}

.account-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.account-password-wrapper .account-form-input {
    padding-right: 48px;
}

.account-password-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-color-light);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.account-password-toggle:hover {
    color: var(--text-color);
}

.account-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.95em;
    color: var(--text-color);
    user-select: none;
}

.account-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-color);
}

/* Feedback */
.account-feedback {
    display: none;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    line-height: 1.4;
}

.account-feedback-error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.account-feedback-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.account-feedback-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Accordion */
.account-accordion {
    overflow: hidden;
}

.account-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
}

.account-accordion-header:hover {
    background: var(--hover-item-bg);
}

.account-accordion-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--text-color);
}

.account-accordion-title i {
    font-size: 1em;
    color: var(--accent-color);
}

.account-accordion-icon {
    transition: transform 0.3s ease;
    color: var(--text-color-light);
}

.account-accordion-icon.rotated {
    transform: rotate(180deg);
}

.account-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.account-accordion-content.expanded {
    max-height: 1000px;
}

/* Subscription Cards */
.account-card-subscription {
    border-color: var(--accent-color);
}

.account-subscription-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1em;
}

.account-subscription-badge.status-free {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
}

.account-subscription-badge.status-monthly,
.account-subscription-badge.status-annual {
    background: linear-gradient(135deg, var(--accent-color, #667eea), var(--accent-hover, #764ba2));
    color: white;
}

.account-subscription-badge.status-lifetime {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: white;
}

.account-subscription-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    color: var(--text-color-light);
    font-size: 0.95em;
}

.account-subscription-info i {
    color: var(--accent-color);
}

.account-feature-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.account-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: var(--text-color-light);
    font-size: 0.95em;
}

.account-feature-list i {
    color: var(--accent-color);
    font-size: 1em;
    flex-shrink: 0;
}

/* Danger Zone */
.account-danger-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 8px;
    margin-bottom: 16px;
    color: #e74c3c;
}

.account-danger-warning i {
    font-size: 1.2em;
    flex-shrink: 0;
}

.account-danger-warning strong {
    font-weight: 600;
}

.account-danger-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.account-danger-list li {
    padding: 8px 0;
    padding-left: 24px;
    color: var(--text-color-light);
    position: relative;
    font-size: 0.95em;
}

.account-danger-list li:before {
    content: "•";
    position: absolute;
    left: 8px;
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.2em;
}

.delete-account-step {
    animation: fadeIn 0.3s ease;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .account-modal-content {
        max-width: 100%;
        padding-top: 16px;
    }
    
    .account-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }
    
    .account-header-profile {
        width: 100%;
    }
    
    .account-header-status {
        width: 100%;
    }
    
    .account-status-badge {
        width: 100%;
        text-align: center;
    }
    
    .account-tabs {
        gap: 2px;
        padding-bottom: 4px;
    }
    
    .account-tab {
        padding: 10px 8px;
        font-size: 0.8em;
        min-height: 44px;
        gap: 4px;
    }
    
    .account-tab span {
        display: inline;
        font-size: 0.85em;
    }
    
    .account-tab i {
        font-size: 1em;
    }
    
    .account-card-header,
    .account-card-body {
        padding: 16px;
    }
    
    .account-field-group {
        flex-wrap: wrap;
    }
    
    .account-copy-btn span,
    .account-edit-btn span {
        display: none;
    }
    
    .account-action-group {
        flex-direction: column;
    }
    
    .account-action-group .account-action-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .account-header {
        padding: 16px;
    }
    
    .account-avatar {
        width: 48px;
        height: 48px;
    }
    
    .account-avatar-initials {
        font-size: 1.2em;
    }
    
    .account-header-name {
        font-size: 1.1em;
    }
    
    .account-header-email {
        font-size: 0.85em;
    }
    
    .account-tab {
        padding: 10px 6px;
        font-size: 0.75em;
        gap: 3px;
    }
    
    .account-tab span {
        font-size: 0.8em;
    }
    
    .account-tab i {
        font-size: 0.9em;
    }
    
    .account-card-title {
        font-size: 1em;
    }
    
    .account-action-btn {
        width: 100%;
        justify-content: center;
    }
    
    .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    
    .toast {
        min-width: auto;
        max-width: none;
    }
}

/* Legacy account modal styles removed - all styles now in redesigned section above */

/* Privacy & Imprint Pages */
.privacy-page {
    min-height: 100vh;
    background: var(--bg-color);
    color: var(--text-color);
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
}

.privacy-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

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

.privacy-header h1 {
    font-size: 2em;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.privacy-language-switcher {
    display: flex;
    align-items: center;
}

.language-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.language-select:hover {
    border-color: var(--accent-color);
}

.privacy-nav {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.privacy-nav a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.privacy-nav a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.privacy-content {
    margin-bottom: 40px;
}

.privacy-content section {
    margin-bottom: 40px;
}

.privacy-content h2 {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.privacy-content h3 {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 20px;
    margin-bottom: 10px;
}

.privacy-content p {
    margin-bottom: 15px;
    color: var(--text-color-light);
}

.privacy-content ul {
    margin: 15px 0;
    padding-left: 25px;
}

.privacy-content li {
    margin-bottom: 8px;
    color: var(--text-color-light);
}

.privacy-content a {
    color: var(--accent-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.privacy-content a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.privacy-content strong {
    color: var(--text-color);
    font-weight: 600;
}

.privacy-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    margin-top: 40px;
}

.privacy-footer a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.privacy-footer a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.privacy-footer span {
    color: var(--text-color-light);
}

/* Dark Mode Support */
body.dark-mode .privacy-page {
    background: var(--bg-color);
}

body.dark-mode .privacy-content a,
body.dark-mode .privacy-nav a,
body.dark-mode .privacy-footer a {
    color: var(--accent-color);
}

/* Responsive */
@media (max-width: 768px) {
    .privacy-container {
        padding: 20px 15px;
    }
    
    .privacy-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .privacy-header h1 {
        font-size: 1.5em;
    }
    
    .privacy-nav {
        flex-direction: column;
        gap: 10px;
    }
    
    .privacy-footer {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* Legal Links Card */
.legal-links-card {
    margin: 30px auto 20px auto;
    padding: 16px 20px;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
    font-size: 0.85em;
    max-width: 900px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.legal-links-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.legal-links-card a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease, color 0.2s ease;
    margin: 0 8px;
}

.legal-links-card a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.legal-separator {
    color: var(--text-color-light);
    margin: 0 4px;
    font-weight: 300;
}

/* Dark Mode Support for Legal Links Card */
body.dark-mode .legal-links-card {
    background: rgba(44, 44, 44, 0.85);
    border-color: var(--border-color);
}

body.dark-mode .legal-links-card a {
    color: var(--accent-color);
}

/* Responsive */
@media (max-width: 768px) {
    .legal-links-card {
        margin: 20px auto 15px auto;
        padding: 12px 16px;
        font-size: 0.8em;
        max-width: 90%;
    }
    
    .legal-links-card a {
        margin: 0 6px;
    }
}