| |
| .card { |
| @apply bg-white rounded-xl border border-gray-200 shadow-sm; |
| } |
| .card:hover { |
| @apply shadow-md; |
| } |
| .metric { |
| @apply card p-5 transition-transform hover:-translate-y-0.5; |
| } |
| .btn { |
| @apply inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 transition-colors; |
| } |
| .btn-primary { |
| @apply bg-primary text-white border-primary hover:bg-primary/90; |
| } |
| .btn-danger { |
| @apply bg-red-600 text-white border-red-600 hover:bg-red-700; |
| } |
| .btn-outline { |
| @apply bg-white hover:bg-gray-50; |
| } |
| .badge { |
| @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium; |
| } |
| .badge-green { @apply bg-green-100 text-green-800; } |
| .badge-blue { @apply bg-blue-100 text-blue-800; } |
| .badge-yellow { @apply bg-yellow-100 text-yellow-800; } |
| .badge-red { @apply bg-red-100 text-red-800; } |
| .badge-purple { @apply bg-purple-100 text-purple-800; } |
| .badge-gray { @apply bg-gray-100 text-gray-800; } |
|
|
| .table { |
| @apply min-w-full divide-y divide-gray-200; |
| } |
| .table thead th { |
| @apply px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer select-none; |
| } |
| .table tbody td { |
| @apply px-4 py-3 text-sm text-gray-800; |
| } |
|
|
| .modal-backdrop { |
| @apply fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center p-4 z-[60]; |
| } |
| .modal { |
| @apply w-full max-w-2xl bg-white rounded-xl border border-gray-200 shadow-xl; |
| } |
| .modal-header { |
| @apply px-5 py-4 border-b flex items-center justify-between; |
| } |
| .modal-body { |
| @apply p-5 space-y-4; |
| } |
| .modal-footer { |
| @apply px-5 py-4 border-t flex items-center justify-end gap-2; |
|
|
| } |
|
|
| |
| nav { |
| position: relative; |
| } |
| nav > div > div { |
| position: relative; |
| top: -16px; |
| } |
|
|
| |
| .chip { |
| @apply inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-800; |
| } |
|
|
| |
| .filter-btn { |
| @apply px-3 py-1 rounded-full border border-gray-200 text-sm hover:bg-gray-50; |
| } |
| .filter-btn.active { |
| @apply bg-primary text-white border-primary; |
| } |
|
|
| |
| .table-container { |
| @apply overflow-auto rounded-lg border border-gray-200; |
| } |
