/* Overwrite styles that couldn't be handled via MUI styleOverrides */
/*** CSS Variables ***/
:root {
  /* Corporate Affairs design variables */
  --ca-max-width: 1648;
  --ca-gutters: 40px;
  --ca-chart-bg-color: transparent;
  --ca-divider-color: #E9E9E9;
  --ca-performance-header-bg-color: #F6F6F6;

  /* MarTech variables */
  --mar-wp-nav-transition: none;
  --mar-max-width: 1140;
  --mar-scale-ratio: calc(var(--mar-max-width) / var(--ca-max-width));
  --mar-wp-nav-offset: 0;
  --mar-wp-nav-height: calc(var(--h-site-header--fixed, 0) - var(--mar-wp-nav-offset, 0));
  --mar-nav-buffer: calc(var(--wp-admin--admin-bar--height, 0) + var(--mar-wp-nav-height));
  --mar-gutters: calc(var(--ca-gutters) * var(--mar-scale-ratio));
  --mar-donut-width: 100%;

  --mar-spacing-v--xs: 24px;
  --mar-spacing-v--sm: 32px;
  --mar-spacing-v--md: 40px;
  --mar-spacing-v--lg: 48px;
  --mar-spacing-v--xl: 56px;
  --mar-spacing-v--xxl: 64px;
  
  --mar-spacing-vt--xs: var(--mar-spacing-v--md);
  --mar-spacing-vt--sm: var(--mar-spacing-v--lg);
  --mar-spacing-vt--md: var(--mar-spacing-v--xl);
  --mar-spacing-vt--lg: var(--mar-spacing-v--md);
  --mar-spacing-vt--xl: var(--mar-spacing-v--lg);
  --mar-spacing-vt--xxl: var(--mar-spacing-v--xl);

  --mar-spacing-vb--xs: 80px;
  --mar-spacing-vb--sm: 88px;
  --mar-spacing-vb--md: 96px;
  --mar-spacing-vb--lg: 112px;
  --mar-spacing-vb--xl: 120px;
  --mar-spacing-vb--xxl: 128px;

  --mar-spacing-v: var(--mar-spacing-v--sm);
  --mar-spacing-vt: var(--mar-spacing-vt--sm);
  --mar-spacing-vb: var(--mar-spacing-vb--sm);

  --mar-fs-h2: 28px;
  --mar-fs-h3: 12px;
  --mar-fs-h4: 20px;
  --mar-fs-p-lg: 18px;
  
  --mar-fs-input: var(--mar-fs-p-lg);
  --mar-fs-tab: var(--mar-fs-p-lg);
  /* iCap implementation variables */
  --ic-portfolio-title-height: 138;
  --c-underline: transparent;
}

@media (min-width: 416px) {
  :root {
    --mar-spacing-v: var(--mar-spacing-v--md);
    --mar-spacing-vt: var(--mar-spacing-vt--md);
    --mar-spacing-vb: var(--mar-spacing-vb--md);
  }
}

@media (min-width: 600px) {
  :root {
    --ic-portfolio-title-height: 96;
  }
}

@media (min-width: 768px) {
  :root {
    --ic-portfolio-title-height: 72;
    --mar-spacing-v: var(--mar-spacing-v--lg);
    --mar-spacing-vt: var(--mar-spacing-vt--lg);
    --mar-spacing-vb: var(--mar-spacing-vb--lg);
  }
}

@media (min-width: 1000px) {
  :root {
    --ca-gutters: 60px;
    
    --mar-fs-h2: 32px;
    --mar-fs-h4: 24px;
    
    --mar-donut-width: 300px;
    
    --ic-portfolio-title-height: 72;
  }
}

@media (min-width: 1280px) {
  :root {
    --mar-spacing-v: var(--mar-spacing-v--xl);
    --mar-spacing-vt: var(--mar-spacing-vt--xl);
    --mar-spacing-vb: var(--mar-spacing-vb--xl);
  }
}
@media (min-width: 1440px) {
  :root {
    --mar-fs-tab: 20px;
    --mar-spacing-v: var(--mar-spacing-v--xxl);
    --mar-spacing-vt: var(--mar-spacing-vt--xxl);
    --mar-spacing-vb: var(--mar-spacing-vb--xxl);
  }
}
@media (min-width: 1920px) {}
/*-- end CSS Variables --*/

