styles.py

import streamlit as st

def apply_enhanced_custom_css():
    current_theme = st.session_state.get("theme", "dark")
    
    colors = {
        "light": {
            "bg_primary": "#e0f2f7",
            "bg_secondary": "#b3e5ee",
            "text_primary": "#1a1a1a",
            "text_secondary": "#1a1a1a",
            "border": "rgba(0, 0, 0, 0.1)",
            "shadow": "rgba(0, 0, 0, 0.1)",
            "input_bg": "#b3e5ee",
            "input_border": "#e0e0e0",
            "title_gradient": "linear-gradient(120deg, #06b6d4, #0891b2, #06b6d4)",
            "typical_question_bg": "#b3e5ee",
            "typical_question_text": "#1a1a1a",
            "header_bg": "#b3e5ee",
            "footer_bg": "#b3e5ee",
            "button_bg": "#b3e5ee",
            "button_text": "#1a1a1a",
            "input_text": "#000000",
            "input_placeholder": "rgba(0, 0, 0, 0.6)",
            "chat_message_bg": "rgba(179, 229, 238, 0.7)",
            "button_hover_bg": "#0891b2",
            "button_hover_text": "#FFFFFF",
            "input_focus_border": "#0891b2"
        },
        "dark": {
            "bg_primary": "#04768a",
            "bg_secondary": "#035d6d",
            "text_primary": "#ffffff",
            "text_secondary": "#ffffff",
            "border": "rgba(255, 255, 255, 0.2)",
            "shadow": "rgba(0, 0, 0, 0.3)",
            "input_bg": "#035d6d",
            "input_border": "#04768a",
            "title_gradient": "linear-gradient(120deg, #00ffff, #00ccff, #00ffff)",
            "typical_question_bg": "#024857",
            "typical_question_text": "#ffffff",
            "header_bg": "#035d6d",
            "footer_bg": "#035d6d",
            "button_bg": "#024857",
            "button_text": "#ffffff",
            "input_text": "#ffffff",
            "input_placeholder": "rgba(255, 255, 255, 0.6)",
            "chat_message_bg": "rgba(3, 93, 109, 0.7)",
            "button_hover_bg": "#046d82",
            "button_hover_text": "#ffffff",
            "input_focus_border": "#00ccff"
        }
    }
    
    theme_colors = colors[current_theme]
    
    css = f"""
    <style>
    /* Grundlegende Stile */
    h1 {{
        background: {theme_colors["title_gradient"]};
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradient 3s ease infinite;
        font-weight: bold;
        margin-bottom: 2rem;
        filter: brightness(1.2);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }}

    @keyframes gradient {{
        0% {{ background-position: 0% 50%; }}
        50% {{ background-position: 100% 50%; }}
        100% {{ background-position: 0% 50%; }}
    }}

    /* App Container */
    .stApp {{
        background-color: {theme_colors["bg_primary"]};
        transition: background-color 0.5s ease-in-out;
    }}

    /* Header Styling */
    header[data-testid="stHeader"] {{
        background-color: {theme_colors["bg_secondary"]} !important;
        transition: background-color 0.5s ease-in-out;
    }}

    .stApp > header {{
        background-color: {theme_colors["bg_secondary"]} !important;
    }}

    /* Sidebar Styling */
    section[data-testid="stSidebar"] > div {{
        background-color: {theme_colors["bg_secondary"]} !important;
        transition: background-color 0.5s ease-in-out;
        border-right: 1.5px solid {theme_colors["border"]};
    }}

    section[data-testid="stSidebar"] * {{
        color: {theme_colors["text_secondary"]} !important;
    }}

    /* Chat Message Styling */
    .stChatMessage,
    .stChatMessage p,
    .stMarkdown p,
    .stMarkdown li,
    .stMarkdown strong,
    .stMarkdown span,
    .stMarkdown div {{
        color: {theme_colors["text_primary"]} !important;
        transition: color 0.3s ease-in-out;
    }}

    div.stChatMessage {{
        background-color: {theme_colors["chat_message_bg"]} !important;
        border-radius: 10px !important;
        padding: 1rem !important;
        margin: 0.5rem 0 !important;
        box-shadow: 0 2px 4px {theme_colors["shadow"]} !important;
        transition: background-color 0.3s ease-in-out;
    }}

    /* Markdown und Listen Styling */
    .stMarkdown strong,
    .stMarkdown b {{
        font-weight: bold !important;
        color: {theme_colors["text_primary"]} !important;
    }}

    .stMarkdown ul,
    .stMarkdown ol {{
        padding-left: 1.5em !important;
    }}

    .stMarkdown li::marker {{
        color: {theme_colors["text_primary"]} !important;
    }}

    /* Chat Input Styling */
    .stChatInput {{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw !important;
        padding: 1rem;
        background-color: {theme_colors["bg_secondary"]};
        border-top: 1px solid {theme_colors["border"]};
        box-shadow: 0 -2px 10px {theme_colors["shadow"]};
        z-index: 1000;
        margin: 0;
        transition: all 0.3s ease-in-out;
    }}

    .stChatInput > div {{
        width: 65% !important;
        margin-left: 35.5% !important;
        margin-right: 0% !important;
        background-color: transparent !important;
    }}

    .stChatInput input,
    .stChatInput textarea {{
        background-color: {theme_colors["input_bg"]} !important;
        color: {theme_colors["input_text"]} !important;
        border: 1px solid {theme_colors["input_border"]} !important;
        border-radius: 20px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.95rem !important;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 2px 4px {theme_colors["shadow"]};
        width: 100% !important;
        caret-color: {theme_colors["input_text"]} !important;
    }}

    .stChatInput input::placeholder {{
        color: {theme_colors["input_placeholder"]} !important;
        opacity: 1 !important;
    }}

    /* Button Styling */
    .stButton button {{
        background-color: {theme_colors["button_bg"]} !important;
        color: {theme_colors["button_text"]} !important;
        border: 1px solid {theme_colors["border"]} !important;
        transition: all 0.3s ease !important;
    }}

    .stButton button:hover {{
        background-color: {theme_colors["button_hover_bg"]} !important;
        color: {theme_colors["button_hover_text"]} !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }}

    /* Dark Mode Text Colors und Spezifische Elemente */
    [data-theme="dark"] .element-container div,
    [data-theme="dark"] .element-container p,
    [data-theme="dark"] .element-container span,
    [data-theme="dark"] .element-container td,
    [data-theme="dark"] .element-container th,
    [data-theme="dark"] .stMarkdown li,
    [data-theme="dark"] .stMarkdown p,
    [data-theme="dark"] .stMarkdown span,
    [data-theme="dark"] .stMarkdown strong,
    [data-theme="dark"] .stDataFrame td,
    [data-theme="dark"] .stDataFrame th,
    [data-theme="dark"] .streamlit-expanderContent div,
    [data-theme="dark"] .streamlit-expanderContent p,
    [data-theme="dark"] .streamlit-expanderContent span,
    [data-theme="dark"] div[data-testid="stMetricValue"],
    [data-theme="dark"] div[data-testid="stMetricLabel"] div,
    [data-theme="dark"] div[data-testid^="stMetricLabel"] p,
    [data-theme="dark"] div[class*="st-emotion-cache-"] {{
        color: {theme_colors["text_primary"]} !important;
    }}

    /* Qualitätsmetriken Styling */
    [data-theme="dark"] div[data-testid="stTable"] * {{
        color: {theme_colors["text_primary"]} !important;
    }}

    [data-theme="dark"] td,
    [data-theme="dark"] th {{
        color: {theme_colors["text_primary"]} !important;
    }}

    /* Clear Tooltips */
    [role="tooltip"],
    [data-baseweb="tooltip"],
    [data-baseweb="popover"] {{
        display: none !important;
    }}

    /* Sicherstellen dass die Typical Questions sichtbar sind */
    .stButton {{
        visibility: visible !important;
        display: block !important;
    }}
    </style>
    """
    
    st.markdown(css, unsafe_allow_html=True)