ui/layout.py

import streamlit as st

def load_css():
    """Load custom CSS for the application - inspired by mistral-ocr implementations"""
    st.markdown("""
    <style>
    /* Global styles - clean, modern approach with consistent line height */
    :root {
        --standard-line-height: 1.5;
        --standard-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        --standard-color: #111827;
    }
    
    body {
        font-family: var(--standard-font);
        color: var(--standard-color);
        line-height: var(--standard-line-height);
    }
    
    /* Remove all container backgrounds that cause the white box issue */
    div[data-testid="stMarkdownContainer"],
    div[data-testid="stText"],
    div.stMarkdown,
    .stText > div:first-child,
    .element-container > div,
    div[data-testid="column"] > div > div > div {
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Base text styling with standardized line height */
    div[data-testid="stMarkdownContainer"] > p {
        margin: 0 0 0.3rem 0 !important;
        padding: 0 !important;
        font-size: 0.95rem !important;
        line-height: var(--standard-line-height) !important; 
    }
    
    /* Move content to top of columns with minimal padding */
    [data-testid="column"] {
        align-items: flex-start !important;
        padding: 0 0.5rem !important;
        gap: 0.5rem !important;
    }
    
    /* Clean minimal heading styles with better line height */
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Inter', system-ui, sans-serif;
        font-weight: 600;
        color: #111827;
        margin: 0.4rem 0 0.2rem 0 !important;
        padding: 0 !important;
        background-color: transparent !important;
        line-height: 1.3 !important; /* Slightly increased for headings but still compact */
    }
    
    /* Make h1 headings significantly smaller */
    h1 {
        font-size: 1.3em !important; /* Reduced from default ~2em */
    }
    
    /* Simple section headers with subtle styling */
    .block-container [data-testid="column"] h4 {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: #374151 !important;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 0.15rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Reduce whitespace between elements */
    .element-container {
        margin-bottom: 0.2rem !important;
    }
    
    /* Custom scrollbar styling */
    .ocr-text-container::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    .ocr-text-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .ocr-text-container::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
    
    .ocr-text-container::-webkit-scrollbar-thumb:hover {
        background: #a0a0a0;
    }
    
    /* Styling for all expanders/accordions */
    .st-expander, 
    details.streamlit-expanderHeader {
        border: 1px solid #e5e7eb !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        background-color: transparent !important;
        margin-bottom: 6px !important;
    }
    
    .st-expanderHeader,
    summary.streamlit-expanderHeader {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: #374151 !important;
        padding: 0.4rem 0.6rem !important;
        background-color: rgba(241, 245, 249, 0.5) !important;
        border-bottom: 1px solid #e5e7eb !important;
        border-radius: 3px 3px 0 0 !important;
    }
    
    .st-expanderContent,
    details[open] > div:nth-child(2) {
        border-top: none !important;
        padding: 0.4rem 0.6rem !important;
        background-color: transparent !important;
    }
    
    /* Set expander text to have good contrast */
    .st-expanderContent p, 
    .st-expanderContent li,
    .st-expanderContent span {
        color: #1f2937 !important;
    }
    
    /* Streamlined OCR image display */
    .ocr-image-container {
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        padding: 0;
        background-color: transparent;
        margin-bottom: 5px;
    }
    
    .ocr-image-container img {
        border-radius: 4px;
        width: 100%;
    }
    
    /* Subtle document sections */
    .document-section {
        margin-bottom: 0.4rem !important;
    }
    
    /* Compact tag styling - with higher specificity to override custom.css */
    .document-content .subject-tag,
    div[data-testid="stHorizontalBlock"] .subject-tag,
    div[data-testid="stVerticalBlock"] .subject-tag,
    .subject-tag {
        display: inline-block !important;
        padding: 0.1rem 0.4rem !important;
        border-radius: 3px !important;
        font-size: 0.7rem !important;
        margin: 0 0.2rem 0.2rem 0 !important;
        background-color: #f3f4f6 !important;
        color: #374151 !important;
        border: 1px solid #e5e7eb !important;
        font-family: var(--standard-font) !important;
    }
    
    /* Tag color overrides with higher specificity */
    .document-content .tag-time-period,
    .tag-time-period { color: #1e40af !important; background-color: #eff6ff !important; border-color: #bfdbfe !important; }
    
    .document-content .tag-language,
    .tag-language { color: #065f46 !important; background-color: #ecfdf5 !important; border-color: #a7f3d0 !important; }
    
    .document-content .tag-document-type,
    .tag-document-type { color: #5b21b6 !important; background-color: #f5f3ff !important; border-color: #ddd6fe !important; }
    
    .document-content .tag-subject,
    .tag-subject { color: #166534 !important; background-color: #f0fdf4 !important; border-color: #bbf7d0 !important; }
    
    .document-content .tag-download,
    .tag-download { 
        color: #1e40af !important; 
        background-color: #dbeafe !important; 
        border-color: #93c5fd !important; 
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    .document-content .tag-download:hover,
    .tag-download:hover { 
        background-color: #93c5fd !important; /* Darker blue on hover */
        border-color: #3b82f6 !important; /* Darker border */
        color: #1e3a8a !important; /* Darker text */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* More pronounced shadow */
    }
    
    /* For any default tags that might use the old styling */
    .document-content .tag-default,
    .tag-default { color: #374151 !important; background-color: #f3f4f6 !important; border-color: #e5e7eb !important; }
    
    /* Document content styling to ensure consistency */
    .document-content,
    .document-section {
        font-family: var(--standard-font) !important;
        line-height: var(--standard-line-height) !important;
        color: var(--standard-color) !important;
    }
    
    /* Clean text area */
    .stTextArea textarea {
        font-family: 'Roboto Mono', monospace;
        font-size: 0.9rem;
        line-height: var(--standard-line-height); /* Consistent line height */
        padding: 0.5rem;
    }
    
    /* Button styling - fixed for text overflow issues */
    .stButton > button {
        border-radius: 4px;
        font-weight: 400;
        line-height: var(--standard-line-height);
        padding: 0.4rem 0.75rem !important;
        margin: 0;
        min-width: 150px !important; /* Increased minimum width */
        white-space: normal !important; /* Allow text to wrap if needed */
        overflow: visible !important; /* Ensure text doesn't get cut off */
        height: auto !important; /* Allow height to adjust as needed */
        text-overflow: clip !important; /* Don't clip text */
        display: inline-block !important; /* Better content handling */
        text-align: center !important; /* Center text */
    }
    
    /* Fix button text alignment and prevent truncation */
    .stButton > button > div, 
    .stButton > button span,
    .stButton > button p {
        display: inline-block !important;
        align-items: center;
        white-space: normal !important;
        overflow: visible !important;
        width: auto !important;
        text-overflow: clip !important;
        word-wrap: normal !important;
    }
    
    /* Fix for all action buttons in the application */
    [data-testid="stHorizontalBlock"] button,
    button[key="close_document_btn"],
    button[key="process_document_btn"],
    button[key="load_sample_btn"],
    button[key="view_btn"],
    .stDownloadButton button,
    button[key*="copy_btn"],
    button[key*="download_btn"],
    button[key*="view_"] {
        width: auto !important;
        min-width: 150px !important;
        max-width: none !important;
        display: inline-block !important;
        white-space: normal !important; 
        overflow: visible !important;
        text-align: center !important;
        text-overflow: clip !important;
        word-break: normal !important;
        padding: 0.4rem 0.75rem !important;
    }

    /* Ensure text doesn't wrap awkwardly for buttons */
    button span p {
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
    }
    
    /* Extra button container fixes for all button types */
    .stButton, .stDownloadButton, [data-testid="stDownloadButton"] {
        width: auto !important;
        min-width: 150px !important;
        overflow: visible !important;
        display: block !important;
        background-color: white;
        border: 1px solid #ddd;
        box-shadow: none !important;
    }
    
    /* Ensure consistent spacing in widgets */
    .row-widget {
        padding: 0.15rem 0 !important;
    }
    
    /* Fix spacing in expanders */
    .stExpander > .streamlit-expanderContent > div {
        padding-top: 0.15rem !important;
    }
    
    /* Optimized sidebar */
    .sidebar .block-container {
        padding-top: 0.6rem;
    }
    
    .sidebar .stRadio > div {
        flex-direction: row;
    }
    
    .sidebar .stRadio label {
        margin-right: 0.75rem;
        font-size: 0.9rem;
    }
    
    /* Clean alert styles */
    .stSuccess, .stError, .stInfo, .stWarning {
        border-radius: 4px;
        padding: 0.3rem 0.6rem;
        margin: 0.2rem 0;
    }
    
    /* Fix any remaining spacing issues */
    div.element-container > div > div {
        margin: 0 !important;
        line-height: var(--standard-line-height); /* Ensure consistent line height */
    }
    
    /* Fix column layouts for button containers */
    [data-testid="column"] > div:has(.stButton) {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        min-height: 38px; /* Match standard button height */
    }
    
    /* Fix for tabs being cut off at the top of the page */
    /* Main container adjustments to avoid header overlap */
    .main .block-container {
        padding-top: 3rem !important; /* Increased top padding to make room for Streamlit header */
    }
    
    [data-testid="stTabs"] {
        width: 100%;
        overflow-x: visible !important;
        position: relative;
        z-index: 1; /* Ensure tabs are on the right layer */
    }
    
    [data-testid="stTabs"] > div:first-child {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        overflow-x: visible !important;
    }
    
    [data-testid="stTabs"] [role="tab"] {
        padding: 0.5rem 1rem;
        min-width: fit-content;
        white-space: nowrap;
    }
    
    [data-testid="stTabs"] [role="tablist"] {
        overflow-x: visible !important;
        flex-wrap: nowrap;
        margin-top: 1rem; /* Add a bit more space at the top */
    }
    
    /* Fix header overlap issues */
    header[data-testid="stHeader"] {
        z-index: 999 !important; /* Keep header on top */
    }
    </style>
    """, unsafe_allow_html=True)