#ArchitectPublic {
  padding-bottom: var(--ca-gutters);
}


/*** Analysis title ***/
.MuiGrid2-root[data-testid="analysis-header"] {
  /* adjust the sticky activation point */
  top: var(--mar-nav-buffer, 0px);
  transition: top var(--mar-wp-nav-transition);
  z-index: 2;
}

/*** Section indicator tabs ***/
.MuiGrid2-root[data-testid="analysis-header"] + .MuiBox-root {
  top: calc(1px * var(--ic-portfolio-title-height) + var(--mar-nav-buffer, 0px));
  transition: top var(--mar-wp-nav-transition);
  z-index: 2;
}
/* .MuiTab-root[data-testid="tab-scenarios"] {
  display: none;
} */

/* Section title spacing */
#section-growth > .MuiStack-root:first-child, 
#section-allocations > .MuiStack-root:first-child {
  margin-bottom: 12px;
}

/*** Allocations Donut Charts container ***/
.MuiBox-root[data-testid="allocation-chart-0"],
.MuiBox-root[data-testid="allocation-chart-1"] {
  align-items: flex-start;
  background-color: var(--ca-chart-bg-color);
  display: flex;
  justify-content: center;
  padding: var(--mar-gutters);
}

@media (min-width: 1000px) {
  .MuiBox-root[data-testid="allocation-chart-0"],
  .MuiBox-root[data-testid="allocation-chart-1"] {
    max-width: 50%;
  }
}

.MuiBox-root[data-testid="allocation-chart-0"] > .MuiBox-root,
.MuiBox-root[data-testid="allocation-chart-1"] > .MuiBox-root {
    /* flex-basis: var(--mar-donut-width); */
    flex-basis: 100%;
}
/* Make charts & legends vertical align */
.MuiBox-root[data-testid="allocation-chart-0"] > .MuiBox-root > .MuiBox-root:last-of-type,
.MuiBox-root[data-testid="allocation-chart-1"] > .MuiBox-root > .MuiBox-root:last-of-type {
    /* flex-direction: column; */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}
.MuiBox-root[data-testid="allocation-chart-0"] .MuiTypography-largeParagraph,
.MuiBox-root[data-testid="allocation-chart-1"] .MuiTypography-largeParagraph {
    white-space: wrap;
    width: var(--mar-donut-width); 
}
/* Reorder the legend text and % */
li[data-testid="allocation-chart-legend-item"]
	> p[data-testid="allocation-chart-legend-value"] {
	order: 2;
}
/* Make all the appropriate children 100% width */
.MuiBox-root[data-testid="allocation-chart-0"] .MuiBox-root[data-testid="allocation-chart-container"],
.MuiBox-root[data-testid="allocation-chart-1"] .MuiBox-root[data-testid="allocation-chart-container"],
.MuiBox-root[data-testid="allocation-chart-0"] .MuiBox-root[data-testid="allocation-chart-container"] > .MuiBox-root,
.MuiBox-root[data-testid="allocation-chart-1"] .MuiBox-root[data-testid="allocation-chart-container"] > .MuiBox-root {
    width: var(--mar-donut-width);
}
.MuiBox-root[data-testid="allocation-chart-0"] .donutChart,
.MuiBox-root[data-testid="allocation-chart-1"] .donutChart {
    width: 100%;
    z-index: 1;
}
/* Prevent Asset Class names in legend from breaking line */
.MuiBox-root[data-testid="allocation-chart-0"] .MuiTypography-root[data-testid="allocation-chart-legend-name"],
.MuiBox-root[data-testid="allocation-chart-1"] .MuiTypography-root[data-testid="allocation-chart-legend-name"] {
  white-space: nowrap;
}

/*** H4 Subheader text box styles ***/
.MuiTypography-h4 + .MuiTypography-paragraph {
  --ca-local-width: 1024;
  width: min(100%, calc(1px * var(--ca-local-width) * calc(var(--ca-local-width) / var(--mar-max-width))));
}

/*** Performance & Growth Table & Chart ***/
.MuiStack-root[data-testid="tab-sections"] hr {
    display: none;
}

