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

/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Dashboard Components */
.event-card {
  @apply bg-white shadow rounded-lg p-6 hover:shadow-lg transition-shadow duration-200;
}

.event-card-title {
  @apply text-lg font-semibold text-gray-900 mb-1;
}

.event-card-meta {
  @apply text-sm text-gray-600;
}

/* Filter Form */
.filter-container {
  @apply bg-white shadow rounded-lg p-6 mb-6;
}

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

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

/* Summary Cards */
.summary-card {
  @apply bg-white shadow rounded-lg p-6;
}

.summary-card-title {
  @apply text-lg font-semibold text-gray-700 mb-2;
}

.summary-card-value {
  @apply text-3xl font-bold;
}

/* Buttons */
.btn-primary {
  @apply bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition-colors duration-200 cursor-pointer;
}

.btn-secondary {
  @apply bg-gray-600 text-white px-6 py-2 rounded hover:bg-gray-700 transition-colors duration-200 cursor-pointer;
}

.btn-danger {
  @apply bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition-colors duration-200 cursor-pointer;
}

.btn-link {
  @apply text-blue-600 hover:text-blue-800 underline;
}

/* Empty State */
.empty-state {
  @apply bg-white shadow rounded-lg p-12 text-center;
}

.empty-state-icon {
  @apply mx-auto h-12 w-12 text-gray-400;
}

.empty-state-title {
  @apply mt-2 text-lg font-medium text-gray-900;
}

.empty-state-description {
  @apply mt-1 text-gray-500;
}

/* Status Badges */
.badge-success {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800;
}

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

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

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

/* Event Type Icons */
.event-icon-push {
  @apply h-5 w-5 text-green-600;
}

.event-icon-pull-request {
  @apply h-5 w-5 text-purple-600;
}

.event-icon-issues {
  @apply h-5 w-5 text-red-600;
}

.event-icon-comment {
  @apply h-5 w-5 text-blue-600;
}

/* Pagination */
.pagination-container {
  @apply text-center py-4;
}

.pagination-button {
  @apply bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 inline-block transition-colors duration-200;
}