:root {
  --portal-button: #ef7617;
  --portal-button-hover: #cf5b0c;
  --portal-button-pressed: #943700;
  --portal-button-focus: #ffb47d;
  --portal-button-disabled: #8d969c;
}

:where(
  button:is(.primary,.secondary,.ghost,.smallbtn,.danger,.red,.dark,.submit,.invoicepdf,.quotepdf,.startbtn,.stopbtn,.addline,.workorderclock,.projectupdateaction,.projectinvoiceaction,.customerjump,.floorrefresh,.kiosklogout),
  a.primary,
  a.secondary,
  a.ghost,
  a.smallbtn,
  a.danger,
  a.red,
  a.dark,
  a.submit,
  a.invoicepdf,
  a.quotepdf
) {
  border-color: var(--portal-button) !important;
  background-color: var(--portal-button) !important;
  color: #fff !important;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .11s ease, border-color .11s ease, box-shadow .11s ease, transform .06s ease !important;
}

:where(
  button:is(.primary,.secondary,.ghost,.smallbtn,.danger,.red,.dark,.submit,.invoicepdf,.quotepdf,.startbtn,.stopbtn,.addline,.workorderclock,.projectupdateaction,.projectinvoiceaction,.customerjump,.floorrefresh,.kiosklogout),
  a.primary,
  a.secondary,
  a.ghost,
  a.smallbtn,
  a.danger,
  a.red,
  a.dark,
  a.submit,
  a.invoicepdf,
  a.quotepdf
):hover {
  border-color: var(--portal-button-hover) !important;
  background-color: var(--portal-button-hover) !important;
  color: #fff !important;
}

:where(
  button:is(.primary,.secondary,.ghost,.smallbtn,.danger,.red,.dark,.submit,.invoicepdf,.quotepdf,.startbtn,.stopbtn,.addline,.workorderclock,.projectupdateaction,.projectinvoiceaction,.customerjump,.floorrefresh,.kiosklogout),
  a.primary,
  a.secondary,
  a.ghost,
  a.smallbtn,
  a.danger,
  a.red,
  a.dark,
  a.submit,
  a.invoicepdf,
  a.quotepdf
):is(:active, .portal-button-pressed) {
  border-color: var(--portal-button-pressed) !important;
  background-color: var(--portal-button-pressed) !important;
  color: #fff !important;
  box-shadow: inset 0 3px 7px rgba(61, 20, 0, .42) !important;
  transform: translateY(1px) scale(.985) !important;
}

:where(
  button:is(.primary,.secondary,.ghost,.smallbtn,.danger,.red,.dark,.submit,.invoicepdf,.quotepdf,.startbtn,.stopbtn,.addline,.workorderclock,.projectupdateaction,.projectinvoiceaction,.customerjump,.floorrefresh,.kiosklogout),
  a.primary,
  a.secondary,
  a.ghost,
  a.smallbtn,
  a.danger,
  a.red,
  a.dark,
  a.submit,
  a.invoicepdf,
  a.quotepdf
):focus-visible {
  outline: 3px solid var(--portal-button-focus) !important;
  outline-offset: 2px !important;
}

:where(button, input[type="button"], input[type="submit"]):disabled,
:where(button, a)[aria-disabled="true"] {
  border-color: var(--portal-button-disabled) !important;
  background-color: var(--portal-button-disabled) !important;
  color: #fff !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: .62 !important;
  transform: none !important;
}

:where(
  button:is(.primary,.secondary,.ghost,.smallbtn,.danger,.red,.dark,.submit,.invoicepdf,.quotepdf,.startbtn,.stopbtn,.addline,.workorderclock,.projectupdateaction,.projectinvoiceaction,.customerjump,.floorrefresh,.kiosklogout),
  a.primary,
  a.secondary,
  a.ghost,
  a.smallbtn,
  a.danger,
  a.red,
  a.dark,
  a.submit,
  a.invoicepdf,
  a.quotepdf
):is(.active, .on, [aria-pressed="true"]):not(.projectviewtoggle *) {
  border-color: #b44806 !important;
  background-color: #b44806 !important;
  color: #fff !important;
}

/* Deze elementen zijn inhoudskeuzes of kaarten en blijven bewust rustig. */
.searchselectresults button,
.manualinvoicearticlesuggestions button,
.incominginvoicestats button,
.projectviewtoggle button {
  border-color: var(--line, #d8d2c8) !important;
  background-color: #fff !important;
  color: var(--ink, #14202a) !important;
  box-shadow: none !important;
  transform: none !important;
}

.searchselectresults button:is(:hover, .active, .selected),
.manualinvoicearticlesuggestions button:hover,
.incominginvoicestats button:is(:hover, .on),
.projectviewtoggle button.on {
  border-color: var(--portal-button) !important;
  background-color: #fff0e4 !important;
  color: #8f410b !important;
}

/* Uren- en activiteitenmatrices zijn informatieve vakken, geen oranje acties. */
.reportdaybutton {
  border-color: transparent !important;
  background-color: var(--report-cell-background, #e5e8e6) !important;
  color: var(--report-cell-color, #68716d) !important;
  box-shadow: none !important;
  transform: none !important;
}

.reportdaybutton:hover {
  filter: brightness(.94);
}

.activitymatrixbutton {
  border-color: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Periodekeuzes zijn rustige navigatie en blijven daarom grijs. */
.timereportnav button {
  border-color: #c8cdca !important;
  background-color: #e3e6e4 !important;
  color: #26332d !important;
  box-shadow: none !important;
}

.timereportnav button:hover {
  border-color: #b8bfbb !important;
  background-color: #d7dbd8 !important;
  color: #1b2721 !important;
}

.timereportnav button:is(:active, .portal-button-pressed) {
  border-color: #aab2ad !important;
  background-color: #c5cbc7 !important;
  color: #17211c !important;
  box-shadow: inset 0 2px 5px rgba(28, 41, 34, .24) !important;
  transform: translateY(1px) scale(.99) !important;
}

/* De sluitknop van de werkplaatsklok blijft klein en ondergeschikt. */
.kioskhead > .closeKiosk {
  flex: 0 0 32px;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-color: transparent !important;
  background-color: transparent !important;
  color: #737d78 !important;
  font-size: 21px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.kioskhead > .closeKiosk:hover {
  border-color: #d5d9d7 !important;
  background-color: #ecefed !important;
  color: #4f5a54 !important;
}

.kioskhead > .closeKiosk:is(:active, .portal-button-pressed) {
  border-color: #c7cdca !important;
  background-color: #dce1de !important;
  color: #39443e !important;
  box-shadow: inset 0 2px 4px rgba(28, 41, 34, .2) !important;
  transform: translateY(1px) scale(.96) !important;
}

/* De vaste onderbalk van de werkplaatsapp blijft een rustige zwarte navigatiebalk. */
.tabs {
  background: #101a22 !important;
}

.tabs button,
.tabs button:hover,
.tabs button.has-unread {
  border-color: transparent !important;
  background-color: transparent !important;
  color: #bdc6ca !important;
  box-shadow: none !important;
  transform: none !important;
}

.tabs button:is(:active, .portal-button-pressed) {
  border-color: transparent !important;
  background-color: #172631 !important;
  color: #fff !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28) !important;
  transform: scale(.985) !important;
}

.tabs button.active {
  border-color: transparent !important;
  background-color: #1a2933 !important;
  color: #ff994e !important;
  box-shadow: none !important;
}