[FEAT] Objective 6 - Finalising the interface: change the look and feel of the tool to bring it into line with the CRRA design

.streamlit/config.toml

@@ -1,7 +1,10 @@
-[theme]
-base = "light"
-primaryColor = "#3d86e9"
-backgroundColor = "#ffffff"
-secondaryBackgroundColor = "#c6d7f0e1"
-textColor = "#262730"
-font = "monospace"
+[theme]
+base                   = "light"
+primaryColor           = "#298231"
+backgroundColor        = "#ffffff"
+secondaryBackgroundColor = "#eae9d8"
+textColor              = "#000000"
+font                   = "sans-serif"
+
+[server]
+enableStaticServing    = true

assets/styles.css

@@ -1,106 +1,164 @@
+/* ═══════════════════════════════════════════════════════════
+   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
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── 0. Font face ──────────────────────────────────────────── */
+/* @font-face {
+    font-family: 'Segoe UI';
+    src: url(/app/static/fonts/segoe-ui-400.woff2) format('woff2'),
+         url(/app/static/fonts/segoe-ui-400.woff)  format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+} */
+
+/* ── 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', sans-serif;
+    --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;
 }
 
-.cdr-table, .cdr-table-res, .resources-summary {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    border-radius: 10px;
-    overflow: hidden;
-    font-family: var(--font);
+/* ── 3. Sidebar ────────────────────────────────────────────── */
+.stSidebar {
+    background: var(--off-white) !important;
 }
 
-.cdr-table thead th, .cdr-table-res thead th, .resources-summary thead th{
-    background-color: var(--green);
-    color: white;
-    font-weight: bold;
-    padding: 8px 12px;
-    text-align: center;
+/* ── 4. Markdown headings (st.markdown "### …") ────────────── */
+.stMarkdown h1 {
+    font-weight: 700;
+    font-style: italic;
+    color: var(--black);
+    line-height: 1.2em;
 }
-
-.cdr-table tbody th, .cdr-table-res tbody th, .resources-summary tbody th{
-    text-align: center;
-    color: var(--grey);
-    font-weight: 100;
+.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);
 }
 
