src/ressources/main_css.py

custom_css = """
/* General Body and Font Styling */
body {
    color: #333;
    background-color: #f0f2f5;
}

/* Header Styling */
.gradio-container h1 {
    color: #0056b3; /* A deep blue for the main title */
    text-align: center;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 2.5em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.gradio-container h2 {
    color: #007bff; /* A slightly lighter blue for subtitles */
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 1.2em;
}

/* Card-like styling for individual components */
.gradio-container .gr-box {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

/* Input Textbox Styling */
.gradio-container input[type="text"],
.gradio-container textarea {
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 1em;
    color: #495057;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.gradio-container input[type="text"]:focus,
.gradio-container textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Button Styling */
.gradio-container button {
    background-color: #28a745; /* A vibrant green for action */
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.gradio-container button:hover {
    background-color: #218838; /* Darker green on hover */
    transform: translateY(-2px);
}

.gradio-container button:active {
    transform: translateY(0);
}

/* Labels for outputs */
.gradio-container label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    display: block; /* Ensure labels are on their own line */
    font-size: 1.1em;
}

/* --- Specific Styling for Outputs --- */

/* 2. Retrieved Constraints Styling */
.constraints-container {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; /* Different font */
    line-height: 1.6;
    max-height: 300px;
    overflow-y: auto;
}
.constraint-item {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e0e0e0;
}
.constraint-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.constraint-title {
    font-weight: bold;
    color: #004085; /* Darker blue for constraint titles */
    font-size: 1.1em;
}
.constraint-description {
    color: #333;
    font-size: 1em;
}

/* 7. Best Technology Combinations Found & 9. Final Best Technologies Styling */
.combinations-outer-container, .final-tech-container {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    max-height: 500px; /* Adjust as needed */
    overflow-y: auto;
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; /* Different font */
}

.problem-card {
    background-color: #ffffff;
    border: 1px solid #cfe2ff; /* Light blue border for problem card */
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.problem-card-title {
    color: #0056b3; /* Deep blue for problem title */
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #cfe2ff;
    padding-bottom: 10px;
}

.technologies-inner-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid for technologies */
    gap: 15px;
}

.technology-card, .final-tech-card {
    background-color: #f0faff; /* Very light blue for technology cards */
    border: 1px solid #b0d9ff; /* Slightly darker blue border */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out;
}

.technology-card:hover, .final-tech-card:hover {
    transform: translateY(-3px);
}

.tech-card-title, .final-tech-title {
    color: #007bff; /* Gradio's primary blue */
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 600;
}

.technology-card p, .final-tech-card p {
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 5px;
    color: #555;
}
.technology-card p strong, .final-tech-card p strong {
    color: #004085; /* Darker blue for bold labels */
}

/* --- Prior Art Section Styling --- */
.prior-art-container {
    background-color: #e6f7ff; /* Very light blue background for distinct section */
    border: 2px solid #99d6ff; /* A clear blue border */
    border-radius: 15px;
    padding: 25px;
    margin-top: 30px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; /* Different font */
    color: #2c3e50; /* Darker text for readability */
    line-height: 1.7;
    max-height: 800px; /* Constrain height */
    overflow-y: auto; /* Enable scrolling */
}

.prior-art-container h3, .prior-art-container h4, .prior-art-container h5 {
    color: #003366; /* Even darker blue for headings */
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 10px;
}

.prior-art-summary p {
    margin-bottom: 10px;
}

.prior-art-summary .summary-bullet {
    margin-left: 20px;
    margin-bottom: 5px;
}
.prior-art-summary .summary-bullet strong {
    color: #0056b3;
}


.prior-art-documents {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.prior-art-document-card {
    background-color: #ffffff;
    border: 1px solid #b3e0ff; /* Lightest blue for document cards */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out;
}

.prior-art-document-card:hover {
    transform: translateY(-5px);
}

.document-title {
    color: #007bff;
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #e0f2ff;
    padding-bottom: 8px;
}

.document-description {
    font-size: 0.95em;
    color: #444;
    margin-bottom: 15px;
}
.document-description strong {
    color: #004085;
}

.document-technologies h5 {
    color: #0056b3;
    font-size: 1em;
    margin-top: 10px;
    margin-bottom: 8px;
    border-bottom: 1px dashed #cceeff;
    padding-bottom: 5px;
}

.document-technologies ul {
    list-style-type: none; /* Remove default bullet points */
    padding-left: 0;
    margin-top: 0;
}
.document-technologies li {
    background-color: #f5fcff; /* Even lighter background for list items */
    border-left: 3px solid #007bff;
    padding: 8px 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 0.9em;
    color: #333;
}
.document-technologies li strong {
    color: #003366;
}

/* Disruptive line */
.disruptive-line {
    border: none;
    border-top: 3px dashed #007bff; /* Blue dashed line */
    margin: 40px auto;
    width: 80%;
    opacity: 0.7;
}

/* Prior Art Inline Links (e.g., [1]) */
.prior-art-inline-link {
    color: #007bff; /* Blue for clickable numbers */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
}
.prior-art-inline-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Grouped URI Links at the end */
.grouped-uris-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #cceeff;
}
.grouped-uris-section h3 {
    text-align: center;
    color: #0056b3;
}
.grouped-uris-section ul {
    list-style-type: decimal; /* Numbered list */
    padding-left: 25px;
    margin-top: 15px;
}
.grouped-uris-section li {
    margin-bottom: 8px;
}
.prior-art-grouped-link {
    color: #007bff;
    text-decoration: none;
    transition: text-decoration 0.2s ease-in-out;
}
.prior-art-grouped-link:hover {
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gradio-container {
        padding: 15px;
    }
    .gradio-container h1 {
        font-size: 2em;
    }
    .gradio-container button {
        width: 100%;
        padding: 15px;
    }
    .technologies-inner-container, .prior-art-documents {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }
}
"""