/**
 * Date Picker Component
 * Full accessibility support
 * Integrates with Calendar component for date selection
 */

/* ========================================
   DATE PICKER CUSTOM PROPERTIES
   ======================================== */

.c-date-picker {
  /* Base properties */
  --c-date-picker-z-index: var(--ds-z-modal);
  --c-date-picker-backdrop-background: var(--ds-color-overlay);
  --c-date-picker-modal-background: var(--ds-color-surface);
  --c-date-picker-modal-border-radius: var(--ds-radius-m);
  --c-date-picker-modal-shadow: var(--ds-shadow-modal);
  --c-date-picker-modal-max-width: 24rem;
  --c-date-picker-modal-padding: var(--ds-space-l);

  /* Input field */
  --c-date-picker-input-background: var(--ds-color-surface);
  --c-date-picker-input-border-color: var(--ds-color-border);
  --c-date-picker-input-text-color: var(--ds-color-text);
  --c-date-picker-input-placeholder-color: var(--ds-color-text-weak);

  /* Button */
  --c-date-picker-button-background: transparent;
  --c-date-picker-button-border-color: var(--ds-color-border);
  --c-date-picker-button-text-color: var(--ds-color-text);
  --c-date-picker-button-hover-background: var(--ds-color-surface-hover);

  /* Animation */
  --c-date-picker-transition: opacity var(--ds-duration-fast) var(--ds-ease-out),
                              transform var(--ds-duration-fast) var(--ds-ease-out),
                              visibility var(--ds-duration-fast) var(--ds-ease-out);
}

/* ========================================
   BASE DATE PICKER STYLES
   ======================================== */

.c-date-picker {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Input wrapper */
.c-date-picker__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Input field */
.c-date-picker__input {
  flex: 1;
  padding: var(--ds-space-s) var(--ds-space-m);
  padding-inline-end: calc(var(--ds-space-m) + 2.5rem); /* Space for button */
  border: 1px solid var(--c-date-picker-input-border-color);
  border-radius: var(--ds-radius-s);
  background: var(--c-date-picker-input-background);
  color: var(--c-date-picker-input-text-color);
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-m);
  line-height: var(--ds-line-height-m);
  transition: var(--c-date-picker-transition);
}

.c-date-picker__input::placeholder {
  color: var(--c-date-picker-input-placeholder-color);
}

.c-date-picker__input:focus {
  outline: none;
  border-color: var(--ds-color-border-focus);
  box-shadow: var(--ds-shadow-focus);
}

.c-date-picker__input:disabled {
  background: var(--ds-color-surface-disabled);
  color: var(--ds-color-text-disabled);
  cursor: not-allowed;
}

/* Toggle button */
.c-date-picker__toggle {
  position: absolute;
  inset-inline-end: var(--ds-space-xs);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--ds-radius-s);
  background: var(--c-date-picker-button-background);
  color: var(--c-date-picker-button-text-color);
  cursor: pointer;
  transition: var(--c-date-picker-transition);
}

.c-date-picker__toggle:hover:not(:disabled) {
  background: var(--c-date-picker-button-hover-background);
}

.c-date-picker__toggle:focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

.c-date-picker__toggle:disabled {
  color: var(--ds-color-text-disabled);
  cursor: not-allowed;
}

.c-date-picker__toggle .c-icon {
  width: 1rem;
  height: 1rem;
}

/* ========================================
   MODAL/POPOUT STYLES
   ======================================== */

.c-date-picker__modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--c-date-picker-z-index);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--c-date-picker-transition);
}

.c-date-picker__modal.is-open {
  opacity: 1;
  visibility: visible;
}

.c-date-picker__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--c-date-picker-backdrop-background);
}

.c-date-picker__dialog {
  position: relative;
  max-width: var(--c-date-picker-modal-max-width);
  width: calc(100% - 2rem);
  max-height: calc(100vh - 2rem);
  background: var(--c-date-picker-modal-background);
  border-radius: var(--c-date-picker-modal-border-radius);
  box-shadow: var(--c-date-picker-modal-shadow);
  overflow: hidden;
  transform: scale(0.95);
  transition: var(--c-date-picker-transition);
}

