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

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  /* Prevent horizontal scroll on the main layout */
  .sidebar-layout {
    overflow-x: hidden;
  }

  /* Ensure table containers handle their own scrolling */
  .table-container {
    overflow-x: auto;
    overflow-y: visible;
  }

  /* Hide native calendar picker icon for date inputs */
  .date-input-custom::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
  }

  .date-input-custom::-webkit-inner-spin-button,
  .date-input-custom::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .date-input-custom {
    color-scheme: dark;
  }
}

@layer base {
  :root {
    --radius: 0.65rem;
    --background: #f5f7fa; /* Moon White */
    --foreground: #2e2e2e; /* Ink Charcoal */
    --card: #f5f7fa; /* Moon White */
    --card-foreground: #2e2e2e; /* Ink Charcoal */
    --popover: #f5f7fa; /* Moon White */
    --popover-foreground: #2e2e2e; /* Ink Charcoal */
    --primary: #00a86b; /* Emerald Mercury */
    --primary-foreground: #f5f7fa; /* Moon White */
    --secondary: #0b3d91; /* Trust Navy */
    --secondary-foreground: #f5f7fa; /* Moon White */
    --muted: #f5f7fa; /* Moon White with opacity */
    --muted-foreground: #2e2e2e99; /* Ink Charcoal with opacity */
    --accent: #ffc107; /* Jupiter Gold */
    --accent-foreground: #2e2e2e; /* Ink Charcoal */
    --destructive: #e11d48;
    --border: #2e2e2e20; /* Ink Charcoal with opacity */
    --input: #2e2e2e20; /* Ink Charcoal with opacity */
    --ring: #00a86b; /* Emerald Mercury */
    --chart-1: #00a86b; /* Emerald Mercury */
    --chart-2: #ffc107; /* Jupiter Gold */
    --chart-3: #0b3d91; /* Trust Navy */
    --chart-4: #00a86b80; /* Emerald Mercury with opacity */
    --chart-5: #ffc10780; /* Jupiter Gold with opacity */
    --sidebar: linear-gradient(
      135deg,
      #ffc10725,
      #00a86b15
    ); /* Light gradient of Jupiter Gold and Emerald Mercury */
    --sidebar-foreground: #2e2e2e; /* Ink Charcoal */
    --sidebar-primary: #00a86b; /* Emerald Mercury */
    --sidebar-primary-foreground: #f5f7fa; /* Moon White */
    --sidebar-accent: rgba(
      0,
      0,
      0,
      0.1
    ); /* Light dark overlay with blur for hover/active */
    --sidebar-accent-foreground: #2e2e2e; /* Ink Charcoal */
    --sidebar-border: #2e2e2e20; /* Ink Charcoal with opacity */
    --sidebar-ring: #00a86b; /* Emerald Mercury */
  }
  .dark {
    --background: #2e2e2e; /* Ink Charcoal */
    --foreground: #f5f7fa; /* Moon White */
    --card: #2e2e2e; /* Ink Charcoal */
    --card-foreground: #f5f7fa; /* Moon White */
    --popover: #2e2e2e; /* Ink Charcoal */
    --popover-foreground: #f5f7fa; /* Moon White */
    --primary: #00a86b; /* Emerald Mercury */
    --primary-foreground: #f5f7fa; /* Moon White */
    --secondary: #0b3d91; /* Trust Navy */
    --secondary-foreground: #f5f7fa; /* Moon White */
    --muted: #2e2e2e; /* Ink Charcoal with opacity */
    --muted-foreground: #f5f7fa99; /* Moon White with opacity */
    --accent: #ffc107; /* Jupiter Gold */
    --accent-foreground: #2e2e2e; /* Ink Charcoal */
    --destructive: #e11d48;
    --border: #f5f7fa20; /* Moon White with opacity */
    --input: #f5f7fa20; /* Moon White with opacity */
    --ring: #00a86b; /* Emerald Mercury */
    --chart-1: #00a86b; /* Emerald Mercury */
    --chart-2: #ffc107; /* Jupiter Gold */
    --chart-3: #0b3d91; /* Trust Navy */
    --chart-4: #00a86b80; /* Emerald Mercury with opacity */
    --chart-5: #ffc10780; /* Jupiter Gold with opacity */
    --sidebar: linear-gradient(
      135deg,
      #ffc10735,
      #00a86b20
    ); /* Light gradient of Jupiter Gold and Emerald Mercury */
    --sidebar-foreground: #f5f7fa; /* Moon White */
    --sidebar-primary: #00a86b; /* Emerald Mercury */
    --sidebar-primary-foreground: #f5f7fa; /* Moon White */
    --sidebar-accent: rgba(
      0,
      0,
      0,
      0.1
    ); /* Light dark overlay with blur for hover/active */
    --sidebar-accent-foreground: #f5f7fa; /* Moon White */
    --sidebar-border: #f5f7fa20; /* Moon White with opacity */
    --sidebar-ring: #00a86b; /* Emerald Mercury */
  }
}

