:root {
  --fortran-forest-900: #112214;
  --fortran-forest-700: #0a8a1f;
  --fortran-forest-500: #0fbd2c;
  --fortran-forest-200: #92c99b;
  --fortran-light-green-100: #edf7e8;
  --fortran-light-green-200: #d7efca;
  --fortran-light-green-300: #c2e8b1;
  --fortran-neutral-050: #f6f8f6;
  --fortran-surface-card: #1a331e;
  --fortran-border-dark: #234836;
  --fortran-text-muted: #92c9ad;
  --fortran-white: #FFFFFF;
}

/* unhide the icon */
#kernel-status-icon {
  display: unset;
  margin-left: 6px;
  font-size: 20px;
  color: var(--fortran-forest-200);
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

/* Workaround for the Select/Dropdown widgets to be visible: */
select {
  display: block;
}

/* Root font size — Materialize sets html{font-size:14px} (with media-query
    variants at 14.5/15px) which becomes the basis for every rem in the app.
    Override it here so headings (.jp-RenderedHTMLCommon hN) and the .mfo-*
    widget rules scale uniformly. !important is needed to beat the
    media-query variants in materialize.min.css. */
html {
  font-size: 16px !important;
}

/* Phase 2 visual refresh for widgets */
.jupyter-widgets {
  font-size: 1rem;
  font-family: Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.widget-tab>.p-TabBar .p-TabBar-tab {
  border-radius: 999px;
  margin-right: 8px;
  padding: 6px 14px;
  border: 1px solid var(--fortran-forest-200);
  background: var(--fortran-neutral-050);
  color: var(--fortran-forest-900);
}

.widget-tab>.p-TabBar .p-mod-current {
  background: var(--fortran-forest-900);
  color: var(--fortran-white);
  border-color: var(--fortran-forest-900);
}

.widget-box,
.widget-vbox,
.widget-hbox {
  gap: 10px;
}

/* The default look. A button needs a class only when it must stand out. */
.widget-button {
  /* A Layout width lands as an inline style, so !important is needed to
     keep a button inside a narrow panel. .optimize-button opts out. */
  width: auto !important;
  box-sizing: border-box !important;
  min-height: 32px;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid #a8c29b !important;
  background: linear-gradient(180deg, #eef5e8 0%, #dfead6 100%) !important;
  color: #29422b !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

.widget-button:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #f5faf1 0%, #e5efdc 100%) !important;
}

/* A download link is an <a>, not a .widget-button, so it repeats the look. */
.download-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0 8px 8px 0;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #a8c29b;
  background: linear-gradient(180deg, #eef5e8 0%, #dfead6 100%);
  color: #29422b;
  font-weight: 600;
  text-decoration: none;
}

.download-link .fa {
  margin-right: 6px;
}

.download-link:hover {
  background: linear-gradient(180deg, #f5faf1 0%, #e5efdc 100%);
}

/* The link and the line that says what the file holds. */
.download-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.download-purpose {
  margin: -4px 8px 12px 2px;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #456148;
}

.widget-label,
.widget-html-content {
  font-size: 1rem !important;
  line-height: 1.45;
}

/* Bring widget body elements onto the root rem basis. Jupyter's bundled
    controls.css pins buttons/readouts/inputs and inner button-label spans
    in px; rules below force the rem basis. !important is needed because
    the bundled CSS is more specific than plain widget-* selectors.
    .mfo-* selectors that pin different sizes (sidebar buttons etc.) are
    more specific still and continue to win. */
.jp-Button-label,
.widget-toggle-button,
.widget-readout,
.widget-text input,
.widget-textarea textarea,
.widget-dropdown select {
  font-size: 1rem !important;
}

/* Header typography — single source of truth for headers rendered both
    inside widgets.HTML (.widget-html-content) and via display(HTML(...))
    in widgets.Output (.jp-RenderedHTMLCommon). The .widget-html-content
    branch is required because the .widget-label, .widget-html-content
    rule above forces font-size: 1rem !important, which would otherwise
    leave <h*> tags inside widgets.HTML at 1rem. */
/* Single source of truth for heading margin/line-height/weight across
    both rendering paths — widgets.HTML lands in .widget-html-content
    (bundled ipywidgets CSS strips font-weight here) and
    display(HTML(...)) inside widgets.Output lands in
    .jp-RenderedHTMLCommon (JupyterLab CSS forces bold). Without
    !important on font-weight, the two paths render differently.
    Font-size lives in the per-level rules just below. */
.widget-html-content h1,
.widget-html-content h2,
.widget-html-content h3,
.widget-html-content h4,
.widget-html-content h5,
.jp-RenderedHTMLCommon h1,
.jp-RenderedHTMLCommon h2,
.jp-RenderedHTMLCommon h3,
.jp-RenderedHTMLCommon h4,
.jp-RenderedHTMLCommon h5 {
  margin-top: 0.45em;
  margin-bottom: 0.3em;
  line-height: 1.2;
  font-weight: 700 !important;
}

.widget-html-content h1,
.jp-RenderedHTMLCommon h1 {
  font-size: 2.9rem;
}

.widget-html-content h2,
.jp-RenderedHTMLCommon h2 {
  font-size: 1.55rem;
}

.widget-html-content h3,
.jp-RenderedHTMLCommon h3 {
  font-size: 1.25rem;
}

.widget-html-content h4,
.jp-RenderedHTMLCommon h4 {
  font-size: 1.1rem;
}

/* Sub-section h4 headers pick up the top-bar green so they read as
    part of the same visual hierarchy as the section nav. Scoped to
    .mfo-workflow-shell so tooltips / other overlay chrome are
    unaffected. Matches the two selector paths used by all headings. */
.mfo-workflow-shell .widget-html-content h4,
.mfo-workflow-shell .jp-RenderedHTMLCommon h4 {
  color: #2A5225;
}

.widget-html-content h5,
.jp-RenderedHTMLCommon h5 {
  font-size: 1rem;
}

/* Buttons use colour/background feedback instead of focus outlines. */
:is(button, .widget-button):is(:focus, :focus-visible) {
  outline: none !important;
}

/* Disabled keeps the shape and drains the colour. */
.widget-button:disabled,
.mfo-subtab-bar .mfo-create-plans-button.widget-button:disabled {
  background: #f2f4f0 !important;
  border-color: #d5dbd0 !important;
  color: #8d968b !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Text-clipping fixes: prevent the bundled Jupyter widgets CSS from
    truncating button / toggle / dropdown labels with an ellipsis when the
    content would otherwise fit. !important is needed because the bundled
    stylesheet's selectors win on specificity. */
.mfo-workflow-shell .widget-button,
.mfo-workflow-shell .widget-button:disabled,
.mfo-workflow-shell .widget-toggle-buttons .widget-toggle-button,
.mfo-workflow-shell .widget-toggle-buttons button {
  min-width: max-content !important;
  text-overflow: clip !important;
  overflow: visible !important;
}

.mfo-workflow-shell .widget-dropdown>.widget-label,
.mfo-workflow-shell .widget-select>.widget-label,
.mfo-workflow-shell .widget-select-multiple>.widget-label,
.mfo-workflow-shell .widget-toggle-buttons>.widget-label {
  width: auto !important;
  min-width: max-content !important;
  text-overflow: clip !important;
  overflow: visible !important;
}

/* Size dropdowns and their single-control wrappers to the option text,
   capped at the panel width. Only width needs !important to override
   fixed inline widths set by ipywidgets Layout. */
.mfo-workflow-shell .widget-box:has(>.widget-dropdown:only-child),
.mfo-workflow-shell .widget-dropdown {
  width: max-content !important;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.mfo-workflow-shell .widget-dropdown {
  margin-left: 0;
  margin-right: 0;
}

.mfo-workflow-shell .widget-dropdown>select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  box-sizing: border-box;
  text-overflow: ellipsis;
}

/* The bundled ipywidgets / JupyterLab CSS injects a Font Awesome glyph
    via ::after on .widget-button (visible as a small spinner trailing
    the label). It used to be hidden by the default overflow:hidden +
    text-overflow:ellipsis, but our text-clipping fixes above turned
    those off, so the glyph is now visible. Suppress it globally for
    every button in the shell. */
.mfo-workflow-shell .widget-button::before,
.mfo-workflow-shell .widget-button::after {
  content: none !important;
  display: none !important;
}

/* Use available screen width; avoid narrow centered notebook column */
.jp-Notebook,
.jp-NotebookPanel,
.jp-Cell,
#rendered_cells,
main,
.container,
.jp-RenderedHTMLCommon {
  max-width: none !important;
}

main,
.container,
#rendered_cells {
  width: 100% !important;
  box-sizing: border-box;
}
/* The rendered notebook is the application viewport. Keep notebook/output
   wrappers from becoming a second scroll surface: the dashboard's content
   panel owns the only vertical scroll position. */
html,
body {
  height: 100%;
  overflow: hidden !important;
}

#rendered_cells,
#rendered_cells .jp-Notebook {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* `clip` also prevents programmatic page scrolling from moving the shell. */
#rendered_cells {
  overflow: hidden !important;
  overflow: clip !important;
}

.mfo-workflow-shell {
  border: 1px solid var(--fortran-border-dark);
  border-radius: 12px;
  background: var(--fortran-neutral-050);
  padding: 8px;
}

.mfo-step-content {
  flex: 1 1 auto;
  min-width: 0;
  width: calc(100% - clamp(220px, 15vw, 320px) - 1rem);
}

.mfo-step-panel-stack {
  border-top: 1px solid rgba(35, 72, 54, 0.4);
  padding-top: 8px;
}

.mfo-data-top-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  width: 100%;
}

.mfo-data-column {
  flex: 1 1 0;
  min-width: 0;
}

.mfo-data-top-row+.widget-hbox {
  width: 100%;
}

.optimize-button.widget-button {
  width: 100% !important;
  min-height: 42px;
  font-size: 1rem !important;
  background: linear-gradient(180deg, #ff9081 0%, #e04332 100%) !important;
  border: 1px solid #a92418 !important;
  color: #fff8f6 !important;
  box-shadow: 0 10px 22px rgba(170, 36, 24, 0.28) !important;
  font-weight: 800 !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

.optimize-button.widget-button:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #ff9e90 0%, #c92f21 100%) !important;
}

.mfo-analysis-scenario-name {
  margin: 0 0 10px 0;
}

.final-choice-button.widget-button {
  min-height: 42px;
  padding: 0 18px !important;
  font-size: 1rem !important;
  background: linear-gradient(180deg, #2f6b3f 0%, #1e4a2b 100%) !important;
  border: 1px solid #14351e !important;
  color: #f4faf5 !important;
  box-shadow: 0 8px 18px rgba(20, 53, 30, 0.28) !important;
  font-weight: 700 !important;
}

.final-choice-button.widget-button:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #387d4a 0%, #163a21 100%) !important;
}

/* The action that leads its panel. Colour only, so it stays in the family. */
.action-button.widget-button {
  background: linear-gradient(180deg, #cfe9c2 0%, #a9d69a 100%) !important;
  border: 1px solid #6ea45c !important;
  color: #14351e !important;
}

.action-button.widget-button:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #c2e2b3 0%, #9bcd8b 100%) !important;
}

/* --- Two-level navigation buttons ------------------------------- */
/* Both levels use transparent tabs with an active underline. */
.widget-button:is(.mfo-section-nav-button, .mfo-subtab-button) {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 6px 6px 0 0 !important;
  box-shadow: none !important;
}

/* Primary navigation on the green top bar. */
.mfo-section-nav-button.widget-button {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1rem !important;
  min-height: 44px;
  padding: 8px 22px !important;
  letter-spacing: 0.02em;
}

.mfo-section-nav-button.widget-button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

.mfo-section-nav-active.widget-button {
  background: rgba(255, 255, 255, 0.16) !important;
  border-bottom-color: #C5DDA8 !important;
  color: #ffffff !important;
  font-weight: 800;
}

/* Secondary navigation on the light panel. */
.mfo-subtab-button.widget-button {
  color: #5f7a64 !important;
  font-weight: 600 !important;
  font-size: 1.35rem !important;
  min-height: 56px !important;
  padding: 12px 26px !important;
  letter-spacing: 0.02em !important;
}

.mfo-subtab-button.widget-button:is(:hover, :focus-visible) {
  color: var(--fortran-forest-900) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

.mfo-subtab-active.widget-button {
  color: var(--fortran-forest-900) !important;
  border-bottom-color: var(--fortran-forest-700) !important;
  font-weight: 800;
}

/* The Run action keeps its button look but must not stretch full-width
    inside the sub-tab bar. Match the final-selection action height while
    keeping the button centered in the taller tab strip. */
.mfo-subtab-bar .optimize-button.widget-button {
  width: auto !important;
  min-height: 42px !important;
  text-align: center !important;
  justify-content: center !important;
  /* Air below the button so it doesn't sit flush against the bar
      edge and touch the panel canvas underneath. Sub-tab pills stay
      flush by design (their underline meets the bar's border-bottom). */
  margin-bottom: 6px !important;
}

.mfo-subtab-bar .mfo-create-plans-button.widget-button {
  min-height: 42px;
  margin-left: auto;
  margin-bottom: 6px;
  text-align: center;
  justify-content: center;
}

@media (max-width: 960px) {
  

  .mfo-data-top-row {
    flex-direction: column;
  }

  

  
}

.widget-slider .noUi-target {
  height: 12px !important;
  border-radius: 9999px !important;
  background: rgba(26, 51, 30, 0.55) !important;
  border: 1px solid rgba(35, 72, 54, 0.55) !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 12px !important;
  box-sizing: border-box;
}

.widget-slider .noUi-base,
.widget-slider .noUi-connects {
  overflow: visible !important;
}

.widget-slider .noUi-connect {
  background: linear-gradient(90deg, #00da6b 0%, var(--fortran-forest-500) 100%) !important;
  border-radius: 9999px !important;
}

.widget-slider .noUi-handle {
  width: 22px !important;
  height: 22px !important;
  right: -11px !important;
  top: -6px !important;
  border-radius: 9999px !important;
  border: 3px solid #00f08a !important;
  background: #102219 !important;
  box-shadow: 0 0 0 3px rgba(0, 240, 138, 0.14) !important;
}

.widget-slider .noUi-handle::before,
.widget-slider .noUi-handle::after {
  display: none !important;
}

.widget-text input,
.widget-textarea textarea,
.widget-dropdown select {
  border: 1px solid var(--fortran-forest-200) !important;
  border-radius: 6px;
}

.widget-text input:focus,
.widget-textarea textarea:focus,
.widget-dropdown select:focus {
  border-color: var(--fortran-forest-500) !important;
  box-shadow: 0 0 0 2px rgba(96, 137, 106, 0.2) !important;
}

/* Workaround for the RadioButtons widgets to be visible: */
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: static;
  opacity: 1;
  pointer-events: auto;
}

/* REMOVE MARGINS OF MAIN CONTAINERS  */
#rendered_cells,
#rendered_cells .jp-Cell,
#rendered_cells .jp-Cell-outputWrapper,
#rendered_cells .widget-output,
#rendered_cells .col.s12 {
  margin: 0 !important;
  padding: 0 !important;
}

/* REMOVE ROUND CORNERS OF MAIN CONTAINERS */
.mfo-workflow-shell,
.mfo-workflow-shell .mfo-top-bar,
.mfo-workflow-shell .mfo-panel-card,
.mfo-workflow-shell .mfo-info-card {
  border-radius: 0 !important;
}