website/app/globals.css

@import "tailwindcss";
@import "tw-animate-css";

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: #ffffff;
    color: hsl(var(--foreground));
  }
  html.dark body {
    background-color: #1a1e26;
  }
  html {
    scroll-behavior: smooth;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  /* Custom Pink Scrollbar */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    background: rgb(255 228 230);
    border-radius: 4px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgb(244 63 94);
    border-radius: 4px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgb(225 29 72);
  }
  
  /* Firefox */
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgb(244 63 94) rgb(255 228 230);
  }
}

/* React DatePicker Styles */
.react-datepicker {
  font-family: inherit;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.react-datepicker__header {
  background-color: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  padding-top: 0.75rem;
}

.react-datepicker__current-month {
  color: hsl(var(--foreground));
  font-weight: 600;
  font-size: 0.875rem;
}

.react-datepicker__day-name {
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  font-size: 0.75rem;
}

.react-datepicker__day {
  color: hsl(var(--foreground));
  border-radius: 0.375rem;
}

.react-datepicker__day:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-radius: 0.375rem;
}

.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
  background-color: rgb(225 29 72);
  color: white;
  border-radius: 0.375rem;
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--keyboard-selected:hover {
  background-color: rgb(190 24 93);
}

.react-datepicker__day--disabled {
  color: hsl(var(--muted-foreground));
  opacity: 0.5;
  cursor: not-allowed;
}

.react-datepicker__navigation {
  top: 0.75rem;
}

.react-datepicker__navigation-icon::before {
  border-color: hsl(var(--foreground));
}

.react-datepicker__navigation:hover *::before {
  border-color: rgb(225 29 72);
}

html.dark .react-datepicker {
  background-color: #1f2937;
  border-color: #374151;
}

html.dark .react-datepicker__header {
  background-color: #1f2937;
  border-color: #374151;
}

html.dark .react-datepicker__current-month {
  color: #f9fafb;
}

html.dark .react-datepicker__day {
  color: #f9fafb;
}

html.dark .react-datepicker__day:hover {
  background-color: #374151;
  color: #f9fafb;
}