src/styling.py

import pandas as pd

def get_academic_css() -> str:
    return """
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

    :root {
        /* Light mode (default) */
        --primary: #2563eb;
        --primary-dark: #1d4ed8;
        --accent: #06b6d4;
        --text-primary: #1a1a1a;
        --text-secondary: #4a4a4a;
        --text-muted: #666666;
        --border: #e5e5e5;
        --success: #10b981;
        --danger: #ef4444;

        /* Table colors */
        --table-header: #64748b;
        --table-header-light: #94a3b8;
        --table-border: #cbd5e0;
        --table-bg-odd: #f8fafc;
        --table-bg-even: #f1f5f9;
        --table-bg-hover: #e2e8f0;
        --best-score-bg: #e6fffa;
        --best-score-color: #2c7a7b;
        --category-bg: #e2e8f0;
        --category-color: #475569;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --primary: #3b82f6;
            --primary-dark: #2563eb;
            --accent: #22d3ee;
            --text-primary: #ecf0f1;
            --text-secondary: #b0b0b0;
            --text-muted: #94a3b8;
            --border: #3a4a5a;
            --success: #34d399;
            --danger: #f87171;

            --table-header: #4a5a6a;
            --table-header-light: #5a6a7a;
            --table-border: #3a4a5a;
            --table-bg-odd: #2a3745;
            --table-bg-even: #1e2b38;
            --table-bg-hover: #354454;
            --best-score-bg: #1a3a3a;
            --best-score-color: #7fc9c9;
            --category-bg: #3a4a5a;
            --category-color: #cbd5e0;
        }
    }

    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        color: var(--text-primary);
        margin: 0;
        padding: 0;
        /* Background set by system */
    }

    .gradio-container {
        max-width: 1400px !important;
        /* Background set by system */
        color: var(--text-primary);
    }

    h1 {
        color: var(--primary) !important;
        font-weight: 700 !important;
    }

    .subtitle {
        color: var(--text-secondary);
        font-size: 1.1rem;
        margin-top: 0.5rem;
        opacity: 0.8;
    }

    .emoji {
        font-size: 1.5em;
    }

    /* Title row links (aligned with LaTeX: magenta / teal / black / orange–yellow + FA icons) */
    .project-links-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: clamp(1rem, 3vw, 2.65rem);
        margin: 0.85rem auto 0.25rem;
        font-size: 1rem;
        line-height: 1.45;
        max-width: 100%;
    }

    .project-links-bar .pl-link {
        text-decoration: none;
        white-space: nowrap;
    }

    .project-links-bar .pl-link:hover {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .project-links-bar .pl-link em {
        font-style: italic;
        font-weight: 500;
    }

    .project-links-bar .pl-link i.fa-solid {
        margin-right: 0.28em;
    }

    .pl-project { color: #c026d3; }
    .pl-dataset { color: #0d9488; }
    .pl-code { color: #111827; }
    .pl-leaderboard { color: #eab308; }

    @media (prefers-color-scheme: dark) {
        .pl-code { color: #e5e7eb; }
        .pl-leaderboard { color: #fcd34d; }
    }

    /* Leaderboard table styling */
    .leaderboard-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
        margin-top: 1rem;
        border: 1px solid var(--table-border);
        background-color: transparent;
    }

    .leaderboard-table th {
        background: var(--table-header);
        color: white;
        padding: 12px 8px;
        text-align: center;
        font-weight: 600;
        position: sticky;
        top: 0;
        border-right: 1px solid rgba(255,255,255,0.15);
        cursor: pointer;  /* Indicate sortable */
    }

    .leaderboard-table th:last-child {
        border-right: none;
    }

    .leaderboard-table th:hover {
        background-color: var(--table-header-light);
    }

    .leaderboard-table td {
        padding: 10px 8px;
        text-align: center;
        border-bottom: 1px solid var(--table-border);
        border-right: 1px solid var(--table-border);
        color: var(--text-secondary);
    }

    .leaderboard-table td:last-child {
        border-right: none;
    }

    .leaderboard-table tr:nth-child(odd) {
        background-color: var(--table-bg-odd);
    }

    .leaderboard-table tr:nth-child(even) {
        background-color: var(--table-bg-even);
    }

    .leaderboard-table tr:hover {
        background-color: var(--table-bg-hover) !important;
    }

    /* Rank styles */
    .rank-1 { background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%) !important; font-weight: bold; color: #1a1a1a !important; }
    .rank-2 { background: linear-gradient(135deg, #c0c0c0 0%, #e5e7eb 100%) !important; font-weight: bold; color: #1a1a1a !important; }
    .rank-3 { background: linear-gradient(135deg, #cd7f32 0%, #fdba74 100%) !important; font-weight: bold; color: #1a1a1a !important; }

    /* Best score highlight */
    .best-score {
        font-weight: 700;
        color: var(--best-score-color);
        background: var(--best-score-bg) !important;
    }

    /* Category row (for group headers) */
    .category-row {
        background: var(--category-bg) !important;
        font-weight: 600;
        color: var(--category-color);
        text-align: left;
        font-size: 0.85rem;
    }

    .category-row td {
        padding: 10px 15px;
        color: var(--category-color);
        border-bottom: 2px solid var(--table-border);
    }

    .check { 
        color: var(--success); 
        font-weight: bold;
        font-size: 1.2em;
    }

    .cross { 
        color: var(--danger); 
        font-weight: bold;
        font-size: 1.2em;
    }

    .category-tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    .cat-text { background: #dbeafe; color: #1e40af; }
    .cat-onehot { background: #d1fae5; color: #065f46; }
    .cat-camera { background: #fef3c7; color: #92400e; }

    /* Links */
    .leaderboard-table a {
        color: var(--primary);
        text-decoration: none;
        font-size: 1.2rem;
    }
    .leaderboard-table a:hover {
        opacity: 0.7;
    }

    /* Buttons */
    button.primary {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
        color: white !important;
        border: none;
    }

    /* Status indicators (hidden) */
    .status-success { color: var(--success); }
    .status-error { color: var(--danger); }
    """

def dataframe_to_html(df: pd.DataFrame) -> str:
    if df.empty:
        return "<div class='placeholder'>No data available</div>"

    # Include sorttable.js for column sorting
    html = ['<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>']
    html.append('<table class="leaderboard-table sortable">')
    html.append("<thead><tr>")
    for col in df.columns:
        html.append(f"<th>{col}</th>")
    html.append("</tr></thead>")
    html.append("<tbody>")
    for idx, row in df.iterrows():
        rank_class = ""
        if "Rank" in df.columns:
            rank = row["Rank"]
            if rank == 1:
                rank_class = "rank-1"
            elif rank == 2:
                rank_class = "rank-2"
            elif rank == 3:
                rank_class = "rank-3"
        html.append(f'<tr class="{rank_class}">')
        for col in df.columns:
            val = row[col]
            if col == "Category":
                cat_class = {
                    "Text-Conditioned": "cat-text",
                    "One-hot": "cat-onehot",
                    "Intrinsics/Extrinsics": "cat-camera"
                }.get(val, "")
                val = f'<span class="category-tag {cat_class}">{val}</span>'
            html.append(f"<td>{val}</td>")
        html.append("</tr>")
    html.append("</tbody></table>")
    return "".join(html)