/* @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700&family=Public+Sans:wght@400;500;600&display=swap"); */

/* ============================================================
   newformat.css — MyFinPro UI refresh
   Scope: site navbar, app header, entry view, list view, chart area,
   Settings/Show-model popups. Form view: fonts + spacing only.
   Pure CSS: no ids, classes, handlers or JS touched. Active states key
   off the inline styles set by JS (lightgreen tabs/views, non-white
   selected list row).

   Load AFTER myfingita_style.css / responsive.css. Self-contained: fonts are
   pulled in by the @import above (system fallbacks if it is blocked).
   ============================================================ */


:root {
  /* palette */
  --nf-teal:        #2F9C92;   /* header band */
  --nf-teal-deep:   #2E7D6B;   /* accent: buttons, active states, chart */
  --nf-teal-soft:   #E6F3F1;   /* tints, selected rows */
  --nf-ink:         #14202E;
  --nf-soft:        #55677A;
  --nf-paper:       #FCFCFA;
  --nf-card:        #FFFFFF;
  --nf-line:        rgba(20, 32, 46, 0.12);
  --nf-field-line:  rgba(20, 32, 46, 0.18);
  --nf-clay:        #B5533A;   /* editable values */
  --nf-brass:       #C99A2E;   /* warnings / "Update" */
  --nf-radius:      10px;
  --nf-shadow:      0 1px 2px rgba(20,32,46,.06), 0 6px 18px rgba(20,32,46,.06);
  --nf-display:     'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nf-body:        'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nf-mono:        ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}


/* ---------- base inside the app only ---------- */
#main_app {
  font-family: var(--nf-body);
  color: var(--nf-ink) !important;       /* overrides inline color */
  background: var(--nf-paper);
  margin-top: 120px;             /* site navbar overlays the top of the app; do not remove */
  padding-bottom: 2rem;
  -webkit-font-smoothing: antialiased;
}
#main_app button,
#main_app select,
#main_app input { font-family: inherit; font-size: 0.95rem; }

#main_app button {
  border: 1px solid var(--nf-field-line);
  border-radius: 8px;
  background: var(--nf-card);
  color: var(--nf-ink);
  padding: 0.35rem 0.8rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
#main_app button:hover { border-color: var(--nf-teal-deep); background: var(--nf-teal-soft); }
#main_app button:active { box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }

#main_app select,
#main_app input[type="text"],
#main_app input:not([type]),
#main_app input[type="float"],
#main_app input[type="number"] {
  border: 1px solid var(--nf-field-line);
  border-radius: 8px;
  background: var(--nf-card);
  padding: 0.35rem 0.55rem;
  color: var(--nf-ink);
  outline: none;
}
#main_app select:focus,
#main_app input:focus { border-color: var(--nf-teal-deep); box-shadow: 0 0 0 3px rgba(46,125,107,.15); }