#section-growth > .MuiStack-root:last-child {
    background-color: var(--ca-chart-bg-color);
    padding: var(--mar-gutters);
}
/* hide the i icon */
#section-growth .MuiStack-root[data-testid="buttons"] > .MuiBox-root:first-of-type {
  display: none;
}
.MuiGrid2-root[data-testid="growth-information-grid"] {
    font-size: 20px;
    font-family: "Guardian Sans", serif;
    border-bottom: 1px solid #E9E9E9;
    border-right: 1px solid #E9E9E9;
}

@media (max-width: 999px) {
  /* Add left border to parent */
  .MuiGrid2-root[data-testid="growth-information-grid"] {
      border-left: 1px solid #E9E9E9;
  }
  
  /* Remove left border from value wrapper rows */
  .MuiGrid2-root .growth-info-value-wrapper-row {
      border-left: none;
  }
}

@media (min-width: 768px) {
	.MuiGrid2-root[data-testid="growth-information-grid"] .MuiStack-root[data-testid="growth-info-wrapper"] > * {
		border-bottom: 1px solid var(--ca-divider-color);
	}
}

.MuiGrid2-root[data-testid="growth-information-grid"] .growth-info-label-wrapper {
    border-color: transparent;
}

/***** Hide unwanted columns *****/
/* .MuiGrid2-root[data-testid="growth-information-grid"] > .MuiGrid2-root:nth-of-type(n+5) {
    display: none;
} */
/* .MuiGrid2-root[data-testid="growth-information-grid"] > .MuiGrid2-root {
  --Grid-colspan: 6;
  width: calc(100% * var(--Grid-colspan) / var(--Grid-columns));
} */

/* @media (min-width: 768px) {
  .MuiGrid2-root[data-testid="growth-information-grid"] > .MuiGrid2-root {
    --Grid-colspan: 2;
    width: calc(100% * var(--Grid-colspan) / var(--Grid-columns));
  }
} */

/* @media (min-width: 1000px) {
  .MuiGrid2-root[data-testid="growth-information-grid"] > .MuiGrid2-root:first-child {
      --Grid-colspan: 6;
  }
} */

/* Growth grid column headers */
.MuiGrid2-root[data-testid="growth-information-grid"] .growth-info-label {
    font-weight: 400;
}

/* Growth grid year range text */
.MuiGrid2-root[data-testid="growth-information-grid"] .MuiTypography-largeCaption {
    font-weight: 300;
}
/* Growth table: each cell */
/* .MuiGrid2-root[data-testid="growth-information-grid"] .growth-info-value-wrapper-row {
    padding: 24px 24px;
} */

/* Growth table: main text in each cell */
.MuiGrid2-root[data-testid="growth-information-grid"] .growth-info-value-wrapper-row .MuiTypography-smallBoldParagraph {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5em;
}
/* Growth table: main text in each value cell */
.MuiGrid2-root[data-testid="growth-information-grid"] .growth-info-value-wrapper-column .MuiTypography-smallBoldParagraph {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
}
/* Growth table: each cell text content container */
.MuiGrid2-root[data-testid="growth-information-grid"] .growth-info-value-wrapper-column {
    min-height: 51px;
}
.MuiGrid2-root[data-testid="growth-information-grid"] .MuiStack-root[data-testid^="growth-info-delta"] {
  margin-top: 0;
}

.highcharts-legend-item div > div:empty,
.MuiStack-root[data-testid="portfolios"] .MuiBox-root:empty ,
.MuiStack-root[data-testid="assets-list"] .MuiBox-root:empty {
  border-radius: 0px !important;
}
  
/*** Scenarios chart ***/
/* .MuiStack-root#section-scenarios {
  display: none;
} */
  
/*** Portfolio Analyzer Footer ***/
.MuiBox-root[data-testid="footer"] {
    height: 0;
    margin-bottom: 60px;
    overflow: hidden;
}

