frontend/styles.py

"""
Custom CSS styling
"""

import streamlit as st


def apply_custom_css():
    """Apply custom CSS styling to the Streamlit app with dark mode support"""
    st.markdown("""
<style>
    /* Clean typography */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

    * {
        font-family: 'Inter', sans-serif;
    }

    /* Main header - Light & Dark */
    .main-header {
        font-size: 2.8rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        letter-spacing: -0.02em;
    }

    .subtitle {
        font-size: 1rem;
        font-weight: 400;
        margin-bottom: 2rem;
    }

    /* Clean buttons - Adapt to theme */
    .stButton > button {
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .stButton > button:hover {
        border-color: #3b82f6;
        box-shadow: 0 4px 12px rgba(59,130,246,0.15);
        transform: translateY(-1px);
    }

    .stButton > button:active {
        transform: translateY(0);
    }

    /* Primary button */
    button[kind="primary"] {
        background: #3b82f6 !important;
        color: white !important;
        border: none !important;
    }

    button[kind="primary"]:hover {
        background: #2563eb !important;
    }

    /* Metrics */
    [data-testid="stMetricValue"] {
        font-size: 2rem;
        font-weight: 600;
    }

    /* Section headers - Light mode */
    [data-theme="light"] .section-header {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1a1a1a;
        margin: 1.5rem 0 1rem 0;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e5e7eb;
    }

    /* Section headers - Dark mode */
    [data-theme="dark"] .section-header {
        font-size: 1.25rem;
        font-weight: 600;
        color: #f3f4f6;
        margin: 1.5rem 0 1rem 0;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #374151;
    }

    /* Sidebar - Light mode */
    [data-theme="light"] [data-testid="stSidebar"] {
        background: #fafafa;
        border-right: 1px solid #e5e7eb;
    }

    /* Sidebar - Dark mode */
    [data-theme="dark"] [data-testid="stSidebar"] {
        background: #1f2937;
        border-right: 1px solid #374151;
    }

    /* Info boxes */
    .stAlert {
        border-radius: 8px;
        border-left: 3px solid;
    }

    /* Feedback block - Light mode */
    .feedback-block {
        padding: 1.25rem;
        border-radius: 8px;
        border-left: 3px solid #10b981;
    }

    [data-theme="light"] .feedback-block {
        background: linear-gradient(to bottom right, #ecfdf5, #f0fdf4);
        border: 1px solid #d1fae5;
        color: #064e3b;
    }

    /* Feedback block - Dark mode */
    [data-theme="dark"] .feedback-block {
        background: linear-gradient(to bottom right, #064e3b, #065f46);
        border: 1px solid #065f46;
        color: #d1fae5;
    }

    /* Center text style */
    .center-text {
        text-align: center;
        padding: 10px;
        font-weight: bold;
    }
</style>
""", unsafe_allow_html=True)