/* ---------- site navbar (MyFinGita shell above the app) ---------- */
nav.navbar#myHeader,
nav.navbar.un-dev {
  background-color: var(--nf-ink);
  font-family: var(--nf-body);
  padding: 8px 0;
  /* positioning intentionally untouched (site shell owns it) */
}
nav.navbar#myHeader a.navbar-brand img { max-width: 190px; }
.navbar-nav li.nav-item { display: flex; align-items: center; font-size: 0.92rem; color: rgba(255,255,255,.75); }
.navbar-nav li.nav-item a.nav-link {
  font-family: var(--nf-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.85);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  transition: background .12s, color .12s;
}
.navbar-nav li.nav-item a.nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.navbar-nav li.nav-item a.nav-link.active { color: #fff; background: var(--nf-teal-deep); font-weight: 600; }
.navbar-nav li.nav-item select.select {
  margin-left: 0.5rem;
  font-family: var(--nf-body);
  font-size: 0.85rem;
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
}
.navbar-nav li.nav-item select.select option { color: var(--nf-ink); }
/* scrolled state (.sticky added by myscript.js): keep navy instead of white */
nav.navbar.sticky {
  padding: 8px 0 !important;
  background-color: var(--nf-ink) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(20,32,46,.18) !important;
}

/* ---------- header band ---------- */
/* #nav_dom is injected by JS at runtime:
   #nav_dom > div > div[width=100%] > span.user_bar.textInfo_Box > huge, #feature_level_pd
   #myf_nav_bar*  : tabs + Info/Close
   #my_plan_navigation : Save / Setting / model picker */
#nav_dom.cust_NavBar {
  background: var(--nf-teal);
  color: #fff;
  padding: 0.9rem 1.5rem 1rem;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
  position: relative;
  float: none;
}
#nav_dom .user_bar,
#nav_dom .textInfo_Box { background: transparent !important; color: #fff; float: none; margin: 0; }
#nav_dom .textinfobox_main.row.w-100 { display: flex; flex-wrap: wrap; margin: 0; width: 100% !important; }
#nav_dom .textinfobox_main.row.w-100 > div[width="100%"],
#nav_dom .textinfobox_main.row.w-100 > .col-md-6 { flex: 0 0 100%; max-width: 100%; width: 100% !important; padding: 0; }
/* row 1: title + feature level (the .row/.col-md-6 selectors cover the static template) */
#nav_dom div[width="100%"] { display: flex; align-items: center; gap: 1.25rem; width: 100% !important; }
#nav_dom div[width="100%"] > span.user_bar.textInfo_Box { width: auto !important; display: block !important; }
#nav_dom div[width="100%"] > div[hidden] { display: none !important; }
#nav_dom .textinfobox_main.row.w-100 > div[width="100%"] > .col-md-6 {
  display: flex; align-items: center; gap: 1.25rem; width: 100% !important; max-width: 100%; padding: 0;
}
#nav_dom .textinfobox_main.row.w-100 > div[width="100%"] > .col-md-6 > div[hidden] { display: none !important; }
#nav_dom huge {
  font-family: var(--nf-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}
#feature_level_pd { color: rgba(255,255,255,.9); font-size: 0.9rem; width: auto !important; }
#feature_level_pd select {
  margin-left: 0.4rem;
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.35);
}
#feature_level_pd select option { color: var(--nf-ink); }
/* row 2: tabs centred, Info/Close pinned top-right of the band */
#main_app [id^="myf_nav_bar"] { margin-top: 0.6rem; text-align: center; }
#main_app [id^="myf_nav_bar"] > .level_intermediate { position: absolute; top: 0.9rem; right: 1.5rem; }
#main_app [id^="myf_nav_bar"] > .level_intermediate {
  float: none;
  position: absolute;
  top: 0.9rem;
  right: 1.5rem;
}
/* row 3: Save / Setting / model picker */
#my_plan_navigation.textinfobox_main.row.w-100,
#main_app #my_plan_navigation { display: flex; justify-content: center; margin: 0.4rem 0 0; width: 100% !important; }
#main_app #my_plan_navigation > div { display: flex; align-items: center; gap: 0.5rem; }
#my_plan_navigation1 { margin-top: 0; }
#my_plan_navigation .level_intermediate > div { display: inline-block; vertical-align: middle; }

/* main page tabs: My_Inv / My_Asset / My_Plan / My_Scenarios */
#main_app .main_page_button {
  background: rgba(255,255,255,.14) !important;   /* overrides inline azure */
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  font-weight: 500;
  margin: 0 0.15rem;
}
#main_app .main_page_button:hover { background: rgba(255,255,255,.26) !important; }
/* active tab: JS sets inline lightgreen */
#main_app .main_page_button[style*="lightgreen"] {
  background: #fff !important;
  color: var(--nf-teal-deep);
  border-color: #fff;
  font-weight: 600;
}

/* Close / Info / Setting / Save / Run cluster */
#main_app .top_button {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.3);
  float: none;
  margin-left: 0.3rem;
}
#main_app .top_button:hover { background: rgba(255,255,255,.26); }

/* model picker */
#main_app #model_name {
  background: #fff;
  color: var(--nf-ink);
  font-family: var(--nf-mono);
  font-size: 0.9rem;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  margin-top: 0.35rem;
}
#model_update_confirm {                           /* Run button */
  background: var(--nf-brass) !important;
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}

