/**
 * Date Picker Component Styles
 * Household Management App
 */

.date-picker-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.date-picker-input {
  width: 100%;
  padding-right: 2.5rem; /* Space for icon */
}

/* Date picker icon (always visible, right position) */
.date-picker-wrapper .date-picker-icon {
  display: flex !important; /* Always visible */
  right: var(--spacing-3) !important;
  margin-top: -2px !important; /* Move 3px up */
}

/* Floating label support - adjust position when label is floating */
.form-group--floating .date-picker-wrapper .date-picker-icon {
  top: 56% !important;
  margin-top: -2px !important; /* Move 3px up */
}

/* Clear icon (only when value exists, left of date picker icon) */
.date-picker-wrapper .date-picker-clear {
  right: calc(var(--spacing-3) + 24px) !important; /* Position left of date picker icon (20px icon + 4px spacing) */
}

/* Floating label support - adjust position when label is floating */
.form-group--floating .date-picker-wrapper .date-picker-clear {
  top: 56% !important;
}

/* Material icon for calendar */
.date-picker-wrapper .date-picker-icon .material-icons {
  font-size: 1.25rem;
  line-height: 1;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure input doesn't overlap icons (both date picker and clear icon) */
.date-picker-wrapper .form-input {
  padding-right: 3.5rem; /* More space for both icons */
}

/* Date picker popup styling (native browser date picker) */
.date-picker-input::-webkit-calendar-picker-indicator {
  display: none; /* Hide native calendar icon */
}

.date-picker-input::-webkit-inner-spin-button {
  display: none; /* Hide native spinner */
}

/* Note: Native date picker popup cannot be styled with CSS
 * The popup is rendered by the browser and is not part of the DOM
 * Browser-specific styling is very limited and border-radius cannot be applied
 * 
 * However, we can style the input field itself which has border-radius
 * The popup appearance is controlled by the browser/OS and cannot be customized
 */

/* Floating label support - ensure date picker always has floating label */
.form-group--floating .date-picker-wrapper {
  width: 100%;
}

.form-group--floating .date-picker-input {
  padding-right: 2.5rem;
}

/* Always keep label floating for date picker (to prevent overlap with dd.mm.yyyy) */
/* This keeps the label floating without setting has-value background */
.form-group--floating.date-picker-label-floating .form-label {
  top: 0 !important;
  transform: translateY(-50%) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--color-primary) !important;
  background-color: var(--bg-primary) !important;
  border: var(--border-width) solid var(--border-color) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 0 calc(var(--spacing-1) + 1px) !important;
}