:root {
    --bg-color: #000000;
    --text-color: #ffffff;

    --butto-background-color: rgb(0, 113, 227);
    --button-background-color-hover: rgb(0, 119, 237);
    --button-text-color: #fff;

    --button-outline-color: rgb(0, 110, 219);
    --button-outline-text-color: rgb(0, 110, 219);

    --capsule-bg: #1a1a1a;
    --capsule-shadow: rgba(0, 0, 0, 0.2);
    --input-color: #ffffff;
    --placeholder-color: rgba(255, 255, 255, 0.7);
    --expansion-bg: rgba(45, 45, 50, 0.75);

    --gradient-blue: #007AFF;
    --gradient-purple: #AF52DE;
    --gradient-pink: #FF2D55;
    --gradient-orange: #FF9500;
    
    /* Button Custom Properties - Dark Mode */
    --aap-accent-color: #0071e3;
    --aap-active-fill-color: #f5f5f7;
    --aap-background-color: rgb(66 66 69/70%);
    --aap-background-transition-duration: 250ms;
    --aap-blur: 7px;
    --aap-button-active: rgb(57 57 60/74.2%);
    --aap-button-hover: rgb(73 73 76/72.6%);
}

/* Light Theme */
:root[data-theme="light"] {
    --bg-color: #ffffff;
    --text-color: #1d1d1f;

    --butto-background-color: rgb(0, 113, 227);
    --button-background-color-hover: rgb(0, 119, 237);
    --button-text-color: #fff;

    --button-outline-color: rgb(0, 110, 219);
    --button-outline-text-color: rgb(0, 110, 219);

    --capsule-bg: rgba(255, 255, 255, 0.95);
    --capsule-shadow: rgba(0, 0, 0, 0.1);
    --input-color: #333;
    --placeholder-color: rgba(0, 0, 0, 0.6);
    --expansion-bg: rgba(245, 245, 250, 0.75);
    
    /* Button Custom Properties - Light Mode */
    --aap-background-color: rgba(232,232,237,0.7);
    --aap-blur: 7px;
    --aap-bubble-background-color: #1d1d1f;
    --aap-button-active: rgba(193,193,198,0.654);
    --aap-button-hover: rgba(223,223,227,0.698);
}

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

body {
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: auto;
    padding-bottom: 100px; /* Platz für Footer + zusätzlicher Abstand */
    font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont,
        "Helvetica Neue", Arial, sans-serif;
}

/* Diagramm-Modal Styles */
.chart-modal-container {
    width: 800px;
    min-width: 800px;
    max-width: 800px;
    height: 750px;
    min-height: 750px;
}

.chart-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chart-tabs {
    display: flex;
    width: 401px;
    height: 51px;
    background-color: rgba(240, 240, 242, 0.7);
    border-radius: 25.5px;
    padding: 5px;
    margin-bottom: 15px;
    gap: 0;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.chart-tab {
    width: 133px;
    height: 41px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 400;
    color: rgb(29, 29, 31);
    position: relative;
    border-radius: 20.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-tab:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.03);
}

.chart-tab.active {
    background-color: rgb(29, 29, 31);
    color: #fff;
    font-weight: 400;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}

/* Dark Mode Anpassungen */
:root[data-theme="dark"] .chart-tabs {
    background-color: rgba(50, 50, 52, 0.6);
}

:root[data-theme="dark"] .chart-tab {
    color: rgba(255, 255, 255, 0.8);
}

:root[data-theme="dark"] .chart-tab:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .chart-tab.active {
    background-color: rgb(245, 245, 247);
    color: rgb(0, 0, 0);
}

