assets/styles.css

/* ═══════════════════════════════════════════════════════════
   CRRA Design System — styles.css
   Palette : off-white #eae9d8  red #ff5f4d  green-dark #298231
             green #55c95b  green-light #92ef9b  yellow #d9e210
             brown-grey #665d5b  grey #a0a0a0
   Font    : Segoe UI, sans-serif
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Variables ──────────────────────────────────────────── */
:root {
    --off-white:    #eae9d8;
    --red:          #ff5f4d;
    --green-dark:   #298231;
    --green:        #55c95b;
    --green-light:  #92ef9b;
    --yellow:       #d9e210;
    --white:        #ffffff;
    --brown-grey:   #665d5b;
    --grey:         #a0a0a0;
    --black:        #000000;
    --font:         'Segoe UI', system-ui, -apple-system, sans-serif;

    --btn-height:   clamp(52px, 3.125vw, 74px);
    --btn-padding:  0 clamp(20px, 2vw, 42px);
    --btn-clip:     polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
    --btn-fs:       clamp(13px, 0.8vw, 18px);
}

/* ── 2. Global font ────────────────────────────────────────── */
/* span and div are excluded — too broad and breaks Material icon fonts */
html, body,
.stApp, .main, .block-container,
p, label, li,
h1, h2, h3, h4, h5, h6,
input, textarea, select,
.stMarkdown, .stAlert,
[data-testid="stWidgetLabel"] {
    font-family: var(--font) !important;
}

/* ── 3. Page bottom padding (avoids "stuck" feel on Hugging Face) ── */
.block-container {
    padding-bottom: 6rem !important;
}

/* ── 3b. Sidebar ───────────────────────────────────────────── */
.stSidebar {
    background: var(--off-white) !important;
}

/* Default width — no !important so Streamlit's drag-to-resize JS can override it */
section[data-testid="stSidebar"] {
    width: 350px;
}

/* ── 4. Markdown headings (st.markdown "### …") ────────────── */
.stMarkdown h1 {
    font-weight: 700;
    font-style: italic;
    color: var(--black);
    line-height: 1.2em;
}
.stMarkdown h2 {
    font-weight: 700;
    font-style: italic;
    color: var(--brown-grey);
    line-height: 1.2em;
}
.stMarkdown h3 {
    font-weight: 600;
    color: var(--black);
    line-height: 1.3em;
}
.stMarkdown h4 {
    font-weight: 600;
    color: var(--brown-grey);
}

/* ── 5. Custom typography classes ──────────────────────────── */
h1.custom-title {
    font-size: 60px;
    font-style: italic;
    line-height: 0.95em;
}
.crra-hl-toolkit{
    background: linear-gradient(90deg, var(--yellow) 0%, var(--green-light) 99%);
    -webkit-text-fill-color: transparent;
    padding-right: 6px;
    background-clip: text;
}

.crra-hl {
    background: linear-gradient(90deg, var(--yellow) 0%, var(--green-light) 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.0vw !important;
}

.crra-heading {
    font-weight: 700;
    font-style: italic;
    font-size: clamp(32px, 2.5vw, 55px) !important;
    line-height: 1.25em;
    margin: 0;
    padding: 0;
}

.crra-sub-heading {
    font-weight: 700;
    font-style: italic;
    font-size: clamp(25px, 2vw, 32px) !important;
    line-height: 1.25em;
    color: var(--brown-grey) !important;
    margin-bottom: 15px;
    margin-top: 30px !important;
}

.crra-sub-sub-heading {
    font-weight: 600;
    font-style: italic;
    font-size: clamp(20px, 1.5vw, 30px) !important;
    line-height: 1.25em;
    color: var(--grey) !important;
    margin-bottom: 15px;
    margin-top: 20px !important;
}

.crra-group-name {
    font-weight: 600;
    font-style: italic;
    font-size: clamp(20px, 1.5vw, 30px) !important;
    line-height: 1.25em;
}

.dialog-title {
    font-weight: 600;
    font-size: clamp(20px, 1vw, 30px) !important;
    line-height: 1.25em;
    margin-bottom: 15px;
    margin-top: 10px !important;
}

.caption {
    color: var(--grey);
    font-size: 0.88rem !important;
    font-style: italic;
    letter-spacing: 0.05rem;
}

.caption-input {
    font-style: italic;
    letter-spacing: 0.05rem;
}

.custom-corps {
    font-size: 18px;
}

.custom-corps-light {
    color: var(--grey);
    font-style: italic;
    font-weight: 400;
    font-size: 0.875rem;
}

.objective_title {
    color: var(--red);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.094444em;
    margin: 0 0 8px 0;
}

.text_with_border {
    border-left: 3px solid var(--red);
    padding-left: 16px;
    font-size: 18px !important;
}

/* ── 6. Colorful bar divider ───────────────────────────────── */
.et_pb_module {
    margin-bottom: 30px;
}

/* ── 7. Alerts ─────────────────────────────────────────────── */
[data-testid="stAlert"],
[data-testid="stAlert"] > div,
[data-testid="stAlert"] > div > div {
    border-radius: 0px !important;
    /* clip-path: polygon(1% 0, 100% 0, 99% 100%, 0 100%); */
    clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%)
}