-.cdr-table tbody td:nth-child(3) {
-    text-align: right;
+/* ── 5. Custom typography classes ──────────────────────────── */
+h1.custom-title {
+    font-size: 60px;
+    font-style: italic;
+    line-height: 0.95em;
 }
 
-.cdr-table-res tbody {
-    text-align: center;
+.crra-hl {
+    background: linear-gradient(90deg, var(--yellow) 0%, var(--green-light) 99%);
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    padding-right: 6px;
 }
 
-.cdr-table tbody tr:hover, .cdr-table-res tbody tr:hover, .resources-summary tbody tr:hover {
-    background-color: #f5f5f5;
+.crra-heading {
+    font-weight: 700;
+    font-style: italic;
+    font-size: clamp(32px, 2.5vw, 55px) !important;
+    line-height: 1.25em;
+    margin: 0;
+    padding: 0;
 }
 
-/* tab2 */
-[class*="st-key-toggle_type_"] p {
-    font-weight: 600;
-    font-family: var(--font);
-    text-transform: uppercase;
-    letter-spacing: 1.25px;
-    color: var(--brown-grey);
+.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;
 }
 
-[class*="cap_type_"] p {
-    font-family: var(--font);
+.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;
 }
 
-[class*="slider_"] p, [class*="manual_"] p{
-    font-family: var(--font);
+.crra-group-name {
+    font-weight: 600;
     font-style: italic;
-    color: var(--grey);
+    font-size: clamp(20px, 1.5vw, 30px) !important;
+    line-height: 1.25em;
 }
 
-/* tab2 end */
+.dialog-title {
+    font-weight: 600;
+    font-size: clamp(20px, 1vw, 30px) !important;
+    line-height: 1.25em;
+    margin-bottom: 15px;
+    margin-top: 10px !important;
+}
 
-h1.custom-title {
-    font-family: var(--font);
-    font-size: 60px;
+.caption {
+    color: var(--grey);
+    font-size: 0.88rem !important;
     font-style: italic;
-    line-height: 0.95em;
+    letter-spacing: 0.05rem;
 }
 
-.crra-hl {
-    background: linear-gradient(90deg, var(--yellow) 0%, var(--green-light) 99%);
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    padding-right: 6px;
+.caption-input {
+    font-style: italic;
+    letter-spacing: 0.05rem;
 }
 
-div.custom-corps {
-    font-family: var(--font);
+.custom-corps {
     font-size: 18px;
 }
 
-.resources-summary tbody {
-    text-align: center
-}
-
-.text_with_border {
-    border-left: 3px solid var(--red);
-    padding-left: 16px;
-    font-family: var(--font);
-    font-size: 18px !important;
+.custom-corps-light {
+    color: var(--grey);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 0.875rem;
 }
 
 .objective_title {
     color: var(--red);
-    font-family: var(--font);
     font-size: 14px;
     font-weight: 700;
     text-transform: uppercase;
@@ -108,330 +166,445 @@ div.custom-corps {
     margin: 0 0 8px 0;
 }
 
-.st-key-warning_resources [data-testid="stAlert"] {
-    /* background-color: var(--off-white)!important; */
-    clip-path: polygon(1.5% 0, 100% 0, 98.5% 100%, 0 100%);
+.text_with_border {
+    border-left: 3px solid var(--red);
+    padding-left: 16px;
+    font-size: 18px !important;
 }
 
-.st-key-warning_resources p{
-    font-family: var(--font);
+/* ── 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%);
+}
+
+[data-testid="stAlert"] p {
     font-style: italic;
-    font-size: 16px;
+    font-size: 0.95rem;
     line-height: 1.5;
     letter-spacing: 0.01em;
-    /* font-weight: 600; */
-    /* color: #var(--brown-grey); */
+    padding-left: 1%;
 }
 
-.st-key-warning_resources span{
+/* 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;
-    /* color: #var(--brown-grey); */
+    font-size: 16px;
+    line-height: 1.5;
+    letter-spacing: 0.01em;
 }
 
-.crra-heading {
-    font-family: var(--font) !important;
-    font-weight: 700;
+.st-key-warning_resources span,
+[data-testid="stAlert"] span {
     font-style: italic;
-    font-size: clamp(32px, 2.5vw, 55px) !important;
-    line-height: 1.25em;
-    margin: 0;
-    padding: 0;
+    padding-left: 1%;
 }
 
-.et_pb_module {
-    margin-bottom: 30px
+/* ── 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%);
 }
 
-.crra-sub-heading {
-    font-family: var(--font) !important;
-    font-weight: 700;
-    font-style: italic;
-    font-size: clamp(25px, 2vw, 32px) !important;
-    line-height: 1.25em;
+[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;
-    margin-bottom: 15px;
-    margin-top: 30px !important;
 }
 
-.dialog-title {
-    font-family: var(--font) !important;
-    font-weight: 600;
-    font-size: clamp(20px, 1vw, 30px) !important;
-    line-height: 1.25em;
-    margin-bottom: 15px;
-    margin-top: 10px !important;
+[data-testid="stMetricValue"] {
+    font-weight: 700 !important;
+    color: var(--green-dark) !important;
 }
 
-.crra-sub-sub-heading {
-    font-family: var(--font) !important;
-    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;
-}
+/* ── 9. Buttons ────────────────────────────────────────────── */
 
-.crra-group-name{
-    font-family: var(--font) !important;
-    font-weight: 600;
-    font-style: italic;
-    font-size: clamp(20px, 1.5vw, 30px) !important;
-    line-height: 1.25em;
+/* 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,
+[class*="btn-new-"] button p,
+[class*="st-key-download_button_"] button p,
+[data-testid="stDownloadButton"] button p,
+[data-testid="stBaseButton-primary"] p {
+    font-weight: 700 !important;
+    font-size: var(--btn-fs);
+    letter-spacing: 0.094444em;
+    text-transform: uppercase;
+    line-height: 1.2;
+    text-decoration: none;
 }
 
-/* buttons */
-.st-key-btn-reset button, [class*="btn-reset-"] button {
-    border-width: 0px !important;
+/* 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: clamp(52px, 3.125vw, 74px);
-    padding: 0 clamp(20px, 2vw, 42px);
-    clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
+    height: var(--btn-height);
+    padding: var(--btn-padding);
+    clip-path: var(--btn-clip);
     transition: background 0.25s ease;
 }
-
-.st-key-btn-reset button p, [class*="btn-reset-"] button p{
-    font-weight: 700 !important;
-    font-family: var(--font);
-    font-size: clamp(13px, 0.800vw, 18px);
-    letter-spacing: 0.094444em;
-    text-decoration: none;
-    text-transform: uppercase;
-    line-height: 1.2;
-}
-
-.st-key-btn-reset button:hover, [class*="btn-reset-"] button:hover{
-    background: #E5503F;
-    color: #FFFFFF;
+.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 {
+    border: none !important;
     border-radius: 0px;
     color: var(--off-white);
     background: var(--green-dark);
-    height: clamp(52px, 3.125vw, 74px);
-    padding: 0 clamp(20px, 2vw, 42px);
-    clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
+    height: var(--btn-height);
+    padding: var(--btn-padding);
+    clip-path: var(--btn-clip);
     transition: background 0.25s ease;
 }
-.st-key-btn-load button p{
-    font-weight: 700 !important;
-    font-family: var(--font);
-    font-size: clamp(13px, 0.800vw, 18px);
-    letter-spacing: 0.094444em;
-    text-decoration: none;
-    text-transform: uppercase;
-    line-height: 1.2;
-}
-
-.st-key-btn-load button:hover{
+.st-key-btn-load button:hover {
     background: #01740f;
     color: var(--off-white);
 }
 
-[class*="btn-new-"] button {
+/* New — off-white / red text */
+[class*="btn-new-"] button,
+[class*="edit_batch_"] [data-testid="stBaseButton-secondary"] {
+    border: none !important;
     border-radius: 0px;
-    border: 0px;
     color: var(--red);
     background: var(--off-white);
-    height: clamp(52px, 3.125vw, 74px);
-    padding: 0 clamp(20px, 2vw, 42px);
-    clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
+    height: var(--btn-height);
+    padding: var(--btn-padding);
+    clip-path: var(--btn-clip);
     transition: background 0.25s ease;
 }
-
-[class*="btn-new-"] button p{
-    font-weight: 700 !important;
-    font-family: var(--font);
-    font-size: clamp(13px, 0.800vw, 18px);
-    letter-spacing: 0.094444em;
-    text-decoration: none;
-    text-transform: uppercase;
-    line-height: 1.2;
+[class*="edit_batch_"] [data-testid="stBaseButton-secondary"]:hover,
+[class*="btn-new-"] button:hover {
+    background: #d8d7c4;
+    color: var(--red);
 }
 
-[class*="btn-new-"] 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);
 }
 
+/* Simple text button */
 [class*="simple-btn-"] button {
     color: var(--red);
 }
-
-[class*="simple-btn-"] button p{
+[class*="simple-btn-"] button p {
     text-transform: uppercase;
     font-weight: bold;
 }
-
-[class*="simple-btn-"] button:hover{
-    color: #E5503F;
+[class*="simple-btn-"] button:hover {
+    color: #e5503f;
     font-style: italic;
 }
 
-.stSidebar {
-    background: var(--off-white) !important;
+/* Run Optimization — CTA principal */
+.st-key-btn-run-optimization 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-optimization 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-optimization button:active {
+    transform: translate(0px, 0px);
+    box-shadow: 2px 2px 0px var(--green);
+}
+.st-key-btn-run-optimization button p {
+    font-weight: 700 !important;
+    font-size: clamp(15px, 1vw, 20px) !important;
+    letter-spacing: 0.12em !important;
+    text-transform: uppercase !important;
 }
 
-section[data-testid="stExpander"] summary {
-    font-family: var(--font);
-    font-weight: 600;
-    text-transform: uppercase;
+/* Default secondary Streamlit button */
+[data-testid="stBaseButton-secondary"] {
+    border-radius: 0px;
 }
 
-[class*="crra-select"] [data-baseweb="select"], .st-key-crra-select p{
-    font-family: var(--font);
-    font-size: 16px;
+/* ── 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 {
+    font-weight: 600 !important;
+    color: var(--brown-grey) !important;
+    font-size: 0.85rem !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.06em !important;
 }
 
-[class*="crra-select"] p{
-    font-style: italic;
-    font-weight: bold;
+/* [data-testid="stRadio"] label p, */
+[data-testid="stCheckbox"] label p{
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    text-transform: uppercase !important;
 }
 
-/* .st-key-crra-select [data-baseweb="select"] div{
-    background-color: var(--off-white);
-} */
+/* Text & number input fields */
+[data-testid="stTextInput"] input,
+[data-testid="stNumberInput"] input {
+    border-radius: 0px !important;
+    border-top: none !important;
+    border-left: none !important;
+    border-right: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    transition: border-color 0.2s ease;
+}
+[data-testid="stTextInput"] input:focus,
+[data-testid="stNumberInput"] input:focus {
+    border-bottom-color: var(--green-dark) !important;
+    box-shadow: none !important;
+}
 
-/* tab1 */
-[class*="_dlg_edit_existing_"] p {
-    font-family: var(--font);
-    color: var(--red);
-    font-weight: bold;
-    font-style: italic;
+/* 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;
 }
 
-.caption {
-    font-family: var(--font);
-    color:#a0a0a0;
-    font-size: 0.88rem !important;
-    letter-spacing: 0.05rem;
+/* Select box */
+[data-baseweb="select"] {
+    font-family: var(--font) !important;
+    font-size: 16px;
+}
+[data-baseweb="select"] > div {
+    border: none !important;
 }
 
-.caption-input {
-    font-family: var(--font);
-    font-style: italic;
-    letter-spacing: 0.05rem;
+[data-baseweb="select"] > div:focus-within {
+    border-bottom-color: var(--green-dark) !important;
+    box-shadow: none !important;
 }
 
-[class*="_dlg_existing_enable_"] p, [class*="label-input-"] p {
-    font-family: var(--font);
+/* Radio value text */
+[data-testid="stRadio"] p {
+    font-size: 0.9rem;
 }
 
-.st-key-container-btn {
-    display: flex;
-    flex-direction: row;
-    gap: 1.125%;
+/* Slider help text */
+[class*="slider_"] p,
+[class*="manual_"] p,
+[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);
 }
 
-/* .stDownloadButton {
-    place-self: center;
-} */
-
-[class*="st-key-download_button_"] button {
-    border-width: 0px !important;
-    border-radius: 0px;
-    color: var(--green-dark);
-    background: var(--off-white);
-    height: clamp(52px, 3.125vw, 74px);
-    padding: 0 clamp(20px, 2vw, 42px);
-    clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
-    transition: background 0.25s ease;
-}
-
-[class*="st-key-download_button_save_custom"] button {
-    float:inline-end;
+/* ── 11. Expanders ──────────────────────────────────────────── */
+section[data-testid="stExpander"] {
+    border-radius: 0px !important;
+    border: 1px solid rgba(0, 0, 0, 0.08);
 }
-
-[class*="st-key-download_button_"] button p{
-    font-weight: 700 !important;
-    font-family: var(--font);
-    font-size: clamp(13px, 0.800vw, 18px);
-    letter-spacing: 0.094444em;
-    text-decoration: none;
+section[data-testid="stExpander"] summary {
+    font-weight: 600;
     text-transform: uppercase;
-    line-height: 1.2;
+    letter-spacing: 0.08em;
+    font-size: 0.83rem;
 }
-
-[class*="st-key-download_button_"] button:hover{
-    background: #D8D7C4;
-    color: #FFFFFF;
+section[data-testid="stExpander"] summary p {
+    font-weight: 600;
+    text-transform: uppercase;
 }
 
-[class*="resource_uploader_"], 
+/* ── 12. File uploaders ─────────────────────────────────────── */
+[class*="resource_uploader_"],
 [class*="inputs_loader_"],
 [class*="scenario_loader_"],
-.st-key-comparison_loader 
-{
+.st-key-comparison_loader {
     font-family: var(--font);
 }
 
-[class*="resource_uploader_"] p, 
+[class*="resource_uploader_"] p,
 [class*="inputs_loader_"] p,
 [class*="scenario_loader_"] p,
-.st-key-comparison_loader p
-{
-    font-family: var(--font);
+.st-key-comparison_loader p {
     color: var(--grey);
     font-style: italic;
 }
 
-[class*="resource_uploader_"] [data-testid="stFileUploaderDropzone"], 
+[class*="resource_uploader_"] [data-testid="stFileUploaderDropzone"],
 [class*="inputs_loader_"] [data-testid="stFileUploaderDropzone"],
 [class*="scenario_loader_"] [data-testid="stFileUploaderDropzone"],
-.st-key-comparison_loader [data-testid="stFileUploaderDropzone"]
-{
+.st-key-comparison_loader [data-testid="stFileUploaderDropzone"] {
     background-color: var(--off-white);
-    /* clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%); */
-    /* border-radius: 0px; */
-    /* box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.20); */
     color: var(--green-dark);
-    font-weight: 700 !important;
+    font-weight: 700;
     letter-spacing: 0.094444em;
-    text-decoration: none;
     text-transform: uppercase;
-    /* justify-self: center; */
+    font-size: 0.875rem;
+    border-radius: 0px !important;
     width: stretch;
-    font-size: 0.875rem;;
 }
 
-/* [class*="resource_uploader_"] [data-testid="stFileUploaderDropzone"] [data-testid="stFileUploaderDropzoneInstructions"]{
-    padding-inline: 3rem;
-} */
-
-[class*="resource_uploader_"] [data-testid="stFileUploaderDropzone"] [data-testid="stFileUploaderDropzoneInstructions"] span svg,
-[class*="inputs_loader_"] [data-testid="stFileUploaderDropzone"] [data-testid="stFileUploaderDropzoneInstructions"] span svg,
-[class*="scenario_loader_"] [data-testid="stFileUploaderDropzone"] [data-testid="stFileUploaderDropzoneInstructions"] span svg,
-.st-key-comparison_loader [data-testid="stFileUploaderDropzone"] [data-testid="stFileUploaderDropzoneInstructions"] span svg
-{
+[class*="resource_uploader_"] [data-testid="stFileUploaderDropzone"] span svg,
+[class*="inputs_loader_"] [data-testid="stFileUploaderDropzone"] span svg,
+[class*="scenario_loader_"] [data-testid="stFileUploaderDropzone"] span svg,
+.st-key-comparison_loader [data-testid="stFileUploaderDropzone"] span svg {
     color: var(--green-dark);
 }
 
 [class*="resource_uploader_"] [data-testid="stBaseButton-secondary"],
 [class*="inputs_loader_"] [data-testid="stBaseButton-secondary"],
-[class*="scenario_loader_"] [data-testid="stBaseButton-secondary"]{
-    color: var(--off-white);
+[class*="scenario_loader_"] [data-testid="stBaseButton-secondary"] {
+    color: var(--off-white) !important;
     font-weight: 700 !important;
     text-transform: uppercase;
     font-style: italic;
-    background-color: var(--green-dark);
-    border: none;
+    background-color: var(--green-dark) !important;
+    border: none !important;
 }
 
-div.custom-corps-light {
-    font-family: var(--font);
+/* ── 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;
-    font-weight: 400;
-    font-size: 0.875rem;
-    /* margin-bottom: 0.25rem; */
 }
 
-/* tab1 end */
+[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 {
+    display: flex;
+    flex-direction: row;
+    gap: 1.125%;
+}
+
+/* ── 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);
+}

tabs/tab1_inputs.py

@@ -4,7 +4,7 @@ import streamlit as st
 from config.config import (resource_groups, resource_order, resource_tooltips,
                            resource_unit_map, method_groups, CO2_UNIT, secondary_resources)
 from utils.data_utils import render_resource_input, strip_unit_suffix
-from utils.ui_helpers import format_resource_summary, show_bar
+from utils.ui_helpers import show_bar
 from io import BytesIO
 
 # ─── Custom resource helpers ──────────────────────────────────────────────────
@@ -439,7 +439,8 @@ def _render_custom_batch_inline(global_idx, batch, cost_sliders, unit):
 
         col_edit, col_del = st.columns([1, 1])
         with col_edit:
-            if st.button("Edit", key=f"edit_batch_{global_idx}", use_container_width=True, icon=":material/edit:"):
+            if st.button("Edit", key=f"edit_batch_{global_idx}", use_container_width=True, 
+                         type="secondary", icon=":material/edit:"):
                 dialog_add_custom_resource(cost_sliders, edit_index=global_idx)
         with col_del:
             if st.button("Delete", key=f"del_batch_{global_idx}", use_container_width=True,
@@ -767,7 +768,19 @@ def render_tab(cost_sliders):
             df_custom = pd.DataFrame(custom_rows).set_index("Resource")
             df_custom["Type"] = "New"
             dfs.append(df_custom)
-        df_all = pd.concat(dfs)[["Available Amount", "Type"]]
-        st.markdown(format_resource_summary(df_all), unsafe_allow_html=True)
+        df_all = pd.concat(dfs)[["Available Amount", "Type"]].reset_index().rename(columns={"index": "Resource"})
+        num_rows = len(df_all)
+        st.dataframe(
+            df_all,
+            use_container_width=True,
+            hide_index=True,
+            height=(num_rows * 36 + 36),
+            column_config={
+                "Resource": st.column_config.TextColumn("Resource", width="large"),
+                "Available Amount": st.column_config.TextColumn("Available Amount"),
+                "Type": st.column_config.TextColumn("Type"),
+            },
+            row_height=36
+        )
     else:
         st.error("No resources defined yet. Set availability above to populate the summary table.")

tabs/tab2_constraints.py

@@ -175,11 +175,12 @@ def render_tab():
             df_display,
             use_container_width=True,
             hide_index=True,
-            height=(num_rows * 36 + 10),
+            height=(num_rows * 36 + 36),
             column_config={
                 "CDR Method": st.column_config.TextColumn("CDR Method", width="large"),
                 "Cap value": st.column_config.TextColumn("Cap value"),
             },
+            row_height=36
         )
     else:
         st.warning("No active methods selected.")

tabs/tab3_coefficients.py

@@ -393,11 +393,12 @@ def render_tab(cost_sliders):
     num_rows = len(df_current)
     st.dataframe(
         data=styled, 
-        height=(num_rows*36 + 15),
+        height=(num_rows * 36 + 37),
         use_container_width=True, 
         column_config={
             "_index": st.column_config.TextColumn(
                 "Method",
                 width="large"
-        ),
-    })
+        )},
+        row_height=36
+    )

utils/ui_helpers.py

@@ -1,238 +1,80 @@
-import numpy as np
-import pandas as pd
-import streamlit as st
-from config.config import CO2_UNIT, CRRA_COLORS, CRRA_FONT
-import plotly.express as px
-from config.config import PLOTLY_TEMPLATE, PLOTLY_COLOR_SEQUENCE
-
-# params
-background_color = "#3d86e9"
-
-def apply_chart_style(fig, height=None):
-    """Style cohérent CRRA pour tous les graphiques Plotly."""
-    fig.update_layout(
-        template=PLOTLY_TEMPLATE,
-        font=dict(family=CRRA_FONT, size=12, color=CRRA_COLORS["black"]),
-        margin=dict(t=40, b=40, l=40, r=20),
-        legend=dict(
-            orientation="v",
-            yanchor="middle", y=0.5,
-            xanchor="left", x=1.02,
-        ),
-    )
-    if height:
-        fig.update_layout(height=height)
-    return fig
-
-def register_chart_data(name: str, df: pd.DataFrame):
-    """Enregistre les données d'un graphique pour l'export consolidé final."""
-    st.session_state.setdefault("chart_data_registry", {})
-    st.session_state["chart_data_registry"][name] = df.copy()
-
-def show_bar():
-    st.markdown(
-        """
-        <div class="et_pb_module">
-            <div style="display:flex;width:100%;height:12px;margin:0 auto 0 0;">
-                <span style="flex:1;background:#FF5F4D;"></span>
-                <span style="flex:1;background:#A0A0A0;"></span>
-                <span style="flex:1;background:#D9E210;"></span>
-                <span style="flex:1;background:#55C95B;"></span>
-            </div>
-        </div>
-        """,
-        unsafe_allow_html=True,
-    )
-
-def styled_table(df):
-    return (
-        df.style
-        .set_table_styles([{"selector": "th", "props": [("background-color", background_color), ("font-weight", "bold")]}])
-    )
-
-def highlight_differences(data, df_default):
-    styled = pd.DataFrame('', index=data.index, columns=data.columns)
-    for m in data.index:
-        for r in data.columns:
-            if m in df_default.index and r in df_default.columns:
-                current = data.at[m, r]
-                default = df_default.at[m, r]
-                if abs(current - default) > 1e-6:
-                    styled.at[m, r] = 'background-color: #cce5ff'
-    return styled
-
-def smart_format(val):
-    return f"{val:.2e}" if abs(val) < 0.01 else f"{val:.2f}"
-
-def inputs_table_style(df):
-    return(
-        df.style
-        .set_properties(**{'text-align': 'right'})
-        .format(smart_format)
-        .set_table_styles([{"selector": "th", "props": [("background-color", background_color), ("font-weight", "bold")]}])
-    )
-
-def format_table_summary(df: pd.DataFrame, class_name: str):
-    df = df.copy()
-    df.index.name = "CDR Method"
-    df = df.reset_index()
-
-    html = df.to_html(index=True, classes=class_name, border=0)
-    return html
-    
-def format_efficiency_summary(df: pd.DataFrame, df_default: pd.DataFrame):
-    df_numeric = df.copy()
-    df_display = df_numeric.map(smart_display_format)
-
-    # Highlight modified values
-    def highlight_changes(data):
-        styled = pd.DataFrame('', index=data.index, columns=data.columns)
-        for m in data.index:
-            for r in data.columns:
-                try:
-                    current = df_numeric.at[m, r]
-                    default = df_default.at[m, r]
-                    if abs(current - default) > 1e-6:
-                        styled.at[m, r] = 'background-color: #ff5f4d'
-                except:
-                    continue
-        return styled
-
-    # Table style
-    return (
-        df_display
-        .style
-        .apply(highlight_changes, axis=None)
-    )
-
-# -----------------------------
-# SLIDER GROUP HELPER
-# -----------------------------
-def render_slider_group(method_name, resource, slider_data, key_prefix="", enable_toggle=False, toggle_default=True, store_path=None):
-    """
-    Renders a slider for a method/resource pair with optional enable toggle.
-    Reads from and writes to st.session_state using store_path: ("costs", method, resource).
-    Avoids value reset issues by separating widget key from storage.
-    """
-    base_key = f"{key_prefix}{method_name}_{resource}".replace(" ", "_").lower()
-    toggle_key = f"{base_key}_toggle"
-    widget_key = f"{base_key}_slider"
-
-    # Validate data availability
-    if method_name not in slider_data or resource not in slider_data[method_name]:
-        return None
-
-    values = slider_data[method_name][resource]
-    min_val = values.get("min", 0.0)
-    med_val = values.get("median", 0.5)
-    max_val = values.get("max", 1.0)
-
-    # Handle toggle for secondary resources
-    enabled = True
-    if enable_toggle:
-        if toggle_key not in st.session_state:
-            st.session_state[toggle_key] = toggle_default
-        enabled = st.checkbox(f"Use {resource}", key=toggle_key)
-
-    if not enabled:
-        return None
-
-    # Determine slider format and step size
-    step = 0.01 if max_val < 100 else 1.0
-    fmt = "%.2f" if max_val < 100 else "%.0f"
-
-    # Ensure session state value exists
-    if store_path:
-        base, m, r = store_path
-        if base not in st.session_state:
-            st.session_state[base] = {}
-        if m not in st.session_state[base]:
-            st.session_state[base][m] = {}
-        if r not in st.session_state[base][m]:
-            st.session_state[base][m][r] = med_val
-
-        current_val = st.session_state[base][m][r]
-    else:
-        if base_key not in st.session_state:
-            st.session_state[base_key] = med_val
-        current_val = st.session_state[base_key]
-
-    # Render slider with separate widget key
-    val = st.slider(
-        label=f"{method_name} – {resource}",
-        min_value=float(min_val),
-        max_value=float(max_val),
-        value=float(current_val),
-        step=step,
-        format=fmt,
-        key=widget_key
-    )
-
-    # Sync slider output to session state
-    if store_path:
-        st.session_state[base][m][r] = val
-    else:
-        st.session_state[base_key] = val
-
-    return val
-
-# -----------------------------
-# TABLE FORMATTING HELPER
-# -----------------------------
-def format_results_table(df, highlight_changes=False, precision=2):
-    """
-    Applies consistent styling to result tables.
-    """
-    def bold_methods(val):
-        return f"font-weight: bold" if isinstance(val, str) else ""
-
-    styled = df.style.format(
-        {col: f"{{:.{precision}f}}" for col in df.select_dtypes(include=[np.number]).columns}
-    ).applymap(bold_methods, subset=[df.columns[0]])
-
-    if highlight_changes:
-        styled = styled.highlight_max(axis=0, color='lightgreen')
-
-    return styled
-
-def format_resource_summary(df: pd.DataFrame):
-    df = df.copy()
-    df.index.name = "Resource"
-    df = df.reset_index()
-
-    def highlight_new(row):
-        if row.get("Type") == "New":
-            return ["color: #ff5f4d; font-weight: bold"] * len(row)
-        return [""] * len(row)
-
-    styled = (
-        df.style
-        .apply(highlight_new, axis=1)
-        .set_table_attributes('class="resources-summary"')
-    )
-
-    return styled.to_html()
-
-def smart_display_format(val):
-    if abs(val) < 1e-8:
-        return ""
-    elif abs(val) < 0.001:
-        return f"{val:,.5f}"
-    elif abs(val) < 0.01:
-        return f"{val:,.4f}"
-    elif abs(val) < 1:
-        return f"{val:,.3f}"
-    elif abs(val) < 100:
-        return f"{val:,.2f}"
-    else:
-        return f"{val:,.0f}"
-
-# -----------------------------
-# CHART LABEL CLEANER (Optional)
-# -----------------------------
-def clean_labels(labels):
-    """
-    Cleans labels to remove zero-allocation items or clutter.
-    """
-    return [label for label in labels if label and label.strip() != ""]
-
+import pandas as pd
+import streamlit as st
+from config.config import CRRA_COLORS, CRRA_FONT, PLOTLY_TEMPLATE
+
+
+def apply_chart_style(fig, height=None):
+    fig.update_layout(
+        template=PLOTLY_TEMPLATE,
+        font=dict(family=CRRA_FONT, size=12, color=CRRA_COLORS["black"]),
+        margin=dict(t=40, b=40, l=40, r=20),
+        legend=dict(
+            orientation="v",
+            yanchor="middle", y=0.5,
+            xanchor="left", x=1.02,
+        ),
+    )
+    if height:
+        fig.update_layout(height=height)
+    return fig
+
+
+def register_chart_data(name: str, df: pd.DataFrame):
+    """Enregistre les données d'un graphique pour l'export consolidé final."""
+    st.session_state.setdefault("chart_data_registry", {})
+    st.session_state["chart_data_registry"][name] = df.copy()
+
+
+def show_bar():
+    st.markdown(
+        """
+        <div class="et_pb_module">
+            <div style="display:flex;width:100%;height:12px;margin:0 auto 0 0;">
+                <span style="flex:1;background:#FF5F4D;"></span>
+                <span style="flex:1;background:#A0A0A0;"></span>
+                <span style="flex:1;background:#D9E210;"></span>
+                <span style="flex:1;background:#55C95B;"></span>
+            </div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def smart_display_format(val):
+    if abs(val) < 1e-8:
+        return ""
+    elif abs(val) < 0.001:
+        return f"{val:,.5f}"
+    elif abs(val) < 0.01:
+        return f"{val:,.4f}"
+    elif abs(val) < 1:
+        return f"{val:,.3f}"
+    elif abs(val) < 100:
+        return f"{val:,.2f}"
+    else:
+        return f"{val:,.0f}"
+
+
+def format_efficiency_summary(df: pd.DataFrame, df_default: pd.DataFrame):
+    df_numeric = df.copy()
+    df_display = df_numeric.map(smart_display_format)
+
+    def highlight_changes(data):
+        styled = pd.DataFrame('', index=data.index, columns=data.columns)
+        for m in data.index:
+            for r in data.columns:
+                try:
+                    current = df_numeric.at[m, r]
+                    default = df_default.at[m, r]
+                    if abs(current - default) > 1e-6:
+                        styled.at[m, r] = 'background-color: #ff5f4d'
+                except:
+                    continue
+        return styled
+
+    return (
+        df_display
+        .style
+        .apply(highlight_changes, axis=None)
+    )