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


.btn-primary {
  @apply px-4 py-2 font-bold text-white bg-blue-500 rounded;
}
.btn-secondary {
  @apply px-4 py-2 font-bold text-white bg-gray-500 rounded;
}

.card {
  @apply rounded-lg max-w-sm w-[15rem] h-auto p-6 m-2 overflow-hidden bg-white shadow-lg;
}

.card-title {
  @apply mt-3 mb-2 font-bold text-center;
}

.card-count {
  @apply text-[2rem] text-center text-gray-700;
}

.toggle-switch {
    @apply relative inline-block w-12 h-6;
  }

  .toggle-switch input {
    @apply w-0 h-0 opacity-0;
  }

  .slider {
    @apply absolute pt-[1.6px] pl-[0.5px] cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-300 rounded-full transition-colors duration-300;
  }

  .slider:before {
    @apply absolute content-[''] h-5 w-5 bg-white rounded-full transition-transform duration-300;
    transform: translateX(0);
  }

  input:checked + .slider {
    @apply bg-blue-600;
  }

  input:checked + .slider:before {
    @apply translate-x-6;
  }



.table-th{
  @apply px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase
}
.table-td{
  @apply px-4 py-4 text-sm font-medium text-gray-800 break-words whitespace-normal 
}
.table-thead{
  @apply bg-gray-50
}
.table-tbody{
  @apply bg-white divide-y divide-gray-200 
}
.table-tr{
  @apply hover:bg-gray-100
}
.input-primary {
  @apply block w-full px-3 py-2 text-base text-gray-700 placeholder-gray-400 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}
