/* Tailwind CSS v4 - Basic Setup */
@import "tailwindcss";

/* Custom DashX Styles */
/* Buttons */
.btn {
  @apply inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-success {
  @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-warning {
  @apply bg-yellow-500 hover:bg-yellow-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

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

.btn-info {
  @apply bg-cyan-600 hover:bg-cyan-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-outline-primary {
  @apply border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-outline-secondary {
  @apply border-2 border-gray-400 text-gray-600 hover:bg-gray-400 hover:text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-outline-success {
  @apply border-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-outline-light {
  @apply border-2 border-white text-white hover:bg-white hover:text-gray-900 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-sm {
  @apply py-1.5 px-3 text-sm;
}

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

.btn-close {
  @apply absolute top-2 right-2 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 rounded;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.5;
}

.card {
  @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
}

.input-field {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.sidebar {
  @apply bg-gray-900 text-white min-h-screen w-64 p-6;
}

.sidebar-item {
  @apply flex items-center px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 transition-colors duration-200;
}

.sidebar-item.active {
  @apply bg-blue-600 text-white;
}

.dashboard-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
}

.stat-card {
  @apply bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl p-6 shadow-lg;
}

.table-modern {
  @apply w-full bg-white rounded-lg shadow-sm overflow-hidden;
}

.table-modern th {
  @apply bg-gray-50 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-modern td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

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

.badge-success {
  @apply bg-green-100 text-green-800;
}

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

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

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

/* Pagination */
.pagination {
  @apply flex items-center -space-x-px h-8 text-sm;
}

.pagination-lg {
  @apply h-10 text-base;
}

.pagination-item {
  @apply flex items-center justify-center px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700;
}

.pagination-item:first-child {
  @apply ms-0 border-e-0 rounded-s-lg;
}

.pagination-item:last-child {
  @apply rounded-e-lg;
}

.pagination-item.active {
  @apply z-10 text-blue-600 border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700;
}

.pagination-item.disabled {
  @apply pointer-events-none opacity-50 cursor-not-allowed;
}

/* Data Table with Sorting */
.data-table {
  @apply overflow-x-auto shadow-md sm:rounded-lg;
}

.data-table table {
  @apply text-sm text-left rtl:text-right text-gray-500;
}

.data-table thead {
  @apply text-xs text-gray-700 uppercase bg-gray-50;
}

.data-table thead th {
  @apply px-4 py-3 cursor-pointer hover:bg-gray-100 transition-colors;
}

.data-table thead th span {
  @apply flex items-center;
}

.data-table tbody tr {
  @apply bg-white border-b hover:bg-gray-50 transition-colors;
}

.data-table tbody td {
  @apply px-4 py-4 whitespace-nowrap;
}

.data-table tbody td:first-child {
  @apply font-medium text-gray-900;
}