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

@layer components {
  .btn {
    @apply font-semibold text-base py-2 px-4 rounded-md;
  }

  .btn-icon {
    @apply flex items-center justify-center p-2 rounded-md;
  }

  .btn-text {
    @apply font-semibold text-base py-1 px-2 rounded-md;

    &.btn-primary {
      @apply text-primary hover:bg-primary/10;
    }
  }

  .btn-primary:not(.btn-text) {
    @apply bg-primary text-white hover:bg-primary/80;
  }

  .btn-secondary {
    @apply bg-secondary text-white hover:bg-secondary/80;
  }

  .btn-yellow {
    @apply bg-yellow-500 text-white hover:bg-yellow-600;
  }

  .btn-red {
    @apply bg-red-500 text-white hover:bg-red-600;
  }

  .table-responsive {
    @apply relative overflow-x-auto w-full;
  }

  .table {
    @apply w-full text-sm text-left text-gray-500;

    thead {
      @apply text-xs text-white bg-primary;
    }
    thead th {
      @apply px-6 py-3;
    }

    tbody tr {
      @apply border-b border-gray-200 bg-white odd:bg-gray-50;
    }

    tbody tr td {
      @apply px-6 py-2;
    }
  }
}

.form-group {
  @apply flex flex-col mb-4 gap-1;
}

.form-control {
  @apply bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5;
}

.form-label {
  @apply text-[#363636] font-bold;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */