/* MECARRO.NET canonical native date/time-control baseline.
 *
 * Applies portal-wide to every interactive native date or time selector. The
 * goal is a single visual contract across public/private areas and every
 * viewport:
 * - 44px visual/touch height;
 * - no intrinsic-width overflow on Safari/iOS;
 * - date/time value centred horizontally and vertically;
 * - native picker affordance kept available without shifting the value.
 *
 * Page-specific CSS must not redefine the geometry or alignment of native
 * date/time inputs. Layout may still decide how many columns a control occupies.
 */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  position: relative;
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  width: 100%;
  min-inline-size: 0;
  min-width: 0;
  max-inline-size: 100%;
  max-width: 100%;
  block-size: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  overflow: hidden;
  padding-block: 0 !important;
  /* Symmetric room for the native indicator keeps the value optically centred. */
  padding-inline: 2.5rem !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  text-align: center !important;
  -webkit-appearance: none;
  appearance: none;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  width: 100%;
  min-inline-size: 0;
  min-width: 0;
  block-size: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
  text-align: center !important;
}

input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  width: 100%;
  min-inline-size: 0;
  min-width: 0;
  block-size: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
  text-align: center !important;
}

input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-second-field,
input[type="time"]::-webkit-datetime-edit-ampm-field,
input[type="time"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-second-field,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field,
input[type="datetime-local"]::-webkit-datetime-edit-text {
  align-self: center;
  margin-block: 0 !important;
  padding-block: 0 !important;
  line-height: 1.25rem;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset-inline-end: 0.5rem;
  top: 50%;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0.25rem;
  transform: translateY(-50%);
  cursor: pointer;
}

@supports (-webkit-touch-callout: none) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
  }
}