/* American Steel CSS overrides ///////////////////////////////////////////////////////////////////////////////////// */
/* See https://idearoom.atlassian.net/wiki/spaces/ENGINEERIN/pages/725614597/ for usage */

/* Import custom font for use throughout. */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500');

/* https://app.clubhouse.io/idearoominc/story/7149 */
/* Hide menu title decoration */
.ir-MenuButton-root .MuiCardHeader-action {
  display: none;
}

/* Disable rounded corners */
.ir-MenuButton-root {
  /* .MuiPaper-rounded sets this so we need to set as !important. */
  border-radius: 0 !important;
}

/* Reduce vertical margin */
.ir-MenuButton-root {
  margin-bottom: 1px !important;
}
/* Remove margin from last button since black background shows the extra margin */
.ir-MenuManager-button-last .ir-MenuButton-root {
  margin-bottom: 0px !important;
}

/* Change menu header background color */
.ir-MenuButton-root .MuiCardHeader-root {
  /* Using !important because the vendor data can set this value too for the details menu header. */
  background-color: rgb(156, 37, 36) !important;
  /* background-color: rgb(31, 115, 189) !important; */

  /* SSFIXME: add to wiki article */ 
  /* Prevent sales tools from rendering differently from other menu items */
  border: none !important; /* Important because sales tools adds a 1px border */
  border-radius: 0 !important;
}

/* Change menu header font */
/* Using longest string of text to determine size (smallest in spec) - "SERVICES, FINANCING, & WARRANTY" */
.ir-MenuButton-root .MuiCardHeader-root .MuiCardHeader-content .MuiTypography-subtitle1 {
  /* Using !important because the vendor data can set this value too for the details menu header. */
  /* Transparent white so it can work with other colors. */
  color: rgba(255, 255, 255, 0.875) !important;

  /* Style and size */
  font-family: 'Teko' !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 30px !important; /* Text should be 19px tall. */
  line-height: 26px !important; /* Space between each line of text should be 7px tall. */
}

/* Remove side margin from menu area */
.ir-MenuManager-root {
  /* Using !important because we inline style this to be 4px on all sides. */
  padding: 0px !important;
}
/* Also add margin to menu tab content containers to compensate. */
.ir-MenuManager-activeContentContainer .MuiCollapse-wrapper {
  margin: 16px;
}

/* Set adaptive menu background to custom black */
.ir-AdaptiveMenu-root {
  /* SSFIXME: should we continue in mobile version of menu? */
  background-color: rgb(25, 25, 25);
}

/* Remove EmailQuoteButtons component */
.ir-EmailQuoteButtons-root {
  /* Using !important because we set the display to "flex" normally. */
  display: none !important;
}

/* Set background of menu content containers to off white */
.ir-MenuManager-buttonContainer {
  /* Using !important because .MuiPaper-root sets to white. */
  background-color: rgb(241, 241, 241) !important;
}

/* Ensure that image on headers has 30px on right before text starts. */
/* Ensure that image on headers has 30px on left. */
.ir-MenuManager-button .MuiCardHeader-avatar {
  margin-right: 30px;
  margin-left: 20px; /* 10px existing padding on parent + 20px here = 30px desired left margin */
}

/* Set the size of the icon used in each menu title. */
.ir-MenuManager-button .ir-MenuItemAvatar-root {
  height: 40px;
  width: 40px;
}

/* Control the height of the custom header (default is 120px). */
.ir-CustomHeader-root {
  height: 120px !important; /* Must use !important because default is set at 120px */
}

/* Deal with weird height of TextFields until we are able to put labels into the control itself. */
/* TextField */
.MuiFilledInput-input {
  /* SSFIXME: Figure out how to fix this on the sales tools tab. */
  padding-top: 12px !important; /* Initial value is 27px so need to override with !important. */
}
.TextField-with-integrated-label .MuiFilledInput-input {
  padding-top: 27px !important; /* Revert since the label is implemented properly. */
}
/* AutoComplete */
.MuiAutocomplete-inputRoot {
  padding-top: 0px !important; /* Initial value is 19px so need to override with !important. */
}

/**********************************************************************************************************************/
/* Style DetailsCard components to look more like spec without any structural changes.                                */
/**********************************************************************************************************************/
.ir-DetailsCard-root {
  background: rgb(24, 26, 26) !important;

  /* Since we are on a dark background, make sure all text is white. */
  color: rgba(255, 255, 255, 0.8) !important;

  /* MuiCardHeader and MuiCardActions children have 8px padding (8+12 = 20px from spec). */
  /* Not applying to MuiCardHeader and MuiCardActions individually because we padding would double between elements. */
  padding: 12px;
}

/* Square off buttons in the details card. */
.ir-DetailsCard-root .MuiButton-root {
  border-radius: 0px;
}

/* Color the non-filled buttons in the details card to be gray with tan outline and text. */
.ir-DetailsCard-root .MuiButton-outlinedPrimary {
  background: rgb(47, 47, 47);
  color: rgb(229, 219, 206);
  border: 1px solid rgba(229, 219, 206, 0.5);
}