src/customer_intelligence/app/components/styles.py

"""Global CSS injection for visual polish."""

import streamlit as st


def inject_css() -> None:
    st.markdown("""<style>
    /* ── Page top padding ── */
    .main .block-container { padding-top: 1.6rem; }

    /* ── Section headers ── */
    h1 { font-weight: 800; letter-spacing: -0.02em; }
    h2, h3 {
        padding-bottom: 6px;
        border-bottom: 2px solid rgba(59,130,246,0.22);
        margin-top: 1.4rem !important;
    }

    /* ── Divider ── */
    hr { border-color: rgba(59,130,246,0.15) !important; margin: 1.2rem 0 !important; }

    /* ── Sidebar ── */
    [data-testid="stSidebar"] {
        background: rgba(15,23,42,0.03);
        border-right: 1px solid rgba(59,130,246,0.1);
    }
    /* Sidebar nav section labels */
    [data-testid="stSidebarNavSeparator"] {
        border-color: rgba(59,130,246,0.15) !important;
    }
    /* Sidebar nav links */
    [data-testid="stSidebarNavLink"] {
        border-radius: 8px !important;
        margin: 1px 4px !important;
        font-weight: 500;
    }
    [data-testid="stSidebarNavLink"]:hover {
        background: rgba(59,130,246,0.1) !important;
    }
    [data-testid="stSidebarNavLink"][aria-selected="true"] {
        background: rgba(59,130,246,0.15) !important;
        border-left: 3px solid #3B82F6 !important;
    }

    /* ── Metric containers (used in some pages still) ── */
    [data-testid="metric-container"] {
        background: rgba(59,130,246,0.06);
        border: 1px solid rgba(59,130,246,0.18);
        border-left: 4px solid #3B82F6;
        border-radius: 10px;
        padding: 14px 18px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    }
    [data-testid="stMetricValue"] {
        font-size: 1.6rem !important;
        font-weight: 700 !important;
    }

    /* ── Dataframe ── */
    [data-testid="stDataFrame"] { border-radius: 8px; overflow: hidden; }

    /* ── Alert/info boxes ── */
    [data-testid="stAlert"] { border-radius: 8px !important; }

    /* ── Buttons ── */
    .stButton > button {
        border-radius: 8px !important;
        font-weight: 600 !important;
        border: 1px solid rgba(59,130,246,0.35) !important;
    }
    .stButton > button:hover {
        background: rgba(59,130,246,0.1) !important;
        border-color: #3B82F6 !important;
    }

    /* ── Text inputs ── */
    [data-testid="stTextInput"] input {
        border-radius: 8px !important;
    }
    </style>""", unsafe_allow_html=True)