@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* ============================================
   Litepicker CSS Overrides
   Matches neutral/indigo Tailwind palette
   ============================================ */

/* Main container: rounded corners, shadow, centered */
.litepicker {
  --litepicker-container-months-color-bg: #ffffff;
  --litepicker-month-header-color: #171717;
  --litepicker-button-prev-next-color: #737373;
  --litepicker-button-prev-next-color-hover: #171717;
  --litepicker-month-width: 280px;
  --litepicker-day-color: #171717;
  --litepicker-day-color-hover: #4f46e5;
  --litepicker-is-today-color: #4f46e5;
  --litepicker-is-in-range-color: #eef2ff;
  --litepicker-is-start-color-bg: #6366f1;
  --litepicker-is-end-color-bg: #6366f1;
  --litepicker-is-start-color: #ffffff;
  --litepicker-is-end-color: #ffffff;

  font-family: inherit;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  background-color: #ffffff;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

/* Center the calendar within its parent section */
.litepicker-container {
  display: flex;
  justify-content: center;
}

/* Months wrapper */
.litepicker .container__months {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1rem;
}

/* Month header (month name + navigation arrows) */
.litepicker .month-item-header {
  color: #171717;
  font-weight: 600;
  padding-bottom: 0.5rem;
}

.litepicker .month-item-header div > .month-item-name,
.litepicker .month-item-header div > .month-item-year {
  color: #171717;
}

.litepicker .month-item-header .button-previous-month,
.litepicker .month-item-header .button-next-month {
  color: #737373;
  transition: color 0.15s ease;
}

.litepicker .month-item-header .button-previous-month:hover,
.litepicker .month-item-header .button-next-month:hover {
  color: #171717;
}

/* Weekday header row */
.litepicker .month-item-weekdays-row > div {
  color: #737373;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Individual day cells */
.litepicker .day-item {
  color: #171717;
  border-radius: 9999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.litepicker .day-item:hover {
  background-color: #f5f5f5;
  color: #4f46e5;
}

/* Today's date */
.litepicker .day-item.is-today {
  color: #4f46e5;
  font-weight: 700;
  border: 1px solid #6366f1;
}

/* Locked/blocked days: muted color + strikethrough */
.litepicker .day-item.is-locked {
  color: #d4d4d4;
  text-decoration: line-through;
  pointer-events: none;
  opacity: 0.6;
}

.litepicker .day-item.is-locked:hover {
  background-color: transparent;
  color: #d4d4d4;
}

/* Selected start date */
.litepicker .day-item.is-start-date {
  background-color: #6366f1;
  color: #ffffff;
  border-radius: 9999px 0 0 9999px;
}

.litepicker .day-item.is-start-date:hover {
  background-color: #4f46e5;
  color: #ffffff;
}

/* Selected end date */
.litepicker .day-item.is-end-date {
  background-color: #6366f1;
  color: #ffffff;
  border-radius: 0 9999px 9999px 0;
}

.litepicker .day-item.is-end-date:hover {
  background-color: #4f46e5;
  color: #ffffff;
}

/* When start and end are the same day */
.litepicker .day-item.is-start-date.is-end-date {
  border-radius: 9999px;
}

/* Days within selected range */
.litepicker .day-item.is-in-range {
  background-color: #eef2ff;
  color: #4f46e5;
  border-radius: 0;
}

.litepicker .day-item.is-in-range:hover {
  background-color: #e0e7ff;
  color: #4338ca;
}

/* Tooltip styling */
.litepicker .container__tooltip {
  background-color: #171717;
  color: #ffffff;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Popup picker (form date fields) */
.litepicker:not(.litepicker--inlined) {
  z-index: 50;
  border: 1px solid #e5e7eb;
}

/* Hero fade-in animation */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translate(-50%, -45%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.animate-fade-in {
  animation: fade-in 1.2s ease-out forwards;
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}