/*
 * PrimeFaces 15 colours every plain input on the page to its own theme:
 *
 *   body input:not([role="combobox"], [type="file"], .ui-widget, .ui-inputfield)
 *
 * The buttons of these pages are h:commandButtons carrying Bootstrap's outline classes, so that
 * rule turns all of them - Refresh, the kWh limits, force start and stop - the same grey. These
 * put their colours back, at a specificity that beats it.
 */
body input.btn.btn-outline-primary {
  color: #007bff;
  border-color: #007bff;
}

body input.btn.btn-outline-success {
  color: #28a745;
  border-color: #28a745;
}

body input.btn.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

body input.btn.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

body input.btn.btn-outline-primary:hover,
body input.btn.btn-outline-success:hover,
body input.btn.btn-outline-warning:hover,
body input.btn.btn-outline-danger:hover {
  color: #fff;
}

/*
 * The same for a p:commandButton - the charging plan's New trip and Rebuild now, which need its
 * ajax. PrimeFaces draws those as its own filled theme button whatever Bootstrap class they carry,
 * so in the corner of the page they stood out as the only filled ones (issue 710).
 */
body .ui-button.btn.btn-outline-primary {
  background: transparent;
  color: #007bff;
  border: 1px solid #007bff;
  box-shadow: none;
}

body .ui-button.btn.btn-outline-primary:hover {
  background: #007bff;
  color: #fff;
}

body .ui-button.btn .ui-button-text {
  padding: 0;
  line-height: inherit;
}

/*
 * The padding above also took away the room PrimeFaces leaves on the left for a button's icon,
 * which it positions absolutely - so on the vehicle page's Air conditioning and Lock the car the
 * icon sat on top of the first letters (issue 776). Put the icon back in the flow, beside the text.
 */
body .ui-button.btn.ui-button-text-icon-left {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

body .ui-button.btn.ui-button-text-icon-left .ui-button-icon-left {
  position: static;
  margin: 0;
}