/* Keep the FlowX shell and typography consistent when legacy Worksuite styles load. */
body.left-sidebar.flow-legacy-theme,
body.left-sidebar.flow-legacy-theme .shell > main,
body.left-sidebar.flow-legacy-theme .header-top,
body.left-sidebar.flow-legacy-theme #site-sidebar {
  font-family: system-ui, "Segoe UI", sans-serif !important;
}

body.left-sidebar.flow-legacy-theme .shell > main {
  color: var(--ink);
}

body.left-sidebar.flow-legacy-theme {
  color: var(--ink) !important;
}

/* ProjectHub, Equipment, and Warranty keep blue active tabs in their legacy CSS. */
body.left-sidebar.flow-legacy-theme .shell > main :is(.ph-topnav-item.active, .eq-nav-item.active, .wr-nav-item.active) {
  background-color: #e9f5f4 !important;
  color: var(--brand) !important;
}

body.left-sidebar.flow-legacy-theme .shell > main :is(h1,h2,h3,h4,h5,h6,table,input,select,textarea,button,.btn) {
  font-family: inherit !important;
}

body.left-sidebar.flow-legacy-theme .shell > main .btn-primary {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

body.left-sidebar.flow-legacy-theme .shell > main .btn-primary:hover,
body.left-sidebar.flow-legacy-theme .shell > main .btn-primary:focus-visible {
  filter: brightness(.92);
}

body.left-sidebar.flow-legacy-theme .shell > main .btn-outline-primary {
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  background-color: transparent !important;
}

body.left-sidebar.flow-legacy-theme .shell > main .btn-outline-primary:hover,
body.left-sidebar.flow-legacy-theme .shell > main .btn-outline-primary:focus-visible {
  background-color: var(--brand) !important;
  color: #fff !important;
}

/* Timesheet's Bootstrap-style four-part summary needs column widths when
   the host page does not load Bootstrap. Keep two columns on phones. */
body.left-sidebar.flow-legacy-theme .shell > main .row.g-3 > .col-6.col-md-3 {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
  padding: 0 8px 12px;
}

@media (min-width: 768px) {
  body.left-sidebar.flow-legacy-theme .shell > main .row.g-3 > .col-6.col-md-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
}

body.left-sidebar.flow-legacy-theme .shell > main .nav-pills .nav-link.active {
  background-color: var(--brand) !important;
  color: #fff !important;
}

/* Legacy module cards and actions use blue even where Bootstrap buttons are teal. */
body.left-sidebar.flow-legacy-theme .shell > main :is(.eq-stat, .wr-stat, .ph-addclient-toggle, .add_xt_add, .est-topnav-item) {
  color: var(--brand) !important;
}

body.left-sidebar.flow-legacy-theme .shell > main .est-topnav-item.active {
  background-color: #e9f5f4 !important;
}

body.left-sidebar.flow-legacy-theme .shell > main a[href*='/modules/estimator/account/estimator/estimates/'][href$='/edit']:not(.btn) {
  color: var(--brand) !important;
}

/* The Service Estimator editor has additional custom accent styles. */
body.left-sidebar.flow-legacy-theme .shell > main #estBuilder :is(.est-opt-tab.ghost, .est-equip-modes .nav-link.active) {
  color: var(--brand) !important;
}

body.left-sidebar.flow-legacy-theme .shell > main #estBuilder :is(.est-opt-tab.on, .est-sysbox) {
  border-color: var(--brand) !important;
}