ui/layout.py

import streamlit as st

def load_css():
    """Load custom CSS for the application"""
    st.markdown("""
    <style>
    /* Global styles */
    body {
        font-family: 'Source Sans Pro', sans-serif;
        color: #333;
    }
    
    /* Header styles */
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Georgia', serif;
        font-weight: 600;
        color: #1E3A8A;
    }
    
    /* Processing status container */
    .processing-status-container {
        padding: 10px 15px;
        border-left: 4px solid #1E88E5;
        background-color: #E3F2FD;
        border-radius: 0 4px 4px 0;
        margin: 10px 0;
        font-size: 14px;
    }
    
    /* Previous results styling */
    .previous-results-container {
        margin-top: 20px;
    }
    
    .result-card {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
        transition: all 0.2s ease;
    }
    
    .result-card:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        border-color: #c0c0c0;
    }
    
    .result-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    
    .result-filename {
        font-weight: bold;
        font-size: 16px;
    }
    
    .result-date {
        color: #666;
        font-size: 14px;
    }
    
    .result-metadata {
        margin-top: 10px;
        font-size: 14px;
    }
    
    .result-tag {
        margin-bottom: 5px;
        color: #555;
    }
    
    .result-action-button {
        margin-top: 10px;
        text-align: right;
    }
    
    .selected-result-container {
        margin-top: 30px;
        padding: 20px;
        background-color: #f0f2f6;
        border-radius: 8px;
        border: 1px solid #d0d7de;
    }
    
    .selected-result-title {
        font-size: 18px;
        font-weight: bold;
        color: #1E3A8A;
    }
    
    /* Raw text editor styling */
    .stTextArea textarea {
        font-family: 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* Image and text side-by-side styling */
    .image-text-container {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .image-container {
        flex: 1;
    }
    
    .text-container {
        flex: 1;
    }
    
    /* Sidebar styling */
    .sidebar .stRadio > div {
        flex-direction: row;
    }
    
    .sidebar .stRadio label {
        margin-right: 10px;
    }
    
    /* Optimize spacing in sidebar */
    .sidebar .block-container {
        padding-top: 0;
    }
    
    .sidebar [data-testid="stVerticalBlock"] {
        gap: 0;
    }
    
    /* Button styling */
    .stButton > button {
        border-radius: 4px;
        font-weight: 600;
    }
    
    /* File uploader styling */
    .stFileUploader > section > div {
        min-height: 100px;
    }
    
    /* Reset vertical text in file uploader */
    .stFileUploader p,
    .stFileUploader span,
    .stFileUploader div p,
    .stFileUploader div span,
    .stFileUploader label p, 
    .stFileUploader label span,
    .stFileUploader div[data-testid="stFileUploadDropzone"] p,
    .stFileUploader div[data-testid="stFileUploadDropzone"] span {
        writing-mode: horizontal-tb !important;
    }
    
    /* Metadata styling */
    .metadata-card {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        border: 1px solid #e0e0e0;
    }
    
    /* Document content styling */
    .document-content {
        margin-top: 10px;
    }
    
    /* Tab styling */
    .stTabs [data-baseweb="tab-list"] {
        gap: 8px;
    }
    
    .stTabs [data-baseweb="tab"] {
        padding: 8px 16px;
        border-radius: 4px 4px 0 0;
    }
    
    /* Success message styling */
    .stSuccess {
        background-color: #D4EDDA;
        color: #155724;
        padding: 10px;
        border-radius: 4px;
        border-left: 5px solid #155724;
    }
    
    /* Error message styling */
    .stError {
        background-color: #F8D7DA;
        color: #721C24;
        padding: 10px;
        border-radius: 4px;
        border-left: 5px solid #721C24;
    }
    
    /* Info message styling */
    .stInfo {
        background-color: #D1ECF1;
        color: #0C5460;
        padding: 10px;
        border-radius: 4px;
        border-left: 5px solid #0C5460;
    }
    
    /* Warning message styling */
    .stWarning {
        background-color: #FFF3CD;
        color: #856404;
        padding: 10px;
        border-radius: 4px;
        border-left: 5px solid #856404;
    }
    </style>
    """, unsafe_allow_html=True)