/* ---------- status / message strip ---------- */
#Status_Message.main_status_bar { background: transparent; padding: 0 1.5rem; margin: 0; min-height: 0; }
#Status_Message label { display: none; }                 /* label strip hidden; #debug_txt still shows messages */
#Status_Message #debug_txt {
  background: var(--nf-teal-soft) !important;
  color: var(--nf-teal-deep) !important;
  font-family: var(--nf-mono);
  font-size: 0.8rem;
  border: 0 !important;
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  margin-top: 0.75rem;
}

/* ---------- content area ---------- */
#app_page { padding: 1.25rem 1.5rem 0; }
#app_page > section { display: flex; gap: 1.25rem; align-items: flex-start; padding: 0; }
/* the two panels become cards (inline widths left as-is) */
#app_page > section > section {
  background: var(--nf-card);
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius);
  box-shadow: var(--nf-shadow);
  padding: 1.1rem 1.2rem 1.2rem !important;
}
#app_page .app_info_section {
  background: #FFF8E1 !important;
  border: 1px solid #F1E0A6;
  border-radius: var(--nf-radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.main_page_title {
  font-family: var(--nf-display);
  font-size: 1.35rem !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nf-ink);
  display: block;
  margin-bottom: 0.35rem;
}

/* ---------- Finance entries: view switch ---------- */
#main_app .model_view {
  background: var(--nf-card) !important;          /* inline azure/lightgreen */
  color: var(--nf-soft);
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  font-size: 0.85rem;
  text-transform: lowercase;
  margin: 0.25rem 0.2rem 0.75rem 0;
}
#main_app .model_view[style*="lightgreen"] {
  background: var(--nf-teal-deep) !important;
  color: #fff;
  border-color: var(--nf-teal-deep);
  font-weight: 600;
}

/* ---------- list view ---------- */
#myezp_list_entry_view {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
#myezp_list_entry_view th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nf-soft);
  padding: 0.25rem 0.5rem 0.5rem;
  border-bottom: 1px solid var(--nf-line);
}
#myezp_list_entry_view td { padding: 0.2rem 0.5rem; vertical-align: middle; }
#myezp_list_entry_view tr.myezp_list_row td { border-bottom: 1px solid rgba(20,32,46,.06); }
#myezp_list_entry_view tr.myezp_list_row:hover td.myezp_list_row_name { color: var(--nf-teal-deep); }

#myezp_list_entry_view td.myezp_list_row_name {
  cursor: pointer;
  border-radius: 6px;
  background: transparent !important;              /* inline white */
  color: var(--nf-ink);
}
/* selected row: JS sets a non-white inline background */
#myezp_list_entry_view td.myezp_list_row_name:not([style*="white"]) {
  background: var(--nf-teal-soft) !important;
  color: var(--nf-teal-deep);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--nf-teal-deep);
}
#myezp_list_entry_view .input_value {
  width: 7.5em;
  text-align: right;
  font-family: var(--nf-mono);
  font-size: 0.9rem;
  color: var(--nf-clay);                             /* editable value */
  padding: 0.25rem 0.5rem;
}
#myezp_list_entry_view .myezp_list_row_delete {
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  color: var(--nf-clay);
  border-color: transparent;
}
#myezp_list_entry_view .myezp_list_row_main_select select { font-size: 0.85rem; margin-top: 0.15rem; }

/* ---------- entry view ---------- */
#my_ezplan { width: 100%; border-collapse: separate; border-spacing: 0 0.45rem; margin-top: 0.4rem; }
#my_ezplan td { vertical-align: middle; padding: 0 0.25rem; }
#my_ezplan td:first-child {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nf-soft);
  width: 5.5em;
}
#my_ezplan select.myezp { min-width: 11em; }
#myezp_value { font-family: var(--nf-mono); color: var(--nf-clay); width: 8em; text-align: right; }
#myezp_main_option select { margin-left: 0.3rem; }
#my_ezplan .myezp_enter_new input { width: 100%; }
#my_ezplan tr:last-child td { padding-top: 0.5rem; border-top: 1px solid var(--nf-line); }

