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

/* Remove scrollbar from the whole application */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

/* Phone input container styles */
.phone-input-container .react-tel-input .form-control {
  @apply w-full h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  padding-left: 52px !important;
  @apply border-gray-200 dark:border-gray-600;
}

/* Hide all country code displays */
.phone-input-container .react-tel-input .selected-flag {
  background-color: transparent !important;
  width: 42px !important;
  padding: 0 0 0 8px !important;
  border-radius: 6px 0 0 6px !important;
  @apply bg-transparent;
}

.phone-input-container .react-tel-input .flag-dropdown {
  border: none !important;
  background-color: transparent !important;
  @apply border-r-0 bg-transparent;
}

/* Hide country codes everywhere */
.phone-input-container .react-tel-input .selected-dial-code,
.phone-input-container .react-tel-input .country-list .country .dial-code,
.phone-input-container .react-tel-input .country-name::before,
.phone-input-container .react-tel-input .country-list .country span:last-child {
  display: none !important;
}

/* Show only country names in dropdown */
.phone-input-container .react-tel-input .country-list .country {
  padding: 7px 9px !important;
  background-color: transparent !important;
}

.phone-input-container .react-tel-input .country-list .country:hover {
  background-color: #f3f4f6 !important;
  @apply bg-accent;
}

.phone-input-container .react-tel-input .country-list .country .country-name {
  color: inherit;
}

/* Country list styling */
.phone-input-container .react-tel-input .country-list {
  @apply rounded-md border bg-popover text-popover-foreground shadow-md;
  margin-top: 4px;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  @apply bg-background border border-input text-foreground;
}

/* Search box styling */
.phone-input-container .react-tel-input .search-box {
  @apply h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm;
  margin: 8px !important;
  width: calc(100% - 16px) !important;
}

/* Dark mode adjustments */
.dark .phone-input-container .react-tel-input .form-control {
  @apply bg-gray-700 border-gray-600 text-white;
}

.dark .phone-input-container .react-tel-input .country-list {
  @apply bg-gray-800 border-gray-600;
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  @apply bg-gray-800 border-gray-600 text-white;
}

.dark .phone-input-container .react-tel-input .country-list .country {
  @apply text-white;
  background-color: transparent !important;
}

.dark .phone-input-container .react-tel-input .country-list .country:hover {
  @apply bg-gray-700;
  background-color: #374151 !important;
}

.dark .phone-input-container .react-tel-input .search-box {
  @apply bg-gray-700 border-gray-600 text-white;
}

/* Fix Select component dropdown */
[data-radix-popper-content-wrapper] {
  background: white !important;
}

.dark [data-radix-popper-content-wrapper] {
  background: #1f2937 !important;
}