style.css

/* style.css - Professional Medical Aesthetic Theme */

/* 1. Define the Color Palette */
:root {
    --color-primary-blue: #007BFF;       /* A calming, professional blue */
    --color-accent-teal: #17A2B8;        /* A modern, clean teal for highlights */
    --color-background-white: #FFFFFF;  /* Clean white background */
    --color-background-light-gray: #F8F9FA; /* A very light gray for subtle contrast */
    --color-text-dark: #212529;          /* High-contrast, readable dark text */
    --color-text-light: #6C757D;         /* Lighter text for secondary info */
    --color-border: #DEE2E6;            /* Subtle borders for components */
    --font-primary: 'Inter', 'Helvetica Neue', sans-serif; /* Modern, clean sans-serif font */
}

/* 2. General Body and Layout Styling */
body, #root {
    background-color: var(--color-background-light-gray);
    font-family: var(--font-primary);
    color: var(--color-text-dark);
}

/* 3. Dashboard Component Styling */
.gradio-container {
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    background: var(--color-background-white) !important;
}

/* Make buttons match the theme */
.gradio-button {
    background-color: var(--color-primary-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: background-color 0.3s ease !important;
}
.gradio-button:hover {
    background-color: #0056b3 !important; /* Darker blue on hover */
}
.gradio-button.secondary {
    background-color: var(--color-accent-teal) !important;
}
.gradio-button.secondary:hover {
    background-color: #117a8b !important; /* Darker teal on hover */
}

/* Style the text boxes and chat */
textarea, .gradio-chatbot {
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
}

/* Style the headings and titles for a professional look */
h1, h2 {
    color: var(--color-primary-blue);
    font-weight: 700;
}

/* Style the tabs for the results area */
.tab-nav button {
    background-color: var(--color-background-light-gray) !important;
    border-radius: 8px 8px 0 0 !important;
    border-bottom: 2px solid transparent !important;
}
.tab-nav button.selected {
    background-color: var(--color-background-white) !important;
    border-bottom: 2px solid var(--color-primary-blue) !important;
}

/* Generous spacing for a modern feel */
.gradio-container .form {
    padding: 20px !important;
    gap: 20px !important;
}