/* Model: Save / Show / Reload row */
#my_ezplan_section > #customization2 { margin: 0.75rem 0; }
#customization2_table { border-collapse: collapse; width: 100%; font-family: var(--nf-body); font-size: 0.9rem; }
#customization2_table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nf-soft); padding: 0.2rem 0.3rem 0.4rem; }
#customization2_table td { padding: 0.2rem 0.3rem; vertical-align: middle; }
#customization2_table .row_type,
#customization2_table td[text_decoration\:underline] { text-decoration: none !important; font: inherit; color: var(--nf-ink); }
#customization2_table input { font-family: var(--nf-mono); color: var(--nf-clay); width: 7em; }
#customization2 > button { margin-top: 0.5rem; }

/* ---------- Future projection ---------- */
#main_app #top_chart_select,
#main_app #chart_run_button {
  float: right;
  margin-left: 0.5rem;
  background: var(--nf-card);
  color: var(--nf-teal-deep);
  border-color: var(--nf-teal-deep);
  font-weight: 500;
  font-size: 0.85rem;
}
#main_app #top_chart_select:hover { background: var(--nf-teal-soft); }
#main_app #chart_run_button { background: var(--nf-brass) !important; color: #fff; border-color: transparent; }
/* keep the title and its buttons on one line */
#app_page > section > section > div:first-child { display: flex; align-items: center; gap: 0.5rem; }
#app_page > section > section > div:first-child > .main_page_title { flex: 1; margin-bottom: 0; }
#app_page > section > section > div:first-child > span:last-child { margin-left: auto; }

#My_Future { background: transparent; }
#chart0 > p[align="right"] {                         /* caption */
  font-size: 0.72rem;
  color: var(--nf-soft);
  margin: 0 0 0.5rem;
  opacity: .7;
}
#chart0 .chart_selector {
  float: none;
  background: var(--nf-paper);
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius);
  padding: 0.6rem 0.9rem 0.75rem;
  margin-bottom: 0.75rem;
}
#chart0 table.chart_table { border-spacing: 10px 0; }
#chart0 table.chart_table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nf-soft);
  padding-bottom: 0.2rem;
}
#chart0 .chart_selector_button0,
#chart0 .chart_selector_button1,
#chart0 .chart_selector_button2,
#chart0 .chart_selector_button3 {
  background: var(--nf-card) !important;
  width: auto !important;
  min-width: 9em;
}
#chart0 .chart_selector_button2 { min-width: 14em; }
#chart0 .chart_selector + * { clear: both; }


/* ---------- chart selector toolbar (chart_selector.html; dormant otherwise) ---------- */
.nf-chart-toolbar {
  display: grid;
  grid-template-columns: 0 minmax(9em, 1fr) minmax(15em, 2fr) minmax(8em, 1fr) 0;
  column-gap: 1.25rem; row-gap: 0.3rem; align-items: end;
  background: var(--nf-paper); border: 1px solid var(--nf-line); border-radius: var(--nf-radius);
  padding: 0.75rem 1rem 0.85rem; margin-bottom: 0.9rem;
}
.nf-chart-toolbar .nf-chart-head, .nf-chart-toolbar .nf-chart-row { display: contents; }
.nf-chart-toolbar .nf-field-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nf-soft);
}
.nf-chart-toolbar .nf-cell-0, .nf-chart-toolbar .nf-cell-4 { overflow: hidden; width: 0; }
.nf-chart-toolbar .nf-chart-tools { grid-column: 1 / -1; justify-self: end; }
.nf-chart-toolbar .nf-cell select { width: 100%; background: var(--nf-card) !important; }
.nf-chart-toolbar .level_advanced[hidden] { display: none; }
/* caption is redundant when the toolbar is present */
#chart0:has(.nf-chart-toolbar) > p[align="right"] { display: none; }

/* interactive chart container + log */
#mpro_results { padding: 0.25rem 0 0; }
#mpro_results canvas { max-width: 100%; }
#mpro_chart_title { font-family: var(--nf-display); font-weight: 600; font-size: 1.05rem; }
#mpro_log {
  font-family: var(--nf-mono);
  font-size: 0.75rem;
  color: var(--nf-soft);
  background: var(--nf-paper);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
/* server-chart data table / dashboard */
.chart_data_table table { border-collapse: collapse; font-size: 0.85rem; }
.chart_data_table th, .chart_data_table td { padding: 0.2rem 0.5rem; border-bottom: 1px solid var(--nf-line); }

/* ---------- form view: minimum only (fonts, spacing, inputs) ---------- */
#My_Plan fieldset {
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius);
  padding: 0.75rem 1rem 1rem;
  margin-bottom: 0.9rem;
  background: var(--nf-card);
}
#My_Plan legend {
  font-family: var(--nf-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 0 0.4rem;
}
#My_Plan table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
#My_Plan th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nf-soft); padding: 0.2rem 0.4rem; }
#My_Plan td { padding: 0.15rem 0.4rem; }
#My_Plan .input_value, #My_Plan .input_param { color: var(--nf-clay); font-family: var(--nf-mono); }
#My_Plan .row_type { color: var(--nf-soft); font-size: 0.85rem; }
#My_Plan .add_field_btn button { padding: 0.15rem 0.55rem; }


/* ---------- Settings popup (#customization) + Show-model popup (#model) ----------
   Fixed, viewport-centred modal with a backdrop (box-shadow spread; no extra markup).
   Replaces position:absolute; top:25%; right:10%, which depended on scroll position. */
#main_app fieldset#customization,
#main_app fieldset#model {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%);
  z-index: 2000;
  width: min(92vw, 420px);
  max-width: none !important;
  max-height: 85vh;
  overflow: auto;
  background: var(--nf-card);
  border: 1px solid var(--nf-line);
  border-radius: 14px;
  padding: 1.1rem 1.25rem 1.2rem !important;
  box-shadow: 0 0 0 100vmax rgba(20,32,46,.38), 0 24px 60px rgba(20,32,46,.25) !important;
  font-family: var(--nf-body);
  font-size: 0.92rem;
  color: var(--nf-ink);
}
#main_app fieldset#model { width: min(92vw, 760px); }
#main_app fieldset#customization[hidden],
#main_app fieldset#model[hidden] { display: none !important; }

/* Display/Model/Advanced group buttons: hide the row when all are hidden */
#customization > div:first-child { margin-bottom: 0.75rem; display: flex; gap: 0.4rem; }
#customization > div:first-child:not(:has(button:not([hidden]))) { display: none; }
#customization > div:first-child .top_button {
  margin: 0 !important; background: var(--nf-card); color: var(--nf-ink); border-color: var(--nf-field-line);
}

#customization_table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; position: static; }
table#customization_table:before { display: none; }
#customization_table th, #customization_table td { padding: 0.3rem 0.35rem; vertical-align: middle; }
#customization_table th {
  text-align: left; font-size: 0.72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--nf-soft); border-bottom: 1px solid var(--nf-line);
}
#customization_table td { border-bottom: 1px solid rgba(20,32,46,.06); }
#customization_table .row_type,
#customization_table td[text_decoration\:underline] {
  text-decoration: none !important; font: inherit; color: var(--nf-ink); white-space: nowrap;
}
#customization_table tr td input { width: 7.5em; font-family: var(--nf-mono); color: var(--nf-clay); text-align: right; }
#customization_table input[type="checkbox"] { width: auto; accent-color: var(--nf-teal-deep); opacity: 1; transform: scale(1.15); }
#customization > button, #model > .model_buttons { margin-right: 0.4rem; }
#customization > button:first-of-type,
#customization > button[onclick*="true"] {
  background: var(--nf-teal-deep); color: #fff; border-color: var(--nf-teal-deep); font-weight: 600;
}
#model_current {
  width: 100%; font-family: var(--nf-mono); font-size: 0.8rem; border: 1px solid var(--nf-line);
  border-radius: 8px; padding: 0.6rem; color: var(--nf-ink); background: var(--nf-paper);
}

/* ---------- misc ---------- */
#main_app .copyright, #main_app footer { font-size: 0.8rem; color: var(--nf-soft); }
#main_app small { color: var(--nf-soft); }

/* narrow screens: stack the two cards */
@media (max-width: 1100px) {
  #app_page > section { flex-direction: column; }
  #app_page > section > section { width: 100% !important; }
}