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

/*@import "flowbite/src/themes/default";*/
@plugin "flowbite/plugin";
@source "../../../node_modules/flowbite";

@layer base {
  :root {
  }
}
/*

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

*/


@layer components {
  .btn-light {
    @apply bg-blue-100 hover:bg-gray-200 text-gray-600 font-medium py-2 px-4 rounded-md transition-colors duration-200 ease-in-out ;
  }  

  .btn-light-transparent {
    @apply bg-transparent text-white px-4 py-2 rounded-md border border-white hover:bg-white hover:text-gray-900 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white;
  }

  .btn-primary {
    @apply inline-block bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors;
  }
/*
  .btn-primary {
    @apply bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors duration-200; 
  }
*/
  .btn-primary-light {
    @apply bg-blue-100 text-blue-700 px-4 py-2 rounded-md hover:bg-blue-200 transition-colors duration-200;
  }

  .btn-secondary {
    @apply border border-blue-600 text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition-all;
  }

  .btn-white {
    @apply  inline-block py-2 px-4 border border-gray-300 rounded-lg text-gray-700 font-medium text-sm hover:bg-gray-50 transition-colors;
  }

  .btn-calendar-nav {
    @apply px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-md;
  }
  
  .btn-sm {
    @apply px-3 py-1 text-sm;
  }

  .btn-lg {
    @apply px-8 py-3 text-lg font-semibold;
  }

  .btn-xl {
    @apply px-12 py-6 text-xl font-semibold;
  }

  .btn-full {
    @apply w-full;
  }

  .btn-login {
    @apply bg-transparent text-white font-medium py-3 px-6 rounded-lg border border-white hover:bg-white hover:text-gray-900 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white;
  }

  .btn-register {
    @apply bg-blue-600 text-white font-semibold py-3 px-7 rounded-lg shadow-xl hover:bg-blue-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500;
  }

  .btn-disabled {
    @apply opacity-50 cursor-not-allowed
  }    

  /* tom-select-tailwind.css */
.ts-control {
  @apply p-2.5;
}

.ts-wrapper:focus {
  @apply rounded;
}

.ts-dropdown-content:focus {
  @apply shadow-xl;
}

.ts-wrapper.plugin-remove_button .item {
  @apply rounded-md;
}

.ts-wrapper.multi .ts-control > div {
  @apply p-0 m-0 pl-1;
}

.ts-wrapper.plugin-remove_button .item .remove {
  @apply border-none text-lg leading-none py-1 rounded-r-lg;
}

.ts-dropdown {
  @apply rounded-md border border-solid border-t border-gray-300 dark:border-gray-600 shadow-xl;
}

.ts-dropdown [data-selectable].option:first-child {
  @apply rounded-t-md;
}

.ts-dropdown [data-selectable].option:last-child {
  @apply rounded-b-md;
}

.ts-dropdown .create:hover, .ts-dropdown .option:hover, .ts-dropdown .active {
  @apply bg-blue-600 text-white dark:text-white;
}

.ts-dropdown-content {
  @apply bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white;
}

.ts-wrapper.single .ts-control, .ts-dropdown.single {
  @apply dark:bg-gray-700 dark:border-gray-600 bg-gray-50 border-gray-300 rounded-lg;
}

.item {
  @apply text-gray-900 dark:text-white;
}

.ts-wrapper.single .ts-control {
  @apply shadow-none;
  background-image: none !important;
}

/*home page*/
.btn-mobile {
  @apply px-4 py-3 text-sm font-medium rounded-md;
  @apply min-h-[44px] min-w-[44px];  /* Minimum touch target size */
  @apply md:px-3 md:py-2;  /* Smaller on desktop */
}

/* Heading */ 


}


input::placeholder,
textarea::placeholder {
  color: theme('colors.gray.400'); /* Or any Tailwind color, e.g. theme('colors.gray.500') */
  opacity: 1; /* Optional: ensures full opacity */
}