/* React Datepicker Theme Styles */

/* Base container */
.react-datepicker-popper {
  z-index: var(--z-popover, 100005) !important;
}

/* Forced stacking context for datepicker inside drawers */
.react-datepicker-popper-forced {
  position: relative !important;
  z-index: 100005 !important;
}

.react-datepicker-popper-forced .react-datepicker {
  position: relative;
  z-index: 100005 !important;
}

.react-datepicker-wrapper {
  width: 100%;
}

.react-datepicker {
  font-family: inherit;
  background-color: var(--menu-bg) !important;
  border: 1px solid var(--menu-border) !important;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px var(--shadow-color-dark);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: 1rem;
}

/* Header */
.react-datepicker__header {
  background-color: var(--menu-bg) !important;
  border-bottom: 1px solid var(--border-muted) !important;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 0;
}

.react-datepicker__current-month,
.react-datepicker-time__header {
  color: var(--text-primary) !important;
  font-weight: 500;
  margin-bottom: 0.5rem;
  background-color: transparent !important;
}

.react-datepicker__day-names {
  display: flex;
  justify-content: space-around;
  background-color: transparent !important;
}

.react-datepicker__day-name {
  color: var(--text-secondary) !important;
  font-size: 0.875rem;
  width: 2.5rem;
  line-height: 2.5rem;
  margin: 0;
  background-color: transparent !important;
}

/* Navigation */
.react-datepicker__navigation {
  top: 1rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-muted);
  background-color: var(--menu-bg) !important;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.react-datepicker__navigation:hover {
  background-color: var(--hover-bg) !important;
  border-color: var(--accent-color);
}

.react-datepicker__navigation-icon::before {
  border-color: var(--text-secondary);
  border-width: 2px 2px 0 0;
  width: 0.5rem;
  height: 0.5rem;
  top: 0.65rem;
}

.react-datepicker__navigation--previous {
  left: 1rem;
}

.react-datepicker__navigation--next {
  right: 1rem;
}

/* Calendar Days */
.react-datepicker__month {
  margin: 0;
  background-color: transparent !important;
}

.react-datepicker__week {
  display: flex;
  justify-content: space-around;
}

.react-datepicker__day {
  color: var(--text-primary) !important;
  width: 2.5rem;
  line-height: 2.5rem;
  margin: 0.125rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  background-color: transparent !important;
}

.react-datepicker__day:not(.react-datepicker__day--disabled):not(.react-datepicker__day--outside-month):hover {
  background-color: var(--hover-bg) !important;
  border: 1px solid var(--accent-color);
}

.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
  background-color: var(--accent-color) !important;
  color: var(--accent-contrast) !important;
  font-weight: 500;
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--keyboard-selected:hover {
  background-color: var(--accent-color) !important;
  opacity: 0.9;
}

.react-datepicker__day--today {
  background-color: var(--hover-bg) !important;
  font-weight: 500;
}

.react-datepicker__day--outside-month {
  color: var(--text-tertiary) !important;
  opacity: 0.5;
}

.react-datepicker__day--disabled {
  color: var(--text-tertiary) !important;
  opacity: 0.3;
  cursor: not-allowed;
}

.react-datepicker__day--disabled:hover {
  background-color: transparent !important;
  border: none;
}

/* Time Picker */
.react-datepicker__time-container {
  border-left: 1px solid var(--border-muted) !important;
  width: 100px;
  background-color: var(--menu-bg) !important;
}

.react-datepicker__time,
.react-datepicker__time-box {
  background-color: var(--menu-bg) !important;
}

.react-datepicker__time-caption {
  color: var(--text-secondary) !important;
  background-color: var(--menu-bg) !important;
  padding: 0.5rem;
  text-align: center;
  font-weight: 500;
}

.react-datepicker__time-list {
  height: 200px !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--border-muted) transparent;
  background-color: var(--menu-bg) !important;
}

.react-datepicker__time-list::-webkit-scrollbar {
  width: 6px;
}

.react-datepicker__time-list::-webkit-scrollbar-track {
  background: transparent;
}

.react-datepicker__time-list::-webkit-scrollbar-thumb {
  background: var(--border-muted);
  border-radius: 3px;
}

.react-datepicker__time-list-item {
  color: var(--text-primary) !important;
  background-color: transparent !important;
  padding: 0.5rem;
  transition: all var(--transition-fast);
}

