coursecrafter/ui/styling.py

"""
🎨 Styling and CSS for CourseCrafter UI

Custom styling for Gradio components.
"""

def get_custom_css() -> str:
    """Get custom CSS for the CourseCrafter interface"""

    return """
    /* CourseCrafter AI Custom Styling - Dark Theme */

    /* Global dark theme overrides */
    .gradio-container {
        background: #1a1a2e !important;
        color: #e0e7ff !important;
    }

    .header-container {
        text-align: center;
        padding: 2rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        margin-bottom: 2rem;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .header-container h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        font-weight: bold;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .header-container p {
        font-size: 1.1rem;
        opacity: 0.9;
    }

    .progress-container {
        padding: 1rem;
        background: #2d2d54;
        border-radius: 8px;
        border-left: 4px solid #667eea;
        margin: 1rem 0;
        color: #e0e7ff;
    }

    .success {
        color: #28a745 !important;
        font-weight: bold;
        padding: 0.5rem;
        background: #1e4d2b;
        border-radius: 4px;
        border: 1px solid #28a745;
    }

    .error {
        color: #dc3545 !important;
        font-weight: bold;
        padding: 0.5rem;
        background: #4d1e1e;
        border-radius: 4px;
        border: 1px solid #dc3545;
    }

    .warning {
        color: #ffc107 !important;
        font-weight: bold;
        padding: 0.5rem;
        background: #4d3d1e;
        border-radius: 4px;
        border: 1px solid #ffc107;
    }

    .progress {
        color: #17a2b8 !important;
        font-weight: bold;
        padding: 0.5rem;
        background: #1e3d4d;
        border-radius: 4px;
        border: 1px solid #17a2b8;
    }

    .flashcard {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1rem;
        margin: 0.5rem 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .quiz {
        background: #e3f2fd;
        border: 1px solid #bbdefb;
        border-radius: 8px;
        padding: 1rem;
        margin: 0.5rem 0;
    }

    /* Dark theme form inputs */
    .gradio-textbox, .gradio-dropdown, .gradio-slider {
        background: #2d2d54 !important;
        border: 2px solid #4a4a7a !important;
        border-radius: 8px !important;
        color: #e0e7ff !important;
        transition: border-color 0.3s ease !important;
    }

    .gradio-textbox:focus, .gradio-dropdown:focus {
        border-color: #667eea !important;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
        background: #3a3a6b !important;
    }

    .gradio-textbox::placeholder {
        color: #8b9dc3 !important;
    }

    /* Button styling */
    .gradio-button {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border: none !important;
        border-radius: 8px !important;
        color: white !important;
        font-weight: bold !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
    }

    .gradio-button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 12px rgba(0,0,0,0.4) !important;
    }

    /* Ensure all buttons use the same blue theme */
    button {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border: none !important;
        border-radius: 8px !important;
        color: white !important;
        font-weight: bold !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
    }

    button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 12px rgba(0,0,0,0.4) !important;
    }

    /* Tab styling */
    .gradio-tabs {
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #2d2d54 !important;
    }

    .gradio-tab {
        background: #3a3a6b !important;
        border: 1px solid #4a4a7a !important;
        padding: 0.75rem 1.5rem !important;
        font-weight: 500 !important;
        color: #b8c5d6 !important;
        transition: all 0.3s ease !important;
    }

    .gradio-tab.selected {
        background: #667eea !important;
        color: white !important;
        border-color: #667eea !important;
    }

    .gradio-tab:hover:not(.selected) {
        background: #4a4a7a !important;
        color: #e0e7ff !important;
    }

    /* Labels and text */
    label {
        color: #e0e7ff !important;
        font-weight: 500 !important;
    }

    /* Slider styling */
    .gradio-slider input[type="range"] {
        background: #4a4a7a !important;
    }

    .gradio-slider input[type="range"]::-webkit-slider-thumb {
        background: #667eea !important;
    }

    .gradio-slider input[type="range"]::-moz-range-thumb {
        background: #667eea !important;
    }

    /* Course content styling */
    .lessons-container {
        max-height: 600px;
        overflow-y: auto;
        padding: 1rem;
    }

    .lesson-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1.5rem;
        margin: 1rem 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .lesson-card h3 {
        color: #667eea;
        margin-bottom: 1rem;
    }

    .flashcards-container {
        max-height: none !important;
        overflow: visible !important;
        padding: 1rem;
    }

    .quiz-container {
        max-height: none !important;
        overflow: visible !important;
        padding: 1rem;
    }

    /* Chat interface styling - Dark Theme */
    .chat-window {
        background: #2d2d54 !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        margin: 1rem 0 !important;
        border: 1px solid #4a4a7a !important;
    }

    .chat-messages {
        max-height: 400px !important;
        overflow-y: auto !important;
        padding: 0.5rem !important;
    }

    .chat-message {
        margin: 1rem 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .chat-message.user-message {
        flex-direction: row-reverse !important;
    }

    .chat-message.assistant-message {
        flex-direction: row !important;
    }

    .message-avatar {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: #667eea !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.2rem !important;
        flex-shrink: 0 !important;
    }

    .user-message .message-avatar {
        background: #764ba2 !important;
    }

    .message-content {
        flex: 1 !important;
        max-width: 70% !important;
    }

    .message-text {
        background: #3a3a6b !important;
        color: #e0e7ff !important;
        padding: 0.75rem 1rem !important;
        border-radius: 12px !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
    }

    .user-message .message-text {
        background: #667eea !important;
        color: white !important;
    }

    .assistant-message .message-text {
        background: #4a4a7a !important;
        color: #e0e7ff !important;
    }

    .info {
        background: #2d3748 !important;
        border: 1px solid #4a5568 !important;
        border-radius: 8px !important;
        padding: 1rem !important;
        color: #a0aec0 !important;
        text-align: center !important;
        font-style: italic !important;
    }

    /* Note: Flashcard styling is now handled inline in the format_flashcards function */

    /* Note: Quiz styling is now handled inline in the format_quiz function */

    /* Note: Lesson styling is now handled inline in the format_lessons function */

    /* Enhanced Course Header Styling */
    .course-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        padding: 2rem !important;
        border-radius: 12px !important;
        margin: 1rem 0 !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
        text-align: center !important;
    }

    .course-header h1 {
        font-size: 2.2rem !important;
        margin-bottom: 1rem !important;
        font-weight: bold !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
        color: white !important;
    }

    .course-stats {
        display: flex !important;
        justify-content: center !important;
        gap: 1.5rem !important;
        flex-wrap: wrap !important;
        margin-top: 1rem !important;
    }

    .course-stats .stat {
        background: rgba(255,255,255,0.2) !important;
        padding: 0.5rem 1rem !important;
        border-radius: 20px !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        color: white !important;
        backdrop-filter: blur(10px) !important;
    }

    /* Progress Tracker Styling */
    .step-indicator {
        background: #2d2d54 !important;
        border: 2px solid #4a4a7a !important;
        border-radius: 12px !important;
        padding: 1.5rem !important;
        margin: 1rem 0 !important;
        color: #e0e7ff !important;
        text-align: center !important;
    }

    .step-indicator.active {
        border-color: #667eea !important;
        background: #3a3a6b !important;
    }

    .step-indicator.complete {
        border-color: #28a745 !important;
        background: #1e4d2b !important;
        color: #28a745 !important;
    }

    .step-icon {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    .step-text {
        font-size: 1.2rem !important;
        font-weight: bold !important;
        margin-bottom: 0.5rem !important;
    }

    .step-message {
        font-size: 0.9rem !important;
        opacity: 0.8 !important;
    }

    /* Note: All component-specific styling is now handled inline for better dark theme support */

    /* Responsive design */
    @media (max-width: 768px) {
        .header-container h1 {
            font-size: 2rem;
        }

        .header-container p {
            font-size: 1rem;
        }

        .lesson-card {
            padding: 1rem;
        }
    }
    """


def get_theme_colors() -> dict:
    """Get theme color palette"""

    return {
        "primary": "#d068a5",
        "secondary": "#764ba2",
        "success": "#37cb5a",
        "error": "#dc3545",
        "warning": "#eec54c",
        "info": "#09a6be",
        "light": "#f5f7e6",
        "dark": "#343a40"
    }


def get_component_styles() -> dict:
    """Get component-specific styles"""

    return {
        "button_primary": {
            "background": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
            "color": "white",
            "border": "none",
            "border_radius": "8px",
            "font_weight": "bold"
        },
        "card": {
            "background": "white",
            "border": "1px solid #dee2e6",
            "border_radius": "8px",
            "padding": "1rem",
            "box_shadow": "0 2px 4px rgba(0,0,0,0.1)"
        },
        "progress_bar": {
            "background": "#d1f0e7",
            "border_radius": "4px",
            "height": "8px"
        }
    }