src/styles/main_styles.py

from src.utils.config import dark_theme

def get_base_styles():
    """Returns the base CSS styles for the page"""
    return f"""
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    
    html, body, [class*="css"] {{
        font-family: 'Inter', sans-serif;
        background-color: {dark_theme['bg_color']};
        color: {dark_theme['text_color']};
    }}
    
    h1, h2, h3, h4, h5, h6 {{
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        color: {dark_theme['heading_color']};
    }}
    
    .main {{
        background-color: {dark_theme['bg_color']};
    }}
    
    .title-container {{
        padding: 2rem 0;
        text-align: center;
        background: {dark_theme['gradient']};
        border-radius: 12px;
        color: white;
        margin-bottom: 2rem;
    }}
    
    .title {{
        font-size: 42px;
        font-weight: 700;
        margin-bottom: 10px;
        color: {dark_theme['title_color']};
    }}
    
    .subtitle {{
        font-size: 20px;
        font-weight: 400;
        opacity: 0.9;
        color: {dark_theme['subtitle_color']};
    }}
    
    .card {{
        background-color: {dark_theme['card_bg']};
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
        margin-bottom: 24px;
        transition: transform 0.2s, box-shadow 0.2s;
    }}
    
    .card:hover {{
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }}
    
    .card-title {{
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 16px;
        color: {dark_theme['text_color']};
        display: flex;
        align-items: center;
    }}
    
    .card-title-icon {{
        margin-right: 10px;
        font-size: 22px;
    }}
    
    .task-card {{
        background-color: {dark_theme['card_bg']};
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
        margin-bottom: 16px;
        border-left: 4px solid {dark_theme['task_border']};
    }}
    
    .task-title {{
        font-size: 18px;
        font-weight: 600;
        color: {dark_theme['task_title']};
        margin-bottom: 8px;
    }}
    
    .task-description {{
        font-size: 15px;
        color: {dark_theme['text_color']};
        line-height: 1.5;
    }}
    
    /* Button styling - completely new and modern */
    div.stButton > button {{
        background-color: {dark_theme['card_bg']};
        color: {dark_theme['text_color']};
        border: 1px solid {dark_theme['border']};
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 500;
        margin: 4px;
        transition: all 0.2s ease;
    }}
    
    div.stButton > button:hover {{
        background-color: {dark_theme['hover']};
        border-color: {dark_theme['border']};
        transform: translateY(-1px);
    }}
    
    /* Active button styling */
    div.stButton > button.selected {{
        background-color: {dark_theme['primary']} !important;
        color: white !important;
        border-color: {dark_theme['primary']} !important;
    }}
    
    /* Table styling */
    [data-testid="stDataFrame"] {{
        background-color: {dark_theme['card_bg']};
        border-radius: 12px;
        padding: 1px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    }}
    
    [data-testid="stDataFrame"] table {{
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }}
    
    [data-testid="stDataFrame"] th {{
        background-color: {dark_theme['table_header']} !important;
        color: {dark_theme['text_color']} !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        font-size: 13px !important;
        padding: 16px 10px !important;
    }}
    
    [data-testid="stDataFrame"] td {{
        padding: 12px 10px !important;
        border-bottom: 1px solid {dark_theme['table_border']} !important;
        font-size: 14px !important;
        color: {dark_theme['text_color']} !important;
    }}
    
    /* Hide row numbers */
    [data-testid="stDataFrame"] [data-testid="stDataFrameRowNumber"] {{
        display: none !important;
    }}
    
    /* Metric header styling */
    .metric-header {{
        background-color: {dark_theme['card_bg']};
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        border-left: 4px solid {dark_theme['primary']};
    }}
    
    .metric-header h3 {{
        margin: 0;
        color: {dark_theme['primary']};
    }}
    
    .metric-header p {{
        margin: 8px 0 0 0;
        font-size: 14px;
        opacity: 0.8;
    }}
    
    /* Rank column styling */
    .rank-cell {{
        font-weight: 700 !important;
        background-color: {dark_theme['primary'] + '22'};
        border-radius: 50%;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }}
    
    .rank-1 {{
        background-color: gold !important;
        color: #333 !important;
    }}
    
    .rank-2 {{
        background-color: silver !important;
        color: #333 !important;
    }}
    
    .rank-3 {{
        background-color: #cd7f32 !important; /* bronze */
        color: #fff !important;
    }}
    
    /* Tabs styling */
    .stTabs [data-baseweb="tab-list"] {{
        gap: 8px;
        margin-bottom: 20px;
    }}
    
    .stTabs [data-baseweb="tab"] {{
        border-radius: 8px 8px 0 0;
        padding: 12px 24px;
        font-weight: 500;
        background-color: {dark_theme['hover']};
        color: {dark_theme['text_color']};
    }}
    
    .stTabs [data-baseweb="tab"][aria-selected="true"] {{
        background-color: {dark_theme['primary']};
        color: white;
    }}
    
    .stTabs [data-baseweb="tab-highlight"] {{
        background-color: transparent;
    }}
    
    /* Alert/info box styling */
    .info-box {{
        background-color: {dark_theme['info_bg']};
        border-left: 4px solid {dark_theme['info_border']};
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        color: {dark_theme['text_color']};
    }}
    
    .warning-box {{
        background-color: {dark_theme['warning_bg']};
        border-left: 4px solid {dark_theme['warning_border']};
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        color: {dark_theme['text_color']};
    }}
    
    /* Download buttons styling */
    .download-button {{
        background-color: {dark_theme['bg_color']};
        border: 1px solid {dark_theme['border']};
        border-radius: 8px;
        padding: 12px 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: {dark_theme['text_color']};
        font-weight: 500;
        margin-top: 16px;
        cursor: pointer;
        transition: all 0.2s;
    }}
    
    .download-button:hover {{
        background-color: {dark_theme['hover']};
        border-color: {dark_theme['border']};
        transform: translateY(-1px);
    }}
    
    .download-button .icon {{
        margin-right: 8px;
    }}
    
    /* Footer styling */
    .footer {{
        text-align: center;
        padding: 24px;
        margin-top: 40px;
        color: {dark_theme['footer_color']};
        font-size: 14px;
        border-top: 1px solid {dark_theme['footer_border']};
    }}
    
    /* Badge styling for model types */
    .badge {{
        display: inline-block;
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 6px;
        margin-right: 6px;
    }}
    
    .badge-purple {{
        background-color: {dark_theme['primary'] + '33'};
        color: {dark_theme['primary']};
    }}
    
    .badge-blue {{
        background-color: {dark_theme['info_border'] + '33'};
        color: {dark_theme['info_border']};
    }}
    
    .selected-items {{
        background-color: {dark_theme['hover']};
        border-radius: 8px;
        padding: 12px 16px;
        margin-top: 16px;
        font-size: 14px;
    }}
    
    /* Selectbox styling */
    div[data-baseweb="select"] {{
        border-radius: 8px !important;
    }}
    
    div[data-baseweb="select"] > div {{
        background-color: {dark_theme['card_bg']} !important;
        border-radius: 8px !important;
        border-color: {dark_theme['border']} !important;
        color: {dark_theme['text_color']} !important;
    }}
    
    div[data-baseweb="select"] > div:hover {{
        border-color: {dark_theme['border']} !important;
    }}
    
    /* Table hover and value styling */
    .table-row:hover td {{
        background-color: #1a1a1a !important;
    }}
    .table-row:hover td.fixed-column {{
        background-color: #1a1a1a !important;
    }}
    .positive-value {{
        color: #4ade80 !important; /* Bright green for positive values */
        font-weight: 500;
    }}
    .negative-value {{
        color: #f87171 !important; /* Bright red for negative values */
        font-weight: 500;
    }}
    </style>
    """