@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}
/* Dark theme for react-datepicker */
.react-datepicker {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 1rem !important;
  font-family: inherit !important;
  color: white !important;
  backdrop-filter: blur(8px);
}

.react-datepicker__header {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  padding-top: 1rem !important;
}

.react-datepicker__current-month,
.react-datepicker__day-name {
  color: white !important;
  font-weight: 500 !important;
}

.react-datepicker__day-name {
  color: rgba(255, 255, 255, 0.6) !important;
}

.react-datepicker__day {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.2s;
}

.react-datepicker__day:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 9999px !important;
}

.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
  background-color: #3b82f6 !important;
  color: white !important;
  border-radius: 9999px !important;
  font-weight: bold !important;
}

.react-datepicker__day--disabled {
  color: rgba(255, 255, 255, 0.2) !important;
}

.react-datepicker__navigation-icon::before {
  border-color: white !important;
  border-width: 2px 2px 0 0 !important;
  height: 8px !important;
  width: 8px !important;
}

.react-datepicker__navigation:hover *::before {
  border-color: #3b82f6 !important;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}