@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 {
    :root {
        --sidebar-width: 260px;
        --sidebar-collapsed: 68px;
        --header-height: 56px;
    }
    
    body {
        @apply antialiased;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    * {
        @apply border-gray-800;
    }

    ::-webkit-scrollbar {
        @apply w-1.5;
    }
    ::-webkit-scrollbar-track {
        @apply bg-transparent;
    }
    ::-webkit-scrollbar-thumb {
        @apply bg-gray-700 rounded-full;
    }
    ::-webkit-scrollbar-thumb:hover {
        @apply bg-gray-600;
    }
}

@layer components {
    .btn {
        @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 text-sm inline-flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .btn-primary {
        @apply bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40;
    }
    .btn-secondary {
        @apply bg-gray-800 hover:bg-gray-700 text-gray-200 border border-gray-700;
    }
    .btn-danger {
        @apply bg-red-600/10 hover:bg-red-600/20 text-red-400 border border-red-500/20;
    }
    .btn-ghost {
        @apply hover:bg-gray-800 text-gray-400 hover:text-gray-200;
    }
    .btn-sm {
        @apply h-8 px-3 text-xs;
    }
    .btn-icon {
        @apply h-9 w-9 p-0 justify-center;
    }

    .input {
        @apply w-full h-10 px-3 bg-gray-900/50 border border-gray-700 rounded-lg text-sm
        focus:outline-none focus:ring-2 focus:ring-indigo-500/40 focus:border-indigo-500
        placeholder:text-gray-500 transition-all duration-200;
    }
    .input-sm {
        @apply h-8 px-2.5 text-xs;
    }

    .card {
        @apply bg-gray-900/50 border border-gray-800 rounded-xl backdrop-blur-sm;
    }
    .card-hover {
        @apply card hover:border-gray-700 hover:bg-gray-900/80 transition-all duration-200 cursor-pointer;
    }
    .card-header {
        @apply px-5 py-4 border-b border-gray-800 flex items-center justify-between;
    }
    .card-body {
        @apply p-5;
    }

    .badge {
        @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium;
    }
    .badge-blue { @apply bg-blue-500/15 text-blue-400 ring-1 ring-blue-500/20; }
    .badge-green { @apply bg-emerald-500/15 text-emerald-400 ring-1 ring-emerald-500/20; }
    .badge-yellow { @apply bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/20; }
    .badge-red { @apply bg-red-500/15 text-red-400 ring-1 ring-red-500/20; }
    .badge-purple { @apply bg-purple-500/15 text-purple-400 ring-1 ring-purple-500/20; }
    .badge-gray { @apply bg-gray-500/15 text-gray-400 ring-1 ring-gray-500/20; }
    .badge-indigo { @apply bg-indigo-500/15 text-indigo-400 ring-1 ring-indigo-500/20; }

    .stat-card {
        @apply card p-5 relative overflow-hidden;
    }
    .stat-card::after {
        content: '';
        @apply absolute inset-0 bg-gradient-to-br from-white/[0.02] to-transparent pointer-events-none;
    }

    .table-row {
        @apply border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors;
    }

    .skeleton {
        @apply bg-gray-800 rounded animate-pulse;
    }

    .sidebar-item {
        @apply flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200;
    }
    .sidebar-item-active {
        @apply bg-indigo-600/15 text-indigo-400 border-r-2 border-indigo-500;
    }
    .sidebar-item-inactive {
        @apply text-gray-400 hover:bg-gray-800/60 hover:text-gray-200;
    }

    .page-header {
        @apply flex items-center justify-between mb-6;
    }
    .page-title {
        @apply text-xl font-semibold text-white;
    }
    .page-subtitle {
        @apply text-sm text-gray-400 mt-1;
    }

    .kbd {
        @apply inline-flex items-center justify-center h-5 min-w-[20px] px-1.5 rounded
        bg-gray-800 border border-gray-700 text-[10px] font-medium text-gray-400;
    }
}
