/* Restore Attendance 1.3.0
   Final, cache-busting safeguards for the two mobile defects reported in
   production: dark labels on yellow controls and contained month controls. */

#restore-employee-earnings,
#restore-employee-earnings *,
.owner-card,
.owner-card * {
  box-sizing: border-box;
}

/* Yellow controls always use dark ink, including the outside-clinic locked
   state whose earlier rule used to force every button label to white. */
html body #restore-employee-earnings .restore-earnings-view-switch button.active,
html body #restore-employee-earnings .restore-earnings-view-switch button.active *,
html body.restore-location-locked #restore-employee-earnings .restore-earnings-view-switch button.active,
html body.restore-location-locked #restore-employee-earnings .restore-earnings-view-switch button.active *,
html body #restore-employee-earnings .restore-earnings-refresh,
html body #restore-employee-earnings .restore-earnings-refresh *,
html body.restore-location-locked #restore-employee-earnings .restore-earnings-refresh,
html body.restore-location-locked #restore-employee-earnings .restore-earnings-refresh * {
  color: #171100 !important;
  -webkit-text-fill-color: #171100 !important;
  text-shadow: none !important;
}

html body #restore-employee-earnings .restore-earnings-view-switch button.active,
html body.restore-location-locked #restore-employee-earnings .restore-earnings-view-switch button.active,
html body #restore-employee-earnings .restore-earnings-refresh,
html body.restore-location-locked #restore-employee-earnings .restore-earnings-refresh {
  border-color: #f0c653 !important;
  background: linear-gradient(135deg, #ffdc72, #e7b63e) !important;
}

/* The controls are stacked according to the card width, not viewport width.
   This remains safe when the app is shown in a narrow phone shell inside a
   wider browser viewport. */
html body #restore-employee-earnings .restore-earnings-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body #restore-employee-earnings .restore-earnings-controls > *,
html body #restore-employee-earnings .restore-earnings-month-navigation > *,
html body #restore-employee-earnings .restore-earnings-view-switch > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body #restore-employee-earnings .restore-earnings-month-navigation {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body #restore-employee-earnings .restore-earnings-month-navigation label,
html body #restore-employee-earnings .restore-earnings-month-picker,
html body #restore-employee-earnings .restore-earnings-month-value {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body #restore-employee-earnings .restore-earnings-month-value {
  padding-inline: 8px !important;
  font-size: clamp(12px, 3.8vw, 16px) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #restore-employee-earnings .restore-earnings-month-step {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  padding-inline: 0 !important;
}

html body #restore-employee-earnings .restore-earnings-refresh {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body #restore-employee-earnings .restore-earnings-view-switch button {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

/* The owner's period picker gets the same containment guarantees. */
html body .owner-card .restore-owner-period-tabs,
html body .owner-card .restore-owner-period-navigation {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body .owner-card .restore-owner-period-tabs > *,
html body .owner-card .restore-owner-period-navigation > *,
html body .owner-card .restore-owner-period-picker,
html body .owner-card .restore-owner-period-picker-label,
html body .owner-card .month-input {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .owner-card .restore-owner-period-picker-label {
  padding-inline: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 430px) {
  html body #restore-employee-earnings .restore-earnings-view-switch {
    gap: 6px !important;
  }

  html body #restore-employee-earnings .restore-earnings-view-switch button {
    padding-inline: 7px !important;
    font-size: 13px !important;
  }

  html body .owner-card .restore-owner-period-navigation,
  html body #restore-employee-earnings .restore-earnings-month-navigation {
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    gap: 5px !important;
  }

  html body .owner-card .restore-owner-period-navigation button,
  html body #restore-employee-earnings .restore-earnings-month-step {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }
}