/* CSS Custom Properties for Color System */
      :root {
        --modal-primary: #008060;
        --modal-primary-foreground: hsl(210 40% 98%);
        --modal-primary-hover: #008060;
        --modal-secondary: hsl(210 40% 96%);
        --modal-secondary-foreground: hsl(215.4 16.3% 46.9%);
        --modal-border: hsl(214.3 31.8% 91.4%);
        --modal-border-hover: hsl(217.2 32.6% 17.5%);
        --modal-background: #ffffff;
        --modal-muted: hsl(210 40% 98%);
        --modal-muted-foreground: #6d7175;
        --modal-success: hsl(142.1 76.2% 36.3%);
        --modal-error: hsl(0 84.2% 60.2%);
        --modal-warning: hsl(47.9 95.8% 53.1%);
        --modal-info: hsl(221.2 83.2% 53.3%);
      }
      
      .flatpickr-input {
        display: none !important;
      }
      .flatpickr-calendar {
        border-radius: 8px !important;
        font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !important;
        font-size: 14px !important;
        overflow: hidden !important;
      }
      .flatpickr-calendar .flatpickr-months {
        border-radius: 8px 8px 0 0 !important;
      }
      .flatpickr-calendar .flatpickr-innerContainer {
        border-radius: 0 0 8px 8px !important;
      }
      .flatpickr-months,
      .flatpickr-innerContainer {
        background-color: #ffffff !important;
      }
      .flatpickr-month,
      .flatpickr-weekday,
      .flatpickr-current-month input.cur-year,
      span.flatpickr-weekday {
        color: #202223 !important;
        font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !important;
        font-weight: 500 !important;
      }
      .flatpickr-day {
        color: #202223 !important;
        font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !important;
        font-size: 14px !important;
      }
      .flatpickr-day:hover,
      .flatpickr-day:focus {
        background-color: rgba(from var(--modal-primary) r g b / 0.2) !important;
        border-color: var(--modal-primary) !important;
        color: #202223 !important;
      }
      .flatpickr-day.selected,
      .flatpickr-day.startRange,
      .flatpickr-day.endRange,
      .flatpickr-day.selected.inRange,
      .flatpickr-day.startRange.inRange,
      .flatpickr-day.endRange.inRange,
      .flatpickr-day.selected:focus,
      .flatpickr-day.startRange:focus,
      .flatpickr-day.endRange:focus,
      .flatpickr-day.selected:hover,
      .flatpickr-day.startRange:hover,
      .flatpickr-day.endRange:hover {
        background-color: var(--modal-primary) !important;
        color: #FFFFFF !important;
        border-color: var(--modal-primary) !important;
      }
      .flatpickr-day.today {
        border-color: var(--modal-primary) !important;
        font-weight: 600 !important;
      }
      .flatpickr-day.today:hover,
      .flatpickr-day.today:focus {
        background-color: var(--modal-primary) !important;
        color: #FFFFFF !important;
      }
      .flatpickr-day.flatpickr-disabled,
      .flatpickr-day.prevMonthDay,
      .flatpickr-day.nextMonthDay,
      .flatpickr-day.notAllowed {
        color: #6d7175 !important;
        opacity: 0.5 !important;
      }
      .flatpickr-months .flatpickr-prev-month,
      .flatpickr-months .flatpickr-next-month {
        fill: #202223 !important;
      }
      .flatpickr-months .flatpickr-prev-month:hover svg,
      .flatpickr-months .flatpickr-next-month:hover svg {
        fill: var(--modal-primary) !important;
      }