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

/* Dark theme base styles */
:root {
    --color-bg-primary: #1a1a2e;
    --color-bg-secondary: #16213e;
    --color-bg-tertiary: #0f3460;
    --color-text-primary: #e4e4e7;
    --color-text-secondary: #a1a1aa;
    --color-accent: #e94560;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
}

body {
    @apply bg-gray-900 text-gray-100;
}

/* Custom component styles */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors;
}

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

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

.card {
    @apply bg-gray-800 rounded-lg shadow-lg p-6;
}

.form-input {
    @apply bg-gray-700 border border-gray-600 text-gray-100 rounded-lg px-4 py-2 w-full focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-label {
    @apply block text-sm font-medium text-gray-300 mb-2;
}

.table-container {
    @apply overflow-x-auto rounded-lg bg-gray-800;
}

.table {
    @apply w-full text-sm text-left text-gray-300;
}

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

.table th {
    @apply px-6 py-3;
}

.table td {
    @apply px-6 py-4;
}

.table tbody tr {
    @apply border-b border-gray-700 hover:bg-gray-750;
}

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

.badge-success {
    @apply bg-green-900 text-green-300;
}

.badge-warning {
    @apply bg-yellow-900 text-yellow-300;
}

.badge-danger {
    @apply bg-red-900 text-red-300;
}

.badge-info {
    @apply bg-blue-900 text-blue-300;
}

/* Sidebar navigation */
.sidebar {
    @apply fixed left-0 top-0 h-full w-64 bg-gray-800 border-r border-gray-700;
}

.sidebar-nav-item {
    @apply flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 hover:text-white transition-colors;
}

.sidebar-nav-item.active {
    @apply bg-gray-700 text-white border-l-4 border-blue-500;
}

/* Loading states */
.loading {
    @apply opacity-50 pointer-events-none;
}

.spinner {
    @apply animate-spin h-5 w-5 text-blue-500;
}