@import 'vue-select/dist/vue-select.css';
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

.dropdown-menu.show {
    display: block;
  }
  
  button {
    cursor: pointer;
  }
  
  .btn {
    @apply px-3 py-2 inline-flex items-center gap-2 text-sm transition ease-in-out duration-300 font-semibold rounded-md shadow-md cursor-pointer;
  }
  
  .btn-sm {
    @apply px-1 py-1 text-sm;
  }
  
  .btn:focus {
    @apply outline-none ring-4;
  }
  
  /* ===== Button Variants ===== */
  
  .btn-danger {
    @apply bg-red-600 text-white dark:bg-red-500;
  }
  .btn-danger:focus {
    @apply ring-red-300;
  }
  .btn-danger:hover {
    @apply bg-red-500 dark:bg-red-400;
  }
  
  .btn-primary {
    @apply bg-blue-700 text-white dark:bg-blue-600;
  }
  .btn-primary:focus {
    @apply ring-blue-300;
  }
  .btn-primary:hover {
    @apply bg-blue-800 dark:bg-blue-500;
  }
  
  .btn-success {
    @apply bg-teal-500 text-white dark:bg-teal-400;
  }
  .btn-success:hover {
    @apply bg-teal-600 dark:bg-teal-300;
  }
  
  .btn-warning {
    @apply bg-teal-500 text-white dark:bg-teal-400;
  }
  .btn-warning:hover {
    @apply bg-teal-600 dark:bg-teal-300;
  }
  .btn-warning:focus {
    @apply ring-blue-300;
  }
  
  /* ===== Forms ===== */
  
  .form-label {
    @apply block text-sm font-bold text-gray-800 mb-2 dark:text-gray-200;
  }

  .form-control {
    @apply block min-w-0 w-full rounded-md shadow-sm border border-gray-300
      h-9 px-3 text-base text-gray-700 outline-1 -outline-offset-1 outline-gray-300
      dark:bg-gray-800 dark:text-gray-100 dark:border-gray-600 dark:outline-gray-600;
  }
  
  /* تخصيص للـ textarea لأنها تحتاج ارتفاع مختلف و resize */
  textarea.form-control {
    @apply min-h-[100px] resize-y h-auto;
  }
  .form-control:focus {
    @apply outline-2 -outline-offset-2 outline-indigo-500 ring ring-indigo-200 dark:outline-indigo-400 dark:ring-indigo-300;
  }
  
  .form-control::placeholder {
    @apply text-gray-400 dark:text-gray-500;
  }
  
  .form-group {
    @apply mb-2;
  }
  
  .invalid-feedback {
    @apply text-sm text-red-600 mt-1 dark:text-red-400;
  }
  
  .material-icons {
    font-size: inherit;
  }