.c-date-picker__modal.is-open .c-date-picker__dialog {
  transform: scale(1);
}

/* Modal header */
.c-date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-space-m) var(--c-date-picker-modal-padding);
  border-bottom: 1px solid var(--ds-color-border);
}

.c-date-picker__title {
  margin: 0;
  font-size: var(--ds-font-size-l);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-text);
}

.c-date-picker__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--ds-radius-s);
  background: transparent;
  color: var(--ds-color-text);
  cursor: pointer;
  transition: var(--c-date-picker-transition);
}

.c-date-picker__close:hover {
  background: var(--ds-color-surface-hover);
}

.c-date-picker__close:focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

.c-date-picker__close .c-icon {
  width: 1rem;
  height: 1rem;
}

/* Modal body */
.c-date-picker__body {
  padding: var(--c-date-picker-modal-padding);
}

/* Calendar integration */
.c-date-picker__calendar {
  width: 100%;
}

/* ========================================
   SIZE VARIANTS
   ======================================== */

/* Small size */
.c-date-picker--size-s .c-date-picker__input {
  padding: var(--ds-space-xs) var(--ds-space-s);
  padding-inline-end: calc(var(--ds-space-s) + 2rem);
  font-size: var(--ds-font-size-s);
}

.c-date-picker--size-s .c-date-picker__toggle {
  width: 1.75rem;
  height: 1.75rem;
  inset-inline-end: var(--ds-space-xs);
}

.c-date-picker--size-s .c-date-picker__toggle .c-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Large size */
.c-date-picker--size-l .c-date-picker__input {
  padding: var(--ds-space-m) var(--ds-space-l);
  padding-inline-end: calc(var(--ds-space-l) + 3rem);
  font-size: var(--ds-font-size-l);
}

.c-date-picker--size-l .c-date-picker__toggle {
  width: 2.5rem;
  height: 2.5rem;
  inset-inline-end: var(--ds-space-s);
}

.c-date-picker--size-l .c-date-picker__toggle .c-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* ========================================
   STATE VARIANTS
   ======================================== */

/* Disabled state */
.c-date-picker--disabled .c-date-picker__input {
  background: var(--ds-color-surface-disabled);
  color: var(--ds-color-text-disabled);
  cursor: not-allowed;
}

.c-date-picker--disabled .c-date-picker__toggle {
  color: var(--ds-color-text-disabled);
  cursor: not-allowed;
}

/* Error state */
.c-date-picker--error .c-date-picker__input {
  border-color: var(--ds-color-border-danger);
}

.c-date-picker--error .c-date-picker__input:focus {
  border-color: var(--ds-color-border-danger);
  box-shadow: 0 0 0 2px var(--ds-color-danger-alpha);
}

/* Required state */
.c-date-picker--required .c-date-picker__input {
  border-color: var(--ds-color-border-info);
}

/* ========================================
   INLINE VARIANT
   ======================================== */

.c-date-picker--inline .c-date-picker__modal {
  position: static;
  width: auto;
  height: auto;
  opacity: 1;
  visibility: visible;
  z-index: auto;
}

.c-date-picker--inline .c-date-picker__backdrop {
  display: none;
}

.c-date-picker--inline .c-date-picker__dialog {
  max-width: none;
  width: auto;
  max-height: none;
  transform: none;
  box-shadow: var(--ds-shadow-s);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  .c-date-picker__modal {
    align-items: flex-end;
    padding: 0;
  }
  
  .c-date-picker__dialog {
    width: 100%;
    max-width: none;
    border-radius: var(--ds-radius-m) var(--ds-radius-m) 0 0;
    max-height: 80vh;
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Screen reader only content */
.c-date-picker__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus trap helpers */
.c-date-picker__focus-trap {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .c-date-picker__input {
    border-width: 2px;
  }
  
  .c-date-picker__toggle {
    border: 1px solid;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .c-date-picker,
  .c-date-picker *,
  .c-date-picker *::before,
  .c-date-picker *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}