.chart-display {
    height: 580px;
    min-height: 580px;
    max-height: 580px;
    width: 100%;
    padding: 20px;
    border-radius: 8px;
    background-color: var(--aap-background-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-display canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-description {
    padding: 20px;
    background-color: rgb(241, 246, 252);
    border-radius: 12px;
    border: 1px solid rgb(222, 231, 251);
    margin-top: 20px;
}

.chart-description h4 {
    margin: 0;
    color: rgb(71, 122, 154);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
}

.chart-description p {
    margin: 0;
    color: rgb(71, 85, 105);
    font-size: 15px;
    line-height: 1.5;
}

.chart-description h4:not(:first-child) {
    margin-top: 16px;
}

/* Mobile Anpassungen für das Modal */
@media screen and (max-width: 768px) {
    .chart-modal-container {
        width: calc(100vw - 30px);
        max-width: 95%;
        min-width: auto;
        margin: 20px;
        max-height: calc(100vh - 40px);
    }
    
    .chart-content {
        overflow-y: auto;
        max-height: calc(100vh - 200px);
        padding-bottom: 80px; /* Platz für sticky navigation */
    }
    
    /* Verstecke das normale segmented control auf Mobile */
    .chart-tabs {
        display: none !important;
    }
    
    /* Mobile Chart Navigation Styling - unten positioniert */
    .mobile-chart-navigation {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        z-index: 1000;
        padding: 6px;
        border-radius: 26px;
        margin-top: 20px;
        margin-bottom: 15px;
        justify-content: center;
        order: 3; /* Erscheint nach chart-display und chart-description */
        position: sticky;
        bottom: 15px;
        background-color: var(--bg-color, #ffffff);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        
        /* Liquid Glass Effect - gleich wie mobile-action-buttons */
        background-color: color-mix(in srgb, var(--c-glass) 8%, transparent);
        backdrop-filter: blur(12px) saturate(var(--saturation));
        -webkit-backdrop-filter: blur(12px) saturate(var(--saturation));
        box-shadow: inset 0 0 0 1px
            color-mix(
                in srgb,
                var(--c-light) calc(var(--glass-reflex-light) * 8%),
                transparent
            ),
            inset 1.5px 2.5px 0px -1.5px color-mix(in srgb, var(--c-light)
                calc(var(--glass-reflex-light) * 70%), transparent),
            inset -1.5px -1.5px 0px -1px color-mix(in srgb, var(--c-light)
                calc(var(--glass-reflex-light) * 60%), transparent),
            inset -2px -6px 1px -4px color-mix(in srgb, var(--c-light)
                calc(var(--glass-reflex-light) * 40%), transparent),
            inset -0.2px -0.8px 3px 0px
            color-mix(
                in srgb,
                var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
                transparent
            ),
            inset -1px 2px 0px -1px
            color-mix(
                in srgb,
                var(--c-dark) calc(var(--glass-reflex-dark) * 15%),
                transparent
            ),
            inset 0px 2px 3px -1px color-mix(in srgb, var(--c-dark)
                calc(var(--glass-reflex-dark) * 15%), transparent),
            inset 1.5px -5px 1px -3px
            color-mix(
                in srgb,
                var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
                transparent
            ),
            0px 1px 4px 0px
            color-mix(
                in srgb,
                var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
                transparent
            ),
            0px 4px 12px 0px
            color-mix(
                in srgb,
                var(--c-dark) calc(var(--glass-reflex-dark) * 6%),
                transparent
            );
    }
    
    /* Einzelne Mobile Chart Buttons */
    .mobile-chart-button {
        width: 52px;
        height: 52px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        margin: 0;
        background: transparent;
        border-radius: 50%;
    }
    
    .mobile-chart-button.active {
        background-color: rgba(29, 29, 31, 0.1);
    }

    .mobile-chart-button img,
    .mobile-chart-button i {
        width: 24px;
        height: 24px;
        font-size: 24px;
        filter: brightness(0);
        transition: all 200ms cubic-bezier(0.5, 0, 0, 1);
    }
    
    .mobile-chart-button.active img,
    .mobile-chart-button.active i {
        filter: brightness(0) saturate(100%) invert(27%) sepia(100%) saturate(4000%) hue-rotate(220deg) brightness(95%) contrast(100%);
    }

    /* Dark Mode Icon-Filter für Chart Buttons */
    :root[data-theme="dark"] .mobile-chart-button img,
    :root[data-theme="dark"] .mobile-chart-button i {
        filter: brightness(1) invert(1);
    }
    
    :root[data-theme="dark"] .mobile-chart-button.active img,
    :root[data-theme="dark"] .mobile-chart-button.active i {
        filter: brightness(0) saturate(100%) invert(27%) sepia(100%) saturate(4000%) hue-rotate(220deg) brightness(95%) contrast(100%);
    }
    
    :root[data-theme="dark"] .mobile-chart-button.active {
        background-color: rgba(245, 245, 247, 0.1);
    }
    
    /* Dark Mode für sticky navigation background */
    :root[data-theme="dark"] .mobile-chart-navigation {
        background-color: var(--aap-background-color, #1b1b1d);
    }
    
    .chart-tab {
        flex-shrink: 0;
        width: auto;
        min-width: 110px;
    }

    .chart-tab[data-chart="coverage"] {
        min-width: 120px;
    }

    :root[data-theme="dark"] .chart-tabs {
        background-color: rgba(50, 50, 52, 0.7);
    }

    :root[data-theme="dark"] .chart-tab.active {
        background-color: rgb(245, 245, 247);
        color: rgb(0, 0, 0);
    }
}

/* Desktop - verstecke Mobile Chart Navigation */
@media screen and (min-width: 769px) {
    .mobile-chart-navigation {
        display: none !important;
    }
}

/* Sehr kleine Mobile Geräte für Charts */
@media screen and (max-width: 480px) {
    .chart-modal-container {
        width: calc(100vw - 20px);
        margin: 10px;
        max-height: calc(100vh - 20px);
    }
    
    .chart-content {
        overflow-y: auto;
        max-height: calc(100vh - 160px);
        padding-bottom: 70px; /* Platz für sticky navigation */
    }
    
    /* Mobile Chart Navigation für kleine Geräte */
    .mobile-chart-navigation {
        padding: 5px;
        border-radius: 23px;
        gap: 6px;
        margin-top: 15px;
        bottom: 10px;
    }
    
    .mobile-chart-button {
        width: 46px;
        height: 46px;
    }
    
    .mobile-chart-button img,
    .mobile-chart-button i {
        width: 20px;
        height: 20px;
        font-size: 20px;
    }
    
    .chart-tabs {
        max-width: 320px;
    }
    
    .chart-tab {
        min-width: 100px;
    }
    
    .chart-tab[data-chart="coverage"] {
        min-width: 110px;
    }
}

/* Landscape Orientation für Charts */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .chart-modal-container {
        max-height: calc(100vh - 20px);
    }
    
    .chart-content {
        overflow-y: auto;
        max-height: calc(100vh - 120px);
    }
}

/* Dark Mode Anpassungen für den Close Button */
:root[data-theme="dark"] .modal-close {
    background-color: rgb(245, 245, 247);
}

:root[data-theme="dark"] .modal-close i {
    color: rgb(0, 0, 0);
}

:root[data-theme="dark"] .modal-close:hover {
    background-color: rgb(223, 223, 227);
}

:root[data-theme="dark"] .modal-close:active {
    background-color: rgb(209, 209, 214);
}

/* Dark Mode Anpassungen für Modal Header und Footer */
:root[data-theme="dark"] .modal-header {
    background-color: rgba(30, 30, 32, 0.7);
}

:root[data-theme="dark"] .modal-footer {
    background-color: rgba(30, 30, 32, 0.7);
}

/* Dark Mode Anpassungen für Charts und Chart-Modals */
:root[data-theme="dark"] .chart-description h4 {
    color: rgb(54, 162, 235);
}

:root[data-theme="dark"] .chart-description p {
    color: rgb(255, 255, 255);
}

:root[data-theme="dark"] .chart-description {
    background-color: rgb(18, 24, 40);
    border: 1px solid rgba(54, 162, 235, 0.5);
}

:root[data-theme="dark"] .chart-display {
    background-color: rgb(30, 30, 32);
    border-radius: 8px;
}

:root[data-theme="dark"] .modal-content {
    color: rgb(255, 255, 255);
}

:root[data-theme="dark"] .modal-container {
    background-color: rgb(30, 30, 32);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .modal-header h3 {
    color: rgb(255, 255, 255);
}

:root[data-theme="dark"] .modal-footer .modal-btn-primary {
    background-color: rgb(0, 113, 227);
    color: rgb(255, 255, 255);
}

:root[data-theme="dark"] .modal-footer .modal-btn-primary:hover {
    background-color: rgb(0, 118, 223);
}

:root[data-theme="dark"] .modal-footer .modal-btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgb(255, 255, 255);
}

:root[data-theme="dark"] .modal-footer .modal-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
}