[data-testid="stAlert"] p {
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    padding-left: 1rem;
    padding-right: 1rem;
}
[data-testid="stAlert"] ul {
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Special warning box (tab1) */
.st-key-warning_resources [data-testid="stAlert"] {
    clip-path: polygon(1.5% 0, 100% 0, 98.5% 100%, 0 100%);
}
.st-key-warning_resources p {
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.st-key-warning_resources span,
[data-testid="stAlert"] span {
    /* font-style: italic; */
    padding-left: 1rem;
}

/* ── 8. Metrics ────────────────────────────────────────────── */
[data-testid="metric-container"] {
    background-color: var(--off-white);
    padding: 16px 20px;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

[data-testid="stMetricLabel"] p {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.72rem !important;
    color: var(--brown-grey) !important;
}

[data-testid="stMetricValue"] {
    font-weight: 700 !important;
    color: var(--green-dark) !important;
}

/* ── 9. Buttons ────────────────────────────────────────────── */

/* Shared button text style */
[class*="edit_batch_"] [data-testid="stBaseButton-secondary"] p,
.st-key-btn-reset button p,
[class*="btn-reset-"] button p,
.st-key-btn-load button p,
.st-key-btn-load-resources button p,
[class*="btn-new-"] button p,
[class*="st-key-download_button_"] button p,
[data-testid="stDownloadButton"] button p,
[data-testid="stBaseButton-primary"] p,
.st-key-btn-cancel button p {
    font-weight: 700 !important;
    font-size: var(--btn-fs);
    letter-spacing: 0.094444em;
    text-transform: uppercase;
    line-height: 1.2;
    text-decoration: none;
}

/* Reset — red */
.st-key-btn-reset button,
[class*="btn-reset-"] button,
[data-testid="stBaseButton-primary"] {
    border: none !important;
    border-radius: 0px;
    color: var(--white);
    background: var(--red);
    height: var(--btn-height);
    padding: var(--btn-padding);
    clip-path: var(--btn-clip);
    transition: background 0.25s ease;
}
.st-key-btn-reset button:hover,
[class*="btn-reset-"] button:hover,
[data-testid="stBaseButton-primary"]:hover {
    background: #e5503f;
    color: var(--white);
}

/* Load — green-dark */
.st-key-btn-load button,
.st-key-btn-load-resources button {
    border: none !important;
    border-radius: 0px;
    color: var(--off-white);
    background: var(--green-dark);
    height: var(--btn-height);
    padding: var(--btn-padding);
    clip-path: var(--btn-clip);
    transition: background 0.25s ease;
}
.st-key-btn-load button:hover,
.st-key-btn-load-resources button:hover {
    background: #01740f;
    color: var(--off-white);
}

/* New — off-white / red text */
[class*="btn-new-"] button,
[class*="edit_batch_"] [data-testid="stBaseButton-secondary"],
.st-key-btn-cancel button{
    border: none !important;
    border-radius: 0px;
    color: var(--red);
    background: var(--off-white);
    height: var(--btn-height);
    padding: var(--btn-padding);
    clip-path: var(--btn-clip);
    transition: background 0.25s ease;
}
[class*="edit_batch_"] [data-testid="stBaseButton-secondary"]:hover,
[class*="btn-new-"] button:hover,
.st-key-btn-cancel button:hover {
    background: #d8d7c4;
    color: var(--red);
}

/* Download — off-white / green-dark text — covers all download buttons */
[class*="st-key-download_button_"] button,
[data-testid="stDownloadButton"] button {
    border: none !important;
    border-radius: 0px;
    color: var(--green-dark);
    background: var(--off-white);
    height: var(--btn-height);
    padding: var(--btn-padding);
    clip-path: var(--btn-clip);
    transition: background 0.25s ease, color 0.25s ease;
}
[class*="st-key-download_button_"] button:hover,
[data-testid="stDownloadButton"] button:hover {
    background: #d8d7c4;
    color: var(--green-dark);
}

/* Fixed "Next tab" navigation button */
[class*="st-key-btn-nav-next"] {
    position: fixed;
    bottom: 1.5rem;
    right: 2rem;
    z-index: 999;
}
[class*="st-key-btn-nav-next"] button {
    background: var(--green-dark) !important;
    color: var(--white) !important;
    clip-path: none !important;
    border-radius: 6px !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
    height: auto !important;
    padding: 0.55rem 1.2rem !important;
    font-weight: 700 !important;
    font-size: clamp(12px, 0.8vw, 15px) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
}
[class*="st-key-btn-nav-next"] button:hover {
    background: #01740f !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
}

/* Add resource — green-light background */
[class*="btn-add-resource-"] button {
    border: none !important;
    border-radius: 0px;
    color: var(--green-dark);
    background: var(--green-light);
    height: var(--btn-height);
    padding: var(--btn-padding);
    clip-path: var(--btn-clip);
    transition: background 0.25s ease;
}
[class*="btn-add-resource-"] button p {
    font-weight: 700 !important;
    font-size: var(--btn-fs);
    letter-spacing: 0.094444em;
    text-transform: uppercase;
}
[class*="btn-add-resource-"] button:hover {
    background: var(--green);
}

/* Simple text button */
[class*="simple-btn-"] button {
    color: var(--red);
}
[class*="simple-btn-"] button p {
    text-transform: uppercase;
    font-weight: bold;
}
[class*="simple-btn-"] button:hover {
    color: #e5503f;
    font-style: italic;
}

/* Run optimisation — CTA principal */
.st-key-btn-run-optimisation button {
    border: none !important;
    border-radius: 0px;
    background: var(--green-dark) !important;
    color: var(--off-white) !important;
    clip-path: var(--btn-clip);
    height: clamp(64px, 3vw, 90px) !important;
    padding: 0 clamp(28px, 3vw, 56px) !important;
    transition: background 0.25s ease, transform 0.15s ease;
    box-shadow: 4px 4px 0px var(--green);
}
.st-key-btn-run-optimisation button:hover {
    background: #01740f !important;
    color: var(--off-white) !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--green);
}
.st-key-btn-run-optimisation button:active {
    transform: translate(0px, 0px);
    box-shadow: 2px 2px 0px var(--green);
}
.st-key-btn-run-optimisation button p {
    font-weight: 700 !important;
    font-size: clamp(15px, 1vw, 20px) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.st-key-btn-deactivate-all,
.st-key-btn-activate-all
 {
    margin-top: 10px;
}

/* ── 10. Form elements ──────────────────────────────────────── */

/* Input / number labels */
[data-testid="stTextInput"] label p,
[data-testid="stNumberInput"] label p,
[data-testid="stTextArea"] label p,
[data-testid="stSelectbox"] label p,
[data-testid="stMultiSelect"] label p,
[data-testid="stSlider"] label p,
[class="crra-resource-name"] {
    font-weight: 600 !important;
    color: var(--brown-grey) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* [data-testid="stRadio"] label p, */
[data-testid="stCheckbox"] label p{
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
}

/* Text & number input fields */
[data-testid="stNumberInputContainer"] {
    background-color: var(--off-white);
}

/* Text area */
[data-testid="stTextArea"] textarea {
    border-radius: 0px !important;
    border-color: var(--grey) !important;
}
[data-testid="stTextArea"] textarea:focus {
    border-color: var(--green-dark) !important;
    box-shadow: none !important;
}

/* Select box */
[data-baseweb="select"] {
    font-family: var(--font) !important;
    font-size: 16px;
}
[data-baseweb="select"] > div {
    border: none !important;
}

[data-baseweb="select"] > div:focus-within {
    border-bottom-color: var(--green-dark) !important;
    box-shadow: none !important;
}

/* Radio value text */
[data-testid="stRadio"] p {
    font-size: 0.9rem;
}

/* Slider help text */
[class*="slider_"] p,
[class*="manual_"] p,
[class="crra-resource-name"],
[data-testid="stSlider"] p {
    font-style: italic;
    color: var(--grey);
}

/* Tab2 constraint toggles */
[class*="st-key-toggle_type_"] p {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.25px;
    color: var(--brown-grey);
}
[class*="cap_type_"] p,
[class*="cap_"] p {
    font-family: var(--font);
}

/* ── 11. Expanders ──────────────────────────────────────────── */
section[data-testid="stExpander"] {
    border-radius: 0px !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
section[data-testid="stExpander"] summary {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.83rem;
}
section[data-testid="stExpander"] summary p {
    font-weight: 600;
    text-transform: uppercase;
}

/* ── 12. File uploaders ─────────────────────────────────────── */
[class*="resource_uploader_"] p,
[class*="inputs_loader_"] p,
[class*="scenario_loader_"] p,
.st-key-comparison_loader p {
    color: var(--grey);
    font-style: italic;
}

[data-testid="stFileUploaderDropzone"]{
    align-items: center;
    flex-direction: row-reverse;
}

[class*="resource_uploader_"] [data-testid="stBaseButton-secondary"],
[class*="inputs_loader_"] [data-testid="stBaseButton-secondary"],
[class*="scenario_loader_"] [data-testid="stBaseButton-secondary"],
.st-key-comparison_loader [data-testid="stBaseButton-secondary"] {
    color: var(--green-dark) !important;
    border: none !important;
    border-radius: 0.5rem;
}
[class*="resource_uploader_"] [data-testid="stBaseButton-secondary"]:hover,
[class*="inputs_loader_"] [data-testid="stBaseButton-secondary"]:hover,
[class*="scenario_loader_"] [data-testid="stBaseButton-secondary"]:hover,
.st-key-comparison_loader [data-testid="stBaseButton-secondary"]:hover {
    background-color: var(--green-light);
}
[class*="resource_uploader_"] [data-testid="stBaseButton-secondary"] p,
[class*="inputs_loader_"] [data-testid="stBaseButton-secondary"] p ,
[class*="scenario_loader_"] [data-testid="stBaseButton-secondary"] p,
.st-key-comparison_loader [data-testid="stBaseButton-secondary"] p {
    color: var(--green-dark) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-style: normal;
    border: none !important;
}

/* ── 13. Custom HTML tables ─────────────────────────────────── */
.cdr-table, .cdr-table-res, .resources-summary {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
}

.cdr-table thead th,
.cdr-table-res thead th,
.resources-summary thead th {
    background-color: var(--green);
    color: var(--white);
    font-weight: bold;
    padding: 8px 12px;
    text-align: center;
}

.cdr-table tbody th,
.cdr-table-res tbody th,
.resources-summary tbody th {
    text-align: center;
    color: var(--grey);
    font-weight: 100;
}

.cdr-table tbody td:nth-child(3) {
    text-align: right;
}

.cdr-table-res tbody,
.resources-summary tbody {
    text-align: center;
}

.cdr-table tbody tr:hover,
.cdr-table-res tbody tr:hover,
.resources-summary tbody tr:hover {
    background-color: #f5f5f5;
}

/* ── 14. Tab1 dialogs ───────────────────────────────────────── */
[class*="_dlg_edit_existing_"] p {
    color: var(--red);
    font-weight: bold;
    font-style: italic;
}

[class*="_dlg_existing_enable_"] p,
[class*="label-input-"] p {
    font-family: var(--font);
}

/* ── 15. Select (crra-select variant) ───────────────────────── */
[class*="crra-select"] [data-baseweb="select"],
.st-key-crra-select p {
    font-size: 16px;
}
[class*="crra-select"] p {
    font-style: italic;
    font-weight: bold;
}

/* ── 16. Button container layout ────────────────────────────── */
.st-key-container-btn,
.st-key-container-btn-resources{
    display: flex;
    flex-direction: row;
    gap: 1.125%;
}

[class*="st-key-container-button"] {
    display: flex;
    flex-direction: row-reverse;
    gap: 1.125%;
    justify-content: flex-start;
}

/* ── 17. Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--off-white);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb {
    background: var(--grey);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brown-grey);
}

/* ── 18. Welcome page titles ─────────────────────────────────── */
h3.wt {
    font-weight: 700 !important;
    font-size: clamp(13px, 3vw, 20px) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 28px 0 10px 0 !important;
    padding: 6px 0 6px 14px;
    border-left: 4px solid;
    line-height: 1.3;
    font-style: normal !important;
}
h3.wt-1 { color: #124216 !important;           border-left-color: #124216;           }
h3.wt-2 { color: var(--green-dark) !important; border-left-color: var(--green-dark); }
h3.wt-3 { color: var(--green) !important;      border-left-color: var(--green);      }
h3.wt-4 { color: var(--green-light) !important; border-left-color: var(--green-light); }

p.wt-cta {
    font-weight: 600 !important;
    margin-top: 28px !important;
    font-style: italic !important;
}

/* ── 19. Tabs ────────────────────────────────────────────────── */
[data-baseweb="tab-list"] {
    gap: 4px;
    border-bottom: 2px solid var(--off-white);
    padding-bottom: 0;
}

[data-baseweb="tab"] {
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 6px 6px 0 0;
    background-color: var(--off-white);
    color: var(--brown-grey);
    border: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-baseweb="tab"]:hover {
    background-color: #e8e8e8;
    color: var(--black);
}

[aria-selected="true"][data-baseweb="tab"] {
    background-color: var(--black);
    color: var(--white);
}

[data-baseweb="tab-highlight"] {
    display: none;
}

[data-baseweb="tab-border"] {
    display: none;
}