/* DatePicker Component Styles */
/* Styled to match the design system (Input / custom-input) */

.custom-date-picker {
  width: 100% !important;
}

/* Inner input / wrapper - match custom-input look */
.custom-date-picker .mantine-DatePickerInput-input,
.custom-date-picker .mantine-DateInput-input,
.custom-date-picker .mantine-InputWrapper-root input,
.custom-date-picker input[type="text"] {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  width: 100% !important;
  padding: 4px 12px !important;
  font-size: 16px !important;
  border-radius: 6px !important;
  border: 1px solid hsl(var(--border)) !important;
  background-color: transparent !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  transition: background-color 150ms ease, border-color 150ms ease !important;
  box-sizing: border-box !important;
  font-family: var(--font-family, 'Sora', sans-serif) !important;
}

.custom-date-picker .mantine-DatePickerInput-input::placeholder,
.custom-date-picker .mantine-DateInput-input::placeholder,
.custom-date-picker input::placeholder {
  color: hsl(var(--muted)) !important;
}

.custom-date-picker .mantine-DatePickerInput-input:focus,
.custom-date-picker .mantine-DateInput-input:focus,
.custom-date-picker .mantine-InputWrapper-root:focus-within input,
.custom-date-picker input:focus {
  border-color: hsl(var(--border)) !important;
  box-shadow: none !important;
}

.custom-date-picker .mantine-DatePickerInput-input:focus-visible,
.custom-date-picker .mantine-DateInput-input:focus-visible,
.custom-date-picker .mantine-InputWrapper-root:focus-within {
  outline: 2px solid hsl(var(--foreground)) !important;
  outline-offset: 2px !important;
  border-radius: 6px !important;
}

.custom-date-picker input:disabled,
.custom-date-picker .mantine-DatePickerInput-input[disabled],
.custom-date-picker .mantine-DateInput-input[disabled] {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  background-color: hsl(var(--muted) / 0.1) !important;
}

/* Label - match design system label style */
.custom-date-picker .mantine-InputWrapper-label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
  font-family: var(--font-family, 'Sora', sans-serif) !important;
}

@media (min-width: 768px) {
  .custom-date-picker .mantine-DatePickerInput-input,
  .custom-date-picker .mantine-DateInput-input,
  .custom-date-picker input[type="text"] {
    font-size: 14px !important;
  }
}

/* Override Mantine's .m_xxx:where([data-weekend]) { color: red } — weekend days match others.
   body + attribute has higher specificity than Mantine's single class + :where(). */
body [data-weekend] {
  color: hsl(var(--foreground)) !important;
}

/* Override Mantine's .m_xxx:where([data-selected]) — selected day uses accent-brand. */
body [data-selected] {
  background-color: hsl(var(--accent-brand-h, 23), var(--accent-brand-s, 90%), var(--accent-brand-l, 54%)) !important;
  color: #fff !important;
}