src/styles/tables.py

"""
CSS styles for tables in the leaderboard application.
"""
from src.utils.config import dark_theme

def get_streamlit_table_styles():
    """
    Get CSS styles for standard Streamlit tables
    
    Returns:
        str: CSS string for Streamlit tables
    """
    return f"""
    /* Standard Streamlit 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;
    }}
    """

def get_custom_leaderboard_table_styles():
    """
    Get CSS styles for the custom leaderboard table
    
    Returns:
        str: CSS string for the custom leaderboard table
    """
    return f"""
    /* Custom leaderboard table styling */
    .fixed-table-container {{
        position: relative;
        max-width: 100%;
        margin-top: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        background: {dark_theme['table_bg']};
        border: 1px solid {dark_theme['table_border_color']};
    }}
    
    .fixed-table {{
        width: 100%;
        border-collapse: collapse;
        font-family: 'Inter', sans-serif;
    }}
    
    .fixed-column {{
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: {dark_theme['table_bg']};
    }}
    
    .first-fixed-column {{
        width: 60px;
        text-align: center;
        left: 0;
        z-index: 3;
        border-right: 1px solid {dark_theme['table_border_color']};
        box-shadow: 2px 0 4px rgba(0,0,0,0.3);
    }}
    
    .second-fixed-column {{
        width: 280px;
        text-align: center;
        left: 60px;
        z-index: 2;
        border-right: 1px solid {dark_theme['table_border_color']};
        box-shadow: 2px 0 4px rgba(0,0,0,0.3);
    }}
    
    /* Fix for the gap between fixed columns */
    .first-fixed-column::after {{
        content: "";
        position: absolute;
        top: 0;
        right: -1px;
        height: 100%;
        width: 1px;
        background-color: {dark_theme['table_border_color']};
    }}
    
    .model-type-cell {{
        width: 120px;
        text-align: center;
    }}
    
    .scroll-container {{
        overflow-x: auto;
        border-radius: 8px;
    }}
    
    .header-row th {{
        padding: 14px 8px;
        background-color: {dark_theme['table_bg']};
        color: {dark_theme['text_color']};
        font-weight: 600;
        border-bottom: 1px solid {dark_theme['table_border_color']};
    }}
    
    .metric-header {{
        background-color: {dark_theme['table_header_bg']} !important;
        color: #ffffff;
        padding: 14px 0px !important;
        text-align: center;
        font-weight: 600;
        letter-spacing: 0.5px;
    }}
    
    .sub-header th {{
        padding: 12px 8px;
        background-color: {dark_theme['table_subheader_bg']};
        color: {dark_theme['text_color']};
        font-weight: 500;
        text-align: center;
        border-bottom: 1px solid {dark_theme['table_border_color']};
    }}
    
    .sub-header th.overall-cell {{
        background-color: {dark_theme['table_average_column_bg']}; /* Slightly lighter black for average column */
        font-weight: 600; /* Make it bolder */
        border-right: 1px solid #444; /* Add a subtle border to separate it */
    }}
    
    .table-row:nth-child(odd) {{
        background-color: {dark_theme['table_row_odd']};
    }}
    
    .table-row:nth-child(even) {{
        background-color: {dark_theme['table_row_even']};
    }}
    
    .table-row:hover td {{
        background-color: {dark_theme['table_hover_bg']} !important;
    }}
    
    .table-row:hover td.fixed-column {{
        background-color: {dark_theme['table_hover_bg']} !important;
    }}
    
    .table-cell {{
        padding: 12px 8px;
        text-align: center;
        border-bottom: 1px solid #222;
    }}
    
    .table-cell.overall-cell {{
        background-color: rgba(80, 80, 80, 0.1); /* Subtle highlight */
        font-weight: 600; /* Make average values bolder */
        border-right: 1px solid #333; /* Add a border to separate it from task metrics */
    }}
    
    .positive-value {{
        color: {dark_theme['positive_value_color']} !important;
        font-weight: 500;
    }}
    
    .negative-value {{
        color: {dark_theme['negative_value_color']} !important;
        font-weight: 500;
    }}
    """

def get_metric_styles():
    """
    Get CSS styles for metric displays
    
    Returns:
        str: CSS string for metric displays
    """
    return f"""
    /* Metric 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;
    }}
    """

def get_all_table_styles():
    """
    Get all table styles combined
    
    Returns:
        str: Combined CSS string for all tables
    """
    styles = [
        get_streamlit_table_styles(),
        get_custom_leaderboard_table_styles(),
        get_metric_styles()
    ]
    
    return '\n'.join(styles)