| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); |
| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| @layer base { |
| * { |
| font-family: 'Inter', sans-serif; |
| } |
| |
| body { |
| @apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100; |
| } |
| } |
|
|
| @layer components { |
| .btn { |
| @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2; |
| } |
| |
| .btn-primary { |
| @apply btn bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500; |
| } |
| |
| .btn-secondary { |
| @apply btn bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600; |
| } |
| |
| .btn-danger { |
| @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500; |
| } |
| |
| .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 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100; |
| } |
| |
| .card { |
| @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6 dark:bg-gray-800 dark:border-gray-700; |
| } |
| |
| .sidebar-item { |
| @apply flex items-center gap-3 px-3 py-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700; |
| } |
| |
| .sidebar-item.active { |
| @apply bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400; |
| } |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| @apply bg-gray-100 dark:bg-gray-800; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| @apply bg-gray-300 dark:bg-gray-600 rounded-full; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| @apply bg-gray-400 dark:bg-gray-500; |
| } |
|
|
| |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| .animate-spin { |
| animation: spin 1s linear infinite; |
| } |
|
|
| |
| .chart-container { |
| @apply w-full h-80; |
| } |