/*** Report Form ***/
.MuiDialog-paper .MuiOutlinedInput-input {
    box-shadow: none;
}
.MuiDialog-paper .MuiFormLabel-root.MuiInputLabel-root, 
.MuiDialog-paper .MuiTypography-smallParagraph
.MuiButton-root  {
    font-family: "Guardian Sans", sans-serif;
    font-weight: 400;
    color: #000; /*set input field lables to black on the form modal*/
}
.MuiDialog-paper .MuiFormControlLabel-root .MuiCheckbox-root {
  align-self: flex-start;
  padding-top: 2px;
}

/* Update color of the Close icon to black on the form modal */
.MuiSvgIcon-root[data-testid="CloseIcon"] {
  color: #000;
}

/* Disclaimer text styles */
.MuiDialogContent-root .MuiTypography-smallParagraph {
    font-size: 14px;
    font-weight: 400;
}

/* Change opacity for "Alternately, continue to view the Report" text on form modal */
.MuiDialogContent-root div > .MuiTypography-smallParagraph:not([data-testid]) {
  opacity: 60%;
}

/*** Custom Analysis page ***/
/** Donut chart(s) **/
/* Hide "# assets" label */
#section-allocations .MuiBox-root[data-testid="donut-chart"] + .MuiBox-root > .MuiTypography-root:last-child {
    display: none;
}

/* Fix for layout shift when opening dropdowns.
Disable scrolling on body to prevent double scrollbars. 
Ensure MUI components don't trigger unwanted padding-right adjustments.
*/
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    overflow-y: visible !important;
    padding-right: 0 !important;
}

#ArchitectPublic {
    overflow-x: hidden;
    padding-right: 0 !important;
}

@media (max-width: 1024px) {
  #ArchitectPublic {
    overflow-x: visible;
  }
}

/*Loader */
#host-[id] .mfe-loader,
.mfe-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 8px solid #f3f3f3;
    border-top: 8px solid #333;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 1s linear infinite;
    z-index: 10;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.MuiInputBase-root input,
.MuiInput-input,
.MuiFilledInput-input,
.MuiOutlinedInput-input {
    box-shadow: none;
}

/************************* 
** TEMP Design Feedback **
*************************/
.MuiGrid2-root[data-testid="analysis-header"] + .MuiBox-root {
  margin-bottom: var(--mar-spacing-v);
  margin-top: var(--mar-spacing-v);
}

.MuiStack-root[data-testid="toggle-group-analysis"] {
  margin-top: var(--mar-spacing-v);
  padding-top: 0;
}

.MuiBox-root[data-testid="wrapper-body"] > .MuiStack-root > .MuiStack-root:nth-of-type(2) {
  margin-top: var(--mar-spacing-vt);
}

.MuiBox-root[data-testid="wrapper-body"] > .MuiStack-root > .MuiStack-root:nth-of-type(3) {
  margin-top: var(--mar-spacing-v);
}

.MuiGrid2-root[data-testid="analysis-header"] + .MuiBox-root .MuiTabs-root .MuiTab-root {
  font-size: var(--mar-fs-tab);
}

.MuiStack-root[data-testid="tab-sections"] {
  margin-top: 0px;
}

#section-allocations,
#section-growth {
  margin-bottom: calc(2 * var(--mar-spacing-v));
}
#section-growth {
  margin-top: 0;
}

#section-allocations > .MuiStack-root:first-child,
#section-growth > .MuiStack-root:first-child {
  margin-bottom: 0;
}

#section-growth > .MuiStack-root:last-child {
  padding: 0;
}

.MuiStack-root[data-testid="allocations-charts-container"] {
  margin-top: var(--mar-spacing-v--xs);
}

.MuiGrid2-root[data-testid="growth-information-grid"] > .MuiGrid2-root {
  --Grid-colspan: 6;
}
@media (min-width: 1000px) {
  /* Change first column "span" */
  .MuiGrid2-root[data-testid="growth-information-grid"] > .MuiGrid2-root:first-child,
  .MuiGrid2-root[data-testid="growth-information-grid"] > .MuiGrid2-root {
    --Grid-colspan: 3;
  }
}

.MuiGrid2-root[data-testid="growth-information-grid"] .MuiStack-root[data-testid="growth-info-wrapper"] > * {
  border-bottom: none;
}

/* Set text field default background ccolor in the form modal */
.MuiInputBase-formControl {
  background-color: rgb(231, 234, 238) !important;
}

