ui/styles.py

"""
UI Styles for ARF Demo - LIGHT THEME FOR READABILITY
"""
import logging

logger = logging.getLogger(__name__)

def get_styles() -> str:
    """
    Return CSS styles for the ARF demo - LIGHT THEME FOR READABILITY
    """
    css = """
    /* ARF Demo Styles - Clean Light Theme */
    
    /* Fix for all text to be readable */
    body, .gr-box, .gr-form, .gr-panel, .gr-tab, .gr-container {
        background-color: #f8fafc !important;
        color: #1e293b !important;
    }
    
    /* Make all text black/dark */
    h1, h2, h3, h4, h5, h6, p, span, div, label, .markdown, .gr-markdown {
        color: #1e293b !important;
    }
    
    /* Header gradient - keep but ensure text is white */
    .header-gradient {
        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
        border-radius: 16px;
        padding: 30px 40px !important;
        color: white !important;
    }
    
    .header-gradient h1,
    .header-gradient h2,
    .header-gradient h3,
    .header-gradient p {
        color: white !important;
    }
    
    /* Status bar */
    .status-bar {
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px;
        padding: 15px !important;
    }
    
    /* Cards - white background with readable text */
    .arf-card, .gr-box, .gr-panel {
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        color: #1e293b !important;
    }
    
    /* Tab navigation */
    .tab-nav {
        background: white !important;
        border-bottom: 2px solid #e2e8f0 !important;
    }
    
    .tab-nav .tab {
        color: #64748b !important;
        padding: 12px 24px !important;
    }
    
    .tab-nav .tab.selected {
        color: #3b82f6 !important;
        background: #f8fafc !important;
        border: 2px solid #e2e8f0 !important;
        border-bottom-color: white !important;
    }
    
    /* Buttons */
    button {
        border-radius: 10px !important;
        font-weight: 600 !important;
    }
    
    button.primary {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
        color: white !important;
        border: none !important;
    }
    
    button.secondary {
        background: white !important;
        border: 2px solid #e2e8f0 !important;
        color: #1e293b !important;
    }
    
    /* Form elements */
    .gr-dropdown, .gr-slider, .gr-textbox, .gr-checkbox, .gr-radio {
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        color: #1e293b !important;
    }
    
    .gr-dropdown label, .gr-slider label, .gr-textbox label {
        color: #1e293b !important;
        font-weight: 600 !important;
    }
    
    /* Plots - ensure they have white background */
    .gr-plot, .plotly.js-plotly-plot {
        background: white !important;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
    }
    
    /* JSON display */
    .gr-json {
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px;
        color: #1e293b !important;
    }
    
    /* Dataframes */
    .gr-dataframe {
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px;
    }
    
    /* Agent cards */
    .agent-card {
        background: white !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 14px;
        color: #1e293b !important;
    }
    
    .agent-card.active {
        border-color: #10b981 !important;
        background: #f0fdf4 !important;
    }
    
    /* Metric cards */
    .metric-card {
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-left: 4px solid #3b82f6 !important;
        border-radius: 12px;
        color: #1e293b !important;
    }
    
    /* Footer */
    footer {
        background: #f1f5f9 !important;
        color: #64748b !important;
        border-top: 2px solid #e2e8f0 !important;
    }
    
    footer a {
        color: #3b82f6 !important;
    }
    
    /* Badges */
    .badge {
        color: white !important;
        font-weight: bold !important;
    }
    
    /* Ensure all HTML content has proper colors */
    .gr-html div, .gr-html span, .gr-html p, .gr-html h1, .gr-html h2, .gr-html h3, .gr-html h4 {
        color: #1e293b !important;
    }
    
    /* Fix for scenario card */
    .scenario-card {
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        color: #1e293b !important;
    }
    
    /* Make sure all text in the workflow section is readable */
    #tab1 .gr-markdown, 
    #tab1 .gr-html,
    #tab1 h1, #tab1 h2, #tab1 h3,
    #tab1 p, #tab1 span, #tab1 div {
        color: #1e293b !important;
    }
    
    /* Plot titles */
    .gr-plot h3, .gr-plot .plot-title {
        color: #1e293b !important;
    }
    
    /* Section headers */
    .section-header {
        color: #1e293b !important;
        border-bottom: 2px solid #e2e8f0 !important;
    }
    
    /* Fix for approval display */
    .approval-display {
        background: white !important;
        border: 2px solid #e2e8f0 !important;
        color: #1e293b !important;
    }
    
    /* OSS vs Enterprise sections */
    .oss-section, .enterprise-section {
        background: white !important;
        border: 2px solid #e2e8f0 !important;
        color: #1e293b !important;
    }
    
    .oss-section {
        border-color: #0ea5e9 !important;
    }
    
    .enterprise-section {
        border-color: #10b981 !important;
    }
    """
    
    return css


def get_installation_badges() -> str:
    """Get installation badge HTML - SIMPLIFIED VERSION"""
    return """
    <div style="display: flex; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
        <span style="padding: 4px 12px; background: #f59e0b; 
                    color: white; border-radius: 20px; font-size: 12px; font-weight: bold; 
                    display: flex; align-items: center; gap: 6px;">
            ⚠️ Checking ARF Installation...
        </span>
    </div>
    """

__all__ = ["get_styles", "get_installation_badges"]