/* Vaste herkenningskleuren voor de snelknoppen, in beide thema’s. */
.mobile-action-grid #mobileTasksFocusButton { --tile-bg: #198754; --tile-fg: #ffffff; }
.mobile-action-grid #mobileAttendanceButton { --tile-bg: #6f42c1; --tile-fg: #ffffff; }
.mobile-action-grid #mobileMachineFocusButton { --tile-bg: #0b5ed7; --tile-fg: #ffffff; }
.mobile-action-grid [data-open-desktop-page="stookplaats"], .mobile-action-grid [data-mobile-page="stookplaats"] { --tile-bg: #a84408; --tile-fg: #ffffff; }
.mobile-action-grid #mobileQrScanButton { --tile-bg: #343a40; --tile-fg: #ffffff; }
.mobile-action-grid #mobileNotificationButton { --tile-bg: #087990; --tile-fg: #ffffff; }
.mobile-action-grid #mobileSparePartRequestButton { --tile-bg: #ffc107; --tile-fg: #212529; }
.mobile-action-grid #mobileSparePartsFocusButton { --tile-bg: #a02c70; --tile-fg: #ffffff; }
.mobile-action-grid #mobileFaultButton, .mobile-action-grid [data-open-desktop-page="storingen"] { --tile-bg: #bb2d3b; --tile-fg: #ffffff; }

.mobile-action-grid .mobile-action {
  background-color: var(--tile-bg, var(--bs-btn-bg));
  border-color: var(--tile-bg, var(--bs-btn-border-color));
  color: var(--tile-fg, var(--bs-btn-color));
}
.mobile-action-grid .mobile-action:hover,
.mobile-action-grid .mobile-action:active {
  background-color: var(--tile-bg, var(--bs-btn-hover-bg));
  border-color: var(--tile-bg, var(--bs-btn-hover-border-color));
  color: var(--tile-fg, var(--bs-btn-hover-color));
  box-shadow: inset 0 0 0 2px currentColor;
}
.mobile-action-grid .mobile-action:focus-visible {
  outline: 3px solid var(--bs-body-color);
  outline-offset: 3px;
}
.mobile-action-grid .mobile-action i { color: inherit; }

/* Beheerknoppen: afzonderlijke kleuren, ook voor voorheen omlijnde tegels. */
.mobile-action-grid [data-open-desktop-page="dashboard"] { --tile-bg: #163b73; --tile-fg: #ffffff; }
.mobile-action-grid #mobileTaskBoardButton { --tile-bg: #146c43; --tile-fg: #ffffff; }
.mobile-action-grid [data-open-desktop-page="machines"] { --tile-bg: #53c5d6; --tile-fg: #212529; }
.mobile-action-grid [data-open-desktop-page="onderhoud"] { --tile-bg: #c9df80; --tile-fg: #212529; }
.mobile-action-grid [data-open-desktop-page="meldingen"] { --tile-bg: #f5b3cb; --tile-fg: #212529; }
.mobile-action-grid [data-open-desktop-page="gebruikers"] { --tile-bg: #d0bcff; --tile-fg: #212529; }