static/style.css

/*  THEME-AWARE CUSTOM CSS

    This CSS block has been refactored to use Streamlit's internal theme
    variables. This ensures that all custom components will automatically adapt
    to both light and dark themes selected by the user in the settings menu.
*/
/* ====== Font Imports (Optional but Recommended) ====== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Fira+Code:wght@400&display=swap');

/* ====== Base & Typography ====== */
.stApp,
section[data-testid="stSidebar"],
div[data-testid="stMetricValue"],
div[data-testid="stMetricLabel"] {
    font-family: 'Inter', sans-serif;
    /* Uses the main text color from the current theme (light or dark) */
    color: var(--text-color);
}

.kv-val {
    font-family: 'Fira Code', monospace;
}

/* ====== Custom Containers: Tabs & Info Boxes ====== */
div[data-testid="stTabs"]>div[role="tablist"]+div {
    min-height: 400px;
    /* Uses the secondary background color, which is different in light and dark modes */
    background-color: var(--secondary-background-color);
    /* Border color uses a semi-transparent version of the text color for a subtle effect that works on any background */
    border: 10px solid rgba(128, 128, 128, 0.2);
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-box {
    font-size: 0.9rem;
    padding: 12px 16px;
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 10px;
    background-color: var(--secondary-background-color);
}

/* ====== Key-Value Pair Styling ====== */
.kv-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.kv-row:last-child {
    border-bottom: none;
}

.kv-key {
    opacity: 0.7;
    font-size: 0.9rem;
    white-space: nowrap;
}

.kv-val {
    font-size: 0.9rem;
    overflow-wrap: break-word;
    text-align: right;
}

/* ====== Custom Expander Styling ====== */
div.stExpander>details>summary::-webkit-details-marker,
div.stExpander>details>summary::marker,
div[data-testid="stExpander"] summary svg {
    display: none !important;
}

div.stExpander>details>summary::after {
    content: '↓';
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 999px;
    /* The primary color is set in config.toml and adapted by Streamlit */
    background-color: var(--primary);
    color: var(--text-color);
    /* Text on the primary color needs high contrast. White works well for our chosen purple. */

    transition: background-color 0.2s ease-in-out;
}

div.stExpander>details>summary:hover::after {
    /* Using a fixed darker shade on hover. A more advanced solution could use color-mix() in CSS. */
    filter: brightness(90%);
}

/* Specialized Expander Labels */
.expander-results div[data-testid="stExpander"] summary::after {
    content: "RESULTS";
    background-color: #16A34A;
    /* Green is universal for success */

}

div[data-testid="stExpander"] details {
    content: "RESULTS";
    background-color: var(--primary);
    border-radius: 10px;
    padding: 10px
}

.expander-advanced div[data-testid="stExpander"] summary::after {
    content: "ADVANCED";
    background-color: #D97706;
    /* Amber is universal for warning/technical */

}

[data-testid="stExpanderDetails"] {
    padding: 16px 4px 4px 4px;
    background-color: transparent;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    margin-top: 12px;
}

/* ====== Sidebar & Metrics ====== */
section[data-testid="stSidebar"]>div:first-child {
    background-color: var(--secondary-background-color);
    border-right: 1px solid rgba(128, 128, 128, 0.2);
}

div[data-testid="stMetricValue"] {
    font-size: 1.1rem !important;
    font-weight: 500;
}

div[data-testid="stMetricLabel"] {
    font-size: 0.85rem !important;
    opacity: 0.8;
}

/* ====== Interactivity & Accessibility ====== */
:focus-visible {
    /* The focus outline now uses the theme's primary color */
    outline: 20px solid var(--primary);
    outline-offset: 2px;
    border-radius: 8px;
}

.st-key-csv-button,
.st-key-json-button,
.st-key-clearall-button {
    display: block;
    border: 1px double #1a1a1a98;
    max-width: 100%;
    border-radius: 8px;



}

.st-key-page-link-container {
    padding: 5px;
    display: inline-block;
    justify-items: center;
    align-self: center;
    align-content: center;
    border: 1px double #1a1a1a98;
    border-radius: 8px;
    background-color: var(--secondary-background-color);
    max-width: 100%;

}

.st-key-buttons-container {
    display: flex;
    max-width: 100%;
}



/* .st-key-csv-button:hover,
.st-key-json-button:hover,
.st-key-clearall-button:hover {
    padding: .25px;
}
.st-key-page-link {
    color: var(--text-color);
    text-decoration: none;
}*/