/* Set text field focus background ccolor in the form modal */
/* Set text color for text field in the form modal */
.MuiInputBase-formControl.Mui-focused {
  background-color: #F4F5F7 !important;
  color: #000000;
}

/* Set CancelIcon color when the input is focused in the form modal */
.MuiOutlinedInput-root.Mui-focused .MuiSvgIcon-root[data-testid="CancelIcon"] {
  color: rgba(0, 0, 0, 0.54) !important;
}

/* Remove curved button edges */
.MuiButton-root {
  border-radius: 0;
}

/* Show Vertical divider */
[data-testid="sidebar"] .MuiDivider-vertical {
  border-color: #E4E4E4 !important;
}

.growth-info-label-wrapper:not(:empty) {
  background-color: var(--ca-performance-header-bg-color);
}

/* Default: 14px for all devices (below 1000px and above 2000px) */
[data-testid="growth-information-grid"] p {
  font-size: 0.75rem;
}

/* Between 1000px and 2000px: Use your scaling clamp formula */
/* 10px (min) → scales with viewport → 16px (max) */
/* @media (min-width: 1000px) and (max-width: 2000px) {
  [data-testid="growth-information-grid"] p {
    font-size: clamp(0.625rem, 0.625vw + 0.375rem, 1rem) !important;
  }
  
  [data-testid="growth-information-grid"] .MuiTypography-caption {
    font-size: 0.625rem;
  }
} */

.MuiStack-root[data-testid="toggle-group-analysis"] {
  margin-block: var(--mar-spacing-v);
}

.MuiGrid2-root.MuiGrid2-direction-xs-row.MuiGrid2-grid-xs-6.MuiGrid2-grid-md-7.MuiGrid2-grid-lg-8 {
  display: block;
}

[data-testid^="allocation-chart-"] > .MuiBox-root {
  container: unset !important;  
  display: block !important;
}

[data-testid^="allocation-chart-"] 
  > .MuiBox-root:has([data-testid="empty-chart"]) 
  > [data-testid="title"] {
    margin-bottom: 12px;
}

[data-testid="goals-filters"] .MuiGrid2-root.MuiGrid2-container {
  justify-content: flex-start !important;
}

@media (min-width: 900px) {
  [data-testid="goals-filters"] .MuiGrid2-container {
    column-gap: 20px;
  }

  [data-testid="goals-filters"]
    .MuiGrid2-container
    > .MuiGrid2-root {
    --Grid-colspan: 6;
    width: calc(
      (100% - 24px) * var(--Grid-colspan) / var(--Grid-columns)
    );

    max-width: 420px;
  }
}

/* Apply to ArchitectPublic */
#ArchitectPublic {
  padding-bottom: var(--mar-spacing-vb--xxl);
}

@media (max-width: 1920px) {
  #ArchitectPublic {
    padding-bottom: var(--mar-spacing-vb--xl);
  }
}

@media (max-width: 1440px) {
  #ArchitectPublic {
    padding-bottom: var(--mar-spacing-vb--lg);
  }
}

@media (max-width: 1024px) {
  #ArchitectPublic {
    padding-bottom: var(--mar-spacing-vb--md);
  }
}

@media (max-width: 768px) {
  #ArchitectPublic {
    padding-bottom: var(--mar-spacing-vb--sm);
  }
}

@media (max-width: 480px) {
  #ArchitectPublic {
    padding-bottom: var(--mar-spacing-vb--xs);
  }
}

.MuiDialog-root hr {
  display: none;
}

/* hr.MuiDivider-root {
  border-color: transparent !important;
  background-color: transparent;
} */

@media (min-width: 1000px) and (max-width: 2000px) {
    [data-testid="growth-information-grid"] p {
        font-size: 0.75rem !important;
    }

    [data-testid="growth-information-grid"] .MuiTypography-caption {
        font-size: 0.625rem;
    }
}

@media (min-width: 1000px) {
    .MuiGrid2-root[data-testid="growth-information-grid"] .growth-info-value-wrapper-row {
        padding: 8px;
    }
}

@media (min-width: 1280px) {
    .MuiGrid2-root[data-testid="growth-information-grid"] .growth-info-value-wrapper-row {
        padding: 24px;
    }
}