@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 {
  /* =================================
     BUTTONS
     ================================= */

  /* Primary Button - Main actions */
  .btn-primary {
    @apply inline-block bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-200;
  }

  /* Secondary Button - Less important actions */
  .btn-secondary {
    @apply inline-block border border-blue-600 text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition-all focus:outline-none focus:ring-2 focus:ring-blue-200;
  }

  /* Light Button - Subtle actions */
  .btn-light {
    @apply bg-blue-100 hover:bg-gray-200 text-gray-600 font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-200;
  }

  /* White Button - On colored backgrounds */
  .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 focus:outline-none focus:ring-2 focus:ring-gray-200;
  }

  /* Auth Buttons */
  .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;
  }

  /* Destructive Button - Delete/Remove actions */
  .btn-danger {
    @apply inline-block bg-red-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-red-700 transition-colors focus:outline-none focus:ring-2 focus:ring-red-200;
  }

  /* Calendar Navigation */
  .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-lg;
  }

  /* Button Size Modifiers */
  .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;
  }

  /* Button State Modifiers */
  .btn-disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  /* Mobile Touch-Friendly Button */
  .btn-mobile {
    @apply px-4 py-3 text-sm font-medium rounded-lg min-h-[44px] min-w-[44px] md:px-3 md:py-2;
  }

  /* =================================
     FORM INPUTS
     ================================= */

  /* Standard Input Field */
  .input-field {
    @apply block w-full p-2 bg-white border border-gray-300 rounded-lg;
    @apply focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500;
    @apply text-gray-900 placeholder-gray-400;
  }

  /* Input Size Variants */
  .input-field-sm {
    @apply input-field p-1.5 text-sm;
  }

  .input-field-lg {
    @apply input-field p-3 text-base;
  }

  /* Input with Error */
  .input-field-error {
    @apply block w-full p-2 bg-white border border-red-300 rounded-lg;
    @apply focus:outline-none focus:ring-2 focus:ring-red-200 focus:border-red-500;
    @apply text-gray-900 placeholder-gray-400;
  }

  /* Disabled Input */
  .input-field-disabled {
    @apply input-field bg-gray-100 cursor-not-allowed;
  }

  /* =================================
     CARDS
     ================================= */

  /* Default Card */
  .card-default {
    @apply bg-white shadow-md rounded-lg p-6;
  }

  /* Card with Hover */
  .card-hover {
    @apply card-default hover:shadow-lg transition-shadow;
  }

  /* Form Field Card */
  .card-form-field {
    @apply bg-gray-50 rounded-lg p-4;
  }

  /* =================================
     BADGES & TAGS
     ================================= */

  /* Base Badge */
  .badge {
    @apply px-3 py-1 text-xs font-medium rounded-full;
  }

  /* Status Badges */
  .badge-success {
    @apply badge bg-green-100 text-green-800;
  }

  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-800;
  }

  .badge-danger {
    @apply badge bg-red-100 text-red-800;
  }

  .badge-info {
    @apply badge bg-blue-100 text-blue-800;
  }

  .badge-neutral {
    @apply badge bg-gray-100 text-gray-800;
  }

  /* =================================
     ALERTS
     ================================= */

  /* Alert Base */
  .alert {
    @apply border rounded-lg p-4 mb-4;
  }

  /* Alert Variants */
  .alert-success {
    @apply alert bg-green-50 border-green-200 text-green-800;
  }

  .alert-error {
    @apply alert bg-red-50 border-red-200 text-red-800;
  }

  .alert-warning {
    @apply alert bg-yellow-50 border-yellow-200 text-yellow-800;
  }

  .alert-info {
    @apply alert bg-blue-50 border-blue-200 text-blue-800;
  }

  /* =================================
     LABELS
     ================================= */

  .label-default {
    @apply block text-gray-700 font-semibold mb-1;
  }

  .label-required::after {
    content: " *";
    @apply text-red-500;
  }

  .label-helper {
    @apply block text-xs text-gray-500 mt-1;
  }    

  /* 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;
}


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 */
}

.category-icon {
  width: 48px;
  height: 48px;
  color: #6366f1;
}

.category-item:hover .category-icon {
  color: #4f46e5;
}

}