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

.font-poppins {
  font-family: 'Poppins', sans-serif;
}

/*

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

*/

a {
  text-decoration: none;
}

.btn {
  @apply inline-flex items-center justify-center rounded-md font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50;
}

/* Button sizes */
.btn-xs {
  @apply px-2 py-1 text-xs;
}

.btn-sm {
  @apply px-3 py-2 text-sm leading-4;
}

.btn-md {
  @apply px-4 py-2 text-sm;
}

.btn-lg {
  @apply px-4 py-2 text-base;
}

.btn-xl {
  @apply px-6 py-3 text-base;
}

/* Button variants */
.btn-primary {
  @apply bg-black text-white hover:bg-black focus-visible:outline-black shadow-sm;
}

.btn-secondary {
  @apply bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 shadow-sm;
}

.btn-destructive {
  @apply bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 shadow-sm;
}

.btn-ghost {
  @apply hover:bg-gray-100 text-gray-900;
}

.btn-link {
  @apply text-purple-600 hover:text-purple-500 underline-offset-4 hover:underline;
}

/* Button states */
.btn-loading {
  @apply relative text-transparent transition-none hover:text-transparent;
}

.btn-loading::before {
  @apply absolute h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent;
  content: "";
}

.btn-loading::after {
  @apply absolute h-4 w-4 animate-ping rounded-full border-2 border-current border-t-transparent;
  content: "";
}

/* Icon button sizes */
.btn-icon-xs {
  @apply h-6 w-6;
}

.btn-icon-sm {
  @apply h-8 w-8;
}

.btn-icon-md {
  @apply h-10 w-10;
}

.btn-icon-lg {
  @apply h-12 w-12;
}

/* Button groups */
.btn-group {
  @apply inline-flex -space-x-px;
}

.btn-group .btn {
  @apply rounded-none first:rounded-l-md last:rounded-r-md;
}

.label {
  @apply block text-sm font-medium text-gray-700;
}


.input {
  @apply block text-sm w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500;
}

.checkbox {
  @apply h-4 w-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500;
}



.info {
  @apply text-sm text-gray-500;
}

.wide-container {
  @apply mx-auto max-w-7xl p-4;
}

.container {
  @apply mx-auto max-w-4xl p-4 md:p-8;
}

.thin-container {
  @apply mx-auto max-w-xl p-4;
}

.content {
  @apply bg-white shadow rounded-lg p-4 md:p-8 border-b border-gray-200
}

.tab-active {
  @apply border-purple-500 text-purple-600
}

.tab-inactive {
  @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm
}

.tab {
  @apply whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm
}

.club-tab {
  @apply border-b-2 h-10 md:h-12 flex items-center md:px-1 font-medium text-sm md:text-base
}

.club-tab-active {
  @apply border-purple-500 text-purple-600
}

.club-tab-inactive {
  @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap md:px-1 border-b-2
}

.list-item {
  @apply bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg overflow-hidden
}

.empty {
  @apply bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg overflow-hidden text-gray-500 text-sm p-12 text-center
}

.badge-warn {
  @apply ml-2 inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20;
}

.badge {
  @apply ml-2 inline-flex items-center rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-600/20;
}

.badge-info {
  @apply ml-2 inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10;
}

.badge-unread {
  @apply inline-flex items-center rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-800
}

.h1 {
  @apply text-2xl font-bold leading-6 text-gray-900;
}

.h2 {
  @apply text-xl font-semibold leading-6 text-gray-900;
}

.h3 {
  @apply text-lg font-medium leading-6 text-gray-900;
}
.avatar {
  @apply h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center;
}

.card-image-empty {
  @apply aspect-[4/3] w-full bg-gray-100 flex items-center justify-center rounded-t-lg
}

.image-empty {
  @apply w-full h-full bg-gray-100 flex items-center justify-center rounded-lg
}

.initial {
  @apply rounded-full bg-purple-100 flex items-center justify-center text-sm font-medium text-purple-600;
}

/* Dashboard Stats */
.stats {
  @apply grid grid-cols-2 md:grid-cols-4 gap-4;
}

.stat-item {
  @apply bg-white rounded-lg p-4 shadow-sm;
}

.stat-item h3 {
  @apply text-2xl font-bold text-gray-900 mb-1;
}

.stat-item p {
  @apply text-sm text-gray-500;
}



.file {
  display: block !important;
  width: 100% !important;
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  padding-left: 16px !important;
  margin-left: 0px !important;
}

.file::file-selector-button {
  margin-right: 1rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important;
  border: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  background-color: #f3e8ff !important;
  color: #9333ea !important;
}

.file:hover::file-selector-button {
  background-color: #e9d5ff !important;
}