/* ==========================================================================
   Mesa Money Field
   Contrato unico para valores monetarios editaveis e somente leitura.
   ========================================================================== */

:root{
  --ui-money-field-height:var(--field-h, 40px);
  --ui-money-field-padding-x:16px;
  --ui-money-field-font-size:14px;
  --ui-money-field-font-weight:600;
}

#mesaAppShell input[data-money-field],
#mesaGuestShell input[data-money-field],
#mesaAppShell #mainFormCard input[data-money-field],
#mesaAppShell #view-radar input[data-money-field],
#mesaAppShell #view-renda input[data-money-field]{
  box-sizing:border-box !important;
  height:var(--ui-money-field-height) !important;
  min-height:var(--ui-money-field-height) !important;
  padding-inline:var(--ui-money-field-padding-x) !important;
  border-radius:var(--ui-radius-control, 12px) !important;
  font-family:'Inter','DM Sans',system-ui,sans-serif !important;
  font-size:var(--ui-money-field-font-size) !important;
  font-weight:var(--ui-money-field-font-weight) !important;
  line-height:1.2 !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:0 !important;
  text-align:left;
}

:where(#mesaAppShell, #mesaGuestShell) .ui-money-field-host{
  position:relative;
}

:where(#mesaAppShell, #mesaGuestShell) input[data-money-field].ui-money-field--stepper{
  padding-right:44px !important;
}

:where(#mesaAppShell, #mesaGuestShell) .ui-money-field-stepper{
  position:absolute;
  right:4px;
  bottom:0;
  z-index:3;
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:1px;
  width:32px;
  height:var(--ui-money-field-height);
  padding:3px 3px 3px 0;
  box-sizing:border-box;
}

:where(#mesaAppShell, #mesaGuestShell) .ui-money-field-stepper__button{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:0;
  border:0;
  border-radius:var(--ui-radius-compact, 8px);
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
}

:where(#mesaAppShell, #mesaGuestShell) .ui-money-field-stepper__button:hover,
:where(#mesaAppShell, #mesaGuestShell) .ui-money-field-stepper__button:focus-visible{
  outline:0;
  background:color-mix(in srgb, var(--text) 6%, transparent);
  color:var(--text);
}

:where(#mesaAppShell, #mesaGuestShell) .ui-money-field-stepper__chevron{
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
}

:where(#mesaAppShell, #mesaGuestShell) .ui-money-field-stepper__chevron--up{
  transform:translateY(1px) rotate(225deg);
}

:where(#mesaAppShell, #mesaGuestShell) .ui-money-field-stepper__chevron--down{
  transform:translateY(-1px) rotate(45deg);
}