.react-datepicker__time-list-item:hover {
  background-color: var(--hover-bg) !important;
  color: var(--text-primary) !important;
}

.react-datepicker__time-list-item--selected {
  background-color: var(--accent-color) !important;
  color: var(--accent-contrast) !important;
  font-weight: 500;
}

.react-datepicker__time-list-item--selected:hover {
  background-color: var(--accent-color) !important;
  opacity: 0.9;
}

.react-datepicker__time-list-item--disabled {
  color: var(--text-tertiary) !important;
  opacity: 0.3;
  cursor: not-allowed;
}

/* Triangle Arrow */
.react-datepicker__triangle {
  display: none;
}

/* Override any default styles that might cause white backgrounds */
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-list-item {
  background-color: transparent !important;
}

/* Ensure all containers use proper theme backgrounds */
.react-datepicker__month-container {
  background-color: transparent !important;
}

.react-datepicker__year-month {
  background-color: transparent !important;
}

/* Fix for potential white background in month/year view */
.react-datepicker__month-text,
.react-datepicker__year-text,
.react-datepicker__quarter-text {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

.react-datepicker__month-text:hover,
.react-datepicker__year-text:hover,
.react-datepicker__quarter-text:hover {
  background-color: var(--hover-bg) !important;
}

/* Month/Year containers */
.react-datepicker__monthPicker,
.react-datepicker__yearPicker {
  background-color: var(--menu-bg) !important;
}

/* Aria-live region fix */
.react-datepicker__aria-live {
  display: none;
}

/* Dark Theme Specific Overrides */
[data-theme="dark"] .react-datepicker {
  background-color: var(--menu-bg) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .react-datepicker__header {
  background-color: var(--menu-bg) !important;
}

[data-theme="dark"] .react-datepicker__time-container,
[data-theme="dark"] .react-datepicker__time {
  background-color: var(--menu-bg) !important;
}

[data-theme="dark"] .react-datepicker__day:not(.react-datepicker__day--disabled):not(.react-datepicker__day--outside-month):hover {
  background-color: var(--hover-bg) !important;
  border-color: var(--accent-color);
}

[data-theme="dark"] .react-datepicker__time-list-item:hover {
  background-color: var(--hover-bg) !important;
}

/* Black Theme Specific Overrides */
[data-theme="black"] .react-datepicker {
  background-color: var(--menu-bg) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.9);
}

[data-theme="black"] .react-datepicker__header {
  background-color: var(--menu-bg) !important;
}

[data-theme="black"] .react-datepicker__time-container,
[data-theme="black"] .react-datepicker__time {
  background-color: var(--menu-bg) !important;
}

[data-theme="black"] .react-datepicker__day:not(.react-datepicker__day--disabled):not(.react-datepicker__day--outside-month):hover {
  background-color: var(--hover-bg) !important;
  border-color: var(--accent-color);
}

[data-theme="black"] .react-datepicker__time-list-item:hover {
  background-color: var(--hover-bg) !important;
}

/* Input field styles */
.react-datepicker__input-container input {
  width: 100%;
  padding: 0.5rem 1rem;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.react-datepicker__input-container input:hover {
  border-color: var(--accent-color);
}

.react-datepicker__input-container input:focus {
  outline: none;
  border-color: var(--accent-color);
  ring: 2px solid var(--focus-ring);
  ring-offset: 2px;
}

/* Month/Year Dropdown */
.react-datepicker__month-dropdown,
.react-datepicker__year-dropdown {
  background-color: var(--menu-bg) !important;
  border: 1px solid var(--menu-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.react-datepicker__month-option,
.react-datepicker__year-option {
  padding: 0.5rem;
  transition: all var(--transition-fast);
  background-color: var(--menu-bg) !important;
}

.react-datepicker__month-option:hover,
.react-datepicker__year-option:hover {
  background-color: var(--menu-highlight) !important;
}

.react-datepicker__month-option--selected,
.react-datepicker__year-option--selected {
  background-color: var(--accent-color) !important;
  color: var(--accent-contrast) !important;
}

/* Ensure proper stacking above modals/drawers */
.datepicker-popper {
  z-index: 100005 !important;
}

/* Portal container */
.react-datepicker-portal {
  z-index: 100005 !important;
}

.react-datepicker-portal .react-datepicker__overlay {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Force datepicker to render above drawers */
.react-datepicker__portal {
  position: fixed !important;
  z-index: 100005 !important;
}

.react-datepicker__portal .react-datepicker-popper {
  z-index: 100005 !important;
}

/* Ensure time list is also properly positioned */
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  z-index: 100005;
}

/* Fix positioning for datepicker */
.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 0 !important;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 0 !important;
}

/* Ensure proper absolute positioning */
.react-datepicker-wrapper {
  display: inline-block;
  width: 100%;
  position: relative;
}

.react-datepicker-popper {
  position: absolute !important;
  z-index: 100005 !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .react-datepicker {
    font-size: 0.875rem;
  }
  
  .react-datepicker__day {
    width: 2rem;
    line-height: 2rem;
  }
  
  .react-datepicker__time-container {
    width: 80px;
  }
}

/* DateTimePicker Theme Token Fix */
/* This file ensures the hour and minute fields in the DateTimePicker 
   conform to our theme tokens across all themes */

/* Time Container - Enhanced theme consistency */
.react-datepicker__time-container {
  background: var(--input-bg) !important;
  border-left: 1px solid var(--input-border) !important;
}

.react-datepicker__time-container .react-datepicker__time {
  background: var(--input-bg) !important;
}

.react-datepicker__time-container .react-datepicker__time-box {
  background: var(--input-bg) !important;
}

/* Time List - Enhanced theme consistency */
.react-datepicker__time-list {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border);
  scrollbar-color: var(--border-muted) transparent;
}

.react-datepicker__time-list::-webkit-scrollbar {
  width: 6px;
}

.react-datepicker__time-list::-webkit-scrollbar-track {
  background: transparent;
}

.react-datepicker__time-list::-webkit-scrollbar-thumb {
  background: var(--border-muted);
  border-radius: 3px;
}

.react-datepicker__time-list::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}

/* Time List Items - Enhanced theme consistency */
.react-datepicker__time-list-item {
  color: var(--text-primary) !important;
  background: transparent !important;
  padding: 8px 12px;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.react-datepicker__time-list-item:hover:not(.react-datepicker__time-list-item--disabled) {
  background: var(--button-outline-hover-bg) !important;
  color: var(--accent-color) !important;
  border-left: 3px solid var(--accent-color);
  padding-left: 9px;
}

.react-datepicker__time-list-item--selected {
  background: var(--accent-color) !important;
  color: var(--accent-contrast) !important;
  font-weight: 600;
  border-left: 3px solid var(--accent-color);
}

.react-datepicker__time-list-item--selected:hover {
  background: var(--button-hover) !important;
  color: var(--accent-contrast) !important;
}

.react-datepicker__time-list-item--disabled {
  color: var(--text-tertiary) !important;
  opacity: 0.5;
  cursor: not-allowed;
}

.react-datepicker__time-list-item--disabled:hover {
  background: transparent !important;
  border-left: none;
  padding-left: 12px;
}

/* Time Header/Caption - Enhanced theme consistency */
.react-datepicker-time__header,
.react-datepicker__time-caption {
  background: var(--input-bg) !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--input-border);
  padding: 8px;
  font-weight: 500;
  text-align: center;
}

/* Ensure time picker inherits correct theme in all modes */
[data-theme="light"] .react-datepicker__time-container,
[data-theme="light"] .react-datepicker__time-list {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
}

[data-theme="dark"] .react-datepicker__time-container,
[data-theme="dark"] .react-datepicker__time-list {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
}

[data-theme="black"] .react-datepicker__time-container,
[data-theme="black"] .react-datepicker__time-list {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
}

/* Focus states for keyboard navigation */
.react-datepicker__time-list-item:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* Smooth transitions between states */
.react-datepicker__time-container * {
  transition: background-color var(--transition-fast), 
              color var(--transition-fast), 
              border-color var(--transition-fast);
}

/* Ensure proper contrast in all themes */
.react-datepicker__time-container {
  min-width: 100px;
  position: relative;
}

/* Add subtle shadow for depth */
.react-datepicker__time-list {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Active time indicator */
.react-datepicker__time-list-item--selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent-contrast);
}

/* Improve readability with proper spacing */
.react-datepicker__time-list-item {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure time picker respects reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .react-datepicker__time-container *,
  .react-datepicker__time-list-item {
    transition: none !important;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .react-datepicker__time-container {
    min-width: 80px;
  }
  
  .react-datepicker__time-list-item {
    padding: 6px 10px;
    font-size: 0.875rem;
  }
}