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

@layer components {
    .endpoint {
        @apply mb-8 p-6 bg-white rounded-lg shadow-md;
    }

    .method {
        @apply px-3 py-1 rounded-full font-semibold text-sm;
    }

    .get {
        @apply bg-blue-100 text-blue-700;
    }

    .post {
        @apply bg-green-100 text-green-700;
    }

    .put {
        @apply bg-yellow-100 text-yellow-700;
    }

    .delete {
        @apply bg-red-100 text-red-700;
    }

    pre {
        @apply mt-4 p-4 rounded-lg bg-gray-800 overflow-x-auto;
    }

    .sidebar-link {
        @apply flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-lg transition-all duration-200;
    }

    .sidebar-link.active {
        @apply bg-blue-50 text-blue-700 font-medium;
    }

    .sidebar-sublink {
        @apply flex items-center pl-8 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-lg transition-all duration-200;
    }

    .sidebar-sublink.active {
        @apply text-blue-700 font-medium;
    }

    .sidebar-icon {
        @apply mr-3 text-lg;
    }

    .sidebar-section {
        @apply mb-4;
    }

    .sidebar-header {
        @apply px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider;
    }
}