/* Mobile Time Clock Visual Emphasis 1.0
   Presentation-only enhancement. The existing timecard renderer remains authoritative.
   Uses the already-rendered clock status badge to emphasize the valid next action.
   Does not disable buttons, alter handlers, change labels, or own any timecard state. */

/* Clocked OUT -> Clock In is the obvious next action. */
.mm-native-time-status-card:has(.time-status-clocked-out) + .mm-native-time-actions button[onclick="postTimeCardEvent('Clock In')"] {
  box-shadow: 0 0 0 3px rgba(150, 55, 31, 0.20), 0 6px 16px rgba(150, 55, 31, 0.18) !important;
  transform: translateY(-1px);
  opacity: 1 !important;
}
.mm-native-time-status-card:has(.time-status-clocked-out) + .mm-native-time-actions button[onclick="postTimeCardEvent('Clock Out')"] {
  opacity: 0.48 !important;
  box-shadow: none !important;
  transform: none;
}

/* Clocked IN -> Clock Out is the obvious next action. */
.mm-native-time-status-card:has(.time-status-clocked-in) + .mm-native-time-actions button[onclick="postTimeCardEvent('Clock Out')"] {
  background: #96371f !important;
  border-color: #96371f !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(150, 55, 31, 0.20), 0 6px 16px rgba(150, 55, 31, 0.18) !important;
  transform: translateY(-1px);
  opacity: 1 !important;
}
.mm-native-time-status-card:has(.time-status-clocked-in) + .mm-native-time-actions button[onclick="postTimeCardEvent('Clock In')"] {
  background: #f4f5f7 !important;
  border-color: #d9dee6 !important;
  color: #8a94a3 !important;
  opacity: 0.48 !important;
  box-shadow: none !important;
  transform: none;
}

/* Keep interaction semantics exactly as production: visual only. */
.mm-native-time-actions button {
  transition: box-shadow .16s ease, opacity .16s ease, transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}