@layer base {
  * {
    @apply border-border antialiased;
  }
  html,
  body {
    @apply bg-background text-foreground antialiased;
    overflow-x: hidden; /* Prevent horizontal scroll on body */
  }

  /* Apply Inter font with 500 weight to all headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-inter), system-ui, sans-serif;
    font-weight: 500;
  }
}

/* Remove invalid-number styling completely */
.phone-input-normal.react-tel-input .form-control.invalid-number,
.phone-input-normal.react-tel-input .form-control.invalid-number:focus {
  border: 1px solid #e5e7eb !important; /* gray-300 */
  background-color: #ffffff !important;
  box-shadow: none !important;
}

/* Error state */
.phone-input-error.react-tel-input .form-control {
  border: 1px solid #ef4444 !important; /* red-500 */
}

.react-tel-input .flag-dropdown {
  border-radius: 9px 0 0 9px !important;
}

.react-tel-input .flag-dropdown.open .selected-flag {
  background: #fff;
  border-radius: 8px 0 0 8px !important;
}

.react-tel-input .selected-flag:hover,
.react-tel-input .selected-flag:focus {
  background-color: transparent !important;
}

/* React Date Range Picker Styles */
.rdrDateRangePickerWrapper {
  background: transparent !important;
}

.rdrCalendarWrapper {
  background: transparent !important;
  color: inherit !important;
}

.rdrDateDisplayWrapper {
  display: none !important;
}

.rdrDefinedRangesWrapper {
  display: none !important;
}

.rdrMonth {
  width: 100% !important;
}

.rdrMonthAndYearWrapper {
  background: transparent !important;
  padding: 0 !important;
}

.rdrMonthAndYearPickers {
  color: inherit !important;
}

.rdrNextPrevButton {
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  color: inherit !important;
}

.rdrNextPrevButton:hover {
  background: hsl(var(--muted)) !important;
}

.rdrWeekDays {
  color: inherit !important;
}

.rdrDay {
  color: inherit !important;
}

.rdrDay:not(.rdrDayPassive) .rdrInRange {
  background: #22c55e !important;
  color: white !important;
}

.rdrDay:not(.rdrDayPassive) .rdrStartEdge,
.rdrDay:not(.rdrDayPassive) .rdrEndEdge,
.rdrDay:not(.rdrDayPassive) .rdrSelected {
  background: #3b82f6 !important;
  color: white !important;
}

.rdrDay:not(.rdrDayPassive) .rdrInRange + .rdrDay .rdrDayNumber span {
  color: white !important;
}

.rdrDayNumber span {
  color: inherit !important;
}

.rdrDayPassive .rdrDayNumber span {
  color: hsl(var(--muted-foreground)) !important;
  opacity: 0.5 !important;
}

.rdrDayToday .rdrDayNumber span:after {
  background: hsl(var(